Pada pertemuan pertama, kita sudah berhasil membuat halaman HTML sederhana, menampilkan teks, gambar, dan hyperlink. Sekarang kita akan melangkah satu tahap lebih jauh. Kita tidak hanya ingin membuat halaman yang “tampil”, tetapi juga ingin membuat halaman yang lebih terstruktur, lebih mudah dibaca, dan mulai bisa menerima input dari pengguna.
Di pertemuan ini kita akan mengenal Semantic HTML, membuat daftar dengan list, menampilkan data menggunakan table, dan akhirnya membuat form registrasi mahasiswa.
Materi dibagi menjadi 5 bagian utama. Setiap bagian ditutup dengan satu praktik coding. Jadi selama pertemuan ini, mahasiswa akan menulis kode setidaknya lima kali.
Target Pembelajaran
Setelah menyelesaikan pertemuan ini, mahasiswa diharapkan mampu:
- Memahami fungsi Semantic HTML.
- Menggunakan elemen header, nav, main, section, article, dan footer.
- Membuat ordered list dan unordered list.
- Membuat navigasi sederhana menggunakan list dan hyperlink.
- Membuat tabel data yang terstruktur.
- Menggunakan thead, tbody, tr, th, dan td.
- Membuat form HTML.
- Menggunakan label, input, select, textarea, radio button, checkbox, dan button.
- Memahami fungsi name, id, placeholder, required, method, dan action.
- Membuat Form Registrasi Mahasiswa sebagai mini project Pertemuan 2.
Materi 1 — Membuat Struktur Halaman dengan Semantic HTML
Pada Pertemuan 1 kita menggunakan elemen seperti h1, p, img, dan a. Elemen-elemen tersebut sudah cukup untuk membuat halaman sederhana. Namun, ketika halaman mulai panjang, kita perlu memberi struktur yang lebih jelas.
Di sinilah Semantic HTML digunakan. Semantic HTML adalah penggunaan elemen HTML yang namanya sudah menjelaskan fungsi atau maknanya.
Beberapa elemen semantic yang sering digunakan adalah:
- <header> — bagian atas halaman atau suatu bagian.
- <nav> — bagian navigasi.
- <main> — isi utama halaman.
- <section> — kelompok konten yang masih satu topik.
- <article> — konten yang dapat berdiri sendiri, misalnya berita atau artikel.
- <footer> — bagian bawah halaman.
Kita bisa membayangkan sebuah halaman website seperti sebuah gedung. header adalah bagian depan, nav adalah petunjuk arah, main adalah ruang utama, dan footer adalah bagian penutup.
Coding 1 — Mengubah Halaman Biasa Menjadi Halaman Semantic
Coba buat file index.html dan tuliskan struktur berikut. Perhatikan bahwa kita mulai membagi halaman berdasarkan fungsi setiap bagian.
Contoh Kode HTML — Semantic HTML
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website Kampus</title> </head> <body> <header> <h1>Website Kampus</h1> <p>Belajar membangun halaman web yang terstruktur.</p> </header> <nav> <a href="#beranda">Beranda</a> <a href="#profil">Profil</a> <a href="#kontak">Kontak</a> </nav> <main> <section id="profil"> <h2>Profil Kampus</h2> <p> Bagian ini berisi informasi singkat mengenai kampus. </p> </section> <section id="informasi"> <h2>Informasi Terbaru</h2> <article> <h3>Workshop Web Development</h3> <p> Workshop membahas dasar HTML, CSS, dan JavaScript. </p> </article> </section> </main> <footer> <p>© 2026 Website Kampus</p> </footer> </body> </html>
Bagian Penting yang Perlu Dipahami
<header> digunakan untuk bagian pembuka halaman. Biasanya berisi judul, logo, atau deskripsi singkat.
<nav> digunakan untuk navigasi. Di dalamnya biasanya terdapat link menuju halaman atau bagian tertentu.
<main> digunakan untuk isi utama halaman.
<section> digunakan untuk mengelompokkan konten berdasarkan topik.
<article> cocok digunakan untuk konten seperti berita, artikel, posting, atau informasi yang dapat dibaca secara mandiri.
<footer> digunakan sebagai bagian penutup.
Ingat
Semantic HTML bukan sekadar membuat kode terlihat lebih rapi. Struktur yang jelas juga membantu developer lain, mesin pencari, dan teknologi aksesibilitas memahami isi halaman.
Target Coding 1: mahasiswa mampu menyusun halaman menggunakan elemen semantic, bukan hanya menumpuk semua isi langsung di dalam body.
Materi 2 — Membuat Daftar dan Navigasi dengan List
Banyak informasi di website lebih enak dibaca jika ditampilkan sebagai daftar. HTML menyediakan dua jenis list yang paling sering digunakan:
- Unordered List menggunakan <ul>.
- Ordered List menggunakan <ol>.
Setiap item di dalam list menggunakan elemen <li>.
Unordered List
Contoh Unordered List
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
Unordered list cocok untuk daftar yang tidak membutuhkan urutan angka.
Ordered List
Contoh Ordered List
<ol> <li>Buka Visual Studio Code.</li> <li>Buat folder project.</li> <li>Buat file index.html.</li> <li>Tulis source code.</li> <li>Buka hasilnya di browser.</li> </ol>
Ordered list cocok ketika urutan langkah penting.
List juga Bisa Digunakan untuk Navigasi
Pada website yang lebih rapi, menu navigasi sering dibuat dari kombinasi ul, li, dan a.
Coding 2 — Membuat Menu Navigasi dan Daftar Materi
Contoh Kode HTML — Navigasi dengan List
<nav> <ul> <li><a href="index.html">Beranda</a></li> <li><a href="profil.html">Profil</a></li> <li><a href="akademik.html">Akademik</a></li> <li><a href="kontak.html">Kontak</a></li> </ul> </nav>
Sekarang tambahkan daftar materi yang sedang dipelajari:
Contoh Kode HTML — Daftar Materi
<section> <h2>Materi yang Sedang Dipelajari</h2> <ol> <li>HTML Dasar</li> <li>Semantic HTML</li> <li>List</li> <li>Table</li> <li>Form</li> </ol> </section>
Jangan Khawatir Soal Tampilan
Pada tahap ini tampilan list mungkin masih sangat sederhana. Itu tidak masalah. Kita sedang fokus pada struktur HTML. Tampilan menu akan kita percantik saat masuk ke CSS pada Pertemuan 3.
Target Coding 2: mahasiswa mampu membuat daftar informasi dan menu navigasi menggunakan ul, ol, li, dan a.
Materi 3 — Menampilkan Data dengan Table
Jika kita memiliki data yang berbentuk baris dan kolom, menggunakan paragraf satu per satu tentu akan merepotkan. Untuk kebutuhan seperti data mahasiswa, data produk, jadwal, atau nilai, HTML menyediakan elemen table.
Elemen penting dalam tabel:
- <table> — wadah tabel.
- <thead> — bagian kepala tabel.
- <tbody> — bagian isi tabel.
- <tr> — table row atau baris.
- <th> — table header.
- <td> — table data.
Coding 3 — Membuat Tabel Data Mahasiswa
Contoh Kode HTML — Tabel Data Mahasiswa
<table border="1"> <thead> <tr> <th>No</th> <th>NIM</th> <th>Nama</th> <th>Program Studi</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2026001</td> <td>Andi Saputra</td> <td>Teknik Informatika</td> </tr> <tr> <td>2</td> <td>2026002</td> <td>Siti Rahma</td> <td>Sistem Informasi</td> </tr> <tr> <td>3</td> <td>2026003</td> <td>Budi Pratama</td> <td>Teknik Informatika</td> </tr> </tbody> </table>
Memahami Struktur Tabel
Satu <tr> berarti satu baris. Di dalam baris tersebut terdapat beberapa kolom. Jika kolom digunakan sebagai judul, gunakan <th>. Jika berisi data, gunakan <td>.
Pada contoh di atas, atribut border="1" hanya kita gunakan agar garis tabel langsung terlihat saat belajar. Pada website yang lebih baik, tampilan tabel nantinya diatur menggunakan CSS.
colspan dan rowspan
Kadang satu sel perlu menggunakan lebih dari satu kolom atau baris. Untuk itu tersedia colspan dan rowspan.
Contoh colspan
<table border="1"> <tr> <th colspan="3">Data Mahasiswa</th> </tr> <tr> <th>NIM</th> <th>Nama</th> <th>Program Studi</th> </tr> </table>
Target Coding 3: mahasiswa mampu menampilkan data dalam bentuk tabel yang jelas dan terstruktur.
Materi 4 — Membuat Form HTML dan Mengenal Berbagai Input
Sekarang kita masuk ke bagian yang sangat penting: form.
Form digunakan untuk menerima data dari pengguna. Hampir semua aplikasi web menggunakan form, misalnya:
- Login.
- Registrasi akun.
- Pendaftaran mahasiswa.
- Pencarian.
- Input data barang.
- Form kontak.
Elemen utama sebuah form adalah <form>.
Coding 4 — Form Pertama
Contoh Kode HTML — Form Dasar
<form> <label for="nama">Nama Lengkap</label> <input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap" required > <br><br> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="[email protected]" required > <br><br> <button type="submit">Kirim</button> </form>
Apa Fungsi label?
<label> digunakan untuk memberi keterangan pada input. Atribut for pada label sebaiknya sama dengan id pada input.
Hubungan label dan input
<label for="nim">NIM</label> <input type="text" id="nim" name="nim">
Ketika pengguna mengklik tulisan NIM, browser dapat langsung memindahkan fokus ke input yang memiliki id="nim".
Attribute yang Sering Digunakan pada Input
- type — menentukan jenis input.
- id — identitas elemen pada halaman.
- name — nama data ketika form dikirim.
- placeholder — teks petunjuk di dalam input.
- required — menandai bahwa input wajib diisi.
Jenis Input yang Sering Digunakan
Contoh Berbagai Jenis Input
<input type="text" name="nama"> <input type="email" name="email"> <input type="password" name="password"> <input type="number" name="umur"> <input type="date" name="tanggal_lahir"> <input type="radio" name="jenis_kelamin" value="Laki-laki"> <input type="checkbox" name="hobi" value="Coding"> <input type="file" name="foto">
Select
Contoh Dropdown Program Studi
<label for="prodi">Program Studi</label> <select id="prodi" name="prodi"> <option value="">-- Pilih Program Studi --</option> <option value="Teknik Informatika">Teknik Informatika</option> <option value="Sistem Informasi">Sistem Informasi</option> </select>
Textarea
Contoh Textarea
<label for="alamat">Alamat</label> <textarea id="alamat" name="alamat" rows="5" placeholder="Masukkan alamat lengkap" ></textarea>
Hubungkan dengan Materi Berikutnya
Attribute name sangat penting. Ketika nanti kita belajar PHP, nilai dari name inilah yang digunakan untuk mengambil data dari form.
Target Coding 4: mahasiswa mampu membuat form dasar dan memilih jenis input yang sesuai dengan data yang ingin dimasukkan.
Materi 5 — Mini Project: Form Registrasi Mahasiswa
Pada bagian terakhir, kita akan menggabungkan Semantic HTML, list, table, dan form menjadi satu halaman.
Project ini belum menyimpan data ke database. Tujuan kita sekarang adalah membuat struktur halaman dan form yang benar. Penyimpanan data baru akan dipelajari setelah kita masuk ke PHP dan MySQL.
Mengenal method dan action
Form memiliki dua atribut yang penting untuk dipahami sejak awal:
- method — menentukan cara data dikirim.
- action — menentukan ke mana data dikirim.
Dua method yang paling sering ditemui adalah GET dan POST. Pembahasan lebih dalam mengenai GET dan POST akan dilakukan saat kita masuk ke PHP.
Coding 5 — Form Registrasi Mahasiswa Lengkap
Buat file registrasi.html, lalu tuliskan kode berikut.
Mini Project — Form Registrasi Mahasiswa
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Registrasi Mahasiswa</title> </head> <body> <header> <h1>Sistem Registrasi Mahasiswa</h1> <p>Form latihan Pertemuan 2.</p> </header> <nav> <ul> <li><a href="#form-registrasi">Registrasi</a></li> <li><a href="#data-mahasiswa">Data Mahasiswa</a></li> </ul> </nav> <main> <section id="form-registrasi"> <h2>Form Registrasi Mahasiswa</h2> <form method="get" action=""> <p> <label for="nim">NIM</label><br> <input type="text" id="nim" name="nim" placeholder="Masukkan NIM" required > </p> <p> <label for="nama">Nama Lengkap</label><br> <input type="text" id="nama" name="nama" placeholder="Masukkan nama lengkap" required > </p> <p> <label for="email">Email</label><br> <input type="email" id="email" name="email" placeholder="[email protected]" required > </p> <p> <label for="password">Password</label><br> <input type="password" id="password" name="password" required > </p> <p> <strong>Jenis Kelamin</strong><br> <input type="radio" id="laki-laki" name="jenis_kelamin" value="Laki-laki" > <label for="laki-laki">Laki-laki</label> <input type="radio" id="perempuan" name="jenis_kelamin" value="Perempuan" > <label for="perempuan">Perempuan</label> </p> <p> <label for="prodi">Program Studi</label><br> <select id="prodi" name="prodi" required > <option value="">-- Pilih Program Studi --</option> <option value="Teknik Informatika"> Teknik Informatika </option> <option value="Sistem Informasi"> Sistem Informasi </option> </select> </p> <p> <label for="tanggal_lahir"> Tanggal Lahir </label><br> <input type="date" id="tanggal_lahir" name="tanggal_lahir" > </p> <p> <strong>Minat Teknologi</strong><br> <input type="checkbox" id="web" name="minat" value="Web Development" > <label for="web">Web Development</label> <input type="checkbox" id="mobile" name="minat" value="Mobile Development" > <label for="mobile">Mobile Development</label> <input type="checkbox" id="network" name="minat" value="Networking" > <label for="network">Networking</label> </p> <p> <label for="alamat">Alamat</label><br> <textarea id="alamat" name="alamat" rows="5" placeholder="Masukkan alamat lengkap" ></textarea> </p> <button type="submit"> Daftar </button> <button type="reset"> Reset </button> </form> </section> <hr> <section id="data-mahasiswa"> <h2>Contoh Data Mahasiswa</h2> <table border="1"> <thead> <tr> <th>No</th> <th>NIM</th> <th>Nama</th> <th>Program Studi</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2026001</td> <td>Andi Saputra</td> <td>Teknik Informatika</td> </tr> <tr> <td>2</td> <td>2026002</td> <td>Siti Rahma</td> <td>Sistem Informasi</td> </tr> </tbody> </table> </section> </main> <footer> <p> Praktikum Perancangan dan Pemrograman Website. </p> </footer> </body> </html>
Apa yang Sudah Digabungkan?
- Semantic HTML untuk struktur halaman.
- List untuk navigasi.
- Hyperlink menuju bagian tertentu.
- Form untuk menerima data pengguna.
- Berbagai jenis input.
- Dropdown menggunakan select.
- Textarea untuk alamat.
- Tabel untuk menampilkan data mahasiswa.
Jika tombol Daftar ditekan menggunakan method="get", browser dapat menampilkan data pada URL. Jangan khawatir jika data belum tersimpan. Kita belum menggunakan PHP dan database.
Batas Materi Pertemuan 2
Pada tahap ini fokusnya adalah struktur HTML. Jangan mencoba menyimpan data ke database dulu. Kita akan sampai ke tahap itu secara bertahap setelah memahami PHP dan MySQL.
Target Coding 5: mahasiswa mampu membuat satu halaman registrasi yang memiliki struktur semantic, menu, form, dan tabel.
Debugging Challenge
Source code berikut sengaja dibuat memiliki beberapa masalah. Temukan dan perbaiki kesalahannya.
Kode yang Harus Diperbaiki
<form> <label>Nama</label> <input type="text"> <label>Email</label> <input type="text" name="email"> <select> <option>Teknik Informatika</option> <option>Sistem Informasi</option> </select> <input type="radio" name="jk" value="L"> Laki-laki <input type="radio" name="jenis_kelamin" value="P"> Perempuan <button>Kirim </form>
Periksa beberapa hal berikut:
- Apakah setiap input yang penting sudah memiliki name?
- Apakah label sudah terhubung ke input menggunakan for dan id?
- Apakah input email sebaiknya menggunakan type="email"?
- Apakah radio button dalam satu kelompok menggunakan nilai name yang sama?
- Apakah select memiliki name?
- Apakah button sudah ditutup dengan benar?
Salah Satu Versi Perbaikannya
Contoh Hasil Perbaikan
<form> <p> <label for="nama">Nama</label><br> <input type="text" id="nama" name="nama" required > </p> <p> <label for="email">Email</label><br> <input type="email" id="email" name="email" required > </p> <p> <label for="prodi">Program Studi</label><br> <select id="prodi" name="prodi"> <option value="">-- Pilih Program Studi --</option> <option value="TI">Teknik Informatika</option> <option value="SI">Sistem Informasi</option> </select> </p> <p> <input type="radio" id="laki" name="jenis_kelamin" value="Laki-laki" > <label for="laki">Laki-laki</label> <input type="radio" id="perempuan" name="jenis_kelamin" value="Perempuan" > <label for="perempuan">Perempuan</label> </p> <button type="submit"> Kirim </button> </form>
Challenge Pertemuan 2
Buat halaman Pendaftaran Workshop Web Development tanpa menyalin seluruh mini project. Gunakan pemahaman dari materi sebelumnya.
Halaman minimal memiliki:
- Header dan judul kegiatan.
- Navigasi menggunakan list.
- Deskripsi workshop.
- Daftar materi workshop menggunakan ordered list.
- Tabel jadwal workshop.
- Form pendaftaran.
- Nama lengkap.
- Email.
- Nomor telepon.
- Program studi.
- Semester.
- Pilihan kelas.
- Checkbox persetujuan mengikuti kegiatan.
- Tombol submit dan reset.
- Footer.
Tidak perlu menggunakan CSS. Fokus penilaian tetap pada struktur HTML yang benar dan pemilihan elemen yang tepat.
Evaluasi Pemahaman
- Apa yang dimaksud dengan Semantic HTML?
- Apa fungsi elemen header?
- Apa perbedaan section dan article secara sederhana?
- Kapan kita menggunakan ul?
- Kapan kita menggunakan ol?
- Apa fungsi li?
- Apa fungsi table?
- Apa perbedaan th dan td?
- Apa fungsi thead dan tbody?
- Apa fungsi form?
- Apa fungsi label?
- Mengapa nilai for pada label sebaiknya sama dengan id pada input?
- Apa fungsi attribute name?
- Apa fungsi required?
- Apa perbedaan type="text", type="email", dan type="password"?
- Bagaimana membuat radio button yang hanya dapat dipilih satu?
- Apa fungsi checkbox?
- Apa fungsi elemen select dan option?
- Apa fungsi textarea?
- Apa fungsi sederhana dari method dan action pada form?
Checklist Kompetensi Pertemuan 2
Sebelum melanjutkan ke Pertemuan 3, mahasiswa seharusnya sudah mampu:
- Membuat struktur halaman menggunakan Semantic HTML.
- Membuat menu navigasi.
- Membuat unordered list dan ordered list.
- Membuat tabel data mahasiswa.
- Menggunakan thead dan tbody.
- Membuat form.
- Menggunakan label dengan benar.
- Menggunakan input text, email, password, number, date, radio, checkbox, dan file.
- Membuat dropdown menggunakan select.
- Membuat textarea.
- Menggunakan attribute name, id, placeholder, dan required.
- Membuat tombol submit dan reset.
- Menyusun satu halaman registrasi sederhana secara mandiri.
Rangkuman Pertemuan 2
Pada Pertemuan 1 kita belajar membuat sebuah halaman HTML. Pada Pertemuan 2 kita mulai membuat halaman tersebut menjadi lebih terstruktur dan mulai menerima input dari pengguna.
Alur kemampuan kita sekarang sudah berkembang menjadi:
Perkembangan Kompetensi
Pertemuan 1
HTML Dasar
|
v
Halaman Profil
|
v
Pertemuan 2
Semantic HTML
|
+-- List
+-- Navigation
+-- Table
+-- Form
|
v
Form Registrasi Mahasiswa
Lima praktik yang sudah dilakukan:
- Coding 1: membuat halaman menggunakan Semantic HTML.
- Coding 2: membuat navigasi dan list.
- Coding 3: membuat tabel data mahasiswa.
- Coding 4: membuat form dasar dan berbagai jenis input.
- Coding 5: membuat mini project Form Registrasi Mahasiswa.
Menuju Pertemuan 3
Sekarang halaman kita sudah memiliki struktur yang cukup lengkap. Ada header, menu, tabel, dan form. Masalahnya, tampilannya masih terlihat sangat sederhana.
Bagaimana cara mengubah halaman putih polos menjadi tampilan yang lebih menarik? Bagaimana mengatur warna, font, jarak, border, ukuran, dan bentuk card?
Semua itu akan kita pelajari pada:
