برای استفاده از همه امکانات سایت باید جاوا اسکریپت مرورگر خود را فعال کنید.

آموزش تگ a در HTML - راهنمای کار با لینک در html

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

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

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

تگ a که مخفف anchore به معنای لنگر است، برای ایجاد پیوند به کار می رود.

در تگ <a> مهم ترین ویژگی (صفت یا خصوصیت) href مخفف Hypertext Reference است که آدرس مقصد را مشخص می کند. hyperlink ابر متنی است که حاوی لینک است.

<a href="http://rasanehpardaz.com">کلیک کنید</a>


در این مثال کاربر پس از کلیک کردن بر روی عبارت «کلیک کنید» به URL ای که برای href مشخص شده هدایت می شود.


ایجاد لینک به یک تصویر

استفاده از تگ a محدود به لینک های متنی نیست و می توان عناصر دیگر را نیز لینک دار کرد. یکی از موارد پر کاربرد بعد از متن، لینک دادن به تصویر است که با کمک تگ img صورت می گیرد.

<a href="http://rasanehpardaz.com" title="این یک لینک است" target="_blank"><img src="image/your-img.jpg" alt="your-alt"  width="100" height="100"></a>


در برخی مرورگرها تصاویر لینک شده با یک کادر در حاشیه مشخص می شوند، برای محو این خط حاشیه ای باید از خاصیت border با مقادیر 0 در HTML یا در حالت بهتر و استاندارد تر، در CSS استفاده کنید.


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

تگ a در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر کروم فایرفاکس اپرا سافاری اینترنت اکسپلورر / اج
پشتیبانی بله بله بله بله بله


جدول خصوصیات تگ a در HTML

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

 

ایجاد عنوان برای لینک یا title

 

یکی از خصوصیاتی که برای بهینه سازی لینک مفید است، خاصیت title است. در مثال زیر تگ a با خاصیت title را مشاهده می کنید.

<a href="http://rasanehpardaz.com" title="این یک لینک است">کلیک کنید</a>


کنترل پنجره لینک یا target

لینک ها به صورت پیش فرض در همان پنجره یا تب مرورگر نمایش داده می شوند، اما در صورتی که می خواهید این لینک در تب جدید باز شود، باید از پارامتر target استفاده کرد.

<a href="http://rasanehpardaz.com" title="این یک لینک است" target="_blank">کلیک کنید</a>


پارامتر target مقادیر متفاوتی می پذیرد.

- blank_ : نمایش محتوای لینک در پنجره جدید.

- parent_ : نمایش محتوای لینک در پنجره والد (معمولا در حالتی استفاده می شود که لینک از یک frame فراخوانی شود).

- self_ : نمایش محتوای لینک در پنجره فعلی (حالت پیش فرض).

- top_ : نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).

- نام frame : برای پارامتر target می توان نام یک frame را نیز قرار داد، بدین ترتیب محتوای لینک در داخل فریم نمایش داده خواهند شد.

 

مثال شماره ۱ : ایجاد لینک به سایت رسانه پرداز

 <a href="http://rasanehpardaz.com">سایت رسانه پرداز</a>


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

<a href="http://rasanehpardaz.com">
 <img src="images/logo.png">
</a>


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

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


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

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


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

<!DOCTYPE html>
<html id="Top">
<body>
 <a href="#Top">برو بالای صفحه</a>
</body>
</html>


مثال شماره ۶ : نحوه ایجاد یک لینک نوفالو ( nofollow )

 <a href="http://test.com/" rel="nofollow">Test.com</a>


پشتیبانی از ویژگی ها و رویدادهای عمومی

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


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

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

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

 

موضوع: آموزش HTML
کلمات کلیدی: ، ، ، ، ، ، ، ، ، ، ،

نظرات نظرات تا اطلاع ثانوی غیر فعال است.