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

زمان مطالعه
3 دقیقهتعداد بازدید
1624تعداد پرسش ها
0برچسب ها :
نکات html
تگ a یا لینک (پیوند) در html

زمان مطالعه
3 دقیقهتعداد بازدید
1624تعداد پرسش ها
0برچسب ها :
نکات htmlدر مبحث برنامه نویسی عموما با لینک ها در ارتباط هستیم لینک ها را می توان با html ایجاد کرد. لینک ها در همه صفحات وب یافت می شوند. لینکها به کاربران این امکان را می دهند تا از صفحه به صفحه دیگر مسیر خود را کلیک کنند.
لینک ها در html (تگ a)
همانطور که اشاره کردیم با استفاده از لینک ها (تگ a، انکر تکست) می توانید وارد صفحات مختلف، در سایت شوید یا به صفحات خارج از سایت (سایت دیگر) منتقل شوید.
وقتی ماوس رو روی یک لینک نگه دارید علامت ماوس به شکل یک دست کوچک تبدیل می شود. همچنین لازم نیست یک لینک حتما جزوی از یک متن باشد لینک های می توانند تصویر یا هر عنصر دیگری در صفحه باشند.
نحوه مشخص کردن یک لینک در html با تگ a
با استفاده از تگ a می توانید یک لینک را مشخص کنید که href مشخص کننده آدرس صفحه مقصد می باشد و متن نمایشی متنی است که کاربر می بینید
<a href="url">متن نمایشی</a>
مثال از لینک به سایت جاب تیم
<a href="https://jobteam.ir/">Visit jobteam.ir</a>
به طور پیش فرض لینک ها در مرورگرها با ویژگی های زیر مشخص می شوند
- یک لینک بازدید نشده ، زیرخط دار و آبی است
- یک لینک بازدید شده زیرخط دار و بنفش است
- یک لینک فعال زیرخط دار و قرمز است
فراموش نکنید که این ظاهر به صورت پیش فرض می باشد و شما می توانید با css استایل متفاوتی برای لینک های خود تعیین کنید.
خصوصیت target در لینک ها
به صورت پیش فرض پیوند (لینک ها) در همان صفحه باز می شوند اما می توانید با خصوصیت target این رویه را تغییر دهید مقادیری که این خصوصیت به خود می گیرد به شرح ذیل می باشد.
- _self صفحه را در همان پنجره / برگه ای که روی آن کلیک شده باز می کند
- _blank آدرس را در یک پنجره یا برگه جدید باز می کند
- _parent
- _top
لینک های کامل و نسبی
لینک های کامل شامل کل آدرس سایت مورد نظر هستند ولی در سایت خودتان می توانید لینک هایی بزارید که نسبی باشند یعنی قسمتی از لینک را مشخص کنید و نیازی نیست آدرس اصلی سایت را وارد کنید.
<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>
استفاده از تصویر بعنوان لینک
برای استفاده از یک تصویر به عنوان لینک، فقط تگ <img> را درون تگ<a> قرار دهید
<a href="category/Html">
<img src="img/logo.png" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
لینک به شماره تلفن (تماس)
با استفاده از tel: در داخل خصوصیت href می توانید این کار را انجام دهید
<a href="tel:09223857998">09223857998</a>
لینک به آدرس ایمیل
با استفاده از mailto: در داخل خصوصیت href می توانید این کار را انجام دهید
<a href="mailto:someone@example.com">Send email</a>
تبدیل دکمه (button) به لینک
برای تبدیل دکمه یک لینک در html باید یک کد جاوا اسکریپت به ویژگی onclick دکمه اضافه کنید به شکل ذیل تا با کلیک بر روی آن مثل یک تگ a عمل کند
<button onclick="document.location='category/Html'">HTML Tutorial</button>
عنوان (title) لینک
عناوین در واقع توضیحات اضافه می باشند که وقتی ماوس را روی لینک نگه می دارید ظاهر می شوند عناوین در سئو کمک بسزایی می کنند و بهتر است همیشه مقداردهی شوند
<a href="https://jobteam.ir/category/Html" title="Go to Jobteam HTML section">Visit our HTML Tutorial</a>
ویژگی rel تگ یا عنصر a
میخواهیم یادگیری این ویژگی را با مثالی برای شما توضیح دهیم.
<a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>
این ویژگی رابطه بین سند جاری و سند پیوند شده را مشخص می کند.
این ویژگی فقط در صورت وجود ویژگی href استفاده می شود.
نکته: موتورهای جستجو می توانند از این ویژگی برای دریافت اطلاعات بیشتر در مورد بک لینک استفاده کنند.
پشتیبانی مرورگرها از ویژگی rel
در تصویر زیر ما پشتیبانی مرورگرهای مختلف از ویژگی rel را به شما نشان داده ایم.
مقادیر ویژگی rel
در جدول زیر مقادیری که ویژگی rel می تواند بگیرد و در مبحث سئو سایت بسیار مهم هست را برای شما شرح داده ایم.
مقدار |
توضیحات |
Alternate |
یک پیوند به یک نمایش جایگزین از سند ارائه می دهد (یعنی صفحه چاپ، ترجمه صفحه) |
Author |
پیوندی به نویسنده سند ارائه می دهد |
Bookmark |
URL دائمی مورد استفاده برای نشانه گذاری |
External |
نشان می دهد که سند ارجاع شده بخشی از همان سایت سند فعلی است |
Help |
پیوندی به یک سند راهنما ارائه می دهد |
License |
پیوندی به اطلاعات مجوز سند ارائه می دهد |
Next |
پیوندی به سند بعدی این مجموعه ارائه می دهد |
Nofollow |
پیوند به یک سند تایید نشده، مانند لینک پرداخت (“nofollow” توسط google استفاده می شود تا مشخص شود که اسپایدرهای جستجوی google نباید از آن پیوند پیروی کند) |
Noopener |
به منظور جلوگیری از سرقت اطلاعات و ایجاد کدهای مخرب |
Noreferrer |
برای غیر قابل تشخیص کردن لینک های خروجی وبسایت تان برای سایت هایی که به آن ها لینک داده اید |
Prev |
پیوند به سند قبلی این مجموعه را ارائه می دهد |
Search |
پیوند هایی به یک ابزار جستجو برای سند |
Tag |
یک برچسب (کلمه کلیدی) برای سند فعلی |


جایگزین الکسا: ماجرای بازنشستگی الکسا و معرفی بهترین ابزارها برای جایگزینی آن

تگ audio در HTML

تگ video در HTML

تگ head در زبان نشانه گذاری HTML

تگ iframe در زبان نشانه گذاری HTML
تگ کنونیکال چیست؟ صفر تا صد کنونیکال + آموزش استفاده
آموزش جامع هشتگ گذاری در اینستاگرام ۰ تا ۱۰۰

تگ picture در html

تگ map (نقشه تصویری) در html

تگ های نقل قول و استناد در html (Quotation and Citation)

لینک فارسی یا انگلیسی،کدام url در سئو می تواند بهتر باشد؟

سئو سایت فروشگاهی بهمراه چک لیست کامل

سایت مپ نکات و موارد مهم درباره ثبت نقشه سایت در گوگل

پشتیبانی سایت + موارد، هزینه و تعرفه ها

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

حذف سشن (session) سبد خرید برگشت از درگاه پرداخت در لاراول

نصب کتابخانه در پایتون

ارجاع دهنده یا منبع ورودی کاربر به سایت شما

استراتژی سئو به زبان ساده

مشکل sql_mode=only_full_group_by در لاراول (laravel)