تگ لینک کجا تشریف دارن؟
این تگ باید داخل تگ head نوشته بشه. عین تگهای متا و title که در جلسات قبل درموردشون حرف زدیم. یعنی بخوام بهتر بگم تنها جای ممکن واسه تگ لینک، فقط و فقط تگ head هستش. یه وقت نیایین قبل یا بعد اون بنویسین. از من گفتن!
کاربردهای تگ لینک
۱- تعریف استایل خارجی
برای زیباسازی سایت و تک تک صفحاتمون نیاز به دستورات css داریم. استایل دهی در html به ۳ روش انجام میشه: استایل خطی، استایل داخلی و استایل خارجی. در آموزش html گفتیم که بهترین روش، استایل دهی خارجیه. برنامه نویسای کاربلد میان یک یا چند فایل css ایجاد میکنن که پسوندشون هم css. هستش. بعد دستورات css رو داخل اون فایلها کد میزنن. اما حالا که فایل html و فایل css مون کاملا مستقل از همند، مرورگرها چجوری باید دستورات زیبای css رو به این فایل html مون ربط بدن؟ از کجا میفهمن بین اینا پیوند برقراره؟ جواب: تگ لینک
فرض میکنیم فایل اچ تی ام ال ما index.html هستش و فایل سی اس اس مون هم style.css. حالا واسه اینکه دستورات css فایل style.css در فایل index.html اجرا بشن:
خصوصیت rel در تگ لینک
نوشتن این خصوصیت و نیز مقدار آن الزامیه. این خصوصیت نوع رابطه یا نوع پیوند رو مشخص میکنه. در این مثال چون هدفمون استایل دهی بود باید مقدار rel رو برابر stylesheet قرار میدادیم. بازم عرض میکنم حتما باید خصوصیت rel و مقدارش رو در تگهای لینک تعریف کنین.
خصوصیت href در تگ لینک
این خصوصیت مربوط به آدرس فایل پیوندیه. درواقع مقدار این خصوصیت باید برابر باشه با آدرس فایلی که میخواییم به فایل html لینک بدیم.
۲- تعریف فاوآیکون با تگ لینک
از تگ لینک برای تعریف آیکون سایت هم استفاده میشه. با توجه به مستندات وبسایت مرجع 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 ، به صورت ساده اما پیشرفته میتونین به این آدرس مراجعه کنین.