آموزش HTML - لینک های متنی

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

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

لینک دهی صفحات

یک HTML با استفاده از تگ a مشخص می شود. این تگ، تگ لنگر (anchor) نامیده می شود و هر چیزی بین تگ <a> باز و تگ <a/> بسته می شود، بخشی از پیوند می شود و کاربر می تواند روی آن قسمت کلیک کند تا به سند پیوند داده شده برسد. در زیر دستور ساده برای استفاده از تگ <a> آمده است.

<a href = "آدرس URL" ... سایر ویژگی ها>
متن لینک
</a>

مثال

در مثال زیر یک صفحه وب ساخته ایم که به سایت توت 24 لینک می دهد

<!DOCTYPE html>
<html lang="fa" dir="rtl">
   
   <head>
      <title>مثال لینک</title>
   </head>
	
   <body>
      <p>بر روی لینک زیر کلیک کنید</p>
      <a href = "https://tut24.ir" target = "_self">سایت آموزشی توت24</a>
   </body>
	
</html>

این کد نتیجه زیر را ایجاد می کند، شما می توانید روی پیوند ایجاد شده کلیک کنید تا به صفحه اصلی سایت توت24 (در این مثال) برسید.

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

ویژگی target

ما از ویژگی target در مثال قبلی خود استفاده کرده ایم. این ویژگی برای تعیین مکانی که سند پیوند شده در آن باز می شود استفاده می شود. در زیر گزینه های ممکن وجود دارد -

Sr.No	گزینه و توضیحات
1	blank_ سند پیوند شده را در یک پنجره یا برگه جدید باز می کند.
2	self_ سند پیوند داده شده را در همان قاب باز می کند.
3	parent_ سند پیوند داده شده را در قاب والد باز می کند.
4	top_ سند پیوند داده شده را در تمام قسمت پنجره باز می کند.
5	targetframe سند پیوند داده شده را در یک targetframe مشخص باز می کند.

مثال

مثال زیر را امتحان کنید تا تفاوت اساسی در چند گزینه ارائه شده برای ویژگی هدف را درک کنید.

<!DOCTYPE html>
<html>

   <head>
      <title>مثال انواع صفحه هدف در لینک</title>
      <base href = "https://www.example.com">
   </head>
	
   <body>
      <p>بر روی لینک های زیر کلیک کنید</p>
      <a href = "/html/index.htm" target = "_blank">در صفحه جدید باز می شود</a> |
      <a href = "/html/index.htm" target = "_self">در همان صفحه باز می شود</a> |
      <a href = "/html/index.htm" target = "_parent">در صفحه والد باز می شود</a> |
      <a href = "/html/index.htm" target = "_top">در بدنه صفحه باز می شود</a>
   </body>

</html>

این کد نتیجه زیر را ایجاد می کند، جایی که می توانید روی پیوندهای مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی هدف را درک کنید.

انواع هدف در لینک دهی html

استفاده از مسیر پایه

هنگامی که اسناد HTML مربوط به یک وب سایت را پیوند می دهید، لازم نیست برای هر پیوند یک URL کامل ارائه دهید. اگر از تگ <base> در هدر سند HTML خود استفاده کنید، می توانید کارتان را راحت تر کنید. این تگ برای دادن یک مسیر پایه برای همه لینک ها استفاده می شود. بنابراین مرورگر شما مسیر نسبی داده شده را به این مسیر پایه متصل می کند و یک URL کامل ایجاد می کند.

مثال

مثال زیر از تگ <base> برای مشخص کردن URL پایه استفاده می‌کند و بعداً می‌توانیم از مسیر نسبی برای همه پیوندها به جای دادن URL کامل برای هر پیوند استفاده کنیم.

<!DOCTYPE html>
<html lang="fa" dir="rtl">

   <head>
      <title>مثال لینک با مسیر پایه</title>
      <base href = "https://www.example.com/">
   </head>
	
   <body>
      <p>بر روی لینک زیر کلیک کنید</p>
      <a href = "/html" target = "_blank">آموزش html</a>
   </body>
	
</html>

این کد نتیجه زیر را ایجاد می کند، جایی که می توانید روی لینک ایجاد شده آموزش HTML کلیک کنید تا به آموزش HTML برسید.

در این حالت URL داده شده <a href = "/html" به عنوان <ahref = "http://www.tut24.ir/html" در نظر گرفته می شود

base link in html

پیوند دادن به بخشی از صفحه

برای پیوند دادن به بخشی از یک صفحه در گذشته از ویژگی name استفاده می شد. اما این روش در HTML5 منسوخ گردید ، لذا برای این کار با استفاده از ویژگی id می توانید پیوندی به بخش خاصی از یک صفحه وب معین ایجاد کنید . این یک فرآیند دو مرحله ای است.

ابتدا یک پیوند به مکانی که می‌خواهید با آن در یک صفحه وب دسترسی داشته باشید ایجاد کنید و آن را با استفاده از تگ <a...> به صورت زیر نامگذاری کنید -

<h1>HTML Text Links <a id= "top"></a></h1>

مرحله دوم ایجاد یک لینک برای پیوند دادن سند و مکانی است که می خواهید به آن برسید -

<a href = "/html/html_text_links.htm#top">رفتن به بالای صفحه</a>

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

تنظیم رنگ لینک

شما می توانید رنگ لینک ها، لینک های فعال و لینک های بازدید شده خود را با استفاده از ویژگی های link ، alink و vlink در تگ <body> تنظیم کنید.

مثال

موارد زیر را در test.htm ذخیره کنید و آن را در هر مرورگر وب باز کنید تا ببینید که چگونه ویژگی های link ، alink و vlink کار می کنند.

<!DOCTYPE html>
<html dir="rtl" lang="fa">
   
   <head>
      <title>تنظیم رنگ لینک ها</title>
      <base href = "https://www.example.com">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>بر روی لینک زیر کلیک نمایید</p>
      <a href = "/tutorial/html" target = "_blank" >آموزش html</a>
   </body>
   
</html>

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

لینک های دانلود

می‌توانید پیوند متنی ایجاد کنید تا فایل‌های PDF، یا DOC یا ZIP خود را قابل دانلود کنید. این خیلی ساده است؛ شما فقط باید URL کامل فایل دانلودی را به صورت زیر ارائه دهید -

<!DOCTYPE html>
<html dir="rtl" lang="fa">

   <head>
      <title>لینک برای دانلود فایل</title>
   </head>
	
   <body>
      <a href="https://www.example.com/page.pdf">دانلود فایل پی دی اف</a>
   </body>
	
</html>

لینک ایجاد شده توسط این کد برای دانلود فایل استفاده می شود و با کلیک بر روی آن فایل مشخص شده دانلود می شود

مفهوم لینک و URL - درس قبلی

درس بعدی - لینک های تصویری