لینک در html – تگ لینک یا تگ a

لینک در html – تگ لینک یا تگ a لینک در HTML با تگ لینک یا تگ a انجام میشه. تگ لینک جزو المان هایی است که شما در تمامی صفحات وب و آموزش HTML حداقل یک بار ازش استفاده خواهید نمود. به عبارتی تگ  a جزو مهمترین تگ های HTML است. این تگ برای لینک دهی به کار میره. اگه می خواین کاربر با کلیک کردن روی کلمه “خانه” به صفحه home.html بره، یا با کلیک روی کلمه آپارات، به سایت آپارات هدایت بشه، باید از این تگ استفاده کنین. لینک در html جزو تگ های Inline Level است. این به این معنیه که تگ a یه سطر رو اشغال نمیکنه و فضایی که اشغال میکنه بستگی به محتوای داخلش داره.

تگ a، تگ پایانی دارد

تگ لینک در html ، جزو اون دسته از تگ هایی است که تگ پایانی داره. بعبارتی با تگ بسته <a/> بسته میشه.

خاصیت href در لینک در html

هنگام استفاده از این تگ a، باید آدرس مقصد لینک رو در داخل خصوصیت href قرار بدین. به فرض چنانچه بخواهیم لینکی بسازیم که کاربر با کلیک روی “دویکس” به آدرس https://devix.ir/ منتقل بشه، باید اینگونه عمل کنیم:

<a href="https://devix.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 است. پس در آدرس دهی در فایل عمو ابتدا نام پدر فایل مقصد، سپس / و سپس نام فایل مقصد آورده می شه.

• لینک دهی به یک بخش از صفحه فعلی

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

آموزش از سایت آموزش amp