HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat dan menyusun halaman web. Menguasai HTML adalah langkah pertama bagi siapa saja yang ingin belajar web development, baik untuk desain situs pribadi, blog, maupun aplikasi web profesional.
Artikel ini membahas pengertian HTML, struktur dasar halaman web, elemen dan atribut penting, contoh soal latihan HTML beserta pembahasan, serta tips belajar efektif untuk meningkatkan keterampilan coding HTML.
Baca juga :Pendahuluan Pentingnya Memahami Volume Bangun Kerucut
Pengertian HTML
HTML adalah bahasa markup yang digunakan untuk membuat konten web dan menentukan struktur elemen di halaman web. HTML menggunakan tag untuk menandai elemen seperti paragraf, gambar, link, tabel, dan form.
Fungsi HTML:
- Menentukan struktur halaman web, seperti heading, paragraf, dan daftar.
- Memformat konten agar mudah dibaca dan diakses di browser.
- Menjadi dasar bagi teknologi web lainnya, seperti CSS dan JavaScript.
Struktur Dasar Halaman HTML
Sebelum berlatih soal, penting memahami struktur dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Keterangan:
<!DOCTYPE html>→ mendefinisikan tipe dokumen sebagai HTML5.<html>→ elemen root dari halaman HTML.<head>→ berisi metadata, judul, dan link ke file eksternal.<body>→ berisi konten yang akan tampil di browser.
Elemen dan Atribut Penting
- Heading:
<h1>sampai<h6>untuk judul atau subjudul. - Paragraf:
<p>untuk teks paragraf. - Link:
<a href="url">teks link</a>untuk navigasi. - Gambar:
<img src="gambar.jpg" alt="deskripsi">untuk menampilkan gambar. - Daftar:
<ul>untuk unordered list dan<ol>untuk ordered list, dengan<li>sebagai item daftar. - Form:
<form>untuk input data,<input>untuk teks, checkbox, radio, dan tombol submit. - Tabel:
<table>,<tr>,<td>, dan<th>untuk membuat tabel. - Atribut:
id,class,src,href,alt,style, dan lain-lain untuk memberikan identitas, styling, dan fungsi tambahan.
Contoh Soal Latihan HTML dan Pembahasan
Soal 1: Struktur Dasar HTML
Soal:
Buatlah struktur HTML dasar untuk halaman dengan judul “Website Saya” dan sebuah paragraf berisi “Halo Dunia!”.
Pembahasan:
<!DOCTYPE html>
<html>
<head>
<title>Website Saya</title>
</head>
<body>
<p>Halo Dunia!</p>
</body>
</html>
Jawaban: Sesuai kode di atas.
Soal 2: Heading dan Paragraf
Soal:
Tampilkan judul utama “Belajar HTML” menggunakan heading, dan subjudul “Panduan Pemula” menggunakan heading yang lebih kecil. Tambahkan paragraf deskriptif.
Pembahasan:
<h1>Belajar HTML</h1>
<h3>Panduan Pemula</h3>
<p>HTML adalah bahasa dasar untuk membuat halaman web.</p>
Jawaban: Sesuai kode di atas.
Soal 3: Link dan Gambar
Soal:
Tambahkan link ke website https://www.example.com dengan teks “Kunjungi Website”, dan tampilkan gambar dengan nama file logo.png.
Pembahasan:
<a href="https://www.example.com">Kunjungi Website</a>
<img src="logo.png" alt="Logo Website">
Jawaban: Sesuai kode di atas.
Soal 4: Daftar
Soal:
Buat daftar belanjaan dengan item: “Beras”, “Telur”, “Susu” menggunakan unordered list, dan buat daftar tugas harian menggunakan ordered list.
Pembahasan:
<h2>Belanjaan</h2>
<ul>
<li>Beras</li>
<li>Telur</li>
<li>Susu</li>
</ul>
<h2>Tugas Harian</h2>
<ol>
<li>Belajar HTML</li>
<li>Mengerjakan PR</li>
<li>Berolahraga</li>
</ol>
Jawaban: Sesuai kode di atas.
Soal 5: Tabel
Soal:
Buat tabel sederhana 2×3 untuk menampilkan data siswa (Nama, Kelas, Nilai).
Pembahasan:
<table border="1">
<tr>
<th>Nama</th>
<th>Kelas</th>
<th>Nilai</th>
</tr>
<tr>
<td>Ani</td>
<td>10A</td>
<td>85</td>
</tr>
<tr>
<td>Budi</td>
<td>10B</td>
<td>90</td>
</tr>
</table>
Jawaban: Sesuai kode di atas.
Soal 6: Form Input
Soal:
Buat form sederhana untuk nama, email, dan tombol submit.
Pembahasan:
<form action="/submit" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Kirim">
</form>
Jawaban: Sesuai kode di atas.
Soal 7: Atribut CSS Inline
Soal:
Tambahkan warna teks merah pada paragraf “Belajar HTML itu menyenangkan!”.
Pembahasan:
<p style="color: red;">Belajar HTML itu menyenangkan!</p>
Jawaban: Sesuai kode di atas.
Tips Belajar HTML Efektif
- Praktik Langsung
Kode HTML sebaiknya langsung dicoba di editor seperti VS Code atau Sublime Text. - Gunakan Browser untuk Preview
Lihat hasil kode secara langsung agar mudah memahami efek setiap tag. - Latihan Berulang
Mulai dari latihan sederhana hingga proyek mini seperti halaman profil atau blog pribadi. - Pelajari Atribut Penting
Memahami atribut sepertiid,class,alt,hrefmembuat HTML lebih fleksibel dan interaktif. - Gabungkan dengan CSS dan JavaScript
Setelah mahir HTML dasar, belajar CSS dan JavaScript akan memperkaya tampilan dan fungsi halaman web.
Baca juga : Mahasiswi FEB Universitas Teknokrat Indonesia Raih Juara 3 Nasional Desain Poster KOMNAS 2025
Kesimpulan
Latihan soal HTML sangat penting untuk menguasai dasar-dasar pembuatan halaman web. Dengan memahami struktur, elemen, atribut, dan cara penggunaannya, siswa dapat membuat halaman web sederhana hingga kompleks.
Contoh soal yang diberikan mencakup berbagai aspek HTML: struktur dasar, heading, paragraf, link, gambar, daftar, tabel, form, dan atribut inline. Latihan rutin dan praktik langsung membantu membangun keterampilan coding HTML yang kuat, serta menjadi fondasi untuk belajar CSS dan JavaScript di tahap berikutnya.
Jika diinginkan, saya bisa membuatkan versi lengkap 50+ contoh soal latihan HTML beserta pembahasan rinci dan variasi proyek mini, sehingga pembelajaran lebih menyeluruh dan persiapan ujian atau proyek web menjadi lebih optimal.
Penulis : Ellisa
Post Comment