این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ a در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ a در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ a در HTML
تگ a که از کلمه ( Anchor ) گرفته شده است، تگی است که ما با استفاده از آن میتوانیم یک لینک را در یک صفحه ی وب ایجاد نماییم. و این لینک میتواند کاربر را از یک صفحه به صفحه ی دیگر در یک وبسایت یا در کل فضای اینترنت منتقل نماید.
بصورت پیش فرض یک لینک دارای ۳ حالت کلی زیر می باشد:
- لینکی که هنوز روش کلیک نشده – ( زیرش یک خط کشیده شده و رنگش آبی می باشد )
- لینکی که روش کلیک شده – ( زیرش یک خط کشیده شده و رنگش بنفش می باشد )
- لحظه ی کلیک بروی لینک – ( زیرش یک خط کشیده شده و رنگش قرمز می باشد )
وقتی ماوس بروی یک لینک قرار میگیرد معمولا علامت آن به شکل
تبدیل می شود، ولی خب بازم بستگی به سیستم عامل و تِم سیستمتون داره و ممکنه شکلش کمی متفاوتتر باشه.
Free-Learn
مثال از تگ a در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : ایجاد یک لینک به سایت آموزشی فری لرن
|
1 2 3 4 5 |
<body> <a href="https://free-learn.ir">برو به سایت فری لرن</a> </body> |
مثال شماره ۲ : ایجاد تصویر لینک دار ( تصویری که بتوان بروی آن کلیک کرد )
|
1 2 3 4 5 6 7 8 9 |
<body> <p>بروی تصویر زیر کلیک کنید</p> <a href="https://free-learn.ir"> <img src="images/logo-1.png"> </a> </body> |
مثال شماره ۳ : لینک به ایمیل
اگه توجه کنید در مثال زیر ۳ بخش اصلی وجود داره :
|
1 |
<a href="mailto:[Email_Girande]?subject=[Onvan]&body=[Matn_Asli]">Send Email</a> |
- mailto ( آدرس ایمیل گیرنده )
- subject ( عنوان ایمیل )
- body ( متن ایمیل )
|
1 2 3 4 5 |
<body> <a href="mailto:FreeLearn20181@gmail.com?subject=test&body=test" target="_top">ارسال ایمیل</a> </body> |
مثال شماره ۴ : لینک به شماره تماس ( تلفن ) ( وقتی کاربر داخل گوشی موبایل باشه و روی لینک کلیک کنه دیگه خودش خودکار میره به قسمت تماس ها و آماده تماس با شماره مورد نظر میشه )
|
1 2 3 4 5 |
<body> <a href="tel:+989121234567">تماس تلفنی با ما</a> </body> |
مثال شماره ۵ : لینک به اس ام اس ( پیامک ) ( وقتی کاربر داخل گوشی موبایل باشه و روی لینک کلیک کنه دیگه خودش خودکار میره به قسمت پیامک ها و آماده ارسال پیامک با شماره مورد نظر میشه )
|
1 2 3 4 5 |
<body> <a href="sms:+98123456789?body=Salam Khobi?">کلیک کنید</a> </body> |
مثال شماره ۶ : لینک درون صفحه ای برای انتقال کاربر از پایین صفحه به بالای صفحه
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html id="Top"> <body> <a href="#Top">برو بالای صفحه</a> </body> </html> |
مثال شماره ۷ : نحوه ایجاد یک لینک نوفالو ( nofollow ) – وقتی ربات های جستجوگر ببینن یک لینک نوفالو هست، دیگه دنبالش نمیکنن و در نتیجه هیچ رابطه ای از نظر اون ربات بین سایت شما و اون لینک [ سایت ] وجود نخواهد داشت
|
1 2 3 4 5 |
<body> <a href="https://Test.com/" rel="nofollow">Test.com</a> </body> |
مثال شماره ۸ : ساخت لینک جذاب – وقتی ماوس رفت روی لینک یه خط از وسط به دو طرف کشیده میشه
|
1 2 3 4 5 |
<div style="text-align:center;"> <a href="https://free-learn.ir/">سایت فری لرن</a> <a href="https://free-learn.ir/">سایت فری لرن</a> <a href="https://free-learn.ir/">سایت فری لرن</a> </div> |
مثال شماره ۹ : باز شدن لینک در حالت های مختلف
|
1 2 3 4 5 6 7 8 |
<body> <a href="https://free-learn.ir" target="_self">Self</a> <br> <a href="https://free-learn.ir" target="_blank">Blank</a> <br> <a href="https://free-learn.ir" target="_parent">Parent</a> <br> <a href="https://free-learn.ir" target="_top">Top</a> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ a در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ a در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| download | filename | برای دانلود مستقیم فایلی که روش کلیک میشه |
| href | URL | برای مشخص کردن آدرس لینک |
| hreflang | language_code | زبان اون صفحه ای که بهش لینک شده را مشخص میکند. (لیست زبان کشورهای جهان) |
| media | media_query | مشخص میکند که لینک برای چه نوع رسانه / دستگاهایی بهینه شود |
| ping | list_of_URLs | لیستی از آدرس ها که با کلیک بروی یک لینک به عنوان پینگ به مرورگرها ارسال می شود. ( معمولا برای ردیابی استفاده میشود ) |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
برای مشخص کردن رابطه بین صفحه جاری با صفحه ای که به آن لینک کرده ایم |
| target | _blank _parent _self _top Frame_Name |
نحوه باز شدن لینک را مشخص میکند ( مثلا در تب جدید باز شود ) |
| type | media_type | برای مشخص کردن نوع رسانه صفحه ای که بهش لینک کردیم |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ a از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- صفات download, hreflang, media, rel, target و type تنها در صورتی عمل خواهند کرد که در تگ
aصفت href وجود داشته باشد. - یک لینک بصورت پیش فرض وقتی بروی آن کلیک شود در همان صفحه ی جاری باز خواهد شد. ولی ما با استفاده از صفت Target میتوانیم این حالت را به دلخواه تغییر دهیم. ( همانند مثال شماره ۹ )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ a را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 8 9 |
a:link, a:visited { color: (internal value); text-decoration: underline; cursor: auto; } a:link:active, a:visited:active { color: (internal value); } |
