آموزش Html؛ آموزش کار با لینک در HTML

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

این لینک‌ها می‌توانند مخاطب را به محتوا یا بخش‌های مهم دیگر سایت شما یا منابع دیگر هدایت کنند. لینک‌ها نه تنها برای افزایش اعتبار محتوا و صفحه وب، بلکه به منظور اهداف سئو و بهتر دیده شدن در میان رقبا هم به کار می‌روند. با ما همراه باشید…

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

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

 

هایپرلینک ها در Html

لینک‌ها را می‌توان تقریبا در همه جای صفحات وب پیدا کرد. کار لینک‌ها هدایت کاربر از صفحه‌ای به صفحه دیگر یا از محتوایی به محتوای دیگر است. لینک‌های HTML از نوع هایپرلینک هستند که می‌توانید با کلیک کردن روی آن‌ها به سند دیگری هدایت شوید. وقتی ماوس خود را روی یک لینک نگه می‌دارید، نشانگر ماوس (در بیشتر موارد) به شکل یک دست کوچک درمی‌آید. توجه داشته باشید که لینک‌ها نباید لزوما به شکل متن باشند، بلکه می‌توانند در قالب عکس یا یک عنصر HTML باشند.

 

نگارش لینک در اچ تی ام ال

نحوه نگارش یا سینتکس (Syntax) لینک‌ها در HTML به این صورت است که لینک‌ها با تگ تعریف می‌شوند:

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

<a href="https://www.sourcebaran.com/html/">Visit our HTML tutorial</a>

پیش نمایش

خصوصیت href آدرس مقصد یک لینک را مشخص می‌نماید. link text با کلیک کردن روی این قسمت به آدرس مشخص شده هدایت خواهید شد. فراموش نکنید که در انتهای لینک خود حتما علامت اسلش (/) را قرار دهید در غیر این صورت ممکن است دو درخواست به سرور داده شود. بسیاری از سرورها به صورت خودکار این علامت را به آدرس اضافه کرده و سپس یک درخواست تازه ایجاد می‌کنند.

 

لینک Local در اچ تی ام ال

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

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

پیش نمایش

 

رنگ لینک در HTML

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

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

می‌توانید به سلیقه خودتان و با استفاده از style، رنگ‌های پیش‌فرض را تغییر دهید:

<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 مشخص می‌کند که سند لینک شده در کجا باز شود. این خصوصیت می‌تواند دارای یکی از مقادیر زیر باشد:

1. blank_ : که سند لینک شده را در یک پنجره یا سربرگ جدید باز می‌کند
2. self_ : که سند لینک شده را در همان پنجره یا سربرگی که کلیک انجام شده باز می‌کند (روش پیش‌فرض)
3. parent_ : که سند لینک شده را در فریم والد (parent frame) باز می‌کند
4. top_ : که سند لینک شده را به صورت کامل در همان پنجره نشان می‌دهد
5. Framename: که سند لینک شده را در یک فریم نام‌گذاری شده نشان می‌دهد

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

<a href="https://www.sourcebaran.com/" target="_blank">Visit W3Schools!</a>

پیش نمایش

این نکته را به یاد داشته باشید که اگر صفحه وب شما در یک فریم قفل شده باشد می‌توانید از target=”_top” برای خارج شدن از آن فریم استفاده کنید:

<a href="https://www.sourcebaran.com/html/" target="_top">HTML5 tutorial!</a>

پیش نمایش

 

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

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

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

پیش نمایش

توجه داشته باشید که border:0; به این منظور استفاده می‌شود که از نمایش کادر پیرامون عکس‌ها توسط اینترنت اکسپلورر ۹ و نسخه‌های پیشین جلوگیری شود.

 

ایجاد یک بوک مارک در Html

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

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

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

سپس به آن بوک مارک لینکی از درون همان صفحه بدهید (Jump to chapter 4):

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

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

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

پیش نمایش

 

External page در Html

لینک دهی به صفحات خارجی (External page) یا صفحات فرعی وب سایت را می‌توان با یک URL کامل یا با مسیری مشابه با صفحه جاری وب سایت (صفحه اصلی) مشخص کرد. مثال زیر از یک URL کامل برای لینک دادن به یک صفحه استفاده می‌کند:

<a href="https://www.sourcebaran.com/html/default.asp">HTML tutorial</a>

پیش نمایش

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

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

پیش نمایش

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

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

پیش نمایش

 

لیست جلسات قبل آموزش Html

1. آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
2. آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش Html؛ آموزش کار با پاراگراف و استایل در Html
4. آموزش Html؛ آموزش کار با قالب بندی متن در Html
5. آموزش Html؛ آموزش کار با کامنت در HTML
6. آموزش Html؛ آموزش کار با کامنت در HTML
7. آموزش Html؛ آموزش کار با رنگ ها در HTML
8. آموزش Html؛ آموزش کار با تصاویر در HTML

منبع : W3Schools

The post آموزش Html؛ آموزش کار با لینک در HTML appeared first on آموزش برنامه نویسی.