این آموزش در تاریخ ۱۳۹۹/۰۱/۱۵ آپدیت شده است.
آموزش تگ link در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ link در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Link در HTML
تگ link تگی است که با استفاده از آن میتوان یک لینک بین یک سند ( صفحه وب ) و یک منبع ( سورس ) خارجی ( چیزی که خارج از صفحه جاری باشد ) ایجاد کرد.
فقط توجه داشته باشید که این تگ را باید در بین تگ head قرار داد، و تگ head هم همیشه باید بعد از تگ html و قبل از تگ body در یک صفحه وب نوشته شود.
با استفاده از این تگ به راحتی میتوان فایل های CSS خارجی را به صفحه وب متصل نمود.
Free-Learn
مثال از تگ Link در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : اتصال فایل CSS خارجی به صفحه وب (HTML)
|
1 2 3 |
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
مثال شماره ۲ : تعریف فاوآیکون ( Favicon ) برای یک صفحه وب + تنظیم اندازه فاوآیکون با استفاده از صفت Sizes درون تگ link
|
1 2 3 |
<head> <link href="files/icon.png" rel="icon" sizes="20x20"> </head> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ link در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ Link در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت
یعنی در HTML5 پشتیبانی نمی شود.)
(علامت 
یعنی در HTML5 اضافه شده است)
| نام صفت | مقدار | توضیح |
|---|---|---|
| charset | char_encoding | مجموعه کاراکترهای سندی که بهش لینک شده را مشخص میکند. () |
| crossorigin | anonymous use-credentials |
اجازه نمایش تصاویر در ظرف کَنویس ( canvas ) از طریق دسترسی متقابل سایت مبدأ. () |
| 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 |
رابطه ی بین صفحه ی جاری با صفحه ای که به آن لینک کرده ایم را مشخص میکند. |
| rev | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet |
دقیقا برعکس rel – رابطه بین صفحه لینک شده و صفحه جاری را مشخص میکند. () |
| sizes | Height_Width any |
اندازه اون منبعی که بهش لینک کرده ایم را مشخص میکند. (فقط برای نوع icon) () |
| target | _blank _self _top _parent frame_name |
مشخص میکند که صفحه ی مقصد چگونه نمایش داده شود. (مثلا در یک تب جدید از مرورگر یا ..) () |
| type | media_type | نوع رسانه ، صفحه ای که بهش لینک کرده ایم را مشخص میکند. |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ link از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ link در دسته ی تگ های تنها ( یعنی تگ پایانی ندارد ) می باشد.
از چندین تگ link بصورت همزمان میتوان در یک صفحه وب استفاده کرد و هیچ مشکلی ندارد.
در HTML این تگ تنهاست و نیاز نیست بسته شود ولی در XHTML این تگ باید بصورت زیر بسته شود :
|
1 |
<link rel="stylesheet" href="style.css" /> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ link را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
link { display: none; } |
