آموزش و یادگیری تگ a در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، ياد مي‌گيريم تگ <a> چيست و چگونه براي ايجاد لينک‌هاي مختلف در صفحات وب از آن استفاده مي‌شود. اين تگ از واژه Anchor گرفته شده و يکي از پرکاربردترين تگ‌هاي HTML است.

تگ a در HTML چيست؟

تگ <a> براي ايجاد لينک (پيوند) بين صفحات، فايل‌ها يا بخش‌هاي مختلف صفحه به کار مي‌رود. با استفاده از اين تگ، مي‌توانيد کاربر را از يک صفحه به صفحه ديگر، از صفحه به ايميل، شماره تماس، يا حتي بخش خاصي از همان صفحه هدايت کنيد.

حالات پيش‌فرض لينک‌ها

• لينکي که هنوز کليک نشده است (آبي و زيرخط‌دار)
• لينکي که قبلاً کليک شده است (بنفش و زيرخط‌دار)
• لحظه کليک روي لينک (قرمز و زيرخط‌دار)

مثال‌ها و کاربردهاي تگ a در HTML

1. لينک ساده

ساده‌ترين نوع لينک در HTML با استفاده از ويژگي href ساخته مي‌شود:

<a href="https://learndun.ir">برو به سايت آموزش دون</a>

با کليک روي اين لينک، کاربر به سايت آموزش دون منتقل مي‌شود. اين نوع لينک براي هدايت کاربران به صفحات داخلي يا خارجي کاربرد دارد.

2. لينک تصويري

با قرار دادن يک تصوير داخل تگ <a>، مي‌توانيد لينک را روي عکس تنظيم کنيد:

<a href="https://learndun.ir">
  <img src="/images/logo.png" alt="آموزش دون">
</a>

در اين حالت با کليک روي تصوير، کاربر به آدرس مورد نظر هدايت مي‌شود. اين روش در طراحي بنرها يا لوگوهاي قابل کليک بسيار پرکاربرد است.

3. لينک ايميل

اگر بخواهيد با کليک روي لينک، ايميل پيش‌فرض کاربر باز شود، از ويژگي mailto: استفاده کنيد:

<a href="mailto:info@learndun.ir?subject=سلام&body=درود بر شما">ارسال ايميل</a>

اين روش براي صفحات تماس با ما بسيار مفيد است و باعث مي‌شود کاربر راحت‌تر با شما ارتباط بگيرد.

4. لينک شماره تماس

براي ايجاد لينک تماس مستقيم در موبايل، از tel: استفاده مي‌شود:

<a href="tel:+989121234567">تماس با ما</a>

با کليک روي اين لينک در گوشي، شماره تلفن به‌صورت خودکار در برنامه تماس باز مي‌شود.

5. لينک پيامک (SMS)

براي ارسال پيامک از طريق لينک HTML، از sms: استفاده کنيد:

<a href="sms:+989121234567?body=سلام!">ارسال پيامک</a>

در اين حالت برنامه پيام‌رسان کاربر باز مي‌شود و متن پيام به‌صورت خودکار درون آن قرار مي‌گيرد.

6. لينک به بالاي صفحه

براي حرکت سريع به بخش بالايي صفحه از لينک درون‌صفحه‌اي استفاده مي‌شود:

<a href="#top">برو بالاي صفحه</a>

اين نوع لينک براي صفحاتي با محتواي طولاني بسيار مفيد است تا کاربر بدون اسکرول زياد به ابتداي صفحه برگردد.

7. لينک نوفالو (nofollow)

اگر نمي‌خواهيد موتورهاي جستجو لينک شما را دنبال کنند، از ويژگي rel="nofollow" استفاده کنيد:

<a href="https://example.com" rel="nofollow">لينک نوفالو</a>

اين ويژگي در سئو کاربرد دارد، مخصوصاً زماني که به سايتي غيرقابل اعتماد لينک مي‌دهيد.

8. افکت جذاب روي لينک (CSS Hover)

با استفاده از CSS مي‌توانيد افکت‌هاي جذابي براي لينک‌ها بسازيد. مثلاً حذف زيرخط و افزودن خط زيرين زيبا هنگام هاور:

<style>
  a:hover {
    text-decoration: none;
    border-bottom: 2px solid #2196f3;
    transition: 0.3s;
  }
</style>
<a href="https://learndun.ir">لينک جذاب</a>

اين افکت باعث مي‌شود تجربه کاربري سايت بهتر شود و لينک‌ها ظاهر مدرن‌تري پيدا کنند.

9. انواع حالت باز شدن لينک (target)

ويژگي target تعيين مي‌کند لينک در کجا باز شود:

<a href="https://learndun.ir" target="_self">Self</a>
<a href="https://learndun.ir" target="_blank">Blank</a>
<a href="https://learndun.ir" target="_parent">Parent</a>
<a href="https://learndun.ir" target="_top">Top</a>

• _self: در همان صفحه باز مي‌شود (پيش‌فرض).
• _blank: در تب جديد باز مي‌شود.
• _parent: در قاب والد باز مي‌شود.
• _top: در کل پنجره مرورگر باز مي‌شود.

صفات مهم تگ a

استايل پيش‌فرض مرورگرها براي لينک

a:link, a:visited {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

a:active {
  color: red;
}

نکته: اگر مي‌خواهيد لينک در تب جديد باز شود از target="_blank" استفاده کنيد تا تجربه کاربري بهتري ايجاد شود.

براي يادگيري کامل مفاهيم HTML و طراحي وب، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي دسترسي به تمام آموزش‌هاي HTML و CSS، به صفحه اصلي آموزش دون مراجعه کنيد.