تگ < a > در HTML

تگ < a > در HTML


تگ <a> در زبان HTML برای ایجاد یک عنصر استفاده می شود این عنصر همچنین به عنوان عنصر "لنگر" یا انکر «anchor» شناخته می شود.عنصر a بیانگر یک لینک «link» است. این معمولا سند HTMLای را به سند HTML دیگر پیوند می زند. شما می توانید از تگ <a> برای لینک کردن متن یا تصویر استفاده کنید. شما می توانید یک بلوک کامل (حاوی چندین عنصر جداگانه) را در صورت لزوم با استفاده از یک عنصر a لینک کنید بنابراین عنصر a محدود به لینک کردن یک متن یا یک تصویر نیست. با این وجود نباید "محتوای تعاملی" وجود داشته باشد.

نگارش

تگ <a> همیشه همراه با ویژگی href نوشته می شود و بعد از href یک علامت مساوی قرار دارد، پس از علامت مساوی ما نشانی اینترنتی یا URL را درون یک نقل قول (دابل کوتیشن) می نویسیم. بنابراین عنصر لنگر همیشه بدین شکل است: <a href=””></a>.

چیزی که می خواهیم لینک شود باید بین تگ باز <a> و تگ بسته </a> عنصر لنگر قرار بگیرد. مثل این:

<a href="http://www.computerquestion.ir/">کامپیوتر پرسش</a>

مثال های تگ <a>

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

سلام برای ورود به وب سایت<a href="http://www.computerquestion.ir/">اینجا</a>کلیک کنید

(نتیجه را در ادامه مشاهده خواهید کرد)

بازکردن لینک در پنجره یا برگه جدید

برای اینکه بتوانیم لینک ها را در یک پنجره یا (تب و برگه) جدید مرورگر باز کنیم از ویژگی target و از مقدار _blank استفاده می کنیم. مثال:

<a href="http://www.computerquestion.ir/" target="_blank">کامپیوتر پرسش</a>

بارگذاری مجدد لینک در پنجره جدید

در برخی زمان ها ممکن است بخواهید در یک محتوا چندین لینک قرار دهید در یک تب یا برگه ی جدید مرورگر کاربر امّا نمی خواهید کاربران خود را مورد آزار قرار دهید تا تجربه ای بد از کاربران در وب سایت بماند. بنابراین در اینجور مواقع می توانید از مقدار mytab برای ویژگی target استفاده کنید.

با انجام این عمل، با کلیک اوّل کاربر، لینک در برگه جدید باز می شود و با کلیک های بعدی نیز در همان پنجره ی بعدی لینک ما باز خواهد شد و از بازشدن پنجره های مزاحم جلوگیری می شود. این عمل در سئو به خصوص برای وب سایت های آموزشی نیز اثر گذار می باشد. مثال:

<a href="http://www.google.com/" target="myTab">گوگل</a><br>

<a href="http://www.parsijoo.ir/" target="myTab">پارسی جو</a><br>

<a href="http://www.bing.com/" target="myTab">بینگ</a><br>

لینک کردن تصویر

همانطور که گفتیم هرچیزی که بین تگ باز <a> و تگ بسته </a> قرار بگیرد لینک می شود. برای لینک سازی تصاویر نیز کافیست کدهای تصویر HTML خود را نوشته و آن را در عنصر لنگر قرار دهیم. مثال:

<a href="https://fa.wikipedia.org/wiki/ایران" target="myTab">

<img src="http://uupload.ir/files/hflq_ایران.jpg" alt="پرچم ایران">

</a>

توضیح: در مثال بالا ما تصویر پرچم ایران را آپلود و سپس این تصویر را به صفحه توضیح ایران در وب سایت ویکی پدیا لینک کردیم. هنگامی که کاربر روی پرچم ایران کلیک کند به صفحه مربوط به ایران در ویکی پدیا منتقل می شود.

نوفالو

در اینجا ما از "rel="nofollow برای ایجاد لینک نوفالو استفاده می کنیم. اینکار زمانی استفاده می شود که طراح وب نخواهد لینک آن توسط موتورهای جستجوگر مثل گوگل یا پارسی جو شناسایی شود. به عبارت دیگر موتورهای جستجو قابلیت شناسایی لینک های نو-فالو را ندارند.

نکته: برخی ها فکر می کنند که rel نوعی تگ به حساب می آید امّا اینگونه نیست، rel تنها یک ویژگی برای عنصر لنگر می باشد که دارای مقدار dofollow یا nofollow می باشد. اگر این ویژگی را به عنصر لنگر اضافه نکنید به صورت پیشفرض برروی مقدار dofollow قرار می گیرد. همچنین قرار دادن این ویژگی تغییری در شکل ظاهری عنصر لنگر ایجاد نمی کند.

مثال:

<a href="http://www.computerquestion.ir/" rel="nofollow" target="myTab">آموزش رایگان زبان اچ تی ام ال!</a>

برای مشاهده نتیجه کدهای بالا اینجا کلیک کنید.

ویژگی ها

ویژگی ها «attributes» که با نام هایی همچون خصیصه یا صفت نیز شناخته می شوند را می توان به عناصر HTML اضافه کرد تا اطلاعات بیشتری در مورد نحوه نمایش یا رفتار عنصر ارائه دهد.

3 نوع ویژگی وجود دارد که می توان به تگ های HTML اضافه کرد:

1-     ویژگی عناصر خاص

2-     ویژگی جهانی

3-     ویژگی گرداننده رویداد

عنصر <a> ویژگی های زیر را می پذیرد.

ویژگی های عنصر خاص

در محتواهای زیر ویژگی هایی را مشاهده می کنید، که می توان به تگ <a> اضافه نمود.

ویژگی href: نشانی اینترنتی که صفحه مرتبط را پیوند میزند. مثل: href=”http://example.com”.

ویژگی target: در تصویر زیر درباره ی ویژگی target اطلاعات کاملتر را دریافت می کنید:

ویژگی target

ویژگی download: همانطور که از نامش پیداست، باعث می شود که هنگامی که روی لینک کلیک کنید فایل شما دانلود شود. به عنوان مثال زمانی که بخواهید تصویری را برای دانلود در صفحه وب قرار دهید کافیست ویژگی download را به عنصر لنگر اضافه کنید. این ویژگی می تواند دارای مقدار باشد یا نباشد (اختیاری) امّا اگر بخواهید نامی را برای فایل دانلودیتان انتخاب کنید کافیست برای مقدار ویژگی download نام مورد نظر را وارد کنید. مثل: <a “http://example.pdf” download>

ویژگی rel: این ویژگی رابطه بین سند فعلی و مقصد URI را توضیح می دهد. تنها زمانی استفاده می شود که ویژگی href نیز وجود داشته باشد. این ویژگی علاوه بر دوفالو و نوفالو که در بالا توضیح داده شد، چندین مقدار دیگر نیز می پذیرد:

ویژگی rel

مقدارهای دیگری نیز می توان برای ویژگی rel در نظر گرفت که در آینده توضیحات بیشتری در مورد آنها ارائه خواهید داد. مثال:

<a href=”http://examplehelp.com” rel=”help”>

ویژگی hreflang: کد hreflang مقصد URL را مشخص می کند. تنها زمانی استفاده می شود که ویژگی href وجود داشته باشد. مقداری که برای این ویژگی در نظر گرفته می شود زبان صفحه مورد نظر است به عنوان مثال اگر بخواهید از یک صفحه انگلیسی به یک صفحه فارسی لینک دهید می توانید از این ویژگی استفاده نمایید. مثال:

<a href=”http://computerquestion.ir” rel=”alternate” hreflang=”fa-IR”>

ویژگی type: نوع MIME منبع لینک شده را مشخص می کند. تنها زمانی استفاده می شود که ویژگی href نوشته شده باشد. مثال: type=”font/otf”.

وِیژگی های جهانی

ویژگی هایی که در زیر آورده شده است در تمام عناصر HTML5 استاندارد و مورد قبول هستند. بنابراین، شما می توانید از این ویژگی ها در تگ <a> و همچنین تگ های دیگر HTML استفاده کنید.

accesskey

class

contenteditable

contextmenu

dir

draggable

dropzone

hidden

id

inert

itemid

itemprop

itemref

itemscope

itemtype

lang

spellcheck

style

tabindex

title

translate

ویژگی های مقدار اداره کننده رویداد

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

در زیر ویژگی های استاندارد HTML5 از مقدار اداره کننده رویداد را مشاهده می کنید.

بازهم می توانید از هریک از این موارد در عنصر <a> و همچنین هر عنصر دیگر HTML5 استفاده کنید.

onabort

oncancel

onblur

oncanplay

oncanplaythrough

onchange

onclick

oncontextmenu

ondblclick

ondrag

ondragend

ondragenter

ondragexit

ondragleave

ondragover

ondragstart

ondrop

ondurationchange

onemptied

onended

onerror

onfocus

onformchange

onforminput

oninput

oninvalid

onkeydown

onkeypress

onkeyup

onload

onloadeddata

onloadedmetadata

onloadstart

onmousedown

onmousemove

onmouseout

onmouseover

onmouseup

onmousewheel

onpause

onplay

onplaying

onprogress

onratechange

onreadystatechange

onscroll

onseeked

onseeking

onselect

onshow

onstalled

onsubmit

onsuspend

ontimeupdate

onvolumechange

onwaiting

دوره ی آموزش زبان اچ تی ام ال

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی