تگ a در HTML
شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.
تعریف و کاربرد تگ a در HTML
تگ <a> برای پیوند یک صفحه به صفحه ای دیگر استفاده می شود.
در تگ <a> مهم ترین خصوصیت href است که نشان می دهد مقصد لینک کجاست.
به طور پیش فرض، لینک ها در مرورگرها به یکی از روش های زیر، ظاهر می شوند:
- لینک مشاهده نشده، زیر خط دار و آبی است
- لینک بازدید، زیر خط دار و بنفش است
- لینک فعال، زیر خط دار و به رنگ قرمز است
پشتیبانی مرورگرها از تگ a در HTML:
| عنصر | |||||
|---|---|---|---|---|---|
| <a> | بله | بله | بله | بله | بله |
نکته ها و ترفندها
نکته 1: اگر ویژگی href تنظیم نشده باشد، هیچ کدام از ویژگی های زیر اثری نخواهند داشت:
- download
- hreflang
- media
- rel
- target
- type
نکته 2: صفحه لینک شده به طور معمول در پنجره جاری مرورگر نمایش داده می شود، مگر اینکه شما خصوصیت target را برای لینک مذکور تنظیم نمایید.
نکته 3: برای style دادن به لینک ها از CSS استفاده کنید.
تفاوت بین HTML 4.01 و HTML5
در HTML 4.01 تگ <a> می تواند به صورت یک لینک (hyperlink) یا یک لنگر (anchor) باشد. در HTML5 تگ <a> همیشه یک لینک است، اما اگر ویژگی href را نداشته باشد آن تنها یک نگهدارنده مکان برای یک لینک است.
در HTML5 تعدادی صفت جدید به این تگ اضافه شده و از نسخه HTML4.01 آن نیز تعدادی صفت حذف شده است.
خصوصیت ها
= جدید در HTML5.
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| charset | char_encoding | در HTML5 پشتیبانی نمی شود. مشخص کننده نوع کدینگ کاراکترهای صفحه مقصد است. |
| coords | coordinates | در HTML5 پشتیبانی نمی شود. مختصات یک لینک را مشخص می کند. |
| download | filename | دانلود یک لینک را مشخص می کند. |
| href | URL | ایجاد پیوند یا لینک به سندی دیگر را مشخص می کند. |
| hreflang | language_code | مشخص کننده زبان اصلی وپیش فرض صفحه مقصد پیوند است. |
| media | media_query | لینک رسانه یا دستگاه را مشخص می کند. |
| name | section_name | در HTML5 پشتیبانی نمی شود. ایجاد لینک نامگذاری شده در یک سند را مشخص می کند. (استاندارد HTML5 خصوصیت id را به جای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد) |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
نوع ارتباط بین سند رایج و سند لینک شده را مشخص می کند. |
| rev | text | در HTML5 پشتیبانی نمی شود. نوع ارتباط بین سند لینک شده با سند های رایج را مشخص می کند. |
| shape | default rect circle poly |
در HTML5 پشتیبانی نمی شود. ایجاد shape (شکل) از لینک را مشخص می کند. |
| target | _blank _parent _self _top framename |
خصوصیت target مشخص می کند که صفحه ی لینک شده چگونه باز شود. |
| type | media_type | نوع media (رسانه) لینک شده به سند را مشخص می کند. |
ویژگی های عمومی تگ a در HTML
تگ <a> از خصوصیت های عمومی در HTML پشتیانی می کند.
رویدادهای عمومی تگ a در HTML
تگ <a> از رویدادهای عمومی در HTML پشتیانی می کند.
خودتان امتحان کنید - مثال
Create hyperlinks
چگونه یک لینک ایجاد کنیم.
An image as a link
استفاده از یک image (تصویر) به عنوان یک لینک.
Open a link in a new browser window
باز کردن یک لینک در پنجره جدید مرورگر.
Create a mailto link
لینک به یک پیام پست الکترونیک.
Create a mailto link 2
لینکی دیگر به یک پیام پست الکترونیک.
Link to an element with a specified id
لینک به یک عنصر با یک شناسه مشخص شده. (در HTML5ساپورت نمی شود)
Link to a JavaScript
چگونگی اضافه کردن ویژگی href در جاوا اسکریپت.
آموزش های مرتبط
- نوشته شده توسط سمیه فخری
- بازدید: 31729
دیدگاه‌ها
ممنون از سایت بسیار خوبتون مطالب برای من مفید بود.
سلام خسته نباشید,ممنون از سایت خوبتون.
چطور مشه تگ های html را درون سند html تعریف کرد؟
برای مثال من میخوام یک سایت آموزشی htmlایجاد کنم , حالاچطور میشه تگ های html را وارد کنم؟
سلام و عرض ادب، سوال شما خیلی خیلی مقدماتی است ...! و نیاز هست که بصورت دقیق آموزش HTML را از ابتدا مطالعه فرمایید.
اما به هر حال، صفحات وب از یکسری تگهای HTML تعریف شده اند که مجموعه ی این تگها، سند HTML را تشکیل می دهند، بنابراین برای طراحی یک صفحه که فقط شامل یک لینک باشد بصورت زیر عمل میکنیم:
<html>
<body>
<a href="http://ww w.beyamooz.com" >Visit beyamooz.com!</a>
</body>
</html>
محتوای بالا را در یک ویراشگر متنی مثل NotPad کپی و پیست کنید و سپس آنرا با فرمت html. ذخیره کنید و نهایتا آنرا در مرورگرتون باز کنید.
سلام ممنون از سایت خوبتون.
میشه لطفا در مورد این مثال Create a mailto link بیشتر توضیح بدید؟
ممنون.
سلام، هدف از مثال مذکور، آشنایی شما با قابلیت های تگ a هست و همانطور که متوجه شدید بعد از کلیک روی لینک ارائه شده در مثال، پنجره ای باز می شود و نرم افزای که برای ارسال ایمیل از آن استفاده خواهد شد، از شما سوال می شود.
<a href="/mailto:[email protected]?Subject=Hello%20again" target="_top">
Send Mail</a>
نکاتی که در این مثال باید به آن توجه کنیم:
1- کلمه کلیدی mailto باید در ابتدای ویژگی href آورده شود.
2- بلافاصله بعد از :mailto باید آدرس ایمیلی که قصد ارسال نامه به آن را داریم ذکر کنیم.
3- بعد از آدرس ایمیل باید از یک علامت سوال استفاده کنیم و Subject یا موضوع نامه را مشخص کنیم.
4- هنگام تنظیم Subject باید دقت کنیم که اگر بین کلمات موضوع نامه، فاصله وجود دارد، حتما بجای space از 20% استفاده کنیم.