026-32601

لینک دادن به بخش های مختلف یک صفحه اچ تی ام ال (html)

1 1 1 1 1 (3 Votes)

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

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </body>
</html>

همانطور که در کد فوق می بینیم با چندین بار استفاده از دستور <br/> از عمد خواسته ایم تا ارتفاع صفحه خود را افزایش دهیم. پس از ذخیره کردن برنامه و به روز رسانی مرورگر تاثیر این تگ بهتر نمایان خواهد شد:

استفاده از تگ br برای افزایش ارتفاع صفحه در اچ تی ام ال

همانطور که می بینیم صفحه ای بلندتر ایجاد کرده ایم. حال مجدد اقدام به تکمیل کد خود به صورت زیر می کنیم:

  
<!DOCTYPE html>
<html>
  
   <head>
       <title>Netshahr</title>
   </head>
  
   <body>
       <p><a href="#end">Go down the page</a></p>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <p id="end">End</p>
   </body>
</html>

همانطور که در کد فوق مشاهده می شود ابتدا در انتهای سند یک پاراگراف جدید ایجاد کرده و محتوای آن را End قرار می دهیم. سپس داخل تگ آغازین پاراگراف دستور id را می نویسیم که مخفف واژه identification به معنی "هویت" است. در واقع با این کار می خواهیم نامی اختصاصی برای این پاراگراف در نظر بگِریم. سپس یک علامت مساوی قرار داده و داخل دو علامت "  " نامی برای این پاراگراف در نظر می گیریم. نامی که در این پاراگراف در نظر گرفته ایم end است. حال قصد داریم پس از آن که روی عبارت Go down the page کلیک کردیم به پایین صفحه به سمت پاراگراف فوق الذکر ارجاع داده شویم. برای این منظور از یک تگ <a> در کنار عبارت Go down the page استفاده می کنیم. همانطور که در کد فوق ملاحظه می شود برخلاف روش های قبل که داخل دستور href یک آدرس url و یا آدرس به یک صفحه داخلی دیگر را می نوشتیم، این بار یک علامت # که اصطلاحاً Pound Sign یا Hash Mark گفته می شود قرار داده سپس نام id مد نظر خود را می نویسیم که در این مثال end است. پس از ذخیره کردن فایل، مرورگر خود را به روز رسانی می کنیم:

ایجاد go down the page در اچ تی ام ال html

می بینیم که عبارت Go down the page تبدیل به لینک شده است. حال با کلیک بر روی آن نتیجه زیر را مشاهده خواهیم کرد:

down the page

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



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

نظراتی که به تعمیق بحث کمک می کند، در معرض ملاحظه و قضاوت دیگران قرار می گیرند. نظراتی که حاوی توهین، افترا و تهمت به دیگران باشد، منتشر نخواهد شد. لطفاً از نوشتن نظرات خود به صورت حروف لاتین (فینگلیش) خودداری نمایید.


تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب