لینک در HTML (پیوند)
با تگ a می توان، یک پیوند (لینک) درست کرد.
برای اینکه بتوانید هنگام کلیک بر روی متن، کاربر را از صفحه ای به صفحه ی دیگر منتقل کنید باید از تگ a استفاده کنید.
<a href="url">متن پیوند</a>این تگ دارای ویژگی های زیادی است:
- ویژگی href: آدرس صفحه مقصد
- ویژگی target: نوع باز شدن پیوند را مشخص می کند
- ویژگی title: توضیحاتی به صورت نکته نظر (tooltip) در رابطه با صفحه مقصد
ساختار تگ a به صورت زیر است:
برای مشاهده همه ویژگی های تگ پیوند به صفحه مرجع تگ 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: مقصد لینک را در قالب اصلی باز می کند. (برای اطلاع بیشتر از این مقدار به صفحه ویژگی target بروید)
ویژگی title در تگ a
ویژگی title در تگ a، باعث ایجاد نکته ابزار(tooltip) می شود. با نگه داشتن ماوس روی پیوند، متن درون title نمایش داده می شود.
ویژگی title، یک ویژگی سراسری می باشد و در تگ های دیگر هم قابل استفاده است.
معمولا در ویژگی title، اطلاعاتی درباره صفحه مقصد گذاشته می شود.
<a href="https://pnldev.com" title="سایت PNLdev"></a>لینک به تلفن یا موبایل با تگ a
با تگ a در HTML می توان به یک شماره موبایل لینک داد.
نکته: اگر کاربر در گوشی موبایل روی تگ a کلیک کند. با آن شماره موبایل وارد بخش تماس ها می شود.
از طریق لینک دار کردن شماره تلفن ، کاربر میتواند با کلیک کردن روی شماره تلفن شما مستقیما با شما تماس بگیرد.
این کاربرد معمولا برای موبایل و تبلت ها به کار میرود.
<a href="tel:09120000000">تماس با ما</a>نکته: به جای 09120000000 میتوانید شماره تلفن موردنظر خودرا وارد کنید.
لینک به ایمیل
با ایجاد لینک برای ایمیل در سایت کاربران با کلیک بر نام ایمیل مستقیما وارد صفحه ارسال ایمیل برای شما میشوند.
برای ایجاد باید از ترکیب mailto:email address در تگ <a> استفاده کنید.
<a href="mailto:emailaddress@example.com">ارسال ایمیل</a>نکته: استفاده از لینک ایمیل در وبسایت ممکن است مشکل اسپم(هرزنامه) توسط برخی افراد برایتان ایجاد کند پس میتوانید از طریق فرم های HTML داده ها و نظرات کاربران را جمع آوری کنید.
لینک درون صفحه (bookmark)
با استفاده از تگ a و ویژگی id می توانید کاربر را درون یک صفحه از جا به جا کنید.
کاربر با کلیک روی این لینک ها به بخش دیگری از همان صفحه منتقل می شود.
برای درک بهتر به نمونه کد زیر توجه کنید.
<p><a href="#p2">رفتن به قسمت دوم</a></p>
<p><a href="#p7">رفتن به قسمت هفتم</a></p>خلاصه درس
- برای گذاشتن پیوند از تگ <a> استفاده می شود.
- از ویژگی href برای تعیین آدرس پیوند استفاده می شود.
- از ویژگی taget برای نحوه پیوند شدن استفاده می شود.
- همچنین از ویژگی title برای درک بهتر پیوند استفاده می شود.
تمرین
برای تگ a از ویژگی href استفاده کنید.
لینک https://pnldev.com/fa/tutorial/html در ویژگی href قرار دهید.
احسان اسلامی
