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 denganindex.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 halamanabout.html
:<a href="./public/about.html">Tentang Kami</a>
-
Menambahkan Link ke Halaman "Contact" Tambahkan anchor tag di
index.html
untuk menautkan ke halamancontact.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!
Komentar
Posting Komentar