تگ link در HTML : آموزش ایجاد لینک در صفحات سایت با کمک تگ a

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

در این مطلب از آموزش html و css می خواهیم درباره تگ link در HTML صحبت کنیم. تگ لینک (a) پیوند بین یک سند و یک منبع خارجی را تعریف می کند. بنابراین لازم است که با ساختار و نحوه کدنویسی تگ link در HTML آشنا شوید و بدانید برای داشتن لینک دهی درست به صفحات سایت چگونه کدنویسی کنید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به تگ a پیدا کنید.

آنچه در این مقاله می آموزید:

تگ link در HTML چیست؟

تگ link در HTML جزو مهمترین تگ های HTML است. این تگ برای لینک دهی به کار می رود. بنابراین یکی از مهمترین اجزاء صفحات وب لینک‌ ها (‌links) هستند. با استفاده از لینک‌ ها می‌ توانید پیوندی به صفحات دیگر ایجاد کنید. به طوریکه وقتی کاربر روی آن کلیک کرد به یک صفحه وب دیگری منتقل شود.

تگ لینک یا تگ a وظیفه ایجاد لینک در HTML را دارد. درون این تگ می‌ تواند یک متن یا دیگر عناصر HTML قرار گیرند. پس با استفاده از تگ a نه تنها متون، بلکه هر چیز دیگری، مثل تصاویر و… را می‌ توانید لینک کنید. لینک در html جزو تگ های Inline Level است. این به این معنی است که تگ a یک سطر را اشغال نمی کند و فضایی که اشغال می کند بستگی به محتوای داخلش دارد.

کاربرد تگ link در HTML

همانطور که اشاره شد از تگ link در HTML برای پیوند دادن یک منبع خارجی به یک منبع داخلی استفاده می شود. مثلا شما می توانید فایل های CSS که درون آن سبک ها و استایل های اختصاصی خود را نوشته اید از طریق تگ <link> به سند خود متصل کنید و تمامی آن سبک ها روی عناصر مشخص شده، اعمال می شوند. همچنین شما می توانید از تگ <link> در HTML به تعداد دفعات بالا استفاده کنید اما چند نکته را در نظر داشته باشید:

هرچقدر تعداد منابع خارجی که لینک می دهید به سند خود کمتر و سبک تر باشد باعث می شود که سرعت بارگیری صفحه افزایش پیدا کند و همین افزایش سرعت امتیاز خوبی برای سئو سایت شما محسوب می شود.
مثلاً اگر ۴ تا فایل CSS دارید سعی کنید اول از همه آن ها را minify (فشرده) کنید و همه را باهم در یک فایل ترکیب کنید.
تگ <link> به تنهایی چیزی از خود ندارد و از یکسری ویژگی تشکیل می شود.
تگ link در HTML همیشه درون تگ head قرار می گیرد.
تگ <link> یک عنصر انفرادی می باشد و نیازی به بسته شدن آن نیست.

آموزش کار با تگ link در HTML

همانطور که گفتیم این تگ را باید در بین تگ head قرار داد و تگ head هم همیشه باید بعد از تگ html و قبل از تگ body در یک صفحه وب نوشته شود. تگ <link> فقط یک تگ باز (link) دارد، و تگ بسته ندارد. Syntax یا نحوه نوشتن تگ a بصورت زیر است:

<a href="url">link text</a>

مثال از تگ link در HTML

مثال شماره ۱ : فراخوانی فایل CSS در فایل HTML

<head>
 <link rel="stylesheet" href="mystyle.css">
</head>

مثال شماره ۲ : تعریف فاوآیکون (Favicon) برای یک صفحه وب

<head>
 <link href="files/favicon.png" rel="icon" type="image/png" sizes="80x80"> 
</head>

جدول صفات تگ 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	برای مشخص کردن نوع رسانه، اون صفحه ای که بهش لینک کردیم

بررسی تگ <link> در HTML 4.01 و HTML5

بعضی از خصوصیت های موجود در تگ <link> در HTML 4.01 در نسخه HTML5 پشتیبانی نمی شوند. خصوصیت sizes و crossorigin دو خصوصیت جدید در HTML5 هستند.

خصوصیات ویژه تگ <link> در HTML5

تفاوت تگ <link> بین HTML و XHTML

در HTML، تگ <link> تگ پایانی ندارد. در XHTML ، تگ <link> باید با یک تگ پایانی بسته شود.

کدام مرورگرها از تگ link در HTML پشتیبانی می کنند؟

پشتیبانی از صفات و رویدادهای عمومی

تگ جدول از صفات عمومی (Global Attributes) و نیز از رویدادهای عمومی (Event Attributes) در HTML پشتیبانی می کند.

دستورات CSS پیش فرض در تگ link در HTML

معمولا مرورگرها تگ link را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند:

link {
  display: none;
}

صفت target در تگ a

صفت target تعیین می‌ کند که آدرس مقصد لینک در کجا باز شود. این خصیصه می‌ تواند مقادیر مختلفی بگیرد. در اینجا ۲ مورد که بیشترین کاربرد را دارد بیان می‌ شود:

blank_ (لینک را در یک tab یا پنجره جدید مرورگر باز می‌ کند.)
self_ (لینک را در tab یا پنجره فعلی مرورگر باز می‌کند. بصورت پیشفرض این گزینه برای لینک‌ها فعال است.)

در مثال زیر آدرس مقصد لینک در یک tab جدید مرورگر باز می‌شود:

<a href="/training/html-css/" target="_blank">آموزش HTML و CSS</a>

صفت title در تگ link در HTML

صفت title اطلاعات متنی اضافه‌ ای درباره یک عنصر تعریف می‌ کند. به این اطلاعات به اصطلاح tooltip می‌ گویند. متنی که درون این صفت نوشته شود، با قرار گرفتن ماوس روی عنصر نمایان می‌ شود. به مثال زیر دقت کنید:

<a href="/training/html-css/" title="free learning">آموزش HTML و CSS</a>

در خروجی، هنگامی که کاربر نشانگر ماوس را روی عبارت آموزش HTML و CSS می‌برد، عبارت free learning نمایش داده می‌ شود.

ایجاد Bookmark یا لینک لنگر

Bookmark یا لینک لنگر به بازدیدکننده اجازه می‌ دهد تا به بخشی از صفحه وب پرش (Jump) کند. لینک‌ های لنگر برای صفحات وب طولانی بسیار مفید هستند. حتما تا به حال فِلِش برگشت به بالای صفحه و… را در وب سایت‌های مختلف دیده‌ اید، اینگونه کارها با استفاده از لینک‌ های لنگر ایجاد می‌ شوند. برای ایجاد لینک لنگر ابتدا باید برای عنصر مقصد یک شناسه در نظر بگیرید. صفت id می‌ تواند یک شناسه منحصر بفرد به یک عنصر نسبت دهد. در مثال زیر به یکی از تگ‌ های h2 شناسه C4 نسبت داده‌ شده است:

<h2 id="C4">بخش چهارم</h2>

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

<a href="#C4">پرش به بخش چهارم</a>

همانطور که مشاهده می‌ کنید، کافیست در صفت href عبارت #C4 را قرار دهید. در خروجی وقتی کاربر روی این لینک کلیک کند به بخشی از صفحه وب که عنصر h2 موردنظرتان وجود دارد هدایت می‌ شود.

nofollow در صفت rel لینک در HTML

در بحث لینک در html تمامی تگ های a به صورت پیش فرض دارای مقدار فالو یا dofollow درصفت rel هستند. درواقع معنی این عبارت این است که موتورهای جستجو این لینک را دنبال و به آن توجه می کنند. اما وقتی مقدار این صفت به nofollow تنظیم شود، مرورگر می فهمد که لینک، دارای ارزشی برای ما نمی باشد و نباید دنبالش کند. در هنگام نوشتن لینک در html خوب است که از تگ a فالو و آنفالو باهم استفاده کنید. یعنی اگر چند تگ a بصورت فالو دارید یکی دو تا هم لینک آنفالو اضافه کنید.

سخن پایانی

در این مطلب به طور کامل درباره تگ link در HTML، ساختار و نحوه بکارگیری آن در یک سند به همراه چندین مثال صحبت کرده ایم. با مطالعه این مطلب تسلط کافی بر روی مبحث تگ لینک و نحوه کدنویسی حالات مختلف آن خواهید داشت و می توانید لینک های صفحه خود را به کمک این تگ انجام دهید.

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

اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.