تگ a در HTML

در این آموزش به بررسی تگ a در HTML می پردازیم، با استفاده از عنصر a میتوان یک لینک (link) یا پیوند را در صفحه وب ایجاد کرد.

مثال

در این مثال یک لینک ایجاد کرده ایم که کاربر را به صفحه اصلی وب سایت بابلز لرن منتقل می کند: (شما می توانید بجای متن از یک تصویر استفاده کنید، با استفاده از تگ img)

<a href="https://www.bubbleslearn.ir">www.bubbleslearn.ir</a>

تست آنلاین کد

تعریف و کاربرد

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

مهم ترین ویژگی یا خاصیت (attribute) این تگ، href است که از آن برای مشخص کردن یک پیوند (link) استفاده می کنیم.

پشتیبانی مرورگر ها

خواص (attributes)

در اینجا جدول انواع خاصیت هایی که این تگ می تواند دریافت کند را مشخص کرده ایم:

خواص عمومی

تگ a از خواص عمومی در HTML پشتیبانی می کند.

رویداد های عمومی

تگ a از رویداد های عمومی در HTML پشتیبانی می کند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها تگ a در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

مثال های بیشتر

در این مثال اگر کاربر روی لینک کلیک کند به بخش تماس تلفنی گوشی همراه هدایت می شود: (مواقعی کاربرد دارد که کاربر از طریق گوشی روی لینک کلیک می کند)

• tel: شماره

<a href="tel:+989150000000">تماس تلفنی با ما</a>

لینک پیامک

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

• body: متن پیام

<a href="sms:+989150000000?body=www.bubbleslearn.ir">کلیک کنید</a>

لینک داخلی یا درون صفحه ای

در این مثال یک لینک داخلی یا درون صفحه ای ایجاد کرده ایم، کاربر با کلیک روی لینک به عنصری که ID آن برابر با top باشد هدایت می شود:

<a href="#Top">برو بالا</a>

لینک به ایمیل

در این مثال کاربر با کلیک روی لینک به یک آدرس ایمیل مشخص همراه با مقادیر پیش فرض عنوان و متن ایمیل، جهت ارسال آن، هدایت می شود:

• mailto: آدرس ایمیل گیرنده
• subject: عنوان ایمیل
• body: متن ایمیل

<a href="mailto:matin.boronsi@gmail.com?subject=ExampleSubject&body=message" target="_top">ارسال ایمیل</a>