لینک های html در همه صفحات وب وجود دارند و برای كاربر امكان حركت از صفحه ای به صفحه دیگر را فراهم می كنند.

لینک های html - هایپر لینك (hyperlink)

در HTML  لینك ها ، هایپر لینك هستند. می توان روی یك  لینك كلیك كرده و به سند دیگری دسترسی داشت. وقتی ماوس را روی یك لینك می بریم ،‌ فلش ماوس تبدیل به یك دست كوچك می شود.

نكته !‌ لینك ها لزومی ندارد یك متن یا كلمه باشند ،‌می توانند یك تصویر یا هر عنصر HTML دیگری باشند.

تركیب لینك ها در HTML

لینك ها با تگ <a> مشخص می شوند :

<a href="url">متن لینك</a>

مثال :

<a href="http://tuts.webmehraz.com/">از آموزش های برنامه نویسی ما دیدن کنید</a>

لینك های محلی ( local links )

در مثال بالا از یك آدرس كامل استفاده كردیم. اما یك لینك محلی ( لینك به صفحه ای در همان وب سایت ) با استفاده از یك URL مرتبط (بدون http://www. ) مشخص می شود.

مثال :

<a href="Tutorials/1/یادگیری-HTML.aspx">یادگیری HTML</a>

رنگ لینك در HTML

بصورت پیش فرض ،‌یك لینك در همه مرورگر ها به شرح زیر نمایش داده می شود :

لینك مشاهده نشده ،‌ با زیرخط _ و به رنگ آبی
لینك مشاهده شده ،‌ با زیرخط _ و به رنگ بنفش
لینك فعال ( وقتی ماوس روی لینك برود )،‌ با زیرخط _ و به رنگ قرمز

هرچند ،‌ می توان این رنگ ها را با استفاده از استایل ،‌ تغییر داد.

مثال :

<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>

صفت target برای لینك ها در HTML

صفت target مشخص می كند كه سند لینك شده كجا باز شود. صفت target می تواند یكی از مقادیر زیر را داشته باشد :

_blank  لینك را در یك پنجره یا تب مرورگر جدید باز می كند.
_self لینك را در همان پنجره یا تب مرورگر باز می كند.
_parent لینك را در پنجره اصلی در حال نمایش ،‌باز خواهد كرد.
_top لینك را در یك پنجره كامل نمایش خواهد داد.
_framename لینك را در یك فریم نام گذاری شده نمایش خواهد داد.


این مثال ،‌ لینك را در یك پنجره یا تب مرورگر جدید باز خواهد كرد.

مثال :

<a href="http://tuts.webmehraz.com/" target="_blank" >از آموزش های طراحی وب ما دیدن کنید!</a>

<a href="http://www.webmehraz.com/" target="_top">اینجا کلیک کنید!</a>

تصاویر به عنوان لینك در HTML

استفاده از تصاویر به عنوان لینك امری متداول است.

مثال :

<a href="http://tuts.webmehraz.com">
  <img src="smiley.gif" alt="آموزش های وب نویسی" style="width:42px;height:42px;border:0">
</a>

علامت گذاری در صفحه HTML

استفاده از این وی‍ژگی به كاربران اجازه می دهد تا سریعاً به قسمت مشخص شده در همان صفحه مراجعه كنند. این وی‍ژگی زمانی كه محتوای صفحه طولانی باشد بسیار مفید واقع می شود. برای علامت گذاری ،‌ ابتدا باید ابتدا علامت را ایجاد كنید ،‌سپس به آن لینك دهید. زمانی كه لینك كلیك می شود صفحه به قسمت علامت گذاری شده اسكرول می شود.

- ابتدا یك علامت یا صفت id ایجاد می كنیم :

</h2>نكات مهم <"h2 id="tips>

سپس یك لینك به علامت ،‌ایجاد می كنیم در همان صفحه :‌

</a>بخش نكات مهم <"a href="#tips>

یا یك لینك به علامت ایجاد شده می دهیم از صفحه ای دیگر :

</a>مشاهده بخش نكات مهم<"a href="html_tips.html#tips>

مثال :

<a href="html_tips.html#tips">"پرش به قسمت "نکات مهم</a>