Tujuan Pembelajaran
Setelah menyelesaikan pertemuan ini, mahasiswa diharapkan dapat memahami konsep dasar HTML sebagai fondasi web development, membuat struktur dokumen HTML yang valid, dan mengidentifikasi elemen-elemen dasar untuk membangun halaman web sederhana yang dapat diakses oleh browser.
Pengenalan HTML: Apa Itu dan Mengapa Penting?
Bayangkan HTML seperti kerangka rumah. Tanpa kerangka, rumah tidak bisa berdiri. HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Ia bukan bahasa pemrograman seperti JavaScript, melainkan bahasa yang menggunakan "tag" untuk memberi tahu browser bagaimana menampilkan konten. HTML dikembangkan oleh Tim Berners-Lee pada tahun 1991 sebagai bagian dari World Wide Web, dan hingga kini menjadi standar untuk semua situs web. Tanpa HTML, tidak ada web seperti yang kita kenal hari ini – dari blog sederhana hingga aplikasi kompleks.
HTML penting karena ia memungkinkan kita mengorganisir informasi secara hierarkis, membuat konten mudah dibaca manusia dan mesin pencari. Misalnya, heading untuk judul, paragraf untuk teks, dan link untuk navigasi.
Struktur Dasar Dokumen Halaman Web
Struktur HTML seperti resep masakan: ada bahan utama yang harus ada agar masakan berhasil. Setiap dokumen HTML dimulai dengan deklarasi DOCTYPE, yang memberi tahu browser versi HTML yang digunakan. Kemudian, ada elemen root <html> yang membungkus seluruh halaman. Di dalamnya, <head> berisi informasi "di balik layar" seperti judul halaman dan link ke file eksternal, sementara <body> adalah tempat konten utama yang dilihat pengguna.
- <!DOCTYPE html>: Ini seperti pengantar resmi. Wajib ada agar browser merender halaman dalam mode standar, bukan mode lama (quirks mode) yang bisa bikin tampilan aneh.
- <html>: Elemen induk utama. Tambahkan atribut lang="id" untuk mendukung bahasa Indonesia dan aksesibilitas.
- <head>: Tempat metadata. Misalnya, <title> untuk judul tab browser, <meta charset="UTF-8"> untuk karakter khusus seperti é atau ñ, dan <link> untuk menghubungkan CSS.
- <body>: Inti konten. Semua yang Anda lihat di halaman web – teks, gambar, tombol – ada di sini.
Langkah-langkah membuat struktur dasar: 1) Buka editor teks, 2) Tulis DOCTYPE, 3) Tambah <html>, 4) Buat <head> dengan title, 5) Buat <body> dengan konten sederhana, 6) Simpan sebagai .html dan buka di browser.
Elemen Dasar HTML dan Cara Menggunakannya
Elemen HTML adalah "blok bangunan". Setiap elemen dimulai dengan tag pembuka (<tag>