لینک در HTML (پیوند)
با تگ a می توان، یک پیوند (لینک) درست کرد.
برای اینکه بتوانید هنگام کلیک بر روی متن، کاربر را از صفحه ای به صفحه ی دیگر منتقل کنید باید از تگ a استفاده کنید.
<a href="url">متن پیوند</a>این تگ دارای ویژگی های زیادی است:
- ویژگی href: آدرس صفحه مقصد
- ویژگی target: نوع باز شدن پیوند را مشخص می کند
- ویژگی title: توضیحاتی به صورت نکته نظر (tooltip) در رابطه با صفحه مقصد
ساختار تگ a به صورت زیر است:
ویژگی href در تگ a
در واقع href آدرس صفحه مقصد را مشخص می کند.
<a href="https://pnldev.com">PNLdev</a>
<a href="https://www.google.com">Google</a>در نمونه کد بالا، با کلیک روی google وارد سایت گوگل می شویم و با کلیک بر PNLdev وارد سایت PNLdev می شویم.
ما می توانیم تگ ها را به صورت تودرتو و در داخل یکدیگر استفاده کنیم.
<a href="https://pnldev.com">
<img src="https://pnldev.com/storage/refrence/category/html.png" alt="image html">
</a>همانطور که در نمونه کد بالا می بینید، داخل تگ a از تگ img به صورت تودرتو (nested) استفاده شده است.
در واقع تصویر خاصیت پیوند شدن را گرفته است.
نکته: برای اطلاعات بیشتر درباره ی آدرس دهی به صفحه آدرس دهی HTML مراجعه کنید.
ویژگی target در تگ a
یکی دیگر از ویژگی هایی که تگ a دارد ویژگی target است.
این ویژگی نحوه باز شدن صفحه را مشخص می کند. آیا در همان صفحه یا در صفحه دیگری باز شود.
برای درک بهتر روی پیوند های نمونه کد زیر کلیک کنید.
<a href="https://pnldev.com" target="_self"></a>
<a href="https://pnldev.com" target="_blank"></a>
<a href="https://pnldev.com" target="_parent"></a>
<a href="https://pnldev.com" target="_top"></a>ویژگی target مقدار های زیر را دریافت می کند:
_self: در همان صفحه باز می شود. (پیشفرض)
_blank: در صفحه دیگری (new tab) باز می شود.
_top: در بالاترین صفحه باز می شود. (برای اطلاع بیشتر از این مقدار به صفحه ویژگی target بروید)
_parent: مقصد لینک را در والد iframe باز می کند. (برای اطلاع بیشتر از این مقدار به صفحه ویژگی target بروید)
ویژگی title در تگ a
ویژگی title در تگ a، باعث ایجاد نکته ابزار(tooltip) می شود. با نگه داشتن ماوس روی پیوند، متن درون title نمایش داده می شود.
ویژگی title، یک ویژگی سراسری می باشد و در تگ های دیگر هم قابل استفاده است.
معمولا در ویژگی title، اطلاعاتی درباره صفحه مقصد گذاشته می شود.
<a href="https://pnldev.com" title="سایت PNLdev"></a>لینک به تلفن با تگ a
با تگ a در HTML می توان به یک شماره تلفن لینک داد.
برای ایجاد باید از ترکیب tel:phone number در تگ <a> استفاده کنید.
<a href="tel:09120000000">تماس با ما</a>نکته: اگر کاربر در گوشی موبایل، روی تگ a کلیک کند. با آن شماره موبایل وارد بخش تماس ها می شود.
این کاربرد معمولا برای موبایل و تبلت ها به کار می رود.
لینک به ایمیل با تگ a
با ایجاد لینک برای ایمیل در سایت، کاربران با کلیک بر نام مستقیما وارد صفحه ارسال ایمیل برای شما میشوند.
برای ایجاد باید از ترکیب mailto:email address در تگ <a> استفاده کنید.
<a href="mailto:emailaddress@example.com">ارسال ایمیل</a>لینک درون صفحه (bookmark)
با استفاده از تگ a و ویژگی id می توانیم کاربر را درون یک صفحه جا به جا کنیم.
کاربر با کلیک روی این لینک ها به بخش دیگری از همان صفحه منتقل می شود.
برای درک بهتر به نمونه کد زیر توجه کنید.
<p><a href="#p2">رفتن به قسمت دوم</a></p>
<p><a href="#p5">رفتن به قسمت پنجم</a></p>خلاصه درس
- برای گذاشتن پیوند از تگ <a> استفاده می شود.
- از ویژگی href برای تعیین آدرس پیوند استفاده می شود.
- از ویژگی taget برای نحوه پیوند شدن استفاده می شود.
- همچنین از ویژگی title برای درک بهتر پیوند استفاده می شود.
تمرین
برای تگ a از ویژگی href استفاده کنید.
لینک https://pnldev.com/fa/tutorial/html در ویژگی href قرار دهید.
احسان اسلامی
