Omega Programming

link در html

HTML برای پیوند به اسناد دیگر در وب از فرا پیوندها (hyperlink) استفاده می کند. با استفاده از دستورات html می توان یک متن یا عکس را به لینک تبدیل کرد. و با کلیک روی آن به سند دیگری در وب منتقل شد.

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

دستورالعمل ساخت یک Anchor

<a href="/url"> متنی که نمایش داده می شود </a>

برای نمایش آدرس فایل از ویژگیhref استفاده می شود.کلمات بین بر چسب آغاز و پایان Anchor به عنوان فرا پیوند نمایش داده می شود. 
مثال:

<a href="http://www.omegaprogramming.ir/"> از سایت ما دیدن فرمایید </a>

لینک های محلی

مثال بالا از یک url  مطلق (آدرس وب کامل) استفاده کرده است. یک لینک محلی (لینک درون همان وب سایت) با url نسبی ( بدون http://www....) تعیین می شود. در این نوع لینک خصیصه href را می توان با نام هر صفحه ای که در همین سایت وجود دارد مقداردهی کرد.

<a href="html_images.html">HTML Images</a>

خصیصه target

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

<a href="http://www.omegaprogramming.ir/" target="_blank"> از سایت ما دیدن فرمایید </a>

رنگ لینک ها

وقتی نشانگر ماوس روی یک لینک قرار می گیرد، شکل نشانگر ماوس بصورت دست درمی آید و همچنین رنگ لینک نیز تغییر می یابد.بطور پیش فرض هر لینک در مرورگر بصورت زیر نمایش داده می شود:

در حالت unvisited: لینک زیرخط دار و آبی رنگ است

در حالت visited:لینک زیر خط دار و بنفش رنگ است

در حالت active:لینک زیر خط دار و قرمز است

می توان این رنگ های پیش فرض را به کمک style ها تغییر داد:

<style type="text/css">
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>

لینک کردن تصاویر

همانطور ک می توان متنی را بصورت لینک نمایش داد، در مورد تصاویر نیز ایجاد لینک به سادگی و با ادغام تگ <a> و <img> امکان پذیر است:

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
بدین ترتیب عکس smiley.gif به یک لینک تبدیل می شود که با کلیک روی آن به صفحه default.html منتقل می شویم.
نکته: خصیصه border برای ایجاد حاشیه در اطراف عناصر html (در این مثال عنصر img) بکار می رود.
 
 
ایجاد bookmark
bookmark ها شرایطی فراهم می آورند که کاربران بتوانند به بخش خاصی از یک صفحه وب پرش کنند. برای ایجاد یک bookmark ابتا باید آنرا ایجاد و سپس یک لینک به آن اضافه کنید. وقتی روی لینک کلیک می شود، صفحه به محلی که bookmark برای آن تعیین شده scroll خواهد شد.حالت کلی برای تعریف یکbookmark بصورت زیر است:

<a id="label">متنی که نوشته می شود</a>

 
مقدار یک id می تواند هر متنی که شما بخواهید باشد.
مثال:
ابتدا با خصیصه id یک bookmark بنام tips ایجاد می کنیم:
 
<h2 id="tips">Useful Tips Section</h2>
سپس یک لینک از همان صفحه به آن اضافه می کنیم:
<a href="#tips">Visit the Useful Tips Section</a>
یا لینکی از صفحه دیگر به آن اضافه می کنیم:
<a href="html-tips.html#tips">Visit the Useful Tips Section</a>
برای پیوند به بخش مورد نظر باید قبل از نام بخش از علامت # استفاده کرد.
بدین ترتیب یک فرا پیوند به بخش نکات مفید (در همان صفحه یا صفحه html-tips.html) خواهیم داشت.
شما اینجا هستید: صفحه ی اصلی HTML Links