تگ لینک
در بحث آموزش 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 باید اینجوری نوشته بشه:
البته این یک مثاله. مقادیر href، type و sizes با توجه به فایلمون و نام و آدرسش تغییر میکنه. اما خصوصیت rel و مقدار icon برای تعریف فاوآیکون اجباریه.
پشتبانی مرورگر ها
همه مرورگر های فعلی جهان، از تگ پیوند پشتیبانی می کنند:
نام مرورگر | |||||
پشتیبانی می کند؟ | بله | بله | بله | بله | بله |
خصوصیت ها و صفات تگ لینک
نام خصوصیت |
مقادیر |
توضیحات خصوصیت |
charset | char_encoding | انکودینگ کاراکترهای فایلی که بهش پیوند یا لینک شده رو مشخص میکنه
در HTML5 پشتیبانی نمی شود X |
crossorigin | anonymous use-credentials |
اجازه نمایش تصاویر در قالب canvas از طریق دسترسی متقابل سایت مبدأ
در HTML5 اضافه شد |
href | url یا آدرس | آدرس صفحه ای که قراره پیوند بشه |
hreflang | language_code | زبان صفحه لینک شده در تگ لینک |
media | media_query | تعیین میکنه که لینک در چه دستگاه هایی نمایش داده بشه |
rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet |
نوع پیوند رو در تگ لینک مشخص میکنه
نوشتنش الزامیه |
sizes | عرض * ارتفاع | فقط وقتی کار میکنه که rel برابر icon باشه
سایز منبع لینک شده رو در تگ لینک مشخص میکنه در HTML5 اضافه شد |
type | media_type | نوع صفحه و نوع رسانه لینک شده |
برای دانلود فیلم آموزش html ، به صورت ساده اما پیشرفته می تونین به این آدرس مراجعه کنین.
درباره سالار عباپور
فارغ التحصیل رشته مهندسی برق و مدرس دوره های طراحی سایت - ایشان در زمینه طراحی سایت با زبان های برنامه نویسی PHP و فریمورک لاراول Laravel فعال هستند و همچنین یکی از تحلیل گران خبره در حوزه بازارهای مالی بین المللی و بورس هستند.