لینک ها تقریبا در تمام صفحات وب یافت می شوند. لینک ها به کاربران این امکان را می دهند که با کلیک بر روی آن ها از صفحه ای به صفحه ای دیگر منتقل شوند.
لینک ها در HTML - لینک های ارتباطی یا Hyperlinks
لینک ها در HTML، به هایپرلینک معروف هستند و به این اسم شناخته می شوند.
شما می توانید با کلیک بر روی یک لینک به صفحه ای دیگر منتقل شوید.
همچنین شما وقتی نشانگر ماوس را روی یک لینک حرکت می دهید، آیکون پیکان ماوس به یک دست کوچک تغییر شکل می دهد.
نکته: یک لینک حتما نباید متن باشد، بلکه میتواند عکس و یا هر عنصر HTML دیگری باشد.
لینک ها در HTML - نحوه استفاده یا Syntax
لینک ها در HTML با تگ <a> تعریف می شوند:
صفت href آدرس مقصد (https://learnhtml5.blog.ir/) را برای لینک مشخص می کند.
متن لینک، قسمت قابل مشاهده برای کاربر است (visit our site).
با کلیک بر روی متن لینک شما به آدرس مشخص شده منتقل می شوید.
نکته: بدون گذاشتن اسلش (/) در انتهای آدرس سایت، ممکن که شما دو درخواست برای سرور بفرستید یعنی لینک شما دوبار باز شود. بسیاری از سرورها به صورت خودکار یک اسلش (/) به انتهای آدرس اضافه می کنند، و سپس لینک مورد نظر شما را باز می کنند.
لینک های داخلی
در مثال بالا از یک URL مطلق (آدرس کامل وبسایت) استفاده شده است.
اما در یک لینک داخلی (لینکی به صفحات داخلی همان سایت) از URL نسبی (بدون https://www.) استفاده می شود.
رنگ های یک لینک در HTML
به صورت پیشفرض، یک لینک به صورت زیر نمایش داده می شود (در همه ی مرورگرها):
- لینکی که هنوز ملاقات نشده زیرخط دار و آبی است.
- لینکی که ملاقات شده زیرخط دار و بنفش است.
- لینک فعال (لحظه ای که با ماوس روی لینک کلیک می شود) زیرخط دار و قرمز است.
شما با استفاده از 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>
همچنین شما می توانید با استفاده از CSS یک لینک را شبیه به دکمه طراحی کنید.
مثال
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
نکته: شما در آموزش CSS درباره ی لینک ها بیشتر یاد خواهید گرفت.
لینک ها در HTML - صفت target
صفت target مشخص می کند که لینک مقصد در کجا باز شود.
صفت target می تواند دارای یکی از مقادیر زیر باشد:
-
_blank- لینک مقصد را در یک پنجره یا تب جدید باز می کند -
_self- لینک مقصد را در همان پنجره یا تبی باز می کند که لینک در آن کلیک شده (این مقدار پیشفرض برای لینک ها است) -
_parent- لینک مقصد را در یک فریم پدر باز می کند -
_top- لینک مقصد را در تمام بدنه ی یک پنجره ی مرورگر باز می کند - framename - لینک مقصد را در یک فریم نامگذاری شده باز می کند
در مثال زیر لینک مقصد در یک پنجره یا تب جدید مرورگر باز می شود:
نکته: اگر صفحه ی وب سایت شما به یک فریم محدود شده است، شما می توانید با استفاده از target="_top" این محدودیت را از بین ببرید:
مثال
لینک ها در HTML - استفاده از عکس به عنوان لینک
استفاده از عکس به عنوان لینک رایج است. در مثال زیر از یک عکس به عنوان لینک استفاده شده است:
مثال
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
توجه: مقدار border:0; که به مثال بالا اضافه شده، به این دلیل است که در مرورگر IE9 (و نسخه های پایین تر) به صورت پیشفرض یک بوردر به عکس های لینک شده اضافه می گردد.
لینک ها در HTML - صفت title
صفت title اطلاعاتی اضافه را درباره یک عنصر تعریف می کند. این اطلاعات اغلب هنگامی که ماوس روی عنصر حرکت می کند در یک مستطیل کوچک (tooltip) نشان داده می شوند.
مثال
لینک ها در HTML - ایجاد یک نشانک یا Bookmark
استفاده از بوکمارک ها به خوانندگان یک صفحه وب این اجازه را می دهد که به قست خاصی از آن صفحه پرش کنند.
اگر صفحه وب شما طولانی باشد، بوکمارک ها می توانند بسیار مفید باشند.
برای ساخت بوکمارک، ابتدا یک بوکمارک ایجاد کرده و سپس یک لینک به آن اضافه کنید.
با کلیک بر روی لینک، صفحه به محلی که بوکمارک در آن قرار گرفته پرش یا scroll می شود.
مثال
ابتدا با صفت id یک بوکمارک ایجاد کنید:
سپس در همان صفحه لینکی برای پرش به بوکمارک اضافه کنید:
و یا اگر میخواهید از صفحه ای دیگر به بوکمارکتان لینک بدهید، به صورت زیر عمل کنید:
لینک دهی به فایل های خارجی
صفحات خارجی سایت را می توان با آدرس URL کامل یا مسیری نسبت به صفحه وب فعلی ارجاع داد.
این مثال از یک URL کامل برای لینک دهی به یک صفحه وب استفاده می کند:
در مثال زیر به صفحه ای لینک داده شده است که در پوشه ی html وبسایت فعلی قرار دارد:
و در مثال زیر به صفحه ای لینک داده شده است که در همان پوشه صفحه فعلی قرار دارد:
