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

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

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

<!DOCTYPE html>
<html>
   
   <head>
       <title>Second Page</title>
   </head>
   
   <body>
       <h1>This is the second page</h1>
       <p>Part 1</p>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <p id="partTwo">Part 2</p>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
   </body>
</html>

همانطور که در کد فوق مشخص است پس از تگ <h1> پاراگرافی را قرار داده ایم که حاوی عبارت Part 1 است. سپس با چندین بار استفاده از تگ <br/> مجدد یک تگ پاراگراف دیگر حاوی عبارت Part 2 ایجاد کرده اما این بار برای آن یک id با مقدار partTwo در نظر گرفته ایم.
اکنون بایستی کدهای فایل index.html را بنویسیم. برای این منظور کدهای زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
   
   <head>
       <title>asrefonon</title>
   </head>
   
   <body>
       <p>
           <a href="pages/second-page.html">Go to second page | Part 2</a>
       </p>
   </body>
</html>

در کد فوق پاراگرافی تحت عنوان Go to second page | Part 2 ایجاد کرده ایم. سپس با استفاده از تگ های <a></a> این متن را لینک کرده ایم به فایل second-page.html که در فولدر pages قرار دارد. پس از اجرای این صفحه در مرورگر با تصویر زیر مواجه خواهیم شد:

لینک_دادن_به_بخشی_از_صفحه_دیگر_در_اچ_تی_ام_ال1

با کلیک روی متن به صفحه دوم خواهیم رفت:

2لینک_دادن_به_بخشی_از_صفحه_دیگر_در_اچ_تی_ام_ال

می بینیم که به صفحه دوم رفته ایم اما مرورگر ما را به ابتدای این صفحه ارجاع داده است. اگر خاطرمان باشد پاراگرافی ایجاد کردیم حاوی عبارت Part 2 که یک id هم برای آن تحت عنوان partTwo در نظر گرفتیم. حال اگر بخواهیم مستقیماً به این پاراگراف ارجاع داده شویم می بایست کد مربوط به فایل index.html را به صورت زیر تکمیل کنیم:

   <body>
       <p>
           <a href="pages/second-page.html#partTwo">Go to second page | Part 2</a>
       </p>
   </body>

می بینیم که پس از آدرس pages/second-page.html یک علامت # قرار داده سپس id مرتبط با پاراگراف Part 2 که برابر است با partTwo را قرار می دهیم.
مجدد مرورگر را به روز رسانی کرده و پس از کلیک کردن روی عبارت Go to second page | Part 2 به بخش Part 2 از فایل second-page.html خواهیم رفت:

3لینک_دادن_به_بخشی_از_صفحه_دیگر_در_اچ_تی_ام_ال

به همین سادگی!

221

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

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

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

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

توسط
تومان