آموزش لینک ها در html - تگ a – وبسایت آموزشی پرنیان طرح (دوستدار طراحان اینترنتی)

لینک ها یکی از عوامل مهم در وبسایت ها می باشند.

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

تگی که در html برای ایجاد لینک به سایر صفحات استفاده میشود تگ مهم <a> است.

با سلام خدمت کاربران عزیز وبسایت پرنیان طرح

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

معرفی تگ <a>:

تگ <a> نشانه ی لینک است و صفت href آدرس لینک را مشخص میکند

در این صفت (href) مقدار را , آدرسی که میخواهیم به آن جا لینک شود مینویسیم.

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

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

[php]
<a href=”https://www.w3schools.com”>
با کلیک روی این لینک مارا به صفحه w3schools منتقل میکند

</a>

[/php]

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

و مقدار های زیر را میتوان به این صفت داد که هر یک کاربرد متفاوتی دارند:

blank_: لینک را در صفحه جدید باز میکند.

self_: لینک را در همان صفحه جاری باز میکند.

parent_: در قاب والد یا پدر باز میشود.

top_: بر روی تمامی قاب های موجود در یک صفحه باز میشود.

همانند نمونه های مثال زیر:

[php]

<body>

<a href=”https://parniantarh.ir” target=”_self”>اینجا کلیک نمایید</a>
<a href=”https://parniantarh.ir” target=”_blank”>اینجا کلیک نمایید</a>
<a href=”https://parniantarh.ir” target=”_parent”>اینجا کلیک نمایید</a>
<a href=”https://parniantarh.ir” target=”_top”>اینجا کلیک نمایید</a>

</body>

[/php]

معرفی انواع لینک ها:

لینک سراسری : لینک هایی هستند که به صفحات یک سایت دیگر اشاره دارند.

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

لینک خارجی : لینک هایی هستند که به قسمتی در همان صفحه ای که هستید ارجاع میدهند.

در نمونه زیر نحوه لینک کردن محلی را آموزش میدهیم.

[php]

<a href=”#text3″>پاراگراف سوم</a>

<h3 id=”text3″>پاراگراف سوم</h3>

<p>اینجا پاراگراف سوم است شما توسط لینک داخلی به این قسمت ارجاع داده شدید.</p>

[/php]

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

link : این حالت پیش فرض است و به نوشته ی لینک رنگ سبز را دادیم.

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

hover : این حالت هنگامی که موس روی لینک باشد و رنگش را قرمز دادیم.

active : هنگام کلیک کردن روی لینک این حالت را رنگ زرد کردیم.

[php]

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href=”html_images.asp” target=”_blank”>HTML Images</a>

</body>
</html>

[/php]

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

با لینک دار کردن نوشته در توضیحات بالا آشنا شدید حال میخواهیم یک عکس را لینک دار کنیم برای این کار از تگ <img> درون تگ <a> استفاده میکنیم.

در مثال زیر یک عکس را به یک آدرس لینک داده ایم و با کلیک روی عکس به لینک مورد نظر میرویم.

[php]

[/php]