100% کامل شده تا
به‌روزرسانی شده در: ۲۵ روز پیش

لینک‌ها در اچ‌تی‌ام‌ال (HTML Links)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از لینک دادن در html)
پرش به ناوبری پرش به جستجو


لینک‌ها تقریباً در همهٔ صفحات وب وجود دارند. لینک‌ها به کاربران این امکان را می‌دهند که از طریق آنها از صفحه‌ای به صفحهٔ دیگر بروند.[۱]


لینک‌های HTML - ابرلینک‌ها

لینک‌های HTML ابرلینک (Hyperlinks) هستند.

می‌توانید روی پیوند کلیک کرده و به سند دیگری بروید.

وقتی ماوس را روی پیوندی به حرکت درمی‌آورید، پیکان ماوس به یک دست کوچک تبدیل می‌شود.

توجه: لزوماً پیوند نباید متنی باشد. پیوند می‌تواند یک تصویر یا هر عنصر HTML دیگر باشد!

لینک‌های اچ‌تی‌ام‌ال - شیوهٔ نوشتار (HTML Links - Syntax)

تگ <a> در HTML، یک پیوند را تعریف می‌کند. شیوهٔ نوشتار آن به شکل زیر است:

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


مهمترین ویژگی عنصر <a>، ویژگی href است که مقصد پیوند را نشان می‌دهد.

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

با کلیک بر روی متن پیوند، درخواست‌کننده را به آدرس URL مشخص شده هدایت می‌کند.

مثال

این مثال نحوه ایجاد پیوند به W3Schools.com را نشان می‌دهد:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

مثال

<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>
</html>

Responsive demo.svg


به‌طور پیش‌فرض، پیوندها در همه مرورگرها به شرح زیر ظاهر می‌شوند:

  • پیوند بازدید نشده، دارای زیر خط و برنگ آبی است
  • پیوند بازدید شده، دارای زیر خط و برنگ بنفش است
  • پیوند فعال، دارای زیر خط و برنگ قرمز است
نکته: البته می‌توان پیوندها را با CSS طراحی کرد تا ظاهر دیگری نشان دهند!

لینک‌های اچ‌تی‌ام‌ال - ویژگی target (HTML Links - The target Attribute)

به‌طور پیش‌فرض، صفحهٔ مقصد پیوند، در پنجره مرورگر فعلی نمایش داده می‌شود. برای تغییر این روش، باید هدف دیگری را برای پیوند مشخص کنید.

ویژگی target تعیین می‌کند سند لینک شده در کجا باز شود.

ویژگی target می‌تواند یکی از مقادیر زیر را داشته باشد:

  • _self - به‌طور پیش‌فرض سند را در همان برگه‌/تب‌ای که روی آن کلیک شده باز می‌کند
  • _blank - سند را در یک پنجره یا تب جدید باز می‌کند
  • _parent - سند لینک شده را در فریم والد باز می‌کند
  • _top - سند لینک شده را در بدنه کامل پنجره باز می‌کند

مثال

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

مثال

از target = "_ blank" برای بازکردن سند پیوندی در پنجره یا برگهٔ مرورگر جدید استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

Responsive demo.svg


URLهای مطلق در مقابل URLهای نسبی (Absolute URLs vs. Relative URLs)

هر دو مثال بالا از URL مطلق (یک آدرس کامل وب) در ویژگی href استفاده می‌کنند.

یک پیوند محلی (پیوندی به یک صفحه در همان وب‌سایت) با URL نسبی (بدون قسمت "https://www") مشخص شده‌است:

مثال

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>
</html>

Responsive demo.svg


لینک‌های اچ‌تی‌ام‌ال - از تصویر به عنوان پیوند استفاده کنید (Use an Image as a Link)

برای استفاده از یک تصویر به عنوان پیوند، فقط تگ <img> را درون برچسب <a> قرار دهید:

مثال

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>

</body>
</html>

Responsive demo.svg


لینک به آدرس ایمیل (Link to an Email Address)

از mailto: داخل ویژگی href برای ایجاد پیوندی که برنامه ایمیل کاربر را باز می‌کند استفاده کنید (به آنها اجازه دهید یک ایمیل جدید ارسال کنند):

مثال

<a href="mailto:someone@example.com">Send email</a>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Link to an Email Address</h2>

<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:</p>

<p><a href="mailto:someone@example.com">Send email</a></p>

</body>
</html>

Responsive demo.svg


دکمه به عنوان لینک (Button as a Link)

برای استفاده از دکمه HTML به عنوان پیوند، باید مقداری کد جاوااسکریپت اضافه کنید.

جاوااسکریپت به شما امکان می‌دهد آنچه را که در رویدادهای خاص اتفاق می‌افتد، مانند کلیک روی دکمه، مشخص کنید:

مثال

<button onclick="document.location='default.asp'">HTML Tutorial</button>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>Button as a Links</h2>

<p>Click the button to go to the HTML tutorial.</p>

<button onclick="document.location='default.asp'">HTML Tutorial</button>

</body>
</html>

Responsive demo.svg


نکته: برای آموزش بیشتر JavaScript به آموزش جاوااسکریپت مراجعه کنید.

لینک‌دهی به عناوین (Link Titles)

ویژگی title اطلاعات اضافی در مورد یک عنصر را مشخص می‌کند. هنگامی که ماوس روی عنصر حرکت می‌کند، اطلاعات اغلب به عنوان یک متن tooltip نشان داده می‌شوند.

مثال

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

مثال

<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

</body>
</html>

Responsive demo.svg


توضیحات تکمیلی در مورد URLهای مطلق و URLهای نسبی (More on Absolute URLs and Relative URLs)

مثال

برای پیوند به یک صفحه وب از آدرس اینترنتی کامل استفاده کنید:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example uses a full URL to link to a web page:</p>
<p><a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a></p>

</body>
</html>

Responsive demo.svg


مثال

پیوند به صفحه‌ای که در پوشهٔ html در وب‌سایت فعلی قرار دارد:

<a href="/html/default.asp">HTML tutorial</a>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example links to a page located in the html folder on the current web site:</p>

<p><a href="/html/default.asp">HTML tutorial</a></p>

</body>
</html>

Responsive demo.svg


مثال

پیوند به صفحه‌ای که در همان پوشهٔ صفحهٔ فعلی قرار دارد:

<a href="default.asp">HTML tutorial</a>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example links to a page located in the same folder as the current page:</p>

<p><a href="default.asp">HTML tutorial</a></p>

</body>
</html>

Responsive demo.svg


می‌توانید در مورد مسیرهای فایل در بخش مسیرهای فایل HTML بیشتر مطالعه کنید.

خلاصهٔ بخش (Chapter Summary)

از عنصر <a> برای تعریف پیوند استفاده کنید
از ویژگی href برای مشخص کردن آدرس لینک استفاده کنید
از ویژگی target برای تعیین اینکه سند لینک شده در کجا باز شود، استفاده کنید
از عنصر <img> (داخل <a>) برای استفاده از تصویر به عنوان پیوند استفاده کنید

تگ‌های لینک اچ‌تی‌ام‌ال (HTML Link Tags)

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

منابع آموزشی