تگ لینک

تگ لینک

در بحث آموزش html وقتی نوبت به تزیین فایل میرسه، آموزش تگ لینک، جزو حیاتی ترین کارهای هر زبان آموزیه. وقتی در یک فایل اچ تی ام ال اقدام به نوشتن تگ لینک می کنیم، درواقع ابلاغ می کنیم که این سند با یه فایل دیگه ارتباط داره و یک پیوند آسمانی! بین اون دو تا ایجاد می کنیم. معمولا از این تگ برای پیوند دادن به فایل های css استفاده میشه اما واسه تعریف آیکون سایت یا فاوآیکون (Favicon) هم از این تگ استفاده می کنیم.

تگ لینک کجا تشریف دارن؟

این تگ باید داخل تگ head نوشته بشه. عین تگ های متا و title که در جلسات قبل درموردشون حرف زدیم. یعنی بخوام بهتر بگم تنها جای ممکن واسه تگ لینک، فقط و فقط تگ head هستش. یه وقت نیایین قبل یا بعد اون بنویسین. از من گفتن!

کاربردهای تگ لینک

1- تعریف استایل خارجی

برای زیباسازی سایت و تک تک صفحاتمون نیاز به دستورات css داریم. استایل دهی در html به 3 روش انجام میشه: استایل خطی، استایل داخلی و استایل خارجی. در آموزش html گفتیم که بهترین روش، استایل دهی خارجیه. برنامه نویسای کاربلد میان یک یا چند فایل css ایجاد میکنن که پسوندشون هم css. هستش. بعد دستورات css رو داخل اون فایل ها کد میزنن. اما حالا که فایل html و فایل css مون کاملا مستقل از همند، مرورگر ها چجوری باید دستورات زیبای css رو به این فایل html مون ربط بدن؟ از کجا میفهمن بین اینا پیوند برقراره؟ جواب: تگ لینک

فرض می کنیم فایل اچ تی ام ال ما index.html هستش و فایل سی اس اس مون هم style.css. حالا واسه اینکه دستورات css فایل style.css در فایل index.html اجرا بشن:

تگ لینک و استایل دهی خارجی

خصوصیت rel در تگ لینک

نوشتن این خصوصیت و نیز مقدار آن الزامیه. این خصوصیت نوع رابطه یا نوع پیوند رو مشخص میکنه. در این مثال چون هدفمون استایل دهی بود باید مقدار rel رو برابر stylesheet قرار میدادیم. بازم عرض می کنم حتما باید خصوصیت rel و مقدارش رو در تگ های لینک تعریف کنین.

خصوصیت href در تگ لینک

این خصوصیت مربوط به آدرس فایل پیوندیه. درواقع مقدار این خصوصیت باید برابر باشه با آدرس فایلی که میخواییم به فایل html لینک بدیم.

2- تعریف فاوآیکون با تگ لینک

از تگ لینک برای تعریف آیکون سایت هم استفاده میشه. با توجه به مستندات وبسایت مرجع  w3schools  این تگ موقع تعریف favicon باید اینجوری نوشته بشه:

تگ لینک و تعریف favicon

البته این یک مثاله. مقادیر href، type و sizes با توجه به فایلمون و نام و آدرسش تغییر میکنه. اما خصوصیت rel و مقدار icon برای تعریف فاوآیکون اجباریه.

پشتبانی مرورگر ها

همه مرورگر های فعلی جهان، از تگ پیوند پشتیبانی می کنند:

نام مرورگرپشتیبانی گوگل کروم از تگ لینک headپشتیبانی muzilaLOGO از تگ لینکحمایت safari از تگ لینکپشتیبانی Opera از تگ لینکپشتیبانی explorer از تگ لینک
پشتیبانی می کند؟بلهبلهبلهبلهبله

خصوصیت ها و صفات تگ لینک

نام خصوصیت

مقادیر

توضیحات خصوصیت

charsetchar_encodingانکودینگ کاراکترهای فایلی که بهش پیوند یا لینک شده رو مشخص میکنه

در HTML5 پشتیبانی نمی شود X

crossoriginanonymous
use-credentials
اجازه نمایش تصاویر در قالب canvas  از طریق دسترسی متقابل سایت مبدأ

در HTML5 اضافه شد

hrefurl یا آدرسآدرس صفحه ای که قراره پیوند بشه
hreflanglanguage_codeزبان صفحه لینک شده در تگ لینک
mediamedia_queryتعیین میکنه که لینک در چه دستگاه هایی نمایش داده بشه
relalternate
author
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet
نوع پیوند رو در تگ لینک مشخص میکنه

نوشتنش الزامیه

sizesعرض * ارتفاعفقط وقتی کار میکنه که rel برابر icon باشه

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

در HTML5 اضافه شد

typemedia_typeنوع صفحه و نوع رسانه لینک شده

برای دانلود فیلم آموزش html ، به صورت ساده اما پیشرفته می تونین به این آدرس مراجعه کنین.

مطالب زیر را حتما بخوانید

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.