Pertemuan 2 – Struktur Halaman Web dan Input Data dengan HTML

← Kembali ke Beranda

Tujuan Pembelajaran

Mahasiswa mampu merancang dan mengimplementasikan struktur halaman web lengkap menggunakan elemen HTML seperti heading, paragraf, list, link, dan image, serta mengintegrasikan tabel dan form untuk pengumpulan data input dari pengguna secara efektif dan user-friendly.

Pembuatan Struktur Halaman Web Menggunakan HTML

Struktur halaman web seperti blueprint bangunan: ia menentukan bagaimana konten diorganisir agar mudah dipahami. HTML menyediakan elemen semantik yang tidak hanya membuat halaman terlihat rapi, tapi juga membantu mesin pencari dan screen reader memahami hierarki informasi. Misalnya, heading untuk judul, paragraf untuk teks utama, list untuk daftar, link untuk navigasi, dan image untuk visualisasi.

  • Heading (h1-h6): Gunakan h1 sekali per halaman untuk judul utama, h2 untuk sub-bab, dll. Ini penting untuk SEO karena mesin pencari membaca hierarki ini.
  • Paragraf dan List: <p> untuk teks panjang, <ul> untuk daftar bullet, <ol> untuk daftar bernomor. List membantu menyusun informasi kompleks.
  • Link dan Image: <a href="url"> untuk link ke halaman lain, <img src="path" alt="deskripsi"> untuk gambar. Alt text wajib untuk aksesibilitas.

Langkah-langkah praktis: 1) Tentukan hierarki konten, 2) Gunakan heading untuk struktur, 3) Tambah paragraf dan list untuk detail, 4) Sisipkan link dan gambar untuk interaktivitas.

Penggunaan Tabel dan Form HTML untuk Input Data

Tabel seperti spreadsheet di web: digunakan untuk menampilkan data tabular seperti jadwal kuliah atau daftar produk. Form adalah jembatan antara user dan web, memungkinkan input data seperti nama, email, atau pilihan. Elemen form termasuk input text, checkbox untuk multiple choice, radio button untuk single choice, dan dropdown (select) untuk opsi terbatas.

  • Tabel: <table> dengan <tr> (row), <th> (header), <td> (data). Tambah border untuk visibility.
  • Form: <form action="url" method="post"> dengan input types. Method GET untuk data sederhana, POST untuk aman.

Analoginya: Tabel seperti katalog, form seperti formulir pendaftaran. Pastikan form validasi dasar di browser untuk UX baik.

Contoh Kode Struktur Halaman Lengkap

<body>
    <header>
        <h1>Website Kuliah</h1>
        <nav><a href="#home">Home</a></nav>
    </header>
    <main>
        <h2>Pengantar</h2>
        <p>Ini pengantar materi.</p>
        <ul>
            <li>Poin 1</li>
            <li>Poin 2</li>
        </ul>
        <a href="materi1.html">Baca Lebih Lanjut</a>
        <img src="diagram.jpg" alt="Diagram struktur web">
    </main>
    <footer>© 2026</footer>
</body>

Contoh Kode Tabel dan Form

<table border="1">
    <tr><th>Mata Kuliah</th><th>SKS</th></tr>
    <tr><td>Pemrograman Web</td><td>3</td></tr>
    <tr><td>Basis Data</td><td>2</td></tr>
</table>

<form action="submit.html" method="post">
    <label for="nama">Nama: </label>
    <input type="text" id="nama" name="nama" required>
    <br>
    <input type="checkbox" id="agree" name="agree"> Setuju
    <input type="radio" id="gender" name="gender" value="male"> Laki
    <select><option>Pilih Kota</option></select>
    <button type="submit">Kirim</button>
</form>

Tips Praktis

  • Gunakan semantic HTML (header, nav, main) untuk aksesibilitas.
  • Tambahkan alt di img untuk screen reader.
  • Test form di browser untuk validasi dasar.

Ringkasan

HTML memungkinkan struktur halaman yang terorganisir dan input data yang user-friendly. Kombinasikan dengan CSS untuk tampilan menarik.

Latihan

Buat halaman dengan tabel data mahasiswa dan form pendaftaran. Tambahkan link dan gambar. Validasi di browser.