آموزش زبان HTML (جلسه ۲۷)

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

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

<!DOCTYPE html>
<html>
     
    <head>
        <title>asrefonon</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>asrefonon</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 تبدیل به لینک شده است. حال با کلیک بر روی آن نتیجه زیر را مشاهده خواهیم کرد:

xdown_the_page.jpg.pagespeed.ic.m_5qNVMReq

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

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

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

توسط
تومان