HTML · Bab 8

Proyek HTML: Halaman Web Lengkap

Menggabungkan semua bab menjadi halaman katalog dan kontak Smart Retail yang semantik, lengkap dengan navigasi, gambar, tabel, dan form, lalu memeriksa dan memublikasikannya.

Bab ini hampir tidak memperkenalkan hal baru; yang baru hanya <meta name="description"> dan validator. Semua yang sudah kamu pelajari digabung menjadi satu halaman utuh: katalog dan kontak Smart Retail, berisi tiga kategori dan tujuh produk toko. Di topik CSS, halaman seperti ini ditata menjadi rapi dan responsif.

8.1 Rencana Halaman

Sebelum menulis kode, susun dulu kerangkanya:

1. <header>: nama toko, slogan, dan <nav> ke tiga bagian.
2. <main> berisi tiga <section>:
   • Katalog: tujuh produk sebagai <article>, masing-masing dengan gambar, nama, kategori, dan harga.
   • Daftar Harga: tabel kode, produk, kategori, harga, dan stok.
   • Kontak: form pesan untuk pelanggan.
3. <footer>: alamat, jam buka, email, dan hak cipta.

8.2 Kerangka Dokumen

Simpan kerangka ini sebagai index.html di folder smart-retail:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Katalog dan kontak Smart Retail, toko kebutuhan harian.">
    <title>Smart Retail · Katalog dan Kontak</title>
  </head>
  <body>
    <!-- Tempel isi playground bagian 8.3 di sini -->
  </body>
</html>

<meta name="description"> berisi ringkasan halaman yang sering dipakai mesin pencari di hasil pencarian.

8.3 Isi Halaman

Playground berikut berisi seluruh isi <body>. Gambar memakai ikon situs ini sebagai pengganti foto. Di proyekmu, ganti dengan foto produk di folder gambar/ dan sesuaikan alt-nya. Alamat /favicon.svg hanya ada di situs ini; di berkasmu, pakai alamat relatif seperti gambar/keripik-singkong.jpg (lihat 8.5). Nilai action pada form diisi nanti, saat sudah ada server yang menerima kiriman.

Di playground, tombol “Kirim pesan” tidak melakukan apa pun dan tidak menampilkan pesan validasi, karena sandbox preview memblokir pengiriman form.

Di tabel, kolom nama produk memakai <th scope="row"> karena nama produk adalah judul tiap baris. <div> di dalam <header> hanya mengelompokkan nama toko dan slogan agar mudah ditata di topik CSS.

8.4 Kebiasaan Baik dan Validator

• Indentasi dua spasi untuk setiap tingkat elemen bersarang, supaya pasangan tag mudah dilihat.
• Tag dan atribut ditulis huruf kecil, nilai atribut selalu diapit tanda kutip ganda.
• Setiap elemen yang bukan void element ditutup.
• Setiap id dipakai sekali saja.
• Nama berkas dan folder huruf kecil, tanpa spasi.

Periksa halaman dengan validator W3C di https://validator.w3.org/. Tempel seluruh isi index.html di validator, lalu jalankan pemeriksaan. Perbaiki galat dari yang paling atas dulu, karena satu kesalahan sering memicu galat lain di bawahnya. Pesan yang sering muncul antara lain Stray end tag (tag penutup tanpa pasangan) dan Duplicate ID (satu id dipakai dua kali).

Daftar periksa sebelum selesai:

• <html lang="id">, <meta charset="utf-8">, meta viewport, dan <title> ada.
• Heading berurutan tanpa melompat tingkat.
• Setiap <img> punya alt yang menjelaskan isinya.
• Setiap isian form punya <label> yang terhubung.
• Teks tautan menjelaskan tujuan.
• Validator tidak menemukan galat.

8.5 Publikasikan Hasilmu

Halaman ini sepenuhnya statis: hanya berkas HTML (dan nanti CSS serta gambar). Karena itu ia bisa ditayangkan di layanan hosting statis gratis, misalnya GitHub Pages atau Cloudflare Pages, sehingga siapa pun bisa membukanya lewat alamat web.

1. Pastikan folder smart-retail berisi index.html di tingkat paling atas, beserta folder gambar/ bila ada.
2. Pakai alamat relatif untuk gambar dan tautan (gambar/keripik-singkong.jpg, bukan /gambar/keripik-singkong.jpg). Situs sering ditayangkan di subfolder alamat layanan, dan alamat yang diawali / akan menunjuk ke tempat yang salah.
3. Ikuti panduan resmi layanan pilihanmu untuk mengunggah folder itu. Setelah selesai, layanan memberikan alamat publik untuk situsmu.
4. Samakan huruf besar dan kecil di setiap alamat dengan nama berkasnya. Server hosting umumnya membedakan Keripik.jpg dan keripik.jpg, walaupun di komputermu keduanya bisa tetap terbuka.
5. Buka alamat itu di ponsel dan di laptop, lalu periksa semua tautan dan gambar.

Hosting statis hanya menyajikan berkas, jadi form kontak belum bisa memproses kiriman. Tombol “Kirim pesan” baru bekerja setelah ada server yang menerimanya, seperti yang dibangun di topik Laravel. Ingat juga bahwa situs yang dipublikasikan bisa dibuka siapa saja: jangan memuat data pribadi yang tidak ingin kamu bagikan.

8.6 Ringkasan

• Halaman lengkap = kerangka dokumen + <header>/<nav> + <main> berisi <section> + <footer>.
• Data toko yang sama dipakai di katalog (<article> dan <img>), tabel (<table>), dan form (<form>).
• Kebiasaan baik: indentasi rapi, huruf kecil, tanda kutip, id unik, dan pemeriksaan dengan validator.
• Situs statis bisa dipublikasikan ke hosting statis gratis, dengan alamat relatif untuk semua berkas.
• Berikutnya, topik CSS menata halaman ini menjadi rapi dan responsif.