تگ a یا لینک (پیوند) در html + آموزش ایجاد

آموزش ایجاد تگ a یا لینک (پیوند) در html

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

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

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

زمان مطالعه: 3 دقیقه
بازدید: 2541
پرسش و پاسخ: 0

لینک ها در html (تگ a)

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

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

نحوه مشخص کردن یک لینک در html با تگ a

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

<a href="url">متن نمایشی</a>

مثال از لینک به آژانس دیجیتال مارکتینگ جاب تیم

<a href="https://jobteam.ir/">Visit jobteam.ir</a>

به طور پیش فرض لینک ها در مرورگرها با ویژگی های زیر مشخص می شوند:

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

فراموش نکنید که این ظاهر به صورت پیش فرض می باشد و شما می توانید با سی اس اس استایل متفاوتی برای لینک های خود تعیین کنید.

خصوصیت target در لینک ها (تگ a)

به صورت پیش فرض پیوند (لینک ها) در همان صفحه باز می شوند اما می توانید با خصوصیت target این رویه را تغییر دهید مقادیری که این خصوصیت به خود می گیرد به شرح ذیل می باشد.

  • _self صفحه را در همان پنجره / برگه ای که روی آن کلیک شده باز می کند
  • _blank آدرس را در یک پنجره یا برگه جدید باز می کند
  • _parent 
  • _top 

لینک های کامل و نسبی با تگ a چگونه ساخته می شوند؟

لینک های کامل شامل کل آدرس سایت مورد نظر هستند ولی در سایت خودتان می توانید لینک هایی بزارید که نسبی باشند یعنی قسمتی از لینک را مشخص کنید و نیازی نیست آدرس اصلی سایت را وارد کنید.

<h2>لینک های کامل</h2>
<p><a href="https://jobteam.ir/">jobteam</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>لینک های داخلی و نسبی</h2>
<p><a href="/category/Html">HTML Tutorial</a></p>
<p><a href="/category/Css">CSS Tutorial</a></p>

استفاده از تصویر بعنوان لینک با استفاده از تگ a

برای استفاده از یک تصویر به عنوان لینک، فقط تگ <img> را درون تگ<a> قرار دهید

<a href="category/Html">
<img src="img/logo.png" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

لینک به شماره تلفن (تماس) با تگ a

با استفاده از tel: در داخل خصوصیت href می توانید این کار را انجام دهید

<a href="tel:09223857998">09223857998</a>

لینک به آدرس ایمیل استفاده از a

با استفاده از mailto: در داخل خصوصیت href می توانید این کار را انجام دهید

<a href="mailto:someone@example.com">Send email</a>

لینک دادن به دکمه در html یا تبدیل دکمه (button) به لینک

برای تبدیل دکمه یک لینک در html یا لینک دادن به دکمه در html باید یک کد جاوا اسکریپت به ویژگی onclick دکمه اضافه کنید به شکل ذیل تا با کلیک بر روی آن مثل یک تگ a عمل کند.

<button onclick="document.location='category/Html'">HTML Tutorial</button>

خصوصیت عنوان (title) لینک در تگ a

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

<a href="https://jobteam.ir/category/Html" title="Go to Jobteam HTML section">Visit our HTML Tutorial</a>

ویژگی rel در تگ a

ویژگی rel در تگ a کمک می کند رابطه صفحه فعلی با صفحه مقصد را مشخص کنید.

<a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>

تگ a و ویژگی rel

این ویژگی رابطه بین سند جاری و سند پیوند شده را مشخص می کند.

این ویژگی فقط در صورت وجود ویژگی href استفاده می شود.

نکته: موتورهای جستجو می توانند از این ویژگی برای دریافت اطلاعات بیشتر در مورد بک لینک استفاده کنند. (خرید بک لینک)

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

در تصویر زیر ما پشتیبانی مرورگرهای مختلف از ویژگی rel را به شما نشان داده ایم.

پشتیبانی مرورگرها از ویژگی rel لینک

مقادیر ویژگی rel برای تگ a

در جدول زیر مقادیری که ویژگی rel می تواند بگیرد و در مبحث سئو سایت بسیار مهم هست را برای شما شرح داده ایم.

مقادیر خصوصیت rel در تگ a

مقدار

توضیحات

Alternate

یک پیوند به یک نمایش جایگزین از سند ارائه می دهد (یعنی صفحه چاپ، ترجمه صفحه)

Author

پیوندی به نویسنده سند ارائه می دهد

Bookmark

URL دائمی مورد استفاده برای نشانه گذاری

External

نشان می دهد که سند ارجاع شده بخشی از همان سایت سند فعلی است

Help

پیوندی به یک سند راهنما ارائه می دهد

License

پیوندی به اطلاعات مجوز سند ارائه می دهد

Next

پیوندی به سند بعدی این مجموعه ارائه می دهد

Nofollow

پیوند به یک سند تایید نشده، مانند لینک پرداخت (“nofollow” توسط google استفاده می شود تا مشخص شود که اسپایدرهای جستجوی google نباید از آن پیوند پیروی کند)

Noopener

به منظور جلوگیری از سرقت اطلاعات و ایجاد کدهای مخرب

Noreferrer

برای غیر قابل تشخیص کردن لینک های خروجی وبسایت تان برای سایت هایی که به آن ها لینک داده اید

Prev

پیوند به سند قبلی این مجموعه را ارائه می دهد

Search

پیوند هایی  به یک ابزار جستجو برای سند

Tag

یک برچسب (کلمه کلیدی) برای سند فعلی

بهزاد میرزازاده
مسیر درست با پرسش های درست ساخته می شود

مشاهده تمام مطالب نویسنده