آموزش Html؛ آموزش کار با لینک در HTML

آموزش Html؛ آموزش کار با لینک در HTML

در جلسه نهم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با لینک در HTML از وب سایت آموزش برنامه نویسی سورس باران.لینکدهی یکی از مهمترین مباحث مهم در آموزش HTML است. استفاده از لینک در لا به لای محتوا از اهمیت بسیار زیادی در طراحی وب سایت برخوردار است.

این لینک‌ها می‌توانند مخاطب را به محتوا یا بخش‌های مهم دیگر سایت شما یا منابع دیگر هدایت کنند. لینک‌ها نه تنها برای افزایش اعتبار محتوا و صفحه وب، بلکه به منظور اهداف سئو و بهتر دیده شدن در میان رقبا هم به کار می‌روند. با ما همراه باشید…

آموزش کار با لینک در HTML

استفاده از لینک در سندهای HTML قواعد خاص خود را دارد و همچنین در عین حال که یادگیری آن بسیار ساده هست ولی باید به نکات مهم و استانداردهای گفته شده توجه نمایید که مشکلی بوجود نیاد.

هایپرلینک ها در Html

لینک‌ها را می‌توان تقریبا در همه جای صفحات وب پیدا کرد. کار لینک‌ها هدایت کاربر از صفحه‌ای به صفحه دیگر یا از محتوایی به محتوای دیگر است. لینک‌های HTML از نوع هایپرلینک هستند که می‌توانید با کلیک کردن روی آن‌ها به سند دیگری هدایت شوید. وقتی ماوس خود را روی یک لینک نگه می‌دارید، نشانگر ماوس (در بیشتر موارد) به شکل یک دست کوچک درمی‌آید. توجه داشته باشید که لینک‌ها نباید لزوما به شکل متن باشند، بلکه می‌توانند در قالب عکس یا یک عنصر HTML باشند.

نگارش لینک در اچ تی ام ال

نحوه نگارش یا سینتکس (Syntax) لینک‌ها در HTML به این صورت است که لینک‌ها با تگ تعریف می‌شوند:

<a href="url">link text</a>

 <a href="https://www.sourcebaran.com/html/">Visit our HTML tutorial</a>

خصوصیت href آدرس مقصد یک لینک را مشخص می‌نماید. link text با کلیک کردن روی این قسمت به آدرس مشخص شده هدایت خواهید شد. فراموش نکنید که در انتهای لینک خود حتما علامت اسلش (/) را قرار دهید در غیر این صورت ممکن است دو درخواست به سرور داده شود. بسیاری از سرورها به صورت خودکار این علامت را به آدرس اضافه کرده و سپس یک درخواست تازه ایجاد می‌کنند.

لینک Local در اچ تی ام ال

در مثال بالا از یک URL کامل استفاده شده است. یک لینک local (لینک به همان وب‌سایت) با یک URL نسبتا مشابه و بدون http://www. مشخص می‌شود:

 <a href="html_images.asp">HTML Images</a>

رنگ لینک در HTML

به صورت پیش‌فرض لینک ها در تمام مرورگرها به یکی از شکل‌های زیر ظاهر می‌شوند:

1. لینکی که مشاهده نشده است به صورت زیرخط‌دار و آبی نمایش داده می‌شود
2. لینکی که مشاهده شده است به صورت زیرخط‌دار و بنفش نمایش می‌شود
3. لینک فعال به شکل زیرخط‌دار و قرمز نمایش می‌شود

می‌توانید به سلیقه خودتان و با استفاده از style، رنگ‌های پیش‌فرض را تغییر دهید:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

خصوصیت Target در Html

خصوصیت target مشخص می‌کند که سند لینک شده در کجا باز شود. این خصوصیت می‌تواند دارای یکی از مقادیر زیر باشد:

1. blank_ : که سند لینک شده را در یک پنجره یا سربرگ جدید باز می‌کند
2. self_ : که سند لینک شده را در همان پنجره یا سربرگی که کلیک انجام شده باز می‌کند (روش پیش‌فرض)
3. parent_ : که سند لینک شده را در فریم والد (parent frame) باز می‌کند
4. top_ : که سند لینک شده را به صورت کامل در همان پنجره نشان می‌دهد
5. Framename: که سند لینک شده را در یک فریم نام‌گذاری شده نشان می‌دهد

مثال زیر سند لینک شده را در یک پنجره یا سربرگ جدید از مرورگر باز خواهد کرد:

 <a href="https://www.sourcebaran.com/" target="_blank">Visit W3Schools!</a>

این نکته را به یاد داشته باشید که اگر صفحه وب شما در یک فریم قفل شده باشد می‌توانید از target=”_top” برای خارج شدن از آن فریم استفاده کنید:

 <a href="https://www.sourcebaran.com/html/" target="_top">HTML5 tutorial!</a>

تصویر لینک دار در Html

در سندهای HTML معمولا مرسوم است که از تصویر هم به عنوان لینک استفاده می‌کنند:

 <a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

توجه داشته باشید که border:0; به این منظور استفاده می‌شود که از نمایش کادر پیرامون عکس‌ها توسط اینترنت اکسپلورر ۹ و نسخه‌های پیشین جلوگیری شود.

ایجاد یک بوک مارک در Html

از بوک مارک‌های HTML به این منظور استفاده می‌شود که خواننده بتواند با استفاده از آن‌ها به بخش‌های مشخصی از یک صفحه وب جهش کند. اگر صفحات وب سایت شما طولانی باشد، بوک مارک‌ها ابزار مفید و کارآمدی خواهند بود. برای بوک مارک کردن یک بخش ابتدا باید بوک مارک را ایجاد کرده و به آن لینک اختصاص دهید. وقتی روی آن لینک کلیک می‌شود صفحه وب سایت اسکرول یا پیمایش شده و به نقطه‌ای که بوک مارک کرده‌اید می‌رود.

در مثال زیر این مراحل آورده شده است،ابتدا با استفاده از خاصیت id یک بوک مارک ایجاد کنید:

<h2 id="C4">Chapter 4</h2>

سپس به آن بوک مارک لینکی از درون همان صفحه بدهید (Jump to chapter 4):

<a href="#C4">Jump to Chapter 4</a>

یا می‌توانید لینکی از یک صفحه دیگر را برای بوک مارک خود تعریف کنید:

 <a href="html_demo.html#C4">Jump to Chapter 4</a>

External page در Html

لینک دهی به صفحات خارجی (External page) یا صفحات فرعی وب سایت را می‌توان با یک URL کامل یا با مسیری مشابه با صفحه جاری وب سایت (صفحه اصلی) مشخص کرد. مثال زیر از یک URL کامل برای لینک دادن به یک صفحه استفاده می‌کند:

 <a href="https://www.sourcebaran.com/html/default.asp">HTML tutorial</a>

این مثال به صفحه‌ای لینک می‌شود که در پوشه html موجود در صفحه جاری وب سایت قرار دارد:

 <a href="/html/default.asp">HTML tutorial</a>

این مثال به صفحه‌ای لینک می‌شود که در همان پوشه‌ی صفحه جاری قرار گرفته است:

 <a href="default.asp">HTML tutorial</a>

لیست جلسات قبل آموزش Html

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.