آموزش ایجاد لینک در HTML

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

لینک ها در HTML

ما می توانیم بر روی یک لینک کلیک کنیم تا به یک سند دیگر منتقل شویم. وقتی که ما ماوس را بر روی یک لینک ببریم، نشانگر ماوس به یک علامت دست کوچک تبدیل می شود.

نکته: حتماً لازم نیست که لینک ما یک متن باشد. بلکه یک لینک می تواند یک تصویر یا یک عنصر HTML دیگر باشد.

قواعد نوشتاری یا سینتکس لینک ها در HTML

عنصر <a> در HTML یک لینک را تعریف می کند. قواعد نوشتاری این عنصر به صورت زیر است:

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

مهمترین خصوصیت عنصر <a> ، خصوصیت href است؛ این خصوصیت مقصد لینک را مشخص می کند. در بخش "متن لینک" در کد بالا، متنی که به کاربر نشان داده می شود، قرار می گیرد. با کلیک بر روی متن لینک، کاربر به آدرس URL مشخص شده منتقل می شود.

<a href="https://sina2.ir">آموزشگاه مجازی سینا</a> 

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

1. در زیر یک لینک مشاهده نشده، یک خط آندرلاین وجود دارد و رنگ لینک آبی است.
2. در زیر یک لینک مشاهده شده یک خط آندرلاین وجود دارد و لینک به رنگ بنفش است.
3. در زیر یک لینک فعال، یک خط آندرلاین وجود دارد و لینک به رنگ قرمز است.

نکته: ما همچنین می توانیم لینک را با استفاده از CSS استایل دهی کنیم تا جور دیگری به نظر برسند.

استفاده از خصوصیت target در لینک ها

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

1. مقدار self_ : مقدار پیش فرض است. این مقدار باعث می شود که سند مورد نظر، در همان پنجره یا تبی که بر روی لینک کلیک شده است، باز شود.

2. مقدار blank_ : این مقدار باعث می شود که سند مورد نظر در یک پنجره یا تب جدید باز شود.

3. مقدار parent_ : این مقدار، سند مورد نظر را در آی-فریم(iframe) والد باز می کند.

4. مقدار top_ : برای این مقدار، اگر لینک در داخل یک iframe قرار داشته باشد، صفحه وب جدید در داخل iframe بارگذاری نمی شود اما به جای آن، مرورگر صفحه را در پنجره خود باز می کند. 

<a href="https://sina2.ir/" target="_blank">آموزشگاه مجازی سینا</a> 

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

<h2>های مطلق URL</h2>
<p><a href="https://sina2.ir/">آموزشگاه مجازی سینا</a></p>
<p><a href="https://www.google.com/">گوگل</a></p>

<h2> های نسبی URL</h2>
<p><a href="/other/image1.png">نمایش یک تصویر</a></p>
<p><a href="/images/all/content/css/chapter1/1.png">آموزش سی اس اس</a></p>

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

 برای استفاده از یک تصویر بعنوان یک لینک، کافیست تگ <img> را در داخل تگ <a> قرار دهیم:

<a href="https://sina2.ir/">
<img src="https://sina2.ir/images/other/1.png" style="width:42px;height:42px;">
</a>

لینک به یک آدرس ایمیل در HTML

از مقدار mailto: در درون خصوصیت href استفاده کنید تا یک لینک ایجاد شود که برنامه ایمیل کاربر را باز می کند(تا یک ایمیل جدید را ارسال کند):

 استفاده از دکمه بعنوان لینک در HTML

برای استفاده از یک دکمه ی HTML بعنوان یک لینک، باید کمی از کدهای جاوا اسکریپت استفاده کنیم. جاوا اسکریپت به ما امکان می دهد تا مشخص کنیم که در یک رویداد خاص چه اتفاقی رخ می دهد، مانند رویداد کلیک شدن یک دکمه:

<button onclick="document.location='https://sina2.ir'">آموزش اچ تی ام ال</button> 

نکته: به دستور زیر توجه کنید:

document.location = 'https://sina2.ir'

این دستور مانند این است که از دستور زیر استفاده کنیم:

document.location.href = 'https://sina2.ir'

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

عنوان لینک ها در HTML

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

<a href="https://sina2.ir" title="برو به آموزشگاه">sina2.ir</a>

اطلاعات بیشتر در مورد URL های مطلق و نسبی

<a href="https://sina2.ir">آموزشگاه مجازی سینا</a>

<a href="/other/test1.html">صفحه آزمایشی</a>

<a href="/test1.html">آموزش اچ تی ام ال</a>

نکته: در مثال شماره 11 و 12، اسلش به کار رفته در ابتدای مقدار href اضافی است و وجود ندارد.

 نکته: در بخش مسیرهای فایل HTML، چیزهای بیشتری در مورد مسیرها خواهید آموخت.

خلاصه فصل

1. از یک عنصر <a> برای تعریف یک لینک استفاده می شود.
2. از خصوصیت href برای تعریف آدرس لینک استفاده می شود.
3. از خصوصیت target برای تعریف اینکه سند لینک شده، در کجا باز شود، استفاده می شود.
4. از عنصر <img> (در درون تگ <a>) برای استفاده از یک تصویر بعنوان لینک استفاده می شود.
5. برای ایجاد یک لینک که در برنامه ایمیل کاربر باز شود، از عبارت :mailto در درون خصوصیت href استفاده می شود.