Pengenalan HTML

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk menyusun struktur dan konten halaman web. HTML menjadi fondasi utama dalam pengembangan web modern.

Framework seperti Bootstrap bekerja di atas struktur HTML. Oleh karena itu, sebelum mempelajari CSS dan Bootstrap, siswa wajib memahami HTML dasar dengan baik.

Peran HTML dalam Pengembangan Web

HTML berfungsi sebagai kerangka halaman web. HTML tidak digunakan untuk mengatur tampilan visual seperti warna atau animasi, melainkan untuk mengatur struktur dan makna konten.

  • HTML → Struktur halaman
  • CSS → Tampilan dan layout
  • JavaScript → Interaksi dan logika

Penjelasan Struktur Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar yang wajib digunakan. Struktur ini menentukan bagaimana browser membaca dan menampilkan halaman web.

Bagian Fungsi
<!DOCTYPE html> Menandakan bahwa dokumen menggunakan standar HTML5
<html> Elemen root yang membungkus seluruh isi dokumen HTML
<head> Berisi informasi halaman seperti meta data, title, dan CSS
<title> Menentukan judul halaman yang tampil di tab browser
<body> Berisi seluruh konten yang ditampilkan ke pengguna
HTML Editor
Preview

Elemen, Tag, dan Atribut

Dalam HTML, halaman web dibangun menggunakan elemen-elemen. Setiap elemen ditandai dengan tag dan dapat memiliki atribut sebagai informasi tambahan.

Pemahaman tentang tag, elemen, dan atribut sangat penting, karena hampir seluruh penggunaan CSS dan Bootstrap akan bergantung pada atribut class dan id.

Istilah Penjelasan
Tag Penanda elemen HTML yang ditulis menggunakan tanda < >, misalnya <p>.
Elemen Keseluruhan struktur HTML yang terdiri dari tag pembuka, isi konten, dan tag penutup.
Atribut Informasi tambahan pada elemen HTML, misalnya class, id, dan src.

Perhatikan contoh HTML berikut. Pada contoh ini terdapat satu elemen paragraf yang memiliki atribut class.

HTML Editor
Hasil Output

Elemen Block dan Inline

Dalam HTML, setiap elemen memiliki sifat tampilan bawaan. Secara umum, elemen HTML dibagi menjadi dua jenis utama, yaitu elemen block dan elemen inline.

Pemahaman tentang elemen block dan inline sangat penting, karena akan sangat mempengaruhi cara pengaturan layout menggunakan CSS dan framework Bootstrap.

Jenis Elemen Karakteristik Contoh
Block Mengambil satu baris penuh dan otomatis membuat baris baru <div>, <p>, <h1>
Inline Tidak membuat baris baru dan mengikuti alur teks <span>, <a>, <strong>

Pada contoh berikut, perhatikan perbedaan perilaku antara elemen block dan elemen inline ketika ditampilkan di browser.

HTML Editor
Hasil Output

Heading dan Paragraf

Heading dan paragraf merupakan elemen dasar yang digunakan untuk menyusun teks dan struktur konten pada halaman web. Heading berfungsi sebagai judul, sedangkan paragraf digunakan untuk menampilkan teks biasa.

HTML menyediakan enam level heading, mulai dari <h1> hingga <h6>. Heading tidak digunakan untuk memperbesar teks, melainkan untuk menyusun hierarki informasi.

Elemen Fungsi Keterangan
<h1> Judul utama halaman Biasanya digunakan satu kali dalam satu halaman
<h2> – <h6> Sub judul Digunakan secara berurutan sesuai struktur konten
<p> Paragraf Digunakan untuk teks atau deskripsi

Contoh berikut menunjukkan penggunaan heading dan paragraf dalam satu halaman HTML sederhana.

HTML Editor
Hasil Output

Link (Hyperlink) dan Gambar

Link digunakan untuk menghubungkan satu halaman dengan halaman lain, baik di dalam website yang sama maupun ke website lain. Gambar digunakan untuk menampilkan konten visual pada halaman web.

Elemen <a> digunakan untuk membuat link, sedangkan elemen <img> digunakan untuk menampilkan gambar.

ElemenFungsi
<a> Membuat tautan ke halaman lain
<img> Menampilkan gambar
HTML Editor
Hasil Output

List (Daftar HTML)

List digunakan untuk menampilkan data dalam bentuk daftar. HTML menyediakan list berurutan dan tidak berurutan.

ElemenFungsi
<ul> List tidak berurutan
<ol> List berurutan
<li> Item dalam list
HTML Editor
Hasil Output

Tabel HTML

Tabel digunakan untuk menampilkan data terstruktur dalam bentuk baris dan kolom.

HTML Editor
Hasil Output

Form HTML

Form digunakan untuk mengambil input dari pengguna. Elemen form sangat penting sebelum mempelajari Bootstrap Form.

HTML Editor
Hasil Output

Latihan HTML Dasar

Selesaikan latihan berikut dengan menuliskan kode HTML sesuai dengan petunjuk. Status latihan akan diperbarui secara otomatis setelah kamu menekan tombol Cek Jawaban.

Status: Belum selesai

Petunjuk Latihan

Pada latihan ini, kamu diminta untuk menyusun struktur HTML dasar menggunakan elemen yang telah dipelajari.

  • Gunakan elemen <h1> untuk menampilkan teks Belajar HTML.
  • Tambahkan paragraf menggunakan elemen <p> dengan teks Ini adalah paragraf HTML.
  • Buat tautan ke https://example.com dengan teks Kunjungi Website.

Setelah selesai menuliskan kode, klik Cek Jawaban untuk melihat hasil dan status latihan.

HTML Editor
Hasil Output