Dari Halaman Statis ke Form Interaktif: Semantic HTML, List, Table, dan Form

Topik: Semantic HTML, List, Table, dan Form

Pada Pertemuan 1 kita sudah memahami cara kerja web dan membuat halaman profil usaha menggunakan HTML dasar. Sekarang kita akan membuat halaman yang lebih terstruktur serta mulai mengenal bentuk-bentuk data yang nantinya digunakan dalam Sistem Penjualan.

Kita akan mempelajari Semantic HTML, list, table, dan form. Semua konsep ini tetap merupakan teori dasar HTML yang penting. Konteks produk dan toko digunakan agar mahasiswa dapat melihat bagaimana elemen HTML diterapkan pada aplikasi nyata.

Pada akhir pertemuan, mahasiswa akan membuat mini project Katalog dan Form Data Produk. Project ini belum menyimpan data ke database karena PHP dan MySQL belum dipelajari.

Target Pembelajaran

• Memahami tujuan Semantic HTML.
• Menggunakan header, nav, main, section, article, dan footer.
• Membuat unordered list dan ordered list.
• Membuat menu navigasi menggunakan list dan hyperlink.
• Membuat tabel dengan thead, tbody, tr, th, dan td.
• Memahami colspan secara sederhana.
• Membuat form HTML.
• Menggunakan label, input, select, textarea, radio, checkbox, dan button.
• Memahami id, name, placeholder, required, method, dan action.
• Memahami pengantar GET dan POST.
• Membuat halaman katalog dan form data produk sederhana.

Materi 1 — Membuat Struktur Halaman dengan Semantic HTML

Semantic HTML adalah penggunaan elemen HTML yang namanya membantu menjelaskan fungsi bagian tersebut. Ketika halaman semakin panjang, struktur semantic membuat kode lebih mudah dipahami oleh developer dan membantu teknologi lain memahami isi halaman.

• header — bagian pembuka halaman atau bagian tertentu.
• nav — bagian navigasi.
• main — isi utama halaman.
• section — kelompok konten berdasarkan topik.
• article — konten yang dapat berdiri sendiri.
• footer — bagian penutup.

Mengapa Semantic HTML Penting?

Tanpa semantic HTML, developer dapat menggunakan banyak div. Hal tersebut tetap dapat bekerja, tetapi struktur halaman menjadi lebih sulit dipahami. Elemen semantic membantu kita menulis HTML yang lebih jelas.

Coding 1 — Membuat Halaman Toko dengan Semantic HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NusaTech Store</title>
</head>
<body>

    <header>
        <h1>NusaTech Store</h1>

        <p>
            Perlengkapan digital untuk belajar,
            bekerja, dan berkembang.
        </p>
    </header>

    <nav>
        <a href="#beranda">Beranda</a>
        <a href="#produk">Produk</a>
        <a href="#tentang">Tentang</a>
        <a href="#kontak">Kontak</a>
    </nav>

    <main>

        <section id="beranda">
            <h2>Selamat Datang</h2>

            <p>
                Website ini akan dikembangkan
                menjadi sistem penjualan sederhana.
            </p>
        </section>

        <section id="produk">
            <h2>Produk Unggulan</h2>

            <article>
                <h3>Keyboard Mechanical</h3>

                <p>
                    Keyboard untuk aktivitas belajar
                    dan bekerja.
                </p>
            </article>
        </section>

        <section id="tentang">
            <h2>Tentang Usaha</h2>

            <p>
                NusaTech Store merupakan project pembelajaran
                untuk memahami pengembangan website.
            </p>
        </section>

    </main>

    <footer id="kontak">
        <p>&copy; 2026 NusaTech Store</p>
    </footer>

</body>
</html>

Target Coding 1: mahasiswa mampu menyusun halaman menggunakan elemen semantic sesuai fungsinya.

Materi 2 — Membuat Daftar dan Navigasi dengan List

Banyak informasi lebih mudah dibaca dalam bentuk daftar. HTML menyediakan dua jenis list utama: unordered list dan ordered list.

Unordered List

Gunakan ul ketika urutan item tidak penting.

<ul>
    <li>Keyboard</li>
    <li>Mouse</li>
    <li>Headset</li>
    <li>Webcam</li>
</ul>

Ordered List

Gunakan ol ketika urutan langkah penting.

<ol>
    <li>Pilih produk.</li>
    <li>Tentukan jumlah barang.</li>
    <li>Periksa total belanja.</li>
    <li>Konfirmasi pesanan.</li>
</ol>

List untuk Navigasi

Menu navigasi modern sering dibuat dari kombinasi ul, li, dan a. Tampilannya nanti akan diatur menggunakan CSS.

Coding 2 — Navigasi dan Kategori Produk

<nav>
    <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="produk.html">Produk</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kontak.html">Kontak</a></li>
    </ul>
</nav>

<section>
    <h2>Kategori Produk</h2>

    <ul>
        <li>Keyboard</li>
        <li>Mouse</li>
        <li>Headset</li>
        <li>Webcam</li>
    </ul>
</section>

<section>
    <h2>Alur Pemesanan</h2>

    <ol>
        <li>Pilih produk.</li>
        <li>Isi jumlah pembelian.</li>
        <li>Periksa data pesanan.</li>
        <li>Kirim pesanan.</li>
    </ol>
</section>

Target Coding 2: mahasiswa mampu menggunakan ul, ol, li, dan hyperlink pada halaman web.

Materi 3 — Menampilkan Data Produk dengan Table

Table digunakan untuk menampilkan data yang memiliki hubungan baris dan kolom. Pada sistem penjualan, tabel dapat digunakan untuk menampilkan produk, stok, transaksi, pelanggan, atau laporan.

• table — membungkus seluruh tabel.
• thead — bagian header tabel.
• tbody — bagian isi tabel.
• tr — satu baris.
• th — sel judul.
• td — sel data.

Coding 3 — Membuat Tabel Data Produk

<table border="1">
    <thead>
        <tr>
            <th>No</th>
            <th>Kode</th>
            <th>Nama Produk</th>
            <th>Harga</th>
            <th>Stok</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>P001</td>
            <td>Keyboard Mechanical</td>
            <td>Rp350.000</td>
            <td>10</td>
        </tr>

        <tr>
            <td>2</td>
            <td>P002</td>
            <td>Mouse Wireless</td>
            <td>Rp150.000</td>
            <td>15</td>
        </tr>

        <tr>
            <td>3</td>
            <td>P003</td>
            <td>Headset Gaming</td>
            <td>Rp275.000</td>
            <td>8</td>
        </tr>
    </tbody>
</table>

Attribute border="1" digunakan sementara agar garis tabel langsung terlihat saat belajar. Nanti tampilan tabel akan diatur menggunakan CSS.

colspan

colspan digunakan ketika satu sel perlu menggunakan beberapa kolom.

<table border="1">
    <tr>
        <th colspan="4">
            Data Produk NusaTech Store
        </th>
    </tr>

    <tr>
        <th>Kode</th>
        <th>Nama Produk</th>
        <th>Harga</th>
        <th>Stok</th>
    </tr>
</table>

Target Coding 3: mahasiswa mampu menampilkan data produk dalam struktur tabel yang benar.

Materi 4 — Membuat Form HTML dan Mengenal Berbagai Input

Form digunakan untuk menerima input dari pengguna. Dalam sistem nyata, form dapat digunakan untuk login, registrasi pelanggan, data produk, transaksi, pencarian, atau kontak.

form, label, dan input

Elemen form membungkus data yang akan dikirim. label memberikan keterangan, sedangkan input menjadi tempat pengguna memasukkan nilai.

<label for="nama_produk">
    Nama Produk
</label>

<input
    type="text"
    id="nama_produk"
    name="nama_produk">

Nilai for pada label sebaiknya sama dengan id pada input. Ini membuat form lebih mudah digunakan.

Attribute yang Penting

• type — jenis input.
• id — identitas elemen pada halaman.
• name — nama data ketika form dikirim.
• placeholder — petunjuk di dalam input.
• required — menandai field wajib diisi.

Jenis Input

<input type="text" name="nama_produk">

<input type="number" name="harga">

<input type="number" name="stok">

<input type="date" name="tanggal_masuk">

<input
    type="radio"
    name="status"
    value="Aktif">

<input
    type="checkbox"
    name="unggulan"
    value="Ya">

<input
    type="file"
    name="foto_produk">

Select dan Textarea

<label for="kategori">
    Kategori
</label>

<select
    id="kategori"
    name="kategori">
    <option value="">
        -- Pilih Kategori --
    </option>

    <option value="Keyboard">
        Keyboard
    </option>

    <option value="Mouse">
        Mouse
    </option>

    <option value="Headset">
        Headset
    </option>
</select>

<label for="deskripsi">
    Deskripsi Produk
</label>

<textarea
    id="deskripsi"
    name="deskripsi"
    rows="5"
    placeholder="Masukkan deskripsi produk"></textarea>

method dan action

Attribute method menentukan cara data dikirim, sedangkan action menentukan tujuan pemrosesan data. Dua method yang sering ditemui adalah GET dan POST.

• GET sering digunakan ketika data dapat terlihat pada URL, misalnya pencarian.
• POST sering digunakan untuk mengirim data form yang akan diproses.

Untuk sekarang kita hanya mengenal konsepnya. Pemrosesan GET dan POST secara nyata akan dipelajari saat masuk ke PHP.

Coding 4 — Form Data Produk Pertama

<form>

    <p>
        <label for="kode">
            Kode Produk
        </label><br>

        <input
            type="text"
            id="kode"
            name="kode"
            placeholder="Contoh: P001"
            required
        >
    </p>

    <p>
        <label for="nama">
            Nama Produk
        </label><br>

        <input
            type="text"
            id="nama"
            name="nama"
            placeholder="Masukkan nama produk"
            required
        >
    </p>

    <p>
        <label for="harga">
            Harga
        </label><br>

        <input
            type="number"
            id="harga"
            name="harga"
            placeholder="Masukkan harga"
            required
        >
    </p>

    <p>
        <label for="stok">
            Stok
        </label><br>

        <input
            type="number"
            id="stok"
            name="stok"
            placeholder="Masukkan stok"
            required
        >
    </p>

    <button type="submit">
        Simpan Produk
    </button>

</form>

Target Coding 4: mahasiswa mampu membuat form sederhana untuk menerima data produk.

Materi 5 — Mini Project: Katalog dan Form Data Produk

Pada bagian terakhir, Semantic HTML, list, table, dan form digabungkan menjadi satu halaman. Project belum menyimpan data ke database. Saat tombol Simpan diklik, browser belum benar-benar menyimpan produk. Itu akan dipelajari setelah masuk ke PHP dan MySQL.

Coding 5 — Katalog dan Form Data Produk Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Katalog Produk - NusaTech Store</title>
</head>
<body>

    <header>
        <h1>NusaTech Store</h1>

        <p>
            Katalog dan Form Data Produk.
        </p>
    </header>

    <nav>
        <ul>
            <li>
                <a href="#katalog">
                    Katalog
                </a>
            </li>

            <li>
                <a href="#form-produk">
                    Form Produk
                </a>
            </li>
        </ul>
    </nav>

    <main>

        <section id="kategori">
            <h2>Kategori Produk</h2>

            <ul>
                <li>Keyboard</li>
                <li>Mouse</li>
                <li>Headset</li>
                <li>Webcam</li>
            </ul>
        </section>

        <section id="katalog">
            <h2>Data Produk</h2>

            <table border="1">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Kode</th>
                        <th>Nama Produk</th>
                        <th>Harga</th>
                        <th>Stok</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>1</td>
                        <td>P001</td>
                        <td>Keyboard Mechanical</td>
                        <td>Rp350.000</td>
                        <td>10</td>
                    </tr>

                    <tr>
                        <td>2</td>
                        <td>P002</td>
                        <td>Mouse Wireless</td>
                        <td>Rp150.000</td>
                        <td>15</td>
                    </tr>

                    <tr>
                        <td>3</td>
                        <td>P003</td>
                        <td>Headset Gaming</td>
                        <td>Rp275.000</td>
                        <td>8</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <hr>

        <section id="form-produk">
            <h2>Form Data Produk</h2>

            <form
                method="get"
                action=""
            >

                <p>
                    <label for="kode">
                        Kode Produk
                    </label><br>

                    <input
                        type="text"
                        id="kode"
                        name="kode"
                        placeholder="Contoh: P004"
                        required
                    >
                </p>

                <p>
                    <label for="nama">
                        Nama Produk
                    </label><br>

                    <input
                        type="text"
                        id="nama"
                        name="nama"
                        placeholder="Masukkan nama produk"
                        required
                    >
                </p>

                <p>
                    <label for="kategori_produk">
                        Kategori
                    </label><br>

                    <select
                        id="kategori_produk"
                        name="kategori"
                        required
                    >
                        <option value="">
                            -- Pilih Kategori --
                        </option>

                        <option value="Keyboard">
                            Keyboard
                        </option>

                        <option value="Mouse">
                            Mouse
                        </option>

                        <option value="Headset">
                            Headset
                        </option>

                        <option value="Webcam">
                            Webcam
                        </option>
                    </select>
                </p>

                <p>
                    <label for="harga">
                        Harga
                    </label><br>

                    <input
                        type="number"
                        id="harga"
                        name="harga"
                        min="0"
                        required
                    >
                </p>

                <p>
                    <label for="stok">
                        Stok
                    </label><br>

                    <input
                        type="number"
                        id="stok"
                        name="stok"
                        min="0"
                        required
                    >
                </p>

                <p>
                    <strong>Status Produk</strong><br>

                    <input
                        type="radio"
                        id="aktif"
                        name="status"
                        value="Aktif"
                        checked
                    >
                    <label for="aktif">
                        Aktif
                    </label>

                    <input
                        type="radio"
                        id="nonaktif"
                        name="status"
                        value="Nonaktif"
                    >
                    <label for="nonaktif">
                        Nonaktif
                    </label>
                </p>

                <p>
                    <input
                        type="checkbox"
                        id="unggulan"
                        name="unggulan"
                        value="Ya"
                    >

                    <label for="unggulan">
                        Jadikan produk unggulan
                    </label>
                </p>

                <p>
                    <label for="deskripsi">
                        Deskripsi
                    </label><br>

                    <textarea
                        id="deskripsi"
                        name="deskripsi"
                        rows="5"
                        placeholder="Masukkan deskripsi produk"
                    ></textarea>
                </p>

                <button type="submit">
                    Simpan Produk
                </button>

                <button type="reset">
                    Reset
                </button>

            </form>
        </section>

    </main>

    <footer>
        <p>
            &copy; 2026 NusaTech Store
        </p>
    </footer>

</body>
</html>

Target Coding 5: mahasiswa mampu menggabungkan semantic HTML, list, table, dan form dalam satu halaman.

Debugging Challenge

Perhatikan source code berikut dan temukan masalahnya.

<form>
    <label for="nama">Nama Produk</label>

    <input
        type="text"
        id="produk"
        name="nama"
    >

    <select name="kategori">
        <option>Keyboard
        <option>Mouse</option>
    </select>

    <button type="submit">
        Simpan
</form>

Periksa hubungan for dan id, penutup option, penutup button, dan indentation.

Challenge Pertemuan 2

Buat halaman Data Produk Usaha Anda. Jenis usaha boleh berbeda dari contoh.

• header, nav, main, minimal dua section, dan footer.
• Menu navigasi menggunakan list.
• Daftar kategori produk.
• Tabel minimal lima produk.
• Form data produk.
• Input kode, nama, harga, stok, kategori, dan deskripsi.
• Minimal satu radio button dan satu checkbox.
• Tombol submit dan reset.

Evaluasi Pemahaman

1. Apa yang dimaksud Semantic HTML?
2. Apa fungsi header?
3. Apa fungsi nav?
4. Apa fungsi main?
5. Apa perbedaan section dan article secara sederhana?
6. Apa fungsi footer?
7. Apa perbedaan ul dan ol?
8. Apa fungsi li?
9. Mengapa navigasi sering dibuat menggunakan list?
10. Apa fungsi table?
11. Apa fungsi thead dan tbody?
12. Apa perbedaan th dan td?
13. Apa fungsi colspan?
14. Apa fungsi form?
15. Apa fungsi label?
16. Apa hubungan attribute for dan id?
17. Apa fungsi attribute name?
18. Apa fungsi required?
19. Apa perbedaan GET dan POST secara umum?
20. Mengapa data form pada Pertemuan 2 belum tersimpan ke database?

Checklist Kompetensi Pertemuan 2

• Menggunakan elemen semantic.
• Membuat unordered dan ordered list.
• Membuat navigasi menggunakan list dan hyperlink.
• Membuat tabel produk.
• Menggunakan thead, tbody, tr, th, dan td.
• Menggunakan colspan.
• Membuat form HTML.
• Menggunakan label dan berbagai input.
• Menggunakan select dan textarea.
• Menggunakan radio dan checkbox.
• Memahami id, name, placeholder, dan required.
• Memahami pengantar method dan action.
• Menggabungkan katalog dan form dalam satu halaman.

Rangkuman Pertemuan 2

Pada Pertemuan 2, halaman usaha mulai berkembang dari profil sederhana menjadi struktur yang lebih mendekati aplikasi.

1. Coding 1: membuat website toko menggunakan Semantic HTML.
2. Coding 2: membuat navigasi, kategori produk, dan alur pemesanan.
3. Coding 3: membuat tabel data produk.
4. Coding 4: membuat form data produk.
5. Coding 5: membuat mini project Katalog dan Form Data Produk.

Pertemuan 1
Profil Usaha
    |
    v
Pertemuan 2
Katalog + Form Data Produk
    |
    v
Pertemuan 3
CSS + Product Card
    |
    v
Pertemuan 4
JavaScript + Kalkulator Penjualan
    |
    v
PHP + MySQL + CRUD
    |
    v
Laravel
    |
    v
Sistem Penjualan Berbasis Web

Menuju Pertemuan 3

Struktur katalog dan form sudah ada, tetapi tampilannya masih menggunakan gaya bawaan browser. Pada pertemuan berikutnya kita mulai menggunakan CSS untuk mengatur warna, typography, spacing, dan box model.

Pertemuan 3 — Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model