Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun konten pada halaman web. HTML bukan bahasa pemrograman, melainkan bahasa markup yang memberikan struktur pada konten web menggunakan serangkaian elemen atau tag.
Analoginya, jika website adalah sebuah rumah, maka HTML adalah kerangka dan struktur dasarnya - dinding, lantai, dan ruangan. CSS kemudian akan menjadi cat dan dekorasi, sedangkan JavaScript adalah sistem listrik yang membuat rumah tersebut interaktif.
Sejarah Singkat HTML
HTML pertama kali diciptakan oleh Tim Berners-Lee pada tahun 1991. Sejak itu, HTML terus berkembang dengan versi terbaru adalah HTML5 yang diperkenalkan pada tahun 2014 dan terus diperbarui hingga sekarang.
Struktur Dasar HTML
Setiap dokumen HTML memiliki struktur dasar yang terdiri dari beberapa elemen wajib:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman web ditampilkan di sini -->
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>Mari kita bahas setiap bagian:
1. <!DOCTYPE html>
- Deklarasi tipe dokumen yang memberitahu browser bahwa ini adalah dokumen HTML5
- Harus ditulis di baris paling atas
2. <html lang="id">
- Elemen root yang membungkus seluruh konten HTML
- Atribut
lang="id"menunjukkan bahasa Indonesia
3. <head>
- Berisi metadata dan informasi tentang dokumen
- Tidak ditampilkan langsung di browser
- Memuat informasi seperti judul, charset, dan link ke file eksternal
4. <meta charset="UTF-8">
- Menentukan encoding karakter (UTF-8 mendukung hampir semua karakter bahasa)
5. <meta name="viewport">
- Penting untuk desain responsif di perangkat mobile
6. <title>
- Judul yang muncul di tab browser
7. <body>
- Berisi semua konten yang ditampilkan di browser
- Tempat kita meletakkan teks, gambar, video, dan elemen lainnya
Cara Penulisan Tag HTML
HTML menggunakan sistem tag yang umumnya memiliki tag pembuka dan tag penutup:
<namatag>konten</namatag>Contoh:
<p>Ini adalah paragraf</p>
<h1>Ini adalah heading</h1>
<strong>Teks tebal</strong>Tag Self-Closing (Tidak Memerlukan Penutup):
Beberapa tag tidak memerlukan konten di dalamnya, sehingga bisa ditutup sendiri:
<img src="gambar.jpg" alt="Deskripsi gambar">
<br>
<hr>
<input type="text">Aturan Penulisan HTML yang Baik
1. Gunakan huruf kecil untuk nama tag
<!-- Benar -->
<p>Paragraf</p>
<!-- Kurang baik (meski valid) -->
<P>Paragraf</P>2. Tutup semua tag dengan benar
<!-- Benar -->
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
<!-- Salah -->
<p>Paragraf pertama
<p>Paragraf kedua3 .Buat indentasi untuk keterbacaan
<div>
<h1>Judul</h1>
<p>Paragraf di dalam div</p>
</div>4. Gunakan atribut dengan tanda kutip
<!-- Benar -->
<img src="foto.jpg" alt="Foto profil">
<!-- Kurang baik -->
<img src=foto.jpg alt=Foto profil>5. Tambahkan komentar untuk penjelasan
<!-- Ini adalah komentar, tidak akan ditampilkan di browser -->
<p>Konten yang terlihat</p>Atribut HTML
Atribut memberikan informasi tambahan tentang elemen HTML. Atribut ditulis di dalam tag pembuka:
<tag atribut="nilai">konten</tag>Contoh Atribut Umum:
<!-- id: identifier unik -->
<div id="header">Header</div>
<!-- class: untuk styling CSS -->
<p class="teks-penting">Teks penting</p>
<!-- style: styling inline -->
<p style="color: red;">Teks merah</p>
<!-- href: link tujuan -->
<a href="https://google.com">Link ke Google</a>
<!-- src: sumber file -->
<img src="gambar.jpg" alt="Deskripsi">Membuat File HTML Pertama Anda
Langkah-langkah:
- Buka text editor (Notepad, VS Code, Sublime Text, dll)
- Ketik struktur HTML dasar
- Simpan dengan ekstensi
.html(contoh:index.html) - Buka file tersebut dengan web browser
- Voila! Website pertama Anda sudah jadi
Contoh Lengkap:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah website HTML pertama saya.</p>
<p>Saya sedang belajar HTML dan sangat excited!</p>
</body>
</html>Latihan Artikel 1:
- Buat file HTML dengan struktur dasar yang benar
- Tambahkan judul halaman "Belajar HTML"
- Buat heading dan beberapa paragraf tentang diri Anda
- Simpan dan buka di browser untuk melihat hasilnya
💬 0 Komentars
Belum Ada Komentar
Jadilah yang pertama membagikan pemikiran Anda!