Cara Menerapkan Anchor pada Navigasi Halaman Profil

Dhe997
Sebelumnya, pada halaman profil yang kita buat, sudah ada sebuah list sebagai navigasi. Namun demikian, karena belum ada elemen anchor, maka navigasi tersebut belum dapat kita gunakan. Oleh karena itu, mari kita tambahkan elemen anchor pada tiap item list-nya.
Silakan buka kembali berkas index.html pada text editor. Tambahkan elemen anchor pada tiap item pada list.

  1. <ul>

  2.        <li><a href="#">Sejarah</a></li>

  3.        <li><a href="#">Geografis</a></li>

  4.        <li><a href="#">Wisata</a></li>

  5. </ul>


Setelah menambahkan elemen anchor pada item list, maka tampilan item list akan nampak menjadi hyperlink.
20191206101724ce2cf5202d9abd2bc77fec1e70d7a08a.png
Namun ketika salah satu item dipilih, tidak akan terjadi apa apa, karena pada atribut href kita belum menetapkan sebuah target. Nilai href dapat berupa sebuah URL untuk mengarahkan ke sebuah halaman yang berbeda, atau bisa berupa tanda pagar (#) diikuti dengan id elemen untuk mengarahkan tampilan pada elemen sesuai id yang ditentukan (masih dalam satu halaman). 
Maka dari itu, mari kita berikan atribut id pada sebuah elemen yang akan menjadi target navigasi. Berikan atribut id pada seluruh elemen <h2> dengan id sesuai dengan kontennya.

  1. <body>

  2.   .......

  3.    <ul>

  4.        <li><a href="#">Sejarah</a></li>

  5.        <li><a href="#">Geografis</a></li>

  6.        <li><a href="#">Wisata</a></li>

  7.    </ul>

  8.    <h2 id="sejarah">Sejarah</h2>

  9.  .......

  10.  

  11.    <h2 id="geografis">Geografis</h2>

  12.  .......

  13.  

  14.    <h2 id="wisata">Wisata</h2>

  15.  .......

  16. </body>


Kemudian tuliskan juga id elemen target setelah tanda pagar (#) pada tiap elemen anchor yang terdapat pada item list.

  1. <body>

  2.   .......

  3.    <ul>

  4.        <li><a href="#sejarah">Sejarah</a></li>

  5.        <li><a href="#geografis">Geografis</a></li>

  6.        <li><a href="#wisata">Wisata</a></li>

  7.    </ul>

  8.    <h2 id="sejarah">Sejarah</h2>

  9.  .......

  10.  

  11.    <h2 id="geografis">Geografis</h2>

  12.  .......

  13.  

  14.    <h2 id="wisata">Wisata</h2>

  15.  .......

  16. </body>


Setelah menuliskan id elemen pada target anchor, maka hypertext di navigasi sudah dapat digunakan.
20191206102105b726d845fd2ce1aa5dfe5685b910062c.png

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.