آموزش HTML - پیوندها

پیوندهای HTML

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

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

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

تگ لنگر (<a>)

تگ لنگر یا تگ <a> یک عنصر پایه‌ای است که بین دو صفحه هایپرلینک ایجاد می‌کند. هر چیزی که بین تگ آغازین <a> و تگ پایانی </a> نوشته شود، قابل کلیک خواهد بود و هنگامی که کسی روی آن کلیک کند، صفحه پیوند داده‌شده باز می‌شود.

نحو

در ادامه، نحو ایجاد هایپرلینک در HTML آمده است:

<a href="URL" target="_target_type">Link Text</a>

برای آشنایی بیشتر با ایجاد نشانی‌های اینترنتی، پیشنهاد می‌کنیم این فصل را مطالعه کنید: آشنایی با URL

ایجاد هایپرلینک (پیوند دادن صفحات وب و اسناد)

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

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

نحو

<a href="URL" ... attributes-list>Link Text</a>

مثال

در این مثال، یک سند ساده HTML ایجاد می‌کنیم که نحوه استفاده از هایپرلینک را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Hyperlink Example</title>
</head>
<body>
   <p>Click following link</p>
   <a href="https://www.tutorialspoint.com/" target="_self">Tutorials Point</a>
</body>
</html>

با اجرای مثال بالا، یک پیوند نمایش داده می‌شود. می‌توانید روی پیوند ایجادشده کلیک کنید تا به صفحه اصلی وب‌سایت Tutorials Point بروید.

ویژگی "target"

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

مثال

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

<!DOCTYPE html>
<html>
<head>
   <title>Hyperlink Example</title>
   <base href="https://www.tutorialspoint.com/">
</head>
<body>
   <p>Click any of the following links</p>
   <a href="/html/index.htm" target="_blank">Opens in New</a> | <a href="/html/index.htm" target="_self">Opens in Self</a> | <a href="/html/index.htm" target="_parent">Opens in Parent</a> | <a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>

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

استفاده از مسیر پایه در هایپرلینک‌ها

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

مثال

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

<!DOCTYPE html>
<html>
<head>
   <title>Hyperlink Example</title>
   <base href="https://www.tutorialspoint.com/">
</head>
<body>
   <p>Click following link</p>
   <a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

نتیجه زیر نمایش داده می‌شود. می‌توانید روی پیوند ایجادشده با عنوان آموزش HTML کلیک کنید تا به آموزش HTML بروید.

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

پیوند دادن به بخشی از همان صفحه به کاربران اجازه می‌دهد مستقیماً به آن بخش منتقل شوند. می‌توانید با استفاده از ویژگی href و مقدار #id، پیوندی به بخش مشخصی از همان صفحه ایجاد کنید. در این حالت، #id عنصری را در صفحه هدف قرار می‌دهد که دارای ویژگی id متناظر است.

مثال

در کد زیر، نحوه استفاده از ویژگی href برای رفتن به بخشی دیگر از همان صفحه را نشان می‌دهیم. مقدار #idofsection را در ویژگی href قرار می‌دهیم تا بتوانیم به بخش موردنظر خود منتقل شویم:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        div {
            height: 900px;
        }
    </style>
</head>

<body>
   <h2>Ed-Tech</h2>
   <div> 
      <p>
         Tutorialspoint: Simply Easy Learning
      </p>
      <a href="#about">Know More</a>
   </div>
   <h2 id="about">Section 2</h2>
   <div> 
   <p>
      Tutorials Point is an online learning platform
      providing free tutorials, paid premium courses,
      and eBooks. Learn the latest technologies and 
      programming languages SQL, MySQL, Python, C, 
      C++, Java, Python, PHP, Machine Learning, data
      science, AI, Prompt Engineering and more.
   </p>
   </div>
</body>

</html>

استایل‌دهی به هایپرلینک‌ها (تنظیم رنگ پیوند)

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

مثال

کد زیر را در فایل test.htm ذخیره کنید و آن را در هر مرورگر وبی باز کنید تا نحوه عملکرد ویژگی‌های link، alink و vlink را مشاهده کنید.

<html>
<head>
   <title>Hyperlink Example</title>
   <base href="https://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
   <p>Click following link</p>
   <a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

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

پیوندهای قابل دانلود

HTML به شما امکان می‌دهد پیوندهایی برای دانلود ایجاد کنید؛ به این ترتیب می‌توانید پیوندهایی بسازید که فایل‌های PDF، DOC یا ZIP شما را قابل دانلود کنند. برای قابل دانلود کردن یک پیوند، می‌توانید از ویژگی download در تگ <a> استفاده کنید و مسیر فایل قابل دانلود را در ویژگی href مشخص کنید.

مثال

مثال زیر نحوه ایجاد یک پیوند قابل دانلود در HTML را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Downloadable Link Example</title>
</head>
<body>
   <a href="/html/src/sample.txt" download>Download File</a>
</body>
</html>

نام دلخواه برای فایل

همچنین می‌توانید نام فایل دانلودشده را مشخص کنید. برای تعیین یک نام دلخواه برای فایل، باید آن را به ویژگی download بدهید.

در ادامه یک مثال آمده است:

<a href="/html/src/sample.txt" download="custom-report.txt">Download File</a>

کادر محاوره‌ای دانلود فایل

همچنین می‌توانید کاری کنید که HTML پیش از شروع دانلود، کادر محاوره‌ای دانلود فایل را باز کند تا کاربر بتواند محل ذخیره فایل را انتخاب کند. برای این کار می‌توانید از یک سربرگ HTTP در پاسخ HTTP خود استفاده کنید.

برای مثال، اگر بخواهید فایلی با نام filename را از طریق یک پیوند مشخص قابل دانلود کنید، نحو آن به شکل زیر خواهد بود.

نحو

#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
   print("$buffer");
}

توجه: برای کسب اطلاعات بیشتر درباره برنامه‌های PERL CGI، آموزش PERL و CGI را مطالعه کنید.