آموزش تگ a در HTML - راهنمای کار با لینک در html
لینک یا پیوند، آدرسی است که در مرورگر نمایش داده می شود تا با کمک آن وارد صفحه جدید شویم. به عبارت دیگر به جای اینکه مجبور باشیم آدرس صفحه جدید را در مرورگر تایپ کرده و آن را باز کنیم، با کلیک بر روی لینک، به صورت خودکار به صفحه جدید منتقل می شویم. امروزه به جای درج آدرس، از لینک برای دسترسی به صفحات دیگر در سایت ها، وبلاگ ها و اپلیکیشن ها استفاده می شود.
با استفاده از تگ a می توانید به صفحات داخلی سایت، به سایت دیگر یا صفحات آن، به انواع فایل های صوتی، تصویری و ویدیویی، نقشه و... لینک دهید.
تگ a که مخفف anchore به معنای لنگر است، برای ایجاد پیوند به کار می رود.
در تگ <a> مهم ترین ویژگی (صفت یا خصوصیت) href مخفف Hypertext Reference است که آدرس مقصد را مشخص می کند. hyperlink ابر متنی است که حاوی لینک است.
در این مثال کاربر پس از کلیک کردن بر روی عبارت «کلیک کنید» به URL ای که برای href مشخص شده هدایت می شود.
ایجاد لینک به یک تصویر
استفاده از تگ a محدود به لینک های متنی نیست و می توان عناصر دیگر را نیز لینک دار کرد. یکی از موارد پر کاربرد بعد از متن، لینک دادن به تصویر است که با کمک تگ img صورت می گیرد.
در برخی مرورگرها تصاویر لینک شده با یک کادر در حاشیه مشخص می شوند، برای محو این خط حاشیه ای باید از خاصیت border با مقادیر 0 در HTML یا در حالت بهتر و استاندارد تر، در CSS استفاده کنید.
پشتیبانی مرورگرها
تگ a در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.
| مرورگر | کروم | فایرفاکس | اپرا | سافاری | اینترنت اکسپلورر / اج |
| پشتیبانی | بله | بله | بله | بله | بله |
جدول خصوصیات تگ a در HTML
| خصوصیت | مقدار | توضیحات |
| charset | char_encoding | کدینگ مجموعه کاراکترهای صفحه مقصد (صفحه لینک شده) را مشخص می کند. در HTML5 پشتیبانی نمی شود. |
| coords | coordinates | ناحیه قابل کلیک را مشخص می کند. در HTML5 پشتیبانی نمی شود. |
| download | filename | برای دانلود مستقیم فایل پس از کلیک بر روی لینک به کار می رود. filename نام فایل دانلود شده می باشد. |
| href | URL | آدرس صفحه مقصد را مشخص می کند. |
| hreflang | language_code | زبان صفحه مقصد را مشخص می کند. |
| media | media_query | مشخص می کند لینک برای چه نوع رسانه / دستگاهی بهینه شود. |
| name | section_name | یک لیبل یا انکر برای لینک مشخص می کند. در HTML5 پشتیبانی نمی شود و توصیه می شود به جای آن از ویژگی id استفاده شود. |
| ping | list_of_URLs | لیستی از آدرس ها که با کلیک بر روی یک لینک به عنوان پینگ به مرورگرها ارسال می شود و معمولا برای ردیابی استفاده می شود. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
مرجع ارسال را مشخص می کند. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
برای مشخص کردن نوع رابطه صفحه جاری با صفحه لینک شده به کار می رود. |
| rev | text | رابطه بین صفحه لینک شده با صفحه جاری را مشخص می کند. در HTML5 پشتیبانی نمی شود. |
| shape | default rect circle poly |
نوع و شکل لینک را مشخص می کند. در HTML5 پشتیبانی نمی شود. |
| target | _blank _parent _self _top framename |
نحوه باز شدن لینک را مشخص می کند. |
| type | media_type | نوع رسانه صفحه لینک شده را مشخص می کند. |
ایجاد عنوان برای لینک یا title
یکی از خصوصیاتی که برای بهینه سازی لینک مفید است، خاصیت title است. در مثال زیر تگ a با خاصیت title را مشاهده می کنید.
کنترل پنجره لینک یا target
لینک ها به صورت پیش فرض در همان پنجره یا تب مرورگر نمایش داده می شوند، اما در صورتی که می خواهید این لینک در تب جدید باز شود، باید از پارامتر target استفاده کرد.
پارامتر target مقادیر متفاوتی می پذیرد.
- blank_ : نمایش محتوای لینک در پنجره جدید.
- parent_ : نمایش محتوای لینک در پنجره والد (معمولا در حالتی استفاده می شود که لینک از یک frame فراخوانی شود).
- self_ : نمایش محتوای لینک در پنجره فعلی (حالت پیش فرض).
- top_ : نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).
- نام frame : برای پارامتر target می توان نام یک frame را نیز قرار داد، بدین ترتیب محتوای لینک در داخل فریم نمایش داده خواهند شد.
مثال شماره ۱ : ایجاد لینک به سایت رسانه پرداز
مثال شماره ۲ : ایجاد تصویر لینک دار ( تصویری که می توان بر روی آن کلیک کرد )
<img src="images/logo.png">
</a>
مثال شماره ۳ : لینک به ایمیل
مثال شماره ۴ : لینک به شماره تلفن
مثال شماره ۵ : لینک درون صفحه برای انتقال کاربر به بالای صفحه
<html id="Top">
<body>
<a href="#Top">برو بالای صفحه</a>
</body>
</html>
مثال شماره ۶ : نحوه ایجاد یک لینک نوفالو ( nofollow )
پشتیبانی از ویژگی ها و رویدادهای عمومی
تگ <a> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
دستورات CSS پیش فرض
معمولا مرورگرها تگ <a> را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}