لینک ها در HTML – هایپرلینک ها
نام دیگر لینک ها در HTML هایپرلینک است.
شما میتوانید روی یک لینک کلیک کرده و به صفحه ای دیگر منتقل شوید.
وقتی نشان گر موس را روی یک لینک حرکت میدهید، آیکون نشانگر موس به یک دست کوچک تغییر شکل میدهد.
نکته: لینک ها نباید حتما متن باشند، آنها میتوانند تصویر و یا هر عنصر دیگری از HTML باشند.
آشنایی با نحو (سینتکس) لینک ها در HTML
در HTML لینکها از طریق تگ <a> تعریف میشوند :
<a href = "url " >link text </a >
لینکی برای مشاهده ی آموزش HTML سایت لرن سورس :
<a href = "http://www.learnsource.net/post/content/1 " >Visit our HTML tutorial </a >
صفت href آدرس مقصد(http://www.learnsource.net/post/content/1) را برای یک لینک مشخص میکند.
متن لینک قسمت قابل مشاهده در مرورگر است(Visit our HTML tutorial).
با کلیک بر روی لینک به آدرس مقصد منتقل میشوید.
لینک های محلی در HTML
در مثال بالا از یک آدرس مطلق(آدرس کامل) برای صفت href استفاده شده است.
یک لینک محلی(لینکی که آدرس مقصدش همان وب سایت است) با استفاده از یک آدرس نسبی مشخص میشود :
<a href = "/post/content/1 " >Visit our HTML tutorial </a >
کد بالا نتیجه ی همانند نمونه مثال قبلی خواهد داشت.
رنگ های لینک در HTML
به صورت پیشفرض لینک ها در تمام مرورگر ها به شکل زیر نمایش داده میشوند :
- لینکی که هنوز ملاقات نشده با یک زیرخط و رنگ آبی نشان داده میشود.
- لینکی که ملاقات شده با یک زیر خط و رنگ بنفش نمایش داده میشود.
- لینک فعال(حالتی از لینک که در یک لحظه روی آن کلیک میشود) با یک زیر خط و رنگ قرمز نمایش داده میشود.
شما میتوانید رنگ های پیشفرض را با استفاده از استایل های زیر تغییر بدهید :
<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 مشخص میکند که صفحه ی مقصد برای لینک در کجا باز شود.
خاصیت target میتواند دارای مقادیر زیر باشد :
- _blank : صفحه ی مقصد را در یک پنجره و یا تب جدید از مرورگر باز میکند
- _self : صفحه ی مقصد را در همان پنجره و یا تبی که لینک کلیک شده باز میکند(این مقدار پیشفرض برای لینکهاست)
- _parent : صفحه ی مقصد را در یک فریم پدر باز میکند
- _top : صفحه ی مقصد را در تمام بدنه ی یک پنجره در مرورگر باز میکند.
- Framename : صفحه ی مقصد را در یک فریم مشخص باز میکند
مثال زیر صفحه ی مقصد را در یک پنجره ی جدید در مرورگر باز میکند :
<a href = "https://www.learnsource.net/ " target = "_blank " >Visit Learn Source! </a >
اگر صفحه ای که لینک در آن قرار دارد در یک فریم محدود شده باشد میتوانید با استفاده از خاصیت target="_top" صفحه ی فریم را برای صفحه ی مقصد از بین ببرید.
<a href="http://www.learnsource.net/post/content/1" target="_top" >Visit our HTML tutorial</a>
تصاویر به عنوان لینک در HTML
استفاده از تصاویر به عنوان لینک رایج است :
<"a href="default.asp>
<;"img src="/Uploads/Courses/HTML/smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0>
<a/>
نکته : مقدار border:0 که به تصویر در مثال بالا اضافه شده است به این دلیل است که در مرورگر IE9 و نسخه های قدیمی تر یک خط دور برای عکس در نظر گرفته میشود(زمانی که تصویر به عنوان لینک استفاده میشود) با این کار ما از تولید این خط دور جلوگیری میکنیم.
ایجاد یک Bookmark در HTML
بوک مارک ها در HTML به خوانندگان اجازه میدهند که به قسمتی از یک صفحه منتقل شوند.
بوک مارک ها برای زمانی که صفحه ی وب خیلی طولانی است مناسب هستند.
برای ایجاد یک بوک مارک ابتدا باید یک بوک مارک ساخته و سپس لینکی به آن اضافه کنیم.
در این صورت وقتی روی لینک کلیک میشود صفحه تا رسیدن به بوک مارک پیمایش (اسکرول) میشود.
مثال
در ابتدا با استفاده از خاصیت id یک بوک مارک ایجاد میکنیم :
<h2 id = "C4 " >Chapter 4 </h2 >
سپس داخل همان صفحه لینکی برای انتقال به بوک مارک ایجاد میکنیم :
<a href = "#C4 " >Jump to Chapter 4 </a >
و یا اگر لینک ما در همان صفحه ی بوک مارک نباشد به طریق زیر ساخت لینک را انجام میدهیم :
<a href = "html_demo.html#C4 " >Jump to Chapter 4 </a >
نکته : برای ساخت لینک بوک مارک در صفت href از علامت # استفاده میکنیم.
مسیر های خارجی
صفحات خارجی با استفاده از آدرس مطلق و یا آدرس نسبی به همان صفحه ی جاری میتوانند مورد ارجاع قرار گیرند.
استفاده از آدرس مطلق در نمونه مثال زیر نشان داده شده است.
<a href = "http://www.learnsource.net/html/default.asp " >HTML tutorial </a >
در نمونه مثال زیر به صفحه ای لینک شده است که در پوشه ی html وب سایت جاری قرار دارد.
<a href = "/html/default.asp " >HTML tutorial </a >
در نمونه مثال زیر به صفحه ای لینک شده است که در همان فولدری قرار دارد که صفحه ی جاری در آن قراردارد.
<a href = "default.asp " >HTML tutorial </a >
خلاصه کلام :
- از <a> برای ساخت یک لینک استفاده کنید
- از خاصیت href برای مشخص کردن آدرس مقصد در لینک استفاده کنید.
- از خاصیت target برای مشخص کردن جایی که صفحه ی مقصد در آن باز میشود استفاده کنید.
- از عنصر <img> (داخل عنصر <a>) برای ساخت یک تصویر به عنوان لینک استفاده کنید.
- از خاصیت id برای ساخت یک بوک مارک در صفحه استفاده کنید.
- از خاصیت href برای ساخت لینکی برای بوک مارک استفاده کنید.