آموزش HTML

آموزش تگ a در HTML

آموزش تگ a در HTML

تگ a چیست و چه کاربردی در HTML دارد؟ برای استفاده از تگ a در سایت چه نکاتی را باید بدانیم؟ انواع لینک دهی توسط تگ a چگونه انجام میشود؟ چگونه برای زیبایی دکمه ها CSS و استایل به تگ a اضافه کنیم؟

آموزش تگ های HTML

زمان تقریبی مطالعه این آموزش : 15 دقیقه

آموزش تگ a در HTML
آموزش تگ a در HTML
معرفی و شناخت تگ a
معرفی و شناخت تگ a

1- معرفی و شناخت تگ a

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

در HTML برای لینک کردن مطالب ، صفحات ، محصولات و … از تگ a استفاده می شود که این موضوع سبب شده این تگ یکی از پرکاربردترین ها بوده و از نظر ظاهری و سئویی از اهمیت زیادی برای سایت ما برخوردار می باشد.

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

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

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

مثال :

<a> آموزش سئوی سایت </a><a>خواندن ادامه مطلب</a>

برای لینک کردن تگ a از خاصیتی با نام اِچ رِف href استفاده می کنیم.خاصیت href مشخص می کند که بعد از اینکه کاربر کلیک کرد چه صفحه باز شود.

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

نحوه استفاده از صفت href در تگ a به صورت زیر می باشد.

<a href="#">…</a>

به جای کارکتر # باید لینک یا اکشن مورد نظر خود را قرار دهید و دقت کنید که لینک باید بین کتیشن “your-link” قرار بگیرد.

برای اطلاع بیشتر از انواع لینک ، مقاله معرفی لینک ها را مطالعه کنید.

مثال :

<a href="https://google.com">مشاهده سایت گوگل</a>

مشاهده سایت گوگل

در مثال بالا با تگ a یک لینک ساختیم که دارای متن ( مشاهده سایت گوگل ) بوده و در صورت کلیک روی آن لینک داخل href که لینک سایت گوگل (google.com ) است را باز خواهد کرد.

نحوه بازکردن صفحه جدید در مرورگر و انواع آن در ادامه همین آموزش معرفی می شود.

نحوه ایجاد لینک در HTML
نحوه ایجاد لینک در HTML

2- نحوه ایجاد لینک در HTML

برای لینک کردن تگ a از خاصیتی با نام اِچ رِف href استفاده می کنیم.خاصیت href مشخص می کند که بعد از اینکه کاربر کلیک کرد چه صفحه باز شود.

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

نحوه استفاده از صفت href در تگ a به صورت زیر می باشد.

<a href="#">…</a>

به جای کارکتر # باید لینک یا اکشن مورد نظر خود را قرار دهید و دقت کنید که لینک باید بین کتیشن “your-link” قرار بگیرد.

برای اطلاع بیشتر از انواع لینک ، مقاله معرفی لینک ها را مطالعه کنید.

مثال :

<a href="https://google.com">مشاهده سایت گوگل</a>

مشاهده سایت گوگل

در مثال بالا با تگ a یک لینک ساختیم که دارای متن ( مشاهده سایت گوگل ) بوده و در صورت کلیک روی آن لینک داخل href که لینک سایت گوگل (google.com ) است را باز خواهد کرد.

توجه داشته باشید که برای باز کردن لینک های خارجی حتما از https:// در ابتدای لینک استفاده کنید در غیر این صورت به عنوان لینک داخلی تلقی می شود و احتمالا ارور 404 رخ خواهد داد.

برای اطلاع بیشتر در مورد لینک های داخلی و خارجی مقاله معرفی انواع لینک ها را مطالعه کنید.

نحوه بازکردن صفحه جدید در مرورگر و انواع آن در ادامه همین آموزش معرفی می شود.

معرفی انواع لینک و کاربرد آن ها
معرفی انواع لینک و کاربرد آن ها

3- معرفی انواع لینک و کاربرد آن ها

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

لینک آدرس اینترنتی

از این نوع لینک برای باز کردن آدرس اینترنتی یک صفحه وب استفاده می شود

مثال لینک خارجی :

<a href="https://ariatech.online/">طراحی سایت آریاتک</a>

مثال لینک داخلی :

<a href="/shop">مشاهده فروشگاه</a>

لینک تماس تلفنی

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

دقت داشته باشید که برای ساخت لینک تلفنی با تگ a حتما از عبارت :tel قبل از نوشتن شماره تلفن در تگ href استفاده کنید

مثال لینک تماس تلفنی :

<a href="tel:+989121234567">مشاوره تلفنی</a>

<a href="tel:09121234567">رزرو فوری</a>

<a href="tel:02188776655">تماس بگیرید</a>

لینک به شبکه های اجتماعی

مثال لینک به واتس آپ :

<a href="https://wa.me/Number">پیام واتس آپ</a>

به جای number شماره موبایل شما قرار می گیرد

مثال لینک به تلگرام :

<a href="hhttps://t.me/ID">ارتباط تلگرامی</a>

مثال لینک به اینستاگرام :

<a href="https://www.instagram.com/ID/">مشاهده اینستاگرام من</a>

به جای ID نام کاربری شبکه اجتماعی شما قرار می گیرد.

لینک به قسمتی از صفحه

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

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

برای استفاده از این ویژگی باید ابتدا برای قسمت مشخص شده یک آیدی ID در نظر گرفت سپس id آن قسمت را به عنوان لینک به تگ a  میدهیم.

مثال لینک اسکرولی :

<a href="#target-id">مشاهده فرم عضویت</a>

دقت کنید که به جای #target-id باید id قسمتی که قرار است اسکرول شود قرار بگیرد همچنین در href همیشه id با پیشوند شارپ # استفاده می شود.

لینک ارسال ایمیل

برای ارسال ایمیل از طریق تگ a  باید در قسمت href از عبارت :mailto قبل از آدرس ایمیل خود استفاده کنید.

مثال لینک ارسال ایمیل :

<a href="mailto:">ارسال ایمیل</a>

نحوه بازشدن لینک در مرورگر
نحوه بازشدن لینک در مرورگر

4- نحوه بازشدن لینک در مرورگر

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

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

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

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

نحوه استفاده از صفت target در تگ a به صورت زیر می باشد.

<a href="#" target="_blank">…</a>

رعایت دابل کوتیشن “” برای target هم ضروری است.

استفاده از عکس و ویدیو در لینک
استفاده از عکس و ویدیو در لینک

5- استفاده از عکس و ویدیو در لینک

در بسیاری از قسمت های سایت لازم است از یک عکس یا ویدیو به عنوان لینک قابل کلیک استفاده شود.در بیشتر سایت های آگهی و تبلیغاتی این مورد به وضوح قابل مشاهده است.

همچنین بسیاری از افکت های طراحی سایت آمیخته شده از عکس های مختلف که به جای متن  قابل لینک می باشند.

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

نحوه استفاده از تگ img در تگ a به صورت زیر می باشد.

<a href="#"> <img src="image-link"> </a>

در قسمت image-link آدرس تصویر مورد نظر قرار می گیرد.

درباره تگ img یبشتر بدانید

برای استفاده از ویدیو درون تگ a باید از تگ video استفاده کنیم.

نحوه استفاده از تگ img در تگ a به صورت زیر می باشد.

<a href="#"> <video><source src="video-link"></video> </a>

در قسمت video-link آدرس ویدیو مورد نظر قرار می گیرد.

درباره تگ video یبشتر بدانید

معرفی صفات تگ a
معرفی صفات تگ a

6- معرفی صفات و ویژگی های تگ a

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

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

صفتمقدار مجازتوضیحات
downloadfilenameبرای فایل های دانلودی و معرفی بهتر به گوگل استفاده می شود
hrefURLبرای لینک دادن به تگ استفاده می شود
hreflanglanguage_codeزبان مطالب لینک شده به تگ را مشخص می کند
mediamedia_queryبرای مشخص کردن رسانه یا دشتگاه لینک شده استفاده می شود
pinglist_of_URLsبرای مشخص سازی لینک ها و عملیات ترکینگ استفاده می شود
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
مشخص سازی نوع ارجاع دهنده
relalternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
مشخص سازی نحوه ارتباط لینک با صفحه مورد نظر
target_blank
_parent
_self
_top
مشخص سازی مکان باز شدن لینک جدید
typemedia_typeمشخص سازی نوع رسانه صفحه لینک شده

برای مشالعه بیشتر تگ a و مشاهده مثال های بیشتر به سایت w3schools مراجعه کنید.

مشاهده تگ a در w3schools.com

7- نکات مهم کار با تگ a

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

حتما در استفاده از لینک هایی تگ a صفت Alt و Title را با عبارت کلمه کلیدی لینک پر کنید زیرا در سئو و فهم ربات های گوگل تاثیر بسزایی دارد. تاثیر لینک در سئو را مطالعه کنید

برای استفاده از عکس در تگ لینک a استفاده از تگ <img> گفته شد ، علاوه بر آن با دادن css به تگ a می توان عکس مورد نظر را به عنوان دکمه نمایش داد. آموزش افزودن تصویر با css

برای بهینه شدن و کم حجم شدن کدهای HTML سایت می توان لینک های داخلی سایت را به صورت کوتاه وارد نمود که این کار باعث افزایش سرعت سایت و سئو بهتر صفحه شما می شود.

دقت کنید که از این روش فقط می توانید در سایت خود استفاده کنید .

لینک داخلی و خارجی چیست؟

مثال :

لینک بلند ( قابل استفاده عمومی )

https://ariatech.online/html-learning

لینک کوتاه (قابل استفاده فقط در سایت مرجع)

/html-learning

برای سئو بهتر صفحه سعی کنید کلمه کلیدی حداقل یک بار در تگ لینک استفاده شود.

تگ لینک را می توان همراه با هدینگ های h1  تا h6  هم استفاده نمود که به صورت تودرتو نوشته خواهند شد.

این اموزش اینجا به پایان نمیرسه و مطالب جدیدی راجع به تگ a به این مقاله اضافه خواهد شد.

حتما سوالات خود را در بخش کامنت از ما بپرسید

مشاهده و افزودن کامنت

سایر آموزش های HTML

5 2 votes
امتیاز کاربران
guest
0 Comments
Inline Feedbacks
View all comments