Tujuan Pembelajaran
Setelah mengikuti pertemuan ini, mahasiswa mampu merancang dan membangun website statis multi-halaman dengan navigasi yang konsisten dan pengelolaan folder yang rapi.
Konsep Padaan Multi-Halaman
Website statis tersusun atas beberapa halaman yang saling terhubung melalui tautan. Setiap halaman adalah file HTML terpisah seperti index.html, tentang.html, dan kontak.html. Menu navigasi menghubungkan semua halaman agar pengunjung bisa berpindah dengan mudah. Konsep halaman lengkap ini yang akan menjadi dasar proyek akhir Anda.
Struktur folder yang rapi sangat membantu. Contohnya folder utama berisi file HTML, folder css untuk stylesheet, folder images untuk gambar, dan folder js untuk skrip. Penamaan dengan huruf kecil dan tanda hubung membuat URL lebih bersih.
<code class="language-text">situs/ ├─ index.html ├─ tentang.html ├─ kontak.html ├─ css/style.css ├─ images/logo.png └─ js/script.js</code>
Navigasi Konsisten
Navigasi sebaiknya identik di semua halaman sehingga pengunjung tidak bingung. Gunakan daftar dengan tautan menuju tiap halaman. Untuk menandai halaman aktif, beri kelas aktif pada tautan yang sedang dibuka lalu beri gaya berbeda lewat CSS.
Gunakan tautan relatif, bukan alamat absolut, agar website tetap berfungsi saat dipindah ke domain atau server lain. Tautan antar file di folder yang sama cukup ditulis nama filenya langsung.
<code class="language-html"><nav class="menu"> <a href="index.html">Beranda</a> <a href="tentang.html" class="aktif">Tentang</a> <a href="kontak.html">Kontak</a> </nav></code>
Membuat Komponen yang Diulang
Menyalin menu ke setiap halaman rawan inkonsistensi ketika ada perubahan. Untuk website statis murni tanpa server, Anda tetap bisa membuat perubahan satu kali lalu menyalinnya secara manual ke semua file. Sebagai praktik baik, konsistenkan kelas dan struktur agar CSS seragam di seluruh situs.
Salah satu cara mengurangi duplikasi adalah menyimpan potongan kode menu di file terpisah lalu menempelkannya ke tiap halaman, dan selalu memperbaruinya dari satu sumber. Pastikan semua halaman menggunakan header dan footer yang sama.
Menambahkan Formulir Kontak
Halaman kontak biasanya memuat formulir untuk pengiriman pesan. Karena website statis tidak punya server, formulir bisa diarahkan ke layanan pihak ketiga seperti Formspree atau Google Forms agar pesan terkirim ke email. Isi formulir tetap dibuat persis seperti sebelumnya, hanya action yang menunjuk ke layanan tersebut.
Alternatif lain, gunakan lokal menyimpan data masukan sementara dengan JavaScript dan library localStorage. Meski belum tersimpan ke server, pola ini memperkenalkan konsep penyimpanan data di peramban.
<code class="language-html"><form action="https://formspree.io/example" method="post"> <label for="pesan">Pesan</label> <textarea id="pesan" name="pesan" required></textarea> <button type="submit">Kirim</button> </form></code>
Langkah Praktik
Buat folder situs dengan struktur yang rapi lalu salin kerangka halaman dari pertemuan sebelumnya menjadi empat halaman: beranda, tentang, layanan, dan kontak. Pastikan menu di setiap halaman identik dan halaman aktif ditandai dengan kelas aktif.
Tambahkan satu gambar ke folder images dan tampilkan di halaman tentang. Kemudian cek semua tautan dengan mengklik tiap menu dan pastikan tidak ada tautan yang rusak.
Konsep Kunci
- Website statis tersusun atas beberapa halaman yang saling terhubung melalui tautan.
- Setiap halaman adalah file HTML terpisah seperti index.
- Menu navigasi menghubungkan semua halaman agar pengunjung bisa berpindah dengan mudah.
- Konsep halaman lengkap ini yang akan menjadi dasar proyek akhir Anda.
- Struktur folder yang rapi sangat membantu.
- Contohnya folder utama berisi file HTML, folder css untuk stylesheet, folder images untuk gambar, dan folder js untuk skrip.
- Penamaan dengan huruf kecil dan tanda hubung membuat URL lebih bersih.
- Navigasi sebaiknya identik di semua halaman sehingga pengunjung tidak bingung.
- Gunakan daftar dengan tautan menuju tiap halaman.
- Untuk menandai halaman aktif, beri kelas aktif pada tautan yang sedang dibuka lalu beri gaya berbeda lewat CSS.
- Gunakan tautan relatif, bukan alamat absolut, agar website tetap berfungsi saat dipindah ke domain atau server lain.
- Tautan antar file di folder yang sama cukup ditulis nama filenya langsung.
- Menyalin menu ke setiap halaman rawan inkonsistensi ketika ada perubahan.
- Untuk website statis murni tanpa server, Anda tetap bisa membuat perubahan satu kali lalu menyalinnya secara manual ke semua file.
- Sebagai praktik baik, konsistenkan kelas dan struktur agar CSS seragam di seluruh situs.
- Setelah mengikuti pertemuan ini, mahasiswa mampu merancang dan membangun website statis multi-halaman dengan navigasi yang konsisten dan pengelolaan folder yang rapi.
- Salah satu cara mengurangi duplikasi adalah menyimpan potongan kode menu di file terpisah lalu menempelkannya ke tiap halaman, dan selalu memperbaruinya dari satu sumber.
Contoh Kode
<code class="language-html"><nav class="menu"> <a href="index.html">Home</a> <a href="over.html" class="active">About</a> <a href="contact.html">Contact</a> </nav></code>
<code class="language-text">site/ ├─ index.html ├─ about.html ├─ contact.html ├─ css/style.css └─ js/script.js</code>
Website statis tersusun atas beberapa halaman yang saling terhubung melalui tautan. Setiap halaman adalah file HTML terpisah seperti index.html, tentang.html, dan kontak.html. Menu navigasi menghubungkan semua halaman agar pengunjung bisa berpindah dengan mudah. Konsep halaman lengkap ini yang akan menjadi dasar proyek akhir Anda.
Latihan
Bangun website statis tiga halaman untuk sebuah usaha kecil dengan beranda, halaman tentang yang memuat profil, dan halaman kontak dengan formulir. Terapkan struktur folder rapi, navigasi konsisten, dan gaya CSS yang seragam di semua halaman.