026-32601

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

1 1 1 1 1 (3 Votes)

در این قسمت از آموزش می خواهیم ببینم که به چه شکل می توان نه تنها به یک صفحه دیگر در اچ تی ام ال (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>Netshahr</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لینک دادن به بخشی از صفحه دیگر در اچ تی ام ال



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

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


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

آخرین مطالب