Dasar-Dasar HTML untuk Pemula - Part 3: List, Table, dan Form

 

Halo sobat BelajarAIdotid! Di Part 3 ini, kita akan menjelajahi cara menyusun data menggunakan list (daftar), menampilkan informasi dalam tabel, dan membuat formulir untuk mengumpulkan data dari pengguna. Yuk kita mulai dari yang paling dasar!

BACA JUGA

• Tutorial belajar coding dasar pembuatan AI part-1
• Tutorial Membuat Codingan Untuk membuat Ai untuk pemula part-2
• Tutorial belajar coding dasar pembuatan AI part-3

1. Membuat Daftar di HTML

HTML mendukung tiga jenis daftar utama:

• Unordered List (<ul>): daftar tanpa urutan.
• Ordered List (<ol>): daftar berurutan (angka, huruf).
• Description List (<dl>): daftar istilah dan penjelasan.

Contoh Unordered List

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Contoh Ordered List

<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ol>

Contoh Description List

<dl>
  <dt>HTML</dt>
  <dd>Bahasa markup untuk membuat halaman web</dd>
  <dt>CSS</dt>
  <dd>Bahasa untuk mendesain tampilan web</dd>
</dl>

2. Menampilkan Data dengan Tabel

Tabel digunakan untuk menyusun data dalam bentuk baris dan kolom.

Struktur Dasar Tabel

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Ayu</td>
    <td>21</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>23</td>
  </tr>
</table>

Penjelasan Tag

• <table>: Membuat tabel
• <tr>: Baris
• <th>: Header kolom (teks dicetak tebal dan rata tengah)
• <td>: Sel data biasa

3. Formulir HTML (Form)

Formulir digunakan untuk mengumpulkan data dari pengguna seperti nama, email, komentar, dan lain-lain. Tag utamanya adalah <form>.

Contoh Form Sederhana

<form action="/proses.php" method="post">
  Nama: <input type="text" name="nama"><br>
  Email: <input type="email" name="email"><br>
  Komentar: <br><textarea name="komentar"></textarea><br>
  <input type="submit" value="Kirim">
</form>

Atribut Penting Form

• action: URL tujuan saat data dikirim
• method: "get" (terlihat di URL) atau "post" (lebih aman)

Jenis Input dalam Form

Type	Fungsi	Contoh
text	Input teks biasa	<input type="text">
email	Input email	<input type="email">
password	Sandi (tertutup)	<input type="password">
radio	Pilihan tunggal	<input type="radio">
checkbox	Pilihan ganda	<input type="checkbox">
submit	Kirim form	<input type="submit">

Mini Project: Form Kontak

Buat form kontak seperti ini untuk latihan:

<form action="kirim.php" method="post">
  <h3>Form Kontak</h3>
  Nama Lengkap: <input type="text" name="nama"><br>
  Email: <input type="email" name="email"><br>
  Jenis Kelamin: 
  <input type="radio" name="gender" value="L">Laki-laki 
  <input type="radio" name="gender" value="P">Perempuan<br>
  Pesan: <br><textarea name="pesan"></textarea><br>
  <input type="submit" value="Kirim Pesan">
</form>

Kesimpulan Part 3

Di bagian ini kamu telah belajar:

• Cara membuat berbagai jenis daftar di HTML
• Struktur dan penggunaan tabel
• Membuat form dan jenis input data

Nantikan Part 4 ya bro, kita bakal bahas Semantic HTML dan struktur halaman web profesional. Tetap semangat coding bareng BelajarAIdotid!

___&___