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

اگه می‌خواین کاربر با کلیک کردن روی کلمه “خانه” به صفحه 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 بصورت فالو دارین یکی دو تا هم لینک آنفالو اضافه کنین.

پاورپوینت زبان های برنامه نویسی، سیستم عامل ها و Data bases

پاورپوینت زبان های برنامه نویسی، سیستم عامل ها و Data bases

کلیک کنید

تگ لینک در 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 — آشنایی با زبان رایج نشانه گذاری

پاورپوینت معرفی زبان HTML — آشنایی با زبان رایج نشانه گذاری

کلیک کنید

نام مرورگر
پشتیبانی می کند؟	بله	بله	بله	بله	بله