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

W3Persian.com

معادل فارسی وب سایت W3Schools.com، تقدیم به فارسی زبانان جهان!

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

لینک های HTML

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

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

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

لینک های HTML - نحوه تعریف

در HTML، لینک ها با برچسب <a> تعریف می شوند:

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

مثال
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>خودتان امتحان کنید >

ویژگی href آدرس مقصد (https://www.w3schools.com/html/) لینک را مشخص می کند.
متنی که در سند HTML قابل مشاهده است "Visit our HTML tutorial" است.
با کلیک بر روی متن لینک، به آدرس تعریف شده برای آن لینک منتقل می شوید.
نکته: در آخر آدرس های زیر پوشه ای علامت ممیز را قرار ندهید، با این کار شما دو درخواست را برای سرور ارسال می کنید، زیرا بعضی از سرور ها قبل از اجرا یک ممیز به آخر آدرس لینک شما اضافه می کنند.

لینک های محلی

در مثال بالا یک آدرس مطلق (آدرس کامل یک وب سایت) را دیدید.
یک لینک محلی (لینک به همان وب سایت) آدرس نسبی (بدون http: // www....) است:

مثال
<a href="html_images.asp">HTML Images</a>خودتان امتحان کنید >

رنگ لینک HTML

به طور پیشفرض یک لینک به این شکل (در همه مرورگرها) ظاهر می شود:
  • یک لینک بازدید نشده به صورت زیر خط دار و به رنگ آبی نمایش داده می شود
  • یک لینک بازدید شده به صورت زیر خط دار و به رنگ بنفش نمایش داده می شود
  • یک لینک فعال به صورت زیر خط دار و به رنگ قرمز نمایش داده می شود
شما می توانید این سبک ها را با استفاده از CSS تغییر دهید:

مثال
<style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style>خودتان امتحان کنید >

لینک های HTML - خصیصه target

خصیصه target مشخص می کند که این لینک به چه صورت به مقصد برود.
ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:
  • _blank - مقصد لینک را در یک تب جدید یا یک پنجره جدید باز می کند
  • _self - مقصد لینک را در همان صفحه / تب باز می کند (این مقدار پیشفرض است)
  • _parent - مقصد لینک را در کادر اصلی باز می کند
  • _top - مقصد لینک را بر روی صفحه فعلی باز می کند
  • framename - مقصد لینک را در یک فریم نامی باز می کند
مثال زیر لینک مورد نظر را در یک تب / صفحه مرورگر باز می کند:

مثال
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>خودتان امتحان کنید >

نکته: اگر صفحه وب شما در بخشی از تب / صفحه مرورگر نمایش داده می شود با target="_top" می توانید مقصد لینک را در کل تب / صفحه مرورگر باز کنید:

مثال
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>خودتان امتحان کنید >

لینک های HTML - عکس به عنوان لینک

استفاده از تصاویر به عنوان لینک در طراحی صفحات وب رایج است:

مثال
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>خودتان امتحان کنید >

عنوان های لینک

خصیصه title اطلاعات اضافی را در مورد یک عنصر مشخص می کند، این اطلاعات اغلب به عنوان متن در زمانی که موس روی عنصر قرار می گیرد ظاهر می شوند.

مثال
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>خودتان امتحان کنید >

لینک های HTML - ساخت یک نشانک

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

مثال

ابتدا، یک نشانک را به وسیله خصیصه id ایجاد کنید:

<h2 id="C4">Chapter 4</h2>

سپس، یک لینک به نشانک ایجاد کنید (پرش به Chapter 4) در همان صفحه:

<a href="#C4">Jump to Chapter 4</a>

یا، یک لینک به نشانک ایجاد کنید (پرش به Chapter 4) در یک صفحه دیگر:

مثال
<a href="html_demo.html#C4">Jump to Chapter 4</a>خودتان امتحان کنید >

مسیر های خارجی

صفحات خارجی را می توان با یک URL کامل یا یک مسیر نسبت به صفحه کنونی فرا خواند.
مثال زیر از یک URL کامل برای دسترسی به یک صفحه وب استفاده می کند:

مثال
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>خودتان امتحان کنید >

مثال زیر به صفحه ای که در پوشه html قرار دارد اشاره می کند:

مثال
<a href="/html/default.asp">HTML tutorial</a>خودتان امتحان کنید >

مثال زیر نیز به صفحه ای که در کنار صفحه فعلی (پوشه کنونی) قرار دارد پیوند می دهد:

مثال
<a href="default.asp">HTML tutorial</a>خودتان امتحان کنید >

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

خلاصه فصل

  • استفاده از <a> برای تعریف یک لینک
  • استفاده از خصیصهhref برای تعریف آدرس لینک
  • استفاده از خصیصه target برای تعیین چگونگی باز شدن لینک
  • استفاده از تگ <img> (در بین تگ <a>) برای تعریف یک عکس به عنوان لینک
  • استفاده از خصیصه id (id="value") برای تعریف یک نشانک در صفحه وب
  • استفاده از خصیصه href (href="#value") برای پیوند به نشانک

با تمرینات خودتان را امتحان کنید!

تمرین 1 تمرین 2 تمرین 3 تمرین 4 تمرین 5

تگ های لینک در HTML

تگ توضیحات
<a> تعریف یک ابر لینک