Membuat Website Multi-Halaman dengan HTML

Home » Tutorials

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

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>
```
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!

Buat folder dan file dengan struktur berikut:

- index.html
- public
  - about.html
  - contact.html
- assets
  - images
    - cat.png

Tambahkan link di index.html untuk mengarahkan ke halaman "About" dan "Contact".
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!