آموزش تگ a در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ a در HTML با من همراه باشید.

آموزش تگ a در HTML

Free-Learn

تگ a در HTML

تگ a تگی است که ما با استفاده از آن میتوانیم یک لینک را در یک صفحه ی وب ایجاد نماییم. و این لینک میتواند کاربر را از یک صفحه به صفحه ی دیگر در یک وبسایت یا در کل فضای اینترنت منتقل نماید.

بصورت پیش فرض یک لینک دارای ۳ حالت کلی زیر می باشد:

  • لینکی که هنوز روش کلیک نشده – (زیرش یک خط کشیده شده و رنگش آبی می باشد)
  • لینکی که روش کلیک شده – (زیرش یک خط کشیده شده و رنگش بنفش می باشد)
  • لینکی که فعال است یعنی لحظه ی کلیک بروی لینک – (زیرش یک خط کشیده شده و رنگش قرمز می باشد)

وقتی ماوس بروی یک لینک قرار میگیرد علامت آن به شکلآموزش کار با لینک ها یا Links در HTMLتبدیل می شود.

آموزش کاملتره کار با لینک ها را در HTML میتوانید از اینجا مشاهده نمایید.

Free-Learn

مثال از تگ a در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : ایجاد تصویر لینک دار (تصویری که بتوان بروی آن کلیک کرد)

امتحان کنید

مثال شماره ۳ : لینک به ایمیل

امتحان کنید

مثال شماره ۴ : لینک به شماره تماس (تلفن)

امتحان کنید

مثال شماره ۵ : لینک درون صفحه ای برای انتقال کاربر از پایین صفحه به بالای صفحه

امتحان کنید

مثال شماره ۶ : لینک به دستورات جاوااسکریپت (اجرای جاوااسکریپت در صفت href)

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ a در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

Free-Learn

جدول صفات تگ a در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

(علامت یعنی در HTML5 اضافه شده است)

نام صفت مقدار توضیح
charset char_encoding مجموعه کاراکترهای سندی که بهش لینک شده را مشخص میکند. ()
coords coordinates ناحیه/مختصات قابل کلیک را مشخص میکند. ()
download filename برای دانلود مستقیم یک فایل (متنی,ویدئویی و..) به محض کلیک بروی یک لینک. ()
href URL آدرس صفحه ی مقصد که قرار است کاربر به آنجا منتقل شود.
hreflang language_code زبان اون صفحه ای که بهش لینک شده را مشخص میکند. (لیست زبان کشورهای جهان)
media media_query مشخص میکند که لینک برای چه نوع رسانه /دستگاهایی بهینه شود. ()
name section_name یک لیبل یا انکر یا لنگر برای لینک مشخص میکند. ()
ping list_of_URLs لیستی از آدرس ها که با کلیک بروی یک لینک به عنوان پینگ به مرورگرها ارسال می شود. (معمولا برای ردیابی استفاده میشود)
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
رابطه ی بین صفحه ی جاری با صفحه ای که به آن لینک کرده ایم را مشخص میکند.
rev alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
دقیقا برعکس rel می باشد و با همان مقادیر . رابطه بین صفحه لینک شده و صفحه جاری را مشخص میکند. ()
shape default
rect
circle
poly
نوع/شکل لینک را مشخص میکند. (برای ایجاد نقاط قابل کلیک بروی یک تصویر) ()
target _blank
_parent
_self
_top
framename
مشخص میکند که صفحه ی مقصد چگونه نمایش داده شود. (مثلا در یک تب جدید از مرورگر یا ..)
type media_type نوع رسانه ، صفحه ای که بهش لینک کرده ایم را مشخص میکند.

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

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

Free-Learn

نکات و توضیحات

صفات download, hreflang, media, rel, target و type تنها در صورتی عمل خواهند کرد که در تگ a صفت href وجود داشته باشد.

یک لینک بصورت پیش فرض وقتی بروی آن کلیک شود در همان صفحه ی جاری باز خواهد شد. ولی ما با استفاده از صفت Target میتوانیم این حالت را به دلخواه تغییر دهیم. (مثال)

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ a را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.


Free-Learn