چگونه لینک یا پیوند یا hyperlink در HTML قرار دهیم؟

چگونه لینک یا پیوند یا hyperlink در HTML قرار دهیم؟
چکیده مطلب
لینک یا پیوند یا hyperlink ها در صفحات وب واقعاً مهم هستند ، زیرا قابلیت کلیک شدن به متن یا دکمه و یا هر عنصر دیگری در صفحه وب و انتقال کاربر از مکانی به مکانی دیگر در یک صفحه وب را به کاربران می دهد . در این مقاله نحوه مورد نیاز برای ایجاد پیوند را آموزش می دهیم .
دسترسی آسان به مطالب

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

لینک یا hyperlink چیست؟

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

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

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

لینک های صفحه اصلی متاوبز
لینک های صفحه اصلی متاوبز

لینک ها به صورت لیست : 

آناتومی یک لینک

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

با استفاده از ویژگی href ، در تگ <a> که به عنوان مرجع ابرمتن یا هدف نیز شناخته می شود ، آدرسی که میخواهیم کاربر با کلیک بر روی ان به آنجا منتقل شود را قرار می دهیم.

نکته : به خاطر داشته باشید که باید از تگ های <a>…</a> در تگ های <body>…</body> استفاده کنید.

لینک دهی با تگ a
لینک دهی با تگ a

به عنوان مثال :

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1>متاوبز</h1>
        <p> من در حال ایجاد یک لینک در متاوبز هستم </br> 
    <a href="https://metawebz.org/">صفحه اصلی متاوبز</a> 
    </p>
   </body>
</html>



که نتیجه زیر را مشاهده خواهید کرد.

نمونه لینک دهی
نمونه لینک دهی

افزودن اطلاعات پشتیبانی با ویژگی عنوان

ویژگی دیگری که ممکن است بخواهید به پیوندهای خود اضافه کنید ویژگی title است. ویژگی title عنوانی حاوی اطلاعات اضافی در مورد پیوند است، مانند اطلاعاتی که صفحه لینک شده حاوی چه نوع اطلاعاتی است، یا مواردی که باید در وب سایت از آنها آگاه بود.

مانند :

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1>متاوبز</h1>
        <p> من در حال ایجاد یک لینک در متاوبز هستم </br> 
        <a href="https://metawebz.org/"  title=" با مجموعه متاوبز کسب و کار آنلاین خود  را راه اندازی کرده و در صفحه اول گوگل دیده شوید">
        صفحه اصلی متاوبز
        </a> 
    </p>
   </body>
</html>



این نتیجه زیر را به ما می دهد و با نگه داشتن ماوس روی پیوند متن ویزگی title را به عنوان یک راهنمای ابزار نمایش می دهد.

استفاده از ویژگی title در تگ a در لینک دهی
استفاده از ویژگی title در تگ a در لینک دهی

توجه: عنوان پیوند فقط با شناور ماوس آشکار می‌شود، به این معنی که افرادی که برای پیمایش صفحات وب به کنترل‌های صفحه‌کلید یا صفحه‌های لمسی تکیه می‌کنند در دسترسی به اطلاعات عنوان مشکل خواهند داشت. اگر اطلاعات یک عنوان واقعاً برای کاربردپذیری صفحه مهم است، باید آن را به گونه ای ارائه کنید که برای همه کاربران قابل دسترسی باشد، مثلاً با قرار دادن آن در متن معمولی.

تبدیل محتواهای دیگر صفحات وب به پیوند

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

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1>متاوبز</h1>
        <p> من در حال ایجاد یک لینک در متاوبز هستم </br> 
        <a href="https://metawebz.org/" >
        <img src="metawebz.jpg" alt="صفحه ی اصلی متاوبز" />
        </a> 
    </p>
   </body>
</html>

 

توجه: در مقاله “نحوه استفاده از تصویر با تگ img در  HTML” درباره استفاده از تصاویر در سند html به طور کامل پرداخته ایم.

URL ها و مسیرها

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

URL یا Uniform Resource Locator رشته ای از متن است که مشخص می کند چیزی در وب کجا قرار دارد. برای مثال، صفحه اصلی متاوبز در این آدرس قرار دارد https://metawebz.org.

URL ها از مسیرهایی برای یافتن فایل ها استفاده می کنند. مسیرها مشخص می کنند که فایل مورد نظر شما در کجای سیستم فایل قرار دارد. بیایید به مثالی از ساختار دایرکتوری نگاه کنیم، دایرکتوری create-hyperlinks را ببینید.

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

ساختار دایرکتوری ساده دایرکتوری والد create-hyperlinks نامیده می شود و شامل دو فایل به نام های index.html و contacts.html و دو دایرکتوری به نام پروژه ها و pdf است که به ترتیب حاوی یک فایل index.html و یک فایل project-brief.pdf هستند.

این ریشه ساختار دایرکتوری نامیده می شود creating-hyperlinks. هنگامی که به صورت محلی با یک وب سایت کار می کنید، یک دایرکتوری خواهید داشت که شامل کل سایت است. در داخل ریشه ، ما یک index.html فایل و الف contacts.html . در یک وب سایت واقعی،  index.html صفحه اصلی یا صفحه فرود ما خواهد بود (صفحه وب که به عنوان نقطه ورود برای یک وب سایت یا بخش خاصی از وب سایت عمل می کند).

همچنین دو فهرست در داخل ریشه ما وجود دارد ، pdfs و projects. هر کدام یک فایل در داخل خود دارند .

یک PDF ( project-brief.pdf) و یک index.html به ترتیب فایل توجه داشته باشید که می توانید دو مورد داشته باشید index.html فایل‌ها در یک پروژه، تا زمانی که در مکان‌های مختلف سیستم فایل باشند.

دومین index.html شاید صفحه فرود اصلی برای اطلاعات مربوط به پروژه باشد.

همان دایرکتوری :

اگر می خواهید یک هایپرلینک در داخل آن قرار دهید index.html (سطح بالا index.html) اشاره به contacts.html ، نام فایلی را که می خواهید به آن پیوند دهید را مشخص کنید، زیرا در همان فهرست فایل فعلی قرار دارد.

URL مورد استفاده شما این است : contacts.html

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1>متاوبز</h1>
        <p>
 	 آیا می خواهید با یک کارمند خاص تماس بگیرید؟  جزئیات را در ما بیابید
    </br>
  	<a href="contacts.html">صفحه تماس با ما</a>

    </p>
   </body>
</html>

 

حرکت به سمت پایین در زیر شاخه ها :

اگر می خواهید یک هایپرلینک در داخل آن قرار دهید index.html (سطح بالا index.html) اشاره به  projects/index.html ، باید به پایین بروید projects دایرکتوری قبل از نشان دادن فایلی که می خواهید به آن پیوند دهید. این کار با تعیین نام دایرکتوری، سپس اسلش رو به جلو و سپس نام فایل انجام می شود. URL

مورد استفاده شما این است : projects/index.html

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1>متاوبز</h1>
        <p>
    به پروژه های ما سر بزنید 
    <a href="projects/index.html">صفحه پروژه ها</a>
    </p>

   </body>
</html>



انتقال پشتیبان به دایرکتوری های والد :

اگر می خواهید یک هایپرلینک در داخل آن قرار دهید projects/index.html با اشاره به  pdfs/project-brief.pdf، باید یک سطح دایرکتوری بالا بروید، سپس به پایین برگردید pdfs فهرست راهنما.

برای بالا رفتن از یک فهرست، از دو نقطه استفاده کنید ( .. )

بنابراین URL مورد استفاده شما این است :

../pdfs/project-brief.pdf

 

توجه: در صورت نیاز می توانید چندین نمونه از این ویژگی ها را در URL های پیچیده ترکیب کنید، به عنوان مثال:

../../../complex/path/to/my/file.html

 

ایجاد Bookmark یا لینک لنگر (لینک به بخش های درون یک سند)

پیوند دادن به بخش خاصی از یک سند HTML، به عنوان Bookmark شناخته می شود . برای انجام این کار ابتدا باید یک id به عنصری که می خواهید به آن پیوند دهید نسبت دهید. معمولاً پیوند دادن به یک عنوان خاص منطقی است، بنابراین چیزی شبیه به زیر است:

<h2 id="metawebz">آدرس متاوبز</h2>

سپس برای پیوند به آن id خاص ، باید آن را در انتهای URL، قبل از علامت هش/پیوند (#) قرار دهید ، مثلا:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1>متاوبز</h1>
        <p>
    تماس با ما 
    </br>
 	 <a href="contacts.html#metawebz">آدرس متاوبز</a>.

    </p>

   </body>
</html>

حتی می توانید از Bookmark به تنهایی برای پیوند دادن به بخش دیگری از سند فعلی استفاده کنید . مانند:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Hyperlinks</title>
   </head>

   <body>
      <h1 id="meta">متن ساختگی</h1>

    </br><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        </br>
    </br>
    </hr>
    <p>
   	<a href="#metawebz">به سرفصل متاوبز بروید</a>
    </p>
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        </br>
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        </br>
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        </br><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
    </br>
    </hr>
    <h2 id="metawebz">متاوبز</h2>
    </br><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        </br><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        </br><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        </br><p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p> 
    </br>
    </hr>
    <p>
   	<a href="#meta">به سرفصل متن ساختگی بروید</a>
    </p>

   </body>
</html>

شما هم میتوانید امتحان کنید.

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

ایجاد Bookmark یا لینک لنگر
ایجاد Bookmark یا لینک لنگر

و با کلیک بر روی لینک (به سرفصل متن ساختگی بروید) بر روی تیتر متن ساختگی در ابتدای صفحه خواهید رفت.

ایجاد Bookmark یا لینک لنگر
ایجاد Bookmark یا لینک لنگر

درباره HTML بیشتر بخوانید و حرفه ای شوید:

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

نویسنده
مدیریت طراحی
مدیریت طراحی

نظرات

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *