لینک ها در HTML

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

لینک های HTML – هیپرلینک

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

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

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

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

<a href="/url">link text</a>

مثال:

<a href="https://easy.parastar.info/index.php/">از خانه دروس آسان بازدید کنید</a>

خصیصه href آدرس مقصد لینک را مشخص می کند. در مثال فوق مقصد لینک صفحه خانه دروس آسان (https://easy.parastar.info/index.php) است.

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

توجه: بدون اسلش انتهای آدرس لینک، ممکن است دو درخواست به سرور ارسال شود. که یکی برای مشخص کردن ساب فلدر لینک است. بسیاری از سرورها بطور خودکار اسلش فروارد را به آدرس اضافه می کنند و بعد یک درخواست ایجاد می کنند.

لینک های محلی

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

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

رنگ لینک در HTML

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

  • تمامی لینک های بازدید نشده زیرخط دار و به رنگ آبی هستند
  • تمامی لینک های بازدید شده به رنگ ارغوانی هستند
  • تمامی لینک های فعال زیرخط دار و به رنگ قرمز هستند

می توان رنگ های پیش فرض را با استفاده از سبک بندی لینک ها تغییر داد. معمولا سایت های مختلف با توجه به قالب رنگ کلی خود، رنگ لینک ها را در استیل شیت (CSS) خود تغییر می دهند. مثال:

<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>

خصیصه target لینک های HTML

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

  • blank_ : سند لینک شده در یک پنجره یا برگه جدید باز می شود
  • self_ : سند لینک شده در همان پنجره یا برگه ای باز می شود که لینک در آن کلیک شده است (این مقدار پیش فرض خصیصه target است
  • parent_ : سند لینک شده در قالب (فریم) والد باز می شود
  • top_ : سند لینک شده در بالای پنجره به طور کامل باز می شود
  • framename : سند لینک شده در فریمی که نام آن قید شده است، باز می شود

 

در مثال زیر سند لینک شده در پنجره یا برگه جدیدی از مرورگر باز می شود:

<a href="https://easy.parastar.info/index.php" target="_blank">از خانه دروس آسان بازدید کنید</a>

نکته: اگر وب پیج در یک فریم قفل شده باشد، می توان از هدف target="_top" برای خارج شدن از فریم استفاده کرد. مثال:

<a href="https://easy.parastar.info/index.php" target="_top">از خانه دروس آسان بازدید کنید</a>

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

استفاده از تصویر به عنوان لینک امروزه یک روتین رایج است. مثل:

<a href="/default.asp">
<img src="/smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

توجه: برای اینکه IE9 یا نسخه های قبلی آن دور عکس لینک شده یک قاب درست نکنند، از خصیصه border:0; استفاده شده است.

لینک های HTML – ایجاد Bookmark

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

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

یک نمونه bookmark:

ابتدا با استفاده از خصیصه id بوک مارک را ایجاد می کنیم:

<h2 id="C4">Chapter 4</h2>

سپس لینک به بوکمارک را در درون همان صفحه اضافه می کنیم:

<a href="#C4">Jump to Chapter 4</a>

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

<a href="/html_demo.html#C4">Jump to Chapter 4</a>

مسیرهای بیرونی – لینک به خارج

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

<a href="https://easy.parastar.info/index.php">از خانه دروس آسان بازدید کنید</a>

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

مثال زیر یک نمونه لینک نسبی است:

<a href="/html/default.asp">HTML tutorial</a>

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

در مثال زیر یک نمونه لینک نسبی کامل آمده است:

<a href="/default.asp">HTML tutorial</a>

در این مثال به صفحه ای لینک زده ایم که با صفحه جاری در یک پوشه قرار دارند.

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

خلاصه مطلب

  • از تگ <a> برای تعریف لینک استفاده می شود
  • از خصیصه href برای مشخص کردن آدرس لینک استفاده می شود
  • از خصیصه target برای تعیین مکان باز شدن سند لینک شده استفاده می شود
  • از عنصر <img> (در داخل تگ <a>) برای ایجاد لینک تصویری استفاده می شود
  • از خصیصه id برای تعریف بوکمارک در یک صفحه استفاده می شود (id="value")
  • از خصیصه href به صورت href="#value" برای لینک به بوکمارک استفاده می شود

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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