Pertemuan 1-2: Fondasi & Struktur Dasar

Mengenal HTML, Elemen, Atribut, dan Kerangka Wajib

Pengertian

HTML (HyperText Markup Language) adalah bahasa markup yang menjadi fondasi dari semua halaman web. HTML digunakan untuk mendefinisikan struktur dan konten dari sebuah halaman, seperti judul, paragraf, gambar, dan tautan. Penting untuk diingat, HTML bukanlah bahasa pemrograman karena ia tidak bisa membuat logika dinamis; ia hanya "menandai" atau "membungkus" konten agar browser tahu cara menampilkannya.

Analogi

Analogi: Membangun Rumah
Bayangkan membangun sebuah rumah. HTML adalah kerangka atau struktur dasar rumah tersebut—pondasi, tiang, dinding, dan atap. HTML menentukan di mana letak ruang tamu, kamar tidur, dan dapur. Ia belum mengatur warna cat, jenis lantai, atau perabotan di dalamnya. Itu adalah tugas CSS.

Contoh Kode & Hasil

1. Struktur Dokumen Minimal

Konten ini terlihat oleh pengguna.

<!DOCTYPE html>
<html>
  <head>
    <title>Judul di Tab Browser</title>
  </head>
  <body>
    <p>Konten ini terlihat oleh pengguna.</p>
  </body>
</html>

2. Elemen Heading dan Paragraf

Judul Utama Halaman

Ini adalah paragraf pengantar.

<h1>Judul Utama Halaman</h1>
<p>Ini adalah paragraf pengantar.</p>

3. Atribut lang pada Tag <html>

Atribut ini tidak terlihat, namun penting untuk memberitahu browser dan mesin pencari bahwa bahasa halaman ini adalah Indonesia.

<html lang="id">...</html>

4. Komentar HTML

Komentar tidak akan ditampilkan di browser, berguna untuk meninggalkan catatan bagi developer.

<!-- Ini adalah komentar. Teks ini tidak akan muncul di halaman. -->
<p>Paragraf ini akan muncul.</p>

5. Elemen Kosong <br> untuk Pindah Baris

Baris pertama.
Baris kedua.

<p>Baris pertama.<br>Baris kedua.</p>

Latihan Mandiri

Tugas: Membuat Halaman "Tentang Saya"

  1. Buat file HTML baru dengan nama tentang-saya.html.
  2. Pastikan file tersebut memiliki struktur HTML yang lengkap (<!DOCTYPE>, <html>, <head>, <body>).
  3. Beri judul pada tab browser "Tentang Saya - [Nama Anda]".
  4. Di dalam body, buat judul utama (<h1>) dengan nama lengkap Anda.
  5. Di bawah judul, buat paragraf (<p>) yang menceritakan asal sekolah dan jurusan Anda.

Kesimpulan

Pada pertemuan ini, kita telah mempelajari bahwa HTML adalah kerangka dari setiap halaman web. Kita telah memahami struktur dokumen yang wajib ada, serta cara menggunakan elemen dasar seperti heading dan paragraf. Memahami fondasi ini adalah langkah pertama dan paling krusial untuk menjadi seorang pengembang web.