لینک در html – تگ لینک یا تگ a
لینک در HTML با تگ لینک یا تگ a انجام میشه. تگ لینک جزو المان هایی است که شما در تمامی صفحات وب و آموزش HTML حداقل یک بار ازش استفاده خواهید نمود. به عبارتی تگ a جزو مهمترین تگ های HTML است. این تگ برای لینک دهی به کار میره. اگه می خواین کاربر با کلیک کردن روی کلمه “خانه” به صفحه home.html بره، یا با کلیک روی کلمه آپارات، به سایت آپارات هدایت بشه، باید از این تگ استفاده کنین. لینک در html جزو تگ های Inline Level است. این به این معنیه که تگ a یه سطر رو اشغال نمیکنه و فضایی که اشغال میکنه بستگی به محتوای داخلش داره.
تگ a، تگ پایانی دارد
تگ لینک در html ، جزو اون دسته از تگ هایی است که تگ پایانی داره. بعبارتی با تگ بسته <a/> بسته میشه.
خاصیت href در لینک در html
هنگام استفاده از این تگ a، باید آدرس مقصد لینک رو در داخل خصوصیت href قرار بدین. به فرض چنانچه بخواهیم لینکی بسازیم که کاربر با کلیک روی “پی استور” به آدرس https://programstore.ir/ منتقل بشه، باید اینگونه عمل کنیم:
<a href="https://programstore.ir/">پی استور</a>
چنانچه مشاهده می کنین آدرس url در داخل href تگ a نوشته شد و کلمه نمایشی مابین تگ آغازی و پایانی.
خاصیت target در تگ لینک در html
این خصوصیت در تگ a به شما کمک میکنه تا نحوه باز شدن صفحه مقصد یا لینک رو تعیین کنین. مقادیری که بیشتر استفاده می شن و توضیح عملکردشون:
- blank_ : با قرار دادن این مقدار در خصوصیت target در تگ a به مرورگر اعلام می کنید که لینک را در یک تب جدید باز کن.
- self_ : این مقدار به مرورگر اعلام می کند که آدرس لینک را در این تب باز کن. این مقدار همان مقدار default یا دایمی تگ a هستش. چنانچه شما خصوصیت target رو برای تگ a ننویسید این مقدار به صورت پیش فرض تنظیم خواهد شد.
<a href="https://programstore.ir/" target="_blank" > Pstore Site </a> <a href="https://programstore.ir/" > Pstore Site </a>
خاصیت rel در تگ لینک در HTML
این صفت در تگ a نشان دهنده نوع رابطه سند فعلی با صفحه لینک داده شده است:
<a rel="value">
اما value چه مقادیری رو میتونه بگیره؟ یکی از مهمترین مقادیر که توسط این صفت در تگ a گرفته میشه مقدار nofollow است.
nofollow در صفت rel لینک در HTML
در بحث لینک در html تمامی تگ های a به صورت پیش فرض دارای مقدارفالو یا dofollow درصفت rel هستند. درواقع معنی این عبارت اینه که موتورهای جستجو این لینک رو دنبال و بهش توجه کنن. اما وقتی مقدار این صفت به nofollow تنظیم شود، مرورگر می فهمد که لینک، دارای ارزشی برای ما نمی باشد و نباید دنبالش کند. در هنگام نوشتن لینک در html خوب است که از تگ a فالو و آنفالو باهم استفاده کنین. یعنی اگه چند تگ a بصورت فالو دارین یکی دو تا هم لینک آنفالو اضافه کنین.
تگ لینک در HTML و انواع مقصد دهی
-
لینک دهی به صفحات داخلی سایت
- اگر فایل ما و مقصد برادر باشن
index.html فایل ماست و همانطور که در شکل بالا سمت چپ دیده می شه این فایل فرزند دایرکتوری HTMLProject است و ما می خواهیم در فایلمان لینکی بسازیم با نام HOME که وقتی کلیک می شه به فایل home.html که در همان پوشه است و در واقع او هم فرزند دایرکتوری HTMLProject است، هدایت شود. به href دقت فرمایین که تنها نام فایل و پسوندش رو درج کردیم. زیرا هر دو فایل برادر هستن.
-
- مقصد و فایل ما عمو و برادرزاده باشن
مشاهده می کنید که فایل ما همان فایل index.html و برادر دایرکتوری views است. اما فایل مقصد یا home.html فرزند دایرکتوری views است. به عبارتی index عموی فایل home است. پس در آدرس دهی در فایل عمو ابتدا نام پدر فایل مقصد، سپس / و سپس نام فایل مقصد آورده می شه.
اما اگر بخواهیم از فایل برادرزاده به فایل عمو لینک بدیم باید مطابق شکل زیر عمل کنیم:
همانطور که مشاهده می کنین ابتدا با علامت /.. به یک مرحله قبل یا به یک دایرکتوری قبل باز میگردیم و سپس اسم فایل مقصد رو می نویسیم. به عبارتی وقتی علامت /.. را تایپ می کنیم می گوییم از دایرکتوری views خارج شو و برو به دایرکتوری HTMLProject و فایل index آنجاست.
حال فرض کنید ترتیب فایل ها و دایرکتوری به صورت زیر باشه:
حال اگر بخواهیم داخل فایل index به فایل home لینک بدیم باید href تگ a را اینگونه بنویسیم. اما اگر بخواهیم در داخل فایل home به فایل index لینک بدیم چه؟
به href تگ a دقت کنید. می بینید که ما از /../.. استفاده کردیم که می شود گفت دو بار از /.. استفاده کرده ایم. این به این معنیه که گفته ایم از دایرکتوری views خارج شو و برو به دایرکتوری pages و سپس از دایرکتوری pages هم خارج شو و برو به دایرکتوری HTMLProjest و آنجا فایل index را خواهی یافت.
-
لینک دهی به یک بخش از صفحه فعلی
اگر صفحه فعلی شما طولانیه و می خواهید با قرار دادن یک لینک و کلیک کردن آن، کاربر به قسمتی در میانه ها یا اواخر صفحه هدایت بشه، می تونید آیتم مبدا را با id اسم گذاری کنید و سپس در href تگ a آدرس آن آی دی را بدهید.
فرض کنید مقاله ای داریم درمورد آموزش تگ لینک در html که بسیار طولانی است. می خواهیم در انتهای مقاله لینکی قرار دهیم که کاربر با کلیک روی آن به ابتدای مقاله برود. پس ابتدا، جایی که قرار است کاربر هدایت شود را با id نامگذاری می کنیم:
<h1 id="top">Newspaper<h1>
سپس باید تگ لینک را آخر صفحه بگذاریم :
<p> <a href="#top"> Top </a></p>
همینطور می توانیم مقاله خود را در ابتدای آن فصل بندی کنیم و به صورت لینک قرار دهیم تا کاربر با کلیک روی هر قسمت به مطلب آن هدایت شود.
-
لینک دهی به آدرس خارجی
اگر بخواهیم یک صفحه از صفحات یک سایت دیگر را لینک دهی کنیم، باید آدرس آن صفحه را در قسمت href لینک در html بیاوریم. به عنوان مثال می خواهیم وقتی کاربر روی کلمه “آپارات” کلیک کرد به سایت آپارات برود :
<a href="https://www.aparat.com/">Aparat</a>
-
- شماره تلفن
می توان در قسمت href تگ a شماره تماس هم درج کرد :
<a href="tel:0214444444">Phone Number</a>
-
- آدرس ایمیل :
می توان در قسمت href تگ a از آدرس ایمیل هم استفاده کرد :
<a href="mailto:salar.abapour@gmail.com">gmail address</a>
پشتیبانی تگ لینک در html
تگ a از همه صفات عمومی و رویداد ها پشتیبانی می کنند.
لینک در html – پشتیبانی مرورگر ها از تگ a
همه مرورگر ها از تگ a پشتیبانی کامل می کنند:
نام مرورگر | |||||
پشتیبانی می کند؟ | بله | بله | بله | بله | بله |
قالب های آماده HTML
درباره سالار عباپور
فارغ التحصیل رشته مهندسی برق و مدرس دوره های طراحی سایت - ایشان در زمینه طراحی سایت با زبان های برنامه نویسی PHP و فریمورک لاراول Laravel فعال هستند و همچنین یکی از تحلیل گران خبره در حوزه بازارهای مالی بین المللی و بورس هستند.