در این بخش درباره ایجاد لینکها در html صحبت خواهیم کرد.
برای ایجاد لینک یا پیوند به صفحه ای دیگر در html از تگ <a> استفاده میکنیم.
<a href="url">متن لینک</a>
در اینجا url ادرس لینک مورد نظر ما میباشد و "متن لینک" عنوان لینک میباشد.
به طور مثال اگر بخواهیم در وبسایت خود یک لینک به شرکت طراحی سایت بسازیم به صورت زیر عمل میکنیم.
<a href="http://pzof.ir/"> شرکت طراحی سایت </a>
خروجی تگ بالا به صورت زیر خواهد بود:
شرکت طراحی سایت
حال با کلیک بروی متن شرکت طراحی سایت شما را به آن صفحه انتقال خواهد داد.
انواع آدرس دهی لینک ها
بطور کلی دو نوع آدرس دهی مطلق (absolute url) و نسبی (relative url) در صفحات وب وجود دارد.در مورد این مبحث آدرس دهی ها در مقالات قبل صحبت کرده ایم.
در مثال بالا ما از آدرس دهی مطلق استفاده کردیم(یعنی با http://www....) .اگر بخواهبم لینکی از یک صفحه وبسایت خود به صفحه دیگر همان وبسایت بسازیم از آدرس دهی نسبی استفاده میکنیم.
ایجاد عنوان برای لینک یا title
تگ a دارای خاصیتی به نام title میباشد، استفاده از title اجباری نیست، اما می تواند از نظر بهینه بودن لینک های سایت مفید باشد.
<a href=" http://pzof.ir/" title="شرکت پیشگامان صفر و یک فرساد">شرکت پیشگامان صفر و یک فرساد</a>
لینکی که در پایین ساخته شده دارای خاصیت title میباشد با بردن موس روی آن میتوانید title ان را مشاهده کنید
شرکت پیشگامان صفر و یک فرساد
لینک کردن عکسها
اگر بخواهیم از یک عکس به عنوان یک لینک استفاده کنیم باید تگ عکس را به جای متن لینک استفاده کنیم. یعنی به صورت زیر:
<a href="url"><img src="image.gif"></a>
کنترل پنجره لینک یا target
لینک ها به صورت پیش فرض در همان پنجره نمایش داده می شوند، اما اگر بخواهیم پس از کلیک کاربر، محتوای لینک در پنجره جدیدی نمایش داده شود، بدین منظور از پارامتر دیگری به نام target استفاده می کنیم.
شناسه target میتواند دارای مقادیر زیر باشد.
- - blank_ : نمایش محتوای لینک در پنجره جدید.
- - parent_ : نمایش محتوای لینک در پنجره والد (معمولا در حالتی استفاده می شود که لینک از یک frame فراخوانی شود).
- - self_ : نمایش محتوای لینک در پنجره فعلی (حالت پیش فرض).
- - top_ : نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).
شناسه های parent و top کاربرد زیادی ندارند و در برخی مواقع که iframe در صفحه خود داشته باشیم استفاده میشوند.
رنگ لینکها در html
لینک ها می‌توانند براساس حالتی که در آن هستند استایل های مختلفی به خود بگیرند. چهار حالت که لینک ها از آنها پیروی می‌کنن عبارتند از:
- a:link لینک در حالت عادی و مشاهده‌نشده که در حالت دیفالت رنگ آن آبی و زیرخط دار یا underline میباشد.
- a:visited لینکی که کابر مشاهده کرده است.در حالت پیشفرض رنگ آن بنفش میباشد.
- a:hover لینکی که کابر ماوس را بر روی ان برده است.
- a:active لینک در لحظه‌ای که بر روی آن کلیک می‌شود.در حالت پیشفرض رنگ آن قرمز میباشد.
میتوان با استفاده از css به دلخواه این رنگها را تغییر داد:
<!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>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
نویسنده مقاله کامنت گذاری را غیر فعال کرده است.