آموزش ایجاد لینک در HTML | آموزش تگ a

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

درون این تگ می‌تواند یک متن یا دیگر عناصر HTML قرار گیرند. پس به این نکته توجه کنید که با استفاده از تگ a نه تنها متون، بلکه هر چیز دیگری، مثل تصاویر و… را می‌توانید لینک کنید.

نحوه ایجاد لینک در HTML

Syntax یا نحوه نوشتن تگ a بصورت زیر است:

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

برای مثال می‌خواهیم عبارت آموزش HTML و CSS را به آدرس adminesite.com لینک کنیم:

<a href="https://adminesite.com/training/html-css/">آموزش HTML و CSS</a>

همانطور که می‌بینید صفت href آدرس مقصد لینک را تعیین می‌کند. اگر نمی‌دانید صفت (attribute) چیست لطفا به جلسه آموزش پایه HTML بروید.

در مثال فوق بخشی که در خروجی نمایش داده می‌شود عبارت آموزش HTML و CSS است. که اگر کاربر روی این عبارت کلیک کند به آدرس https://adminesite.com/training/html-css منتقل می‌شود.

لینک‌های محلی

در مثال بالا ما از آدرس‌دهی مطلق (absolute) استفاده کردیم. یعنی آدرس لینک را بصورت کامل نوشته‌ایم.

نوعی آدرس‌دهی دیگر بنام آدرس‌دهی نسبی (relative) وجود دارد که نیازی به نوشتن آدرس بصورت کامل ندارد. یعنی می‌توان آدرس را بدون نام دامنه و پروتکل نوشت. به مثال زیر دقت کنید:

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

از این نوع آدرس دهی فقط می‌توان برای لینک‌های داخلی استفاده کرد. لینک داخلی یعنی یک وبسایت به صفحات دیگر خودش لینک دهد نه وبسایت‌های دیگر. اگر آدرس لینک‌ها را مانند مثال فوق بدون پروتکل و نام دامنه وارد کنید (http://your-domain.com) بصورت خودکار نام دامنه خود وبسایت در ابتدای لینک قرار می‌گیرد.

پس یادتان باشد برای لینک‌های خارجی حتما باید آدرس مقصد را بصورت کامل وارد کنید (همراه با نام پروتکل و دامنه). اما برای لینک‌های داخلی می‌توانید بصورت مطلق یا نسبی عمل کنید.

نکته: آدرس‌دهی relative دارای نکات و ریزکاری‌های زیادی است که در اینجا گفته نشده. در آینده جلسه‌ای را برای آموزش انواع آدرس‌دهی ایجاد می کنیم.

صفت target در تگ a

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

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

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

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

صفت title

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

به مثال زیر دقت کنید:

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

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

نکته: صفت title مخصوص تگ لینک نیست و می‌توان آن را برای اکثر تگ‌های html استفاده کرد.

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

Bookmark یا لینک لنگر به بازدیدکننده اجازه می‌دهد تا به بخشی از صفحه وب پرش (Jump) کند. لینک‌های لنگر برای صفحات وب طولانی بسیار مفید هستند.

حتما تا به حال فِلِش برگشت به بالای صفحه و… را در وبسایت‌های مختلف دیده‌اید، اینگونه کارها با استفاده از لینک‌های لنگر ایجاد می‌شوند.

برای ایجاد لینک لنگر ابتدا باید برای عنصر مقصد یک شناسه در نظر بگیریم. صفت id می‌تواند یک شناسه منحصر بفرد به یک عنصر نسبت دهد. در مثال زیر ما به یکی از تگ‌های h2 شناسه C4 را نسبت داده‌ایم:

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

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

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

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