آموزش طراحی سایتآموزش HTML

تگ a در HTML

تگ a در HTML چیست و چه کاربردی دارد؟ معروف‌ترین و متداول‌ترین روش لینک دهی در HTML چیست؟ تغییر رنگ “تگ a” به چه صورت است و چگونه می‌توانیم تگ a را استایل دهی کنیم؟ اگر به دنبال پاسخ این سوالات هستید و قصد دارید با خصوصیات یا صفات تگ a در html و کاربرد تگ a در html به صورت جامع و به همراه مثال آشنا شوید این مقاله را به هیچ عنوان از دست ندهید. هم چنین در این مقاله 13 صفت (یا همان ویژگی به انگلیسی attribute گفته می‌شود) پرکاربرد تگ a را با هم بررسی خواهیم کرد.

معرفی تگ a

در این مقاله قصد داریم تا شما را با تگ a آشنا کنیم. لینک‌ها با استفاده از تگ <a> ایجاد می شوند. کاربران می‌توانند بر روی هر چیزی که  بین این تگ <a> Text </a> قرار گرفته کلیک کنند. شما با استفاده از خاصیت href صفحه‌ای که قصد باز شدن آن را دارید را تعیین می‌کنید.
متنی که در بین تگ <a> قرار می‌گیرد به عنوان متن لینک شناخته می‌شود. تا جای ممکن به جای اکتفا کردن به متن “اینجا را کلیک کنید”، متن لینک باید برای بازدید کننده موضوع صفحه مقصد را توضیح دهد.
بسیاری از مخاطبان، وبسایت‌ها را برای پیدا کردن لینک‌ها از بین متن‌ها جستجو می‌کنند. متن link شفاف می‌تواند به مخاطبانتان کمک کند تا چیزی که نیاز دارند را پیدا کنند.

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

برای آشنایی کامل با لینک‌ها می‌توانید مقاله ما در رابطه با آشنایی به لینک‌ها و روش‌های لینک‌سازی را بخوانید.

لینک کردن به سایر وبسایت ها

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

لینک کردن به صفحات داخلی وبسایت

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

<p>
<ul>
<li><a href="mizfa.html">خانه</a></li>
<li><a href="about-us.html">درباره ما</a></li>
<li><a href="seo.html">سـئو</a></li>
<li><a href="contact-us.html">تماس با ما</a></li>
</ul>
</p>

لینک کردن به صفحات داخلی وبسایت

آدرس‌های وابسته

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

انواع لینک وابسته

به پوشه یکسان

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

<a href="seo.html"> SEO </a>

ایجاد پیوند به پوشه یکسان

پوشه زیر مجموعه

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

<a href="seo/local.html"> Local SEO </a>

لینک سازی پوشه زیر مجموعه

پوشه نوه

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

<a href="seo/local/optimize.html"> Optimizing Website </a>

پیوند پوشه نوه

پوشه والدین

با استفاده از ../ می‌توان از بالاترین پوشه فعلی به صفحه مورد نظر لینک‌دهی کرد.

<a href="../local.html"> Local Seo </a>

ایجاد لینک پوشه والدین

پوشه والدین بزرگ

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

<a href="../../Optimize.html"> Optimizing Seo </a>

لینک سازی پوشه والدین بزرگ

لینک ایمیل

برای ساخت یک لینک که برنامه ایمیل کاربر را اجرا می‌کند و به ایمیل خاصی اشاره می‌کند، می توانید از تگ <a> استفاده کنید. اما این بار مقدار خاصیت href با عبارت mailto: آغاز می‌شود و در ادامه آن ایمیلی که قصد ارسال پیام به آن را دارید نوشته می‌شود.
در ظاهر این لینک با یک لینک معمولی به یک صفحه هیچ تفاوتی ندارد اما هنگامی که کاربر روی آن کلیک می‌کند، برنامه مدیریت ایمیل کاربر باز می‌شود و یک صفحه ارسال ایمیل با آدرس تعیین شده به نمایش در خواهد آمد.

<a href="mailto:info@mizfa.com"> Email </a>

لینک ایمیل

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

اگر قصد دارید یک link را در صفحه جدید مرورگر باز کنید، باید از خاصیت target موجود در تگ <a> استفاده کنید. مقدار این خاصیت باید برابر با _blank باشد.
یکی از دلایل مهمی که صاحب وبسایت می‌خواهد لینک در صفحه جدیدی باز شوند این است که آن لینک به وبسایت دیگری اشاره می‌کند. در این حالت مدیر وبسایت امیدوار است کاربر بعد از بازدید از لینک و صفحه باز شده به صفحه مبدا بازگردد.

<a href="https://mizfa.com/blog" target="_blank"> Mizfa Blog </a>

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

لینک به بخش خاصی از صفحه فعلی

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

مثال‌های بالا از مهم‌ترین نمونه های استفاده از این نوع لینک هستند. قبل از اینکه لینک‌بخشی از صفحه را ایجاد کنید، باید نقطه‌هایی که قصد انتقال کاربر به آن‌ها را دارید را مشخص کنید. با استفاده از خاصیت id هر یک از المان‌های html می‌توانید نقاط را تعیین کنید. به عنوان مثال با تعریف id برای تگ‌های <h> می‌توان این بخش ها را از یک دیگر جدا کرد.

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

برای لینک‌کردن به یک المان که از خاصیت  id استفاده می‌کند می‌بایست دوباره به سراغ تگ <a> برویم، این بار مقدار خاصیت href با علامت # آغاز می‌شود و سپس مقدار خاصیت id المان مورد نظر.

<h1 id="top"> Seo Terms </h1>
<a href="#local"> Local Seo </a> <br>
<a href="#external"> External Seo </a> <br>
<a href="#optimize"> Optimize Page </a> <br> <br>
<h2 id="local"> Local Seo </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<h2 id="external"> External Seo </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<h2 id="optimize"> Optimize Page </h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p> <a href="#top"> Top </a></p>

See the Pen A Tag in HTML by MIZFA.COM (@mizfa) on CodePen.

 

لینک به بخشی از صفحه دیگر

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

بدین منظور خاصیت href باید شامل آدرس صفحه(آدرس وابسته یا مطلق) و پس از آن علامت # و نام id تعیین شده در صفحه مقصد باشد.

<a href="../image.html/#local"> Local Seo </a> 

لینک به بخشی از صفحه دیگر

صفات تگ a

تگ a دارای صفات مختلفی است که مهمترین آن صفت href‌ برای ایجاد پیوند و لینک است. البته فراموش نکنیم که مانند باقی تگ‌های HTML بعضی از صفات موجود در آخرین نسخه HTML‌ یعنی HTML5 پشتیبانی نمی‌شود.

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

 

ردیف صفت ها مقدار توضیحات
۱ charset char_encoding

این صفت در HTML5 پشتیبانی نمی‌شود.

مجموعه کارکتر‌های مجاز در سند لینک شده را مشخص می‌کند.

۲ coords coordinates

این صفت در HTML5 پشتیبانی نمی‌شود.

مختصات یک لینک را مشخص می‌کند.

۳ download filename

این صفت در HTML 5 اضافه شده است.

با این صفت وقتی کاربر روی لینک کلیک می‌کند، مرورگر محتویات لینک را دانلود می‌کند.

۴ href URL آدرس URL لینک را با استفاده از این صفت وارد می‌کنیم.
۵ hreflang language_code زبان لینک را مشخص می‌کند.
۶ media media_query با این صفت رسانه یا دستگاه لینک شده را مشخص می‌کند.
۷ name section_name

این صفت در HTML5 پشتیبانی نمی‌شود. به جای آن از صفت عمومی id استفاده کنید.

یک نام اختصاصی برای لینک مشخص می‌کند.

۸ ping list_of_URLs

یک عملیات ping را برای ردیابی لیستی از لینک‌ها در پس‌زمینه انجام می‌دهد.

۹ 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 نوع رسانه را مشخص می‌کند.

صفات عمومی

تگ <a> از صفات عمومی HTML پشتیبانی می‌کند.

صفات رویدادی

تگ <a> از صفات رویدادی پشتیبانی می‌کند.

نتیجه گیری

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

امیدوارم از این قسمت آموزش HTML استفاده لازم را برده باشید. شما می‌توانید از طریق برچسب‌ها مقالات مربوط به لینک‌سازی را دنبال کنید.

دیگر آموزش‌های HTML را در بلاگ میزفا دنبال کنید.

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

‫2 نظرها

    1. سلام دوست من، ممنونم از پیامتون و خوشحالم مقاله براتون مفید بوده. برای اطلاع از آخرین آموزش های منتشر شده در میزفا میتونید در خبرنامه میزفا عضو بشید. موفق باشید… ?

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر