Panduan HTML untuk pemula
Berikut adalah panduan dasar HTML untuk pemula:
1. Apa itu HTML?
HTML (HyperText Markup Language) adalah bahasa markah standar yang digunakan untuk membuat halaman web. HTML menggambarkan struktur dari sebuah halaman web dan digunakan bersama dengan CSS dan JavaScript untuk menciptakan situs web yang interaktif dan menarik.
2. Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di HTML!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
<!DOCTYPE html>: Deklarasi tipe dokumen yang memberi tahu browser bahwa ini adalah dokumen HTML5.<html>: Elemen root yang membungkus seluruh konten HTML.<head>: Bagian yang berisi metadata, seperti title dan link ke stylesheet.<title>: Judul halaman yang akan muncul di tab browser.<body>: Bagian yang berisi konten utama yang akan ditampilkan di halaman web.3. Elemen dan Tag HTML
HTML terdiri dari elemen-elemen yang dibatasi oleh tag pembuka dan penutup. Contoh elemen umum meliputi:
Heading: Digunakan untuk judul atau subjudul.
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
Paragraf: Digunakan untuk teks paragraf.
<p>Ini adalah teks paragraf.</p>
Link: Digunakan untuk membuat hyperlink.
<a href="https://www.example.com">Kunjungi Example</a>
Gambar: Digunakan untuk menampilkan gambar.
<img src="gambar.jpg" alt="Deskripsi Gambar">
List: Digunakan untuk membuat daftar.
Unordered List (daftar tak berurutan):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List (daftar berurutan):
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
4. Atribut HTML
Atribut memberikan informasi tambahan pada elemen HTML. Contoh atribut meliputi:
href pada elemen <a>:
<a href="https://www.example.com">Kunjungi Example</a>
src dan alt pada elemen <img>:
<img src="gambar.jpg" alt="Deskripsi Gambar">
id dan class pada elemen HTML apa pun untuk identifikasi dan styling:
<p id="paragraf1" class="teks-biru">Ini adalah teks paragraf.</p>
5. Contoh Dokumen HTML Sederhana
Berikut adalah contoh dokumen HTML sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Saya</title>
</head>
<body>
<h1>Selamat Datang di Halaman Saya!</h1>
<p>Ini adalah contoh paragraf di halaman saya.</p>
<a href="https://www.example.com">Kunjungi Example</a>
<h2>Daftar Item</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<img src="gambar.jpg" alt="Gambar Contoh">
</body>
</html>
6. Sumber Belajar Tambahan
Untuk belajar lebih lanjut tentang HTML, berikut beberapa sumber yang sangat bermanfaat:
Dengan mengikuti panduan ini dan mempraktikkannya, Anda akan memiliki dasar yang kuat dalam HTML. Selanjutnya, Anda dapat mempelajari CSS dan JavaScript untuk membuat halaman web yang lebih dinamis dan menarik.
