HTML Links

در این مطلب قصد داریم تا روش ایجاد لینک link در html و صفات لینک ها را آموزش دهیم، با ما همراه باشید…


وب سایت ها از صفحه وب هایی تشکیل شده اند که به یکدیگر ارتباط دارند. در html به این ارتباط ها link می گویند. link ها در تقریبا تمام صفحات وب یافت می شود. لینک ها کاربران را قادر می سازد برای هدف مورد نظرشان از صفحه ای به صفحه ای دیگر کلیک کنید.

HTML Links – Hyperlinks

لینک های HTML در واقع hyperlinks هستند . شما می توانید بر روی یک link کلیک کنید و به صفحه دیگری بروید. هنگامی که ماوس را روی یک link حرکت می دهید، نشانه گر ماوس به یک دست کوچک تبدیل می شود.

نکته: یک link لزوما یک متن نیست بلکه می تواند یک تصویر یا هر عنصر HTML دیگری باشد.

HTML Links – Syntax

html از تگ <a> و </a> برای ساخت یک پیوند یا linkاستفاده می کند. مانند :


در HTML در واقع در صفحات وب برای ایجاد لینک به سایر صفحات از تگ a استفاده می شود که در کنار href کامل می شود، عبارت a مخفف anchore یا لنگر است و href مخفف Hypertext Reference یا ابر متنی است که حاوی لینک (hyperlink) به صفحه دیگری است، به نمونه کد زیر دقت کنید:

کد بالا را در ادیتور خود تایپ کنید و خروجی را مشاهده کنید.

عبارتی که برای مقادیر href در نظر گرفته می شود، در واقع همان آدرس URL مقصد است که می خواهیم کاربر پس از کلیک بر روی متن “کلیک کنید” به آن هدایت شود.


نکته: محتوای لینک ها در حالت پیش فرض در همان صفحه فعلی نمایش داده می شوند، به عبارتی جایگزین صفحه فعلی می شوند، اما با تنظیم پارامتر target که در ادامه خواهیم دید، می توان رفتار آنها را تغییر داد.

HTML Links – The target Attribute

لینک ها به صورت پیش فرض در همان پنجره نمایش داده می شوند، اما ممکن است بخواهیم پس از کلیک کاربر، پنجره فعلی حفظ شده و به جای آن، محتوای لینک در پنجره جدیدی نمایش داده شود، بدین منظور از پارامتری به نام target استفاده می کنیم.

پارامتر target مقادیر متفاوتی می پذیرد که به صورت تیتروار در زیر ملاحظه می کنید.
– blank_ : نمایش محتوای لینک در پنجره جدید.
– parent_ : نمایش محتوای لینک در پنجره والد (معمولا در حالتی استفاده می شود که لینک از یک frame فراخوانی شود).
– self_ : نمایش محتوای لینک در پنجره فعلی (حالت پیش فرض).
– top_ : نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).
– نام frame : برای پارامتر terget می توان نام یک frame را نیز قرار داد، بدین ترتیب محتوای لینک در داخل فریم نمایش داده خواهند شد.

کد زیر یک نمونه است آن را در ادیتور خود تایپ کنید و مقادیر متفاوت را برای ویژگی target قرار دهید و خروجی را مشاهده کنید.

HTML Links – Link Title

تگ a با خاصیت های دیگری کامل تر می شود که از آن جمله می توان title را نام برد، استفاده از title اجباری نیست، اما می تواند از نظر بهینه بودن لینک های سایت مفید باشد. ویژگی title اطلاعات اضافی در مورد این element را مشخص می کند. این اطلاعات اغلب به عنوان یک متن زمانی که ماوس روی عنصر حرکت می کند نمایش داده می شود.

به نمونه کد زیر دقت کنید و پس از آنکه این کد را در ادیتور خود وارد کردید خروجی را مشاهده کنید.

HTML Links – Image as Link

hypertext یا متن حاوی لینک می تواند به صورت محتوای غیر متنی نیز باشد، به طور مثال می توان یک تصویر را با استفاده از تگ img در این قسمت درج کرد، به مثال زیر توجه کنید.

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

دو نوع آدرس دهی می توان در href تعیین کرد :

آدرس مطلق

این نوع آدرس دهی، معمولا لینک به سایتی دیگر است. مانند :

آدرس نسبی

این نوع آدرس دهی، معمولا لینک به صفحاتی است که در سایت خودمان قرار دارد. مانند :

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

HTML Links – Create a Bookmark

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

مثال

ابتدا یک بوک مارک با ویژگی id ایجاد کنید:

سپس، یک لینک را به بوک مارک از همان صفحه اضافه کنید (” Jump to Chapter 4 “)، :

یا یک لینک از یک صفحه دیگر به بوک مارک (” Jump to Chapter 4 “)، اضافه کنید

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

با ما همراه باشد…

معرفی HTML – جلسه دهم

دیدگاهتان را بنویسید

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