Latihan: Menerapkan Elemen Anchor pada Halaman Profil

Belajar Dasar Pemrograman Web

Tools

Anda sudah belajar banyak sekali elemen-elemen pemberi format teks yang melengkapi pengembangan halaman web. Nah, sekarang waktunya kita berlatih agar materi yang dipelajari dapat terimplementasikan secara langsung.

Tujuan

Pada latihan sebelumnya, kita telah membuat daftar navigasi untuk setiap topik pembicaraan artikel. Nah, pada mulanya, kita berekspektasi daftar navigasi tersebut dapat mengarahkannya ke topik spesifik sesuai topik yang dipilih/tekan. Namun, hal tersebut belum dapat terealisasikan.

Kita akan memanfaatkan elemen anchor dan menambahkan sedikit atribut yang akan berperan dalam masalah di atas. Hasilnya, Halaman Profil sudah dapat dijelajahi dengan daftar navigasi. Sangat menarik, kan?

Alur Latihan

Berikut adalah alur latihan kali ini.

Membuka hasil latihan terakhir dengan VSCode.
Membuat elemen anchor dalam list item pada navigation list.
Memberikan atribut id pada setiap elemen <h2> sebagai topik pembahasan artikel.
Menyesuaikan nilai atribut href sesuai dengan id di setiap elemen <h2>.
Menjalankan halaman web pada browser.

Latihan Menerapkan Elemen Anchor pada Halaman Profil

Berikut adalah langkah-langkah yang perlu diikuti untuk mengerjakan latihan dengan baik.

Silakan buka proyek Halaman Profil terbaru. Gunakanlah code editor apa pun sesuai preferensi Anda. Jika belum memilikinya, silakan Anda unduh dan buka proyek tersebut pada GitHub repository ini.

Untuk menerapkan elemen anchor, tentu saja kita perlu memperbarui kode pada dokumen HTML. Jadi, silakan buka kembali berkas index.html dan tambahkan atau sesuaikan kodenya agar sesuai dengan kode bercetak tebal berikut.

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8" />
    <title>Halaman Profil Bandung</title>
  </head>
  <body>
    <h1>Bandung</h1>
    <p>
      Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi
      tersebut.
    </p>
 
    <ul>
      <li>
        <a href="#">Sejarah</a>
      </li>
      <li>
        <a href="#">Geografis</a>
      </li>
      <li>
        <a href="#">Wisata</a>
      </li>
    </ul>
 
    <h2>Sejarah</h2>
    <!-- Kode lainnya disembunyikan... -->
  </body>
</html>

Setelah menambahkan elemen anchor pada list item, tampilan navigation list akan menjadi hyperlink dan tampak seperti gambar berikut.

Namun, ketika salah satu item ditekan, tidak ada apa pun yang terjadi. Hal ini karena atribut href belum mengetahui topik yang akan diincar. Nilai href dapat berupa URL untuk mengarahkan ke halaman yang berbeda atau berupa anchor (tanda pagar (#)) yang diikuti dengan nama id dari elemen. Hal ini berguna untuk mengarahkan fokus pengguna pada elemen tersebut.

Oleh karena itu, mari kita berikan atribut id pada elemen-elemen yang akan menjadi target navigasi. Silakan sesuaikan kodenya dengan kode yang memiliki cetakan tebal berikut.

<!DOCTYPE html><html>
  <!-- Kode lainnya disembunyikan... -->
  <body>
    <!-- Kode lainnya disembunyikan... -->
 
    <ul>
      <li>
        <a href="#">Sejarah</a>
      </li>
      <li>
        <a href="#">Geografis</a>
      </li>
      <li>
        <a href="#">Wisata</a>
      </li>
    </ul>
 
    <h2 id="sejarah">Sejarah</h2>
    <img src="assets/image/history.jpg" alt="Sejarah" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="geografis">Geografis</h2>
    <img src="assets/image/geografis.jpg" alt="Geografis" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="wisata">Wisata</h2>
    <!-- Kode lainnya disembunyikan... -->
  </body>
</html>

Apakah Anda ingin mencoba melihat hasilnya? Silakan! Namun, tidak ada perubahan yang tampak pada browser karena kita hanya menambahkan identitas pada elemen <h2> saja.

Mari kita lanjutkan! Dari masing-masing elemen <h2> yang telah ditambahkan id, berikan juga pada setiap elemen anchor pada navigation list. Untuk lebih jelas, silakan sesuaikan dengan kode bercetak tebal berikut.

<!DOCTYPE html><html>
  <!-- Kode lainnya disembunyikan... -->
  <body>
    <!-- Kode lainnya disembunyikan... -->
 
    <ul>
      <li>
        <a href="#sejarah">Sejarah</a>
      </li>
      <li>
        <a href="#geografis">Geografis</a>
      </li>
      <li>
        <a href="#wisata">Wisata</a>
      </li>
    </ul>
 
    <h2 id="sejarah">Sejarah</h2>
    <img src="assets/image/history.jpg" alt="Sejarah" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="geografis">Geografis</h2>
    <img src="assets/image/geografis.jpg" alt="Geografis" />
    <!-- Kode lainnya disembunyikan... -->
 
    <h2 id="wisata">Wisata</h2>
    <!-- Kode lainnya disembunyikan... -->
  </body>
</html>

Sip! Seharusnya, navigasi sudah berfungsi dengan baik. Anda bisa klik salah satu navigation item tersebut untuk menuju topik yang diinginkan sekarang. Berikut hasil perubahan yang telah dilakukan sejauh ini. Betapa senangnya!

Bedah Kode

Hebat! Halaman Profil kita sudah punya navigation list saat ini. Tidak hanya memiliki, tetapi berfungsi dengan semestinya. Mari kita ulas tahapan yang telah dilakukan.

Atribut ID

Atribut id termasuk dalam salah satu dari sekian global attribute. Global attributes merupakan attribute HTML yang diperuntukkan bagi elemen apa pun. Contoh yang kita lakukan pada latihan ini adalah memberikan atribut id pada elemen <h2>.

<body>
  <!-- Kode lainnya disembunyikan... -->
 
  <h2 id="sejarah">Sejarah</h2>
  <img src="assets/image/history.jpg" alt="Sejarah" />
  <!-- Kode lainnya disembunyikan... -->
 
  <h2 id="geografis">Geografis</h2>
  <img src="assets/image/geografis.jpg" alt="Geografis" />
  <!-- Kode lainnya disembunyikan... -->
 
  <h2 id="wisata">Wisata</h2>
  <!-- Kode lainnya disembunyikan... -->
</body>

Ada beberapa penggunaan umum terhadap atribut ini, yaitu menangkap elemen menggunakan JavaScript untuk melakukan manipulasi HTML dan memberikan highlight atau fokus pada elemen tersebut ketika diakses melalui URL. Dalam konteks latihan ini, kita menerapkan hal yang kedua.

Contohnya, perhatikan URL berikut.

https://example.com/#my_example_article_title

Jika URL di atas dijalankan, kita akan diarahkan atau ditujukan secara langsung ke elemen yang memiliki id “my_example_article_title”. Ini merupakan konsep asal dari penerapan anchor pada URL bahwa kita perlu menambahkan karakter pagar (#) sebelum menyebutkan nama id-nya.

Elemen Anchor

Melakukan navigasi antar halaman dapat menggunakan tag anchor. Apakah masih ingat dengan elemen tersebut?

<a href="https://example.com">Website Example</a>

Elemen <a> memiliki atribut wajib agar dapat berfungsi normal. Sebelumnya pernah disinggung bahwa ada global attributes. Nah, bagaimana dengan special attributes atau atribut khusus? Tentu saja ada! Contohnya href untuk elemen anchor.

Sebagaimana penjelasan sebelumnya, kita ingin daftar navigasi dapat mengarahkan pada topik yang dituju.

<ul>
  <li>
    <a href="#sejarah">Sejarah</a>
  </li>
  <li>
    <a href="#geografis">Geografis</a>
  </li>
  <li>
    <a href="#wisata">Wisata</a>
  </li>
</ul>