Membuat Website Multi-Halaman dengan HTML

Halo teman-teman!

Kali ini, kita akan belajar bagaimana membuat website multi-halaman. Kalau sebelumnya kita hanya membuat satu halaman HTML saja, sekarang kita akan menambahkan halaman lain, seperti halaman "About" dan "Contact". Yuk, kita mulai!


Apa Itu Website Multi-Halaman?

Website multi-halaman adalah situs yang memiliki lebih dari satu file HTML. Contohnya:

  • Halaman utama: index.html
  • Halaman tentang: about.html
  • Halaman kontak: contact.html

Semua file ini disimpan dalam satu Project folder. Folder ini juga bisa berisi gambar, file CSS, atau file lainnya yang mendukung website.


Cara Menautkan Halaman dengan Anchor Tag

Untuk berpindah antar halaman, kita menggunakan anchor tag (<a>). Contoh:

<a href="./about.html">Tentang Kami</a>

Kode di atas akan membuat link yang mengarahkan pengguna ke file about.html.

Catatan:

  • ./: Artinya file ada di folder yang sama dengan index.html.
  • Kalau file ada di folder lain, gunakan relative path. Misalnya:
    <a href="./public/contact.html">Hubungi Kami</a>
    

Praktik: Menautkan Halaman

Bayangkan kamu punya struktur folder seperti ini:

- index.html
- public
  - about.html
  - contact.html
- assets
  - images
    - cat.png
  1. Menambahkan Link ke Halaman "About" Tambahkan anchor tag di index.html untuk menautkan ke halaman about.html:

    <a href="./public/about.html">Tentang Kami</a>
    
  2. Menambahkan Link ke Halaman "Contact" Tambahkan anchor tag di index.html untuk menautkan ke halaman contact.html:

    <a href="./public/contact.html">Hubungi Kami</a>
    

Coba buka file index.html di browser dan klik link tersebut. Kalau berhasil, kamu akan diarahkan ke halaman yang sesuai.


Menambahkan Gambar Sebagai Link

Kamu juga bisa menggunakan gambar sebagai link. Contohnya, tambahkan gambar kucing di index.html yang mengarahkan ke halaman "About".

Kode HTML-nya seperti ini:

<a href="./public/about.html">
  <img src="./assets/images/cat.png" alt="Tentang Kami">
</a>

Tantangan: Coba Sendiri!

  1. Buat folder dan file dengan struktur berikut:
    - index.html
    - public
      - about.html
      - contact.html
    - assets
      - images
        - cat.png
    
  2. Tambahkan link di index.html untuk mengarahkan ke halaman "About" dan "Contact".
  3. Tambahkan gambar di halaman utama (index.html) yang berfungsi sebagai link ke halaman "About".

Kesimpulan

Sekarang kamu sudah tahu cara membuat website multi-halaman dengan HTML. Kamu belajar:

  • Menggunakan file path untuk menautkan halaman.
  • Menambahkan gambar sebagai link.

Selanjutnya, kita akan belajar tentang HTML boilerplate dan bagaimana menata struktur website dengan lebih rapi. Sampai jumpa di artikel berikutnya, dan selamat mencoba!

Komentar

Postingan Populer

Gambar

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for profess...