آموزش رایگان HTML: قسمت سیزدهم: لینک‌ها در HTML

۰۷ خرداد ۱۳۹۹
زهرا فتوحی نیا

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

شما با کلیک کردن بر روی یک قسمت از متن یک لینک را فعال می‌کنید و به مکان یا محتوای خاصی متصل می‌شوید. شما نیز احتمالا بر روی هزاران لینک بدون اینکه به برنامه‌نویسی پشت آن فکر کنید، کلیک کرده‌اید. در این قسمت شما با تگ <a> در HTML که برای ایجاد انواع مختلف لینک‌ها استفاده می‌شود، آشنا می‌شوید. با نحوه متصل شدن به صفحات دیگر و آدرس‌های پست الکترونیکی آشنا خواهید شد.

آنچه در این مطلب می‌خوانید!

اتصال به صفحات وب با لینک‌ها
استفاده از مسیرهای نسبی Relative و مطلق Absolute
تنظیمات لینک با ویژگی target
لینک‌ دادن به یک آدرس ایمیل
ایجاد لینک لنگر یا انکر (Anchor)
- روش اول: استفاده از id برای تگ مورد نظر
روش دوم: تعیین name برای تگ <a>
- جمع‌بندی و سخن پایانی

زمان تخمین زده شده مطالعه: ۷ دقیقه

بیشتر بدانید: «کار با رنگ‌ها در HTML»

اتصال به صفحات وب با لینک‌ها

مهم نیست که شما چه نوع لینکی می‌خواهید ایجاد کنید، دستور آن‌ها یکسان است. با یک تگ <a> شروع می‌شود و سپس از یک ویژگی href=URL که برای تعیین آدرس مکانی که قرار است با کلیک بر روی محتوای درون تگ به آنجا متصل شوید، استفاده می‌شود. در نهایت نیز تگ پایانی بکار برده می‌شود. برای مثال به دستور زیر توجه کنید.

<a href="url">link text</a>

به قطعه کد زیر توجه کنید.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
click <a href="http:https://www.bamadoon.com"> Bamadoon </a> for visit site
</body>
</html>

زمانی که در مرورگر خروجی این قطعه کد را مشاهده می‌کنید، به صورت زیر می‌باشد.

لینک‌ها پیش‌فرض در خروجی به‌صورت زیرخط‌دار نشان داده می‌شوند. شما می‌توانید با دستورات CSS که در دوره‌های بعدی آموزش می‌دهیم، ظاهر خروجی را تغییر دهید. لینک‌ها به صورت پیش‌فرض در مروگرها به رنگ زیر نمایش داده می‌شوند.

لینک دیده نشده: زیرخط‌دار و آبی رنگ
لینک دیده شده: زیرخط‌دار و بنفش
لینک فعال یا لینکی در یک لحظه روی آن کلیک می‌شود: زیرخط‌دار و قرمز

استفاده از مسیرهای نسبی Relative و مطلق Absolute

مسیرهایی که شامل آدرس کاملی است و می‌توان خیلی سریع به صفحه مورد نظر دسترسی پیدا کرد، مسیر مطلق یا Absolute نامیده می‌شوند. آدرس یا مسیرهای مطلق بسیار قابل اعتماد هستند اما نیازمند تایپ طولانی می‌باشند. به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<a href="https://www.w3schools.com/html/tryit.asp filename=tryhtml_links_w3schools"> Example </a> for a link
</body>
</html>

در زیر خروجی را مشاهده می‌کنید.

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

حال اگر بخواهیم کد HTMLای درون فایل page1.htm بنویسیم که با کلیک بر روی عبارتی به ترتیب محتوای فایل‌های page3.htm را نشان دهد، می‌توان از دو آدرس‌دهی به صورت زیر استفاده کرد.

<!DOCTYPE html>
<html>
<body>
<a href="E:\Links\page3.htm">click to go page3</a>
<br>
<a href="..\page3.htm">click to go page3</a>
</body>
</html>

خروجی به صورت زیر می‌باشد.

آدرس E:\Links\page3.htm یک آدرس مطلق و کامل است. اما آدرس../page3.htm یک آدرس نسبی می‌باشد. همان‌طور که در بالا مشخص است دو فایل page1.htm و page3.htm هر دو در یک پوشه ریشه به نام Links قرار دارند. حال اگر بخواهیم از page1 به محتوایی در page3 دسترسی داشته باشیم دیگر نیازی نیست از ابتدا آدرس را کامل وارد کنیم و علامت \.. به معنای پوشه اصلی یا ریشه است.

آدرس ../page3.htm یعنی در پوشه ریشه یا همان Links در فایل page3.htm. بنابراین در حالت آدرس‌دهی نسبی اگر نام پوشه اصلی تغییر پیدا کرد دیگر نیازی نیست که آدرس را از ابتدا اصلاح کنیم. به مثال زیر نیز توجه کنید.

<!DOCTYPE html>
<html>
<body>
<a href="E:\Links\page3.htm">click to go page3(Absolute address)</a>
<br>
<a href="..\page3.htm">click to go page3(Relative address)</a>
<br>
<a href="..\example2\page2.htm">click to go page2(Relative address)</a>
</body>
</html>

تنظیمات لینک با ویژگی target

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

_blank : یک سند لینک‌شده را در یک صفحه جدید باز می‌کند.
_self : سند لینک‌شده را در همان صفحه‌ای که قرار داریم، باز می‌کند.(به‌صورت پیش‌فرض)
_parent : سند لینک‌شده را در فریم والد باز می‌کند.
_top : سند لینک‌شده را در تمام بدنه یک پنجره در مرورگر باز می‌کند.
framename :سند لینک‌شده را در فریم نام‌گذاری شده باز می‌کند.

در مثال زیر صفحه مقصد در یک صفحه مرورگر جدید باز می‌شود.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
click <a href="http:https://www.bamadoon.com" target="_blank"> Bamadoon </a> for visit site
</body>
</html>

لینک‌ دادن به یک آدرس ایمیل

لینک‌ها یا Links علاوه بر صفحات وب می‌توانند هر چیز دیگری باشند. اگر بخواهید در ویژگی href از ایمیل استفاده کنید باید قبل از آدرس ایمیل از عبارت mailto استفاده کنید. در مثال زیر مشاهده می‌کنید که لینک به من ایمیل بده برای ایمیل دادن به آدرس email_name@gmail.com استفاده شده است.

<a href="mailto:email_name@gmail.com"> به من ایمیل بده</a>

شما هم‌چنین می‌توانید یک موضوع یا بدنه پیش‌فرض برای ایمیل به صورت زیر قرار دهید.

<a href="mailto:email_name@gmail.com?subject=this is subject&body=this is body">
    به من ایمیل بده
</a>

ایجاد لینک لنگر یا انکر (Anchor)

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

روش اول: استفاده از id برای تگ مورد نظر

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

<tag id="id_name"></tag>

بعد از مشخص کردن نام id برای تگ‌ها، باید این idها را در لینک‌ها استفاده کنیم. به مثال زیر توجه کنید.

<html>
<head>
</head>
 
<body>
<a href="#bamadoon1">go to 1</a>
</br>
<a href="#bamadoon2">go to 2</a>
</br>
<a href="#bamadoon3">go to 3</a>
</br>
<a href="#bamadoon4">go to 4</a>
</br>
<h1 id="bamadoon1">title1</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
<h1 id="bamadoon2">title2</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
<h1 id="bamadoon3">title3</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
<h1 id="bamadoon4">title4</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
</body>
</html>

روش دوم: تعیین name برای تگ <a>

در این روش از یک تگ <a> بدون محتوا و مشخصه name برای استفاده از لینک Anchor استفاده می‌کنیم. به مثال زیر توجه کنید.

<html>
<head>
</head>
 
<body>
<a href="#bamadoon1">go to 1</a>
</br>
<a href="#bamadoon2">go to 2</a>
</br>
<a href="#bamadoon3">go to 3</a>
</br>
<a href="#bamadoon4">go to 4</a>
</br>
<a name="bamadoon1"></a>
<h1>title1</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
<a name="bamadoon2"></a>
<h1>title2</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
<a name="bamadoon3"></a>
<h1>title3</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
<a name="bamadoon4"></a>
<h1>title4</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<br/><br/>
</body>
</html>

جمع‌بندی و سخن پایانی

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

منبع: بامادون

کپی و نشر مطالب با ذکر منبع و نام نویسنده بلامانع است.