این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ link در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ link در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Link در HTML
تگ link یکی از تگ های پراستفاده در قسمت هد ( Head ) یک صفحه وب می باشد، تگی است که با استفاده از آن میتوان فایل های CSS خارجی رو وارد صفحه کرد.
فقط توجه داشته باشید که این تگ را باید در بین تگ head قرار داد، و تگ head هم همیشه باید بعد از تگ html و قبل از تگ body در یک صفحه وب نوشته شود.
Free-Learn
مثال از تگ Link در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : فراخوانی فایل CSS در فایل HTML
|
1 2 3 |
<head> <link rel="stylesheet" href="mystyle.css"> </head> |
مثال شماره ۲ : تعریف فاوآیکون ( Favicon ) برای یک صفحه وب
|
1 2 3 |
<head> <link href="files/favicon.png" rel="icon" type="image/png" sizes="80x80"> </head> |
توضیح مثال بالا :
فاوآیکون یا Favicon به اون تصویر کوچک کنار عنوان صفحه تو تب مرورگر رو میگیم فاوآیکون
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ link در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ Link در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| href | URL | آدرس URL فایل CSS یا فایل فاوآیکون |
| hreflang | language_code | زبان اون صفحه ای که بهش لینک شده را مشخص میکند (لیست زبان کشورهای جهان) |
| media | media_query | مشخص میکند که لینک برای چه نوع رسانه / دستگاهی بهینه شود |
| rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet |
مشخص کردن نوع رابطه بین صفحه جاری با صفحه ای که به آن لینک شده |
| sizes | Height_Width | برای مشخص کردن اندازه عرض و ارتفاع فاوآیکون ( قابل استفاده فقط برای نوع icon ) |
| type | media_type | برای مشخص کردن نوع رسانه، اون صفحه ای که بهش لینک کردیم |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ link از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ
linkیک تگ تنهاست ( یعنی تگ پایانی برای بستن ندارد )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ link را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
link { display: none; } |
