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

زهرا فتوحی نیا
آموزش رایگان HTML
بروزرسانی شده در10 آذر 1400

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

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

آنچه قراره یاد بگیریم اینجاست!

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

اتصال به صفحات وب با لینک‌ در html
- استفاده از مسیرهای نسبی Relative و مطلق Absolute
تنظیمات لینک‌ در html با ویژگی target
لینک‌ در html به یک آدرس ایمیل
ایجاد لینک لنگر یا انکر (Anchor)

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

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

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

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

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

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

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

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

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

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

استفاده از مسیرهای نسبی 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>

تنظیمات لینک‌ در html با ویژگی target

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

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

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

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

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

لینک‌ در html علاوه بر صفحات وب می‌توانند هر چیز دیگری باشند. اگر بخواهید در ویژگی 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 آشنا کنیم. انواع مختلف لینک‌ها را توضیح دادیم. امیدواریم موثر بوده باشد.