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

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

نحوه استفاده

برای ایجاد لینک از تگ <a> استفاده می شود. لینک ها می توانند بصورت داخلی یا خارجی باشند. در صورتیکه لینک شما خارجی باشد می بایست آدرس صفحه یا وبسایت مورد نظر ذکر شود و اگر لینک داخلی بود می بایست id عنصری که قصد دارید به آن ارجاع داده شود، تعیین گردد.

مهمترین attribute های تگ a به شرح زیر می باشند.

  • href: آدرس صفحه یا عنصری که قصد دارید به آن متصل شوید.
  • target: نحوه باز شدن لینک که می توان یکی از مقادیر زیر را به آن اختصاص داد.
    • _self: لینک مورد نظر را در پنجره فعلی باز می کند.
    • _parent: لینک مورد نظر را در parent (پدر عنصر) باز می کند.
    • _blank: لینک مورد نظر را در یک tab جدید باز می کند.

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

<a href="https://benoacademy.com" target="_self">آکادمی بنو</a>

در صورتیکه مقدار target تعیین نشود، بصورت پیش فرض _self در نظر گرفته می شود.

تمرین: صفحه ای طراحی کنید که حاوی 4 لینک به سایت های زیر باشد.

  • آکادمی بنو
  • باتری کار
  • کاپنا
  • راژیس
<!DOCTYPE html>
<html>
    <head>
        <title>آکادمی بنو</title>
    </head>
    <body>
        <a href="https://benoacademy.com" target="_self">آکادمی بنو</a>
        <br />
        <a href="https://batrycar.com" target="_blank">باتری کار</a>
        <br />
        <a href="https://cappna.biz" target="_blank">کاپنا</a>
        <br />
        <a href="http://therazhis.com" target="_blank">راژیس</a>
    </body>
</html>

اگر قصد داشته باشید به یکی از صفحات داخلی مانند products.html لینک دهید کافی است اولاً صفحه مورد نظر، در مجاورت صفحه فعلی باشد ثانیاً تنها نام و پسوند صفحه را ذکر نمایید.

<a href="products.html">محصولات</a>

همانطور که گفته شد برای ایجاد لینک داخلی نیز کافی است id عنصر مورد نظر را به همراه علامت # مشخص کنید.

<a href="#samples">نمونه کارها</a>