آشنایی با لینک ها در HTML

لینک ها تقریبا در تمام صفحات وب وجود دارند. لینکها این امکان را میدهند که کاربران از طریق کلیک بر روی آنها از صفحه ای به صفحه ای دیگر منتقل شوند.


لینک ها در 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 برای ساخت لینکی برای بوک مارک استفاده کنید.
     
منتشر شده در ۵ خرداد ۱۳۹۶ حمید رضا ملکی ۱۳۵۷ بازدید
دیدگاه ها
pooyana شنبه ۲۰ مرداد ۱۳۹۷

سلام اموزش های بسیار خوبی دارید فقط در نمونه دوم مسیر های خارجی نوشتید نومنه محض اطلاعتون

حمید رضا ملکی شنبه ۲۰ مرداد ۱۳۹۷

خیلی ممنون. اصلاح شد