لینک ها در HTML

در این بخش از آموزش html در مورد لینک ها صحبت خواهیم کرد. یکی از مهم ترین کارها در سایت لینک دادن به صفحات مختلف و دیگر سایت ها می باشد.

تگ a :

برای لینک دادن از تگ a استفاده می کنیم. از ویژگی href نیز برای آدرس دادن به صفحات و سایت ها استفاده می کنیم. تگ a دارای تگ باز و بسته میباشد.

Syntax :

سینتکس (syntax) تگ a بصورت <a href=""></a> است. در بین href آدرس سایت یا صفحه وب قرار می گیرد. از تگ a در همه سایت ها استفاده می شود و یکی از مهترین تگ ها در html است.

تگ a نشانه لینک است. href مشخص کننده آدرس می باشد، در بین تگ باز و بسته لینک بایستی متنی نوشته شود . متنی که کاربر می بیند. هنگامی که روی لینک می رویم علامت موس علامت یک دست خواهد بود.

مثال1  : اگر بخوایم به سایت شیرازلرن یک لینک دهیم به این صورت عمل می کنیم.

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>sh711.com</title> </head> <body> <a href="https://sh711.com/">سایت شیرازلرن</a> </body> </html>

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

شناسه دیگری که می توانید در تگ لینک به کار ببرید title است. با استفاده از این title می توانید عنوانی را برای لینک انتخاب کنید و این عنوان در هنگامی که بازدید کننده موس خود را روی لینک قرار می دهد به نمایش در می آید.

حالت های مختلف تگ a یا لینک ها :

Hover : وقتی با موس روی متن قرار می گیریم به این حالت هاور یا hover گفته می شود.

Visited : زمانی اتفاق می افتد که کاربر روی لینک کلیک کرده و آن را بازدید کرده است.

دادن استایل به لینک یا تگ a :

برای دادن استایل به لینک یا تگ a از روش های مختلفی استفاده می کنیم. دادن استایل خطی – اینلاین یا اکسترنال. یکی از استایل های متداول تغییر رنگ متن است که با دستور color انجام می شود که در مثال زیر می بینید.

مثال 2 : با استفاده از دستور color رنگ متن را تغییر می دهیم:

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>sh711.com</title> <style> a{ color: red; } </style> </head> <body> <a href="https://sh711.com/">سایت شیرازلرن</a> </body> </html>

مثال 3 : با استفاده از دستور text-decoration می توانیم خط زیر متن را برداریم تا نمایش داده نشود.

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>sh711.com</title> <style> a{ text-decoration: none; } </style> </head> <body> <a href="https://sh711.com/">سایت شیرازلرن</a> </body> </html>

مثال 4 : در مثال زیر زمانی که روی متن با موس قرار می گیریم (hover) می توانیم استایل هایی به آن بدهیم. در مثال با هاور کردن ، رنگ متن تغییر می کند -  خط زیر متن برداشته می شود و سایز متن تغییر می کند.

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>sh711.com</title> <style> a:hover{ color: green; text-decoration: none; font-size: 20px; } </style> </head> <body> <a href="https://sh711.com/">سایت شیرازلرن</a> </body> </html>

مثال 5 : زمانی که کاربر روی لینک کرده و بازدید کرده است مانند زمانی که شما در جستجوی گوگل روی متنی کلیک می کنید و رنگ متن تغییر می کند و نشان می دهد که شما از این صفحه بازدید کرده اید.

<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>sh711.com</title> <style> a:visited{ color: darkred; text-decoration: none; font-size: 20px; } </style> </head> <body> <a href="https://sh711.com/">سایت شیرازلرن</a> </body> </html>

باز کردن لینک ها :

برای باز کردن لینک ها در همان صفحه یا صفحه جدید از target های مختلف استفاده می کنیم. برای باز کردن لینک در صفحه جدید از _blank استفاده می کنیم.


نویسنده : هدایت عباسی

تگ ها : آموزش html
ثبت نظر