021-20483015

لینک های HTML

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

 

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

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

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

 

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

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

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

مثال :

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


صفت href آدرس مقصد لینك را مشخص می كند. (در مثال :  /http://tuts.webmehraz.com)
متن لینك ،‌ قسمت قابل رؤیت لینك می باشد. ( در مثال : مجموعه دروس آموزش برنامه نویسی)
كلیك بر روی متن لینك شما را به آدرس مشخص شده هدایت خواهد كرد.

نكته !‌ بدون اضافه كردن اسلش ( / ) به انتهای آدرس، در اصل شما دو درخواست برای سرور ایجاد می كنید. بسیاری از سرورها خود بصورت اتوماتیك این اسلش را اضافه كرده و سپس یك درخواست جدید مبنی بر هدایت به آدرس مورد نظر ،‌ ایجاد می كنند.

 

 

 

 

لینك های محلی ( 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 لینك را در یك فریم نام گذاری شده نمایش خواهد داد.


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

مثال :

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



نكته !‌ اگر صفحه وب مقصد داخل یك فریم قفل شده باشد ،‌ می توانید با استفاده از target="_top" فریم را لغو كنید.

مثال :
لغو فریم
<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>
مشاهده مثال


نكته ! اینترنت اكسپلورر 9 و قبل از آن وقتی یك تصویر لینك باشد ،‌ به دور تصویر خط حاشیه نمایش می دهد ،‌برای جلوگیری از این عمل ،‌به تصویر صفت border:0 را اضافه می كنیم.

 

 

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

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

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

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

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

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

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

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

مثال :

علامت گذاری در صفحه
<a href="html_tips.html#tips">"پرش به قسمت "نکات مهم</a>
مشاهده مثال


خلاصه درس :

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

 

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط