Mau belajar HTML tapi bingung mulai dari mana? Tenang aja, bro! Di artikel ini, kita bakal kupas tuntas dasar-dasar HTML dengan gaya santai tapi tetap informatif. Yuk, langsung aja kita mulai!
Apa Itu HTML?
HTML, atau HyperText Markup Language, adalah bahasa standar yang dipakai buat bikin halaman web. Dengan HTML, lo bisa nentuin struktur dan konten dari sebuah halaman web, mulai dari teks, gambar, hingga link. Intinya, HTML itu fondasi utama dari setiap website yang lo kunjungi.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML punya struktur dasar yang harus diikuti. Berikut ini komponen-komponen utamanya:
- Deklarasi
<!DOCTYPE>- Baris pertama di setiap dokumen HTML harus ada deklarasi
<!DOCTYPE html>. Ini ngasih tahu browser kalau dokumen ini pakai HTML versi terbaru.
- Baris pertama di setiap dokumen HTML harus ada deklarasi
- Tag
<html>- Semua konten HTML lo harus dibungkus dalam tag
<html>dan ditutup dengan</html>.
- Semua konten HTML lo harus dibungkus dalam tag
- Bagian
<head>- Di dalam tag
<html>, ada bagian<head>yang berisi informasi meta, link ke stylesheet, judul halaman (<title>), dan lainnya yang nggak langsung tampil di halaman web.
- Di dalam tag
- Bagian
<body>- Nah, semua konten yang bakal ditampilkan di browser, seperti teks, gambar, dan link, ditempatkan di dalam tag
<body>.
- Nah, semua konten yang bakal ditampilkan di browser, seperti teks, gambar, dan link, ditempatkan di dalam tag
Contoh Dokumen HTML Sederhana
Biar lebih paham, yuk kita lihat contoh sederhana dari dokumen HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Ini Heading Pertama Gue</h1>
<p>Ini paragraf pertama gue.</p>
</body>
</html>
Hasil program:
Di contoh di atas:
<h1>dipakai buat heading utama.<p>dipakai buat paragraf teks.
Tag-Tag Penting dalam HTML
Berikut beberapa tag dasar yang sering dipakai dalam HTML:
- Heading Tags:
<h1>sampai<h6>buat nentuin tingkat heading, dari yang paling penting (<h1>) sampai yang paling rendah (<h6>). - Paragraf:
<p>buat nulis paragraf teks. - Link:
<a href="url">Teks Link</a>buat bikin hyperlink ke halaman lain atau sumber eksternal. - Gambar:
<img src="url_gambar" alt="Deskripsi Gambar">buat nampilin gambar di halaman web.
Berikut ini adalah contoh kode HTML sederhana yang memuat heading tags, paragraf, link, dan gambar:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Dasar HTML</title>
</head>
<body>
<!-- Heading Tags -->
<h1>Selamat Datang di Halaman Gue</h1>
<h2>Belajar HTML Itu Gampang</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<!-- Paragraf -->
<p>Ini adalah paragraf pertama. HTML adalah fondasi utama untuk membuat website!</p>
<p>Belajar HTML seru banget, apalagi kalau sering praktek langsung.</p>
<!-- Link -->
<p>
Untuk belajar lebih lanjut tentang HTML, kunjungi
<a href="https://www.sovyan.com/html/" target="_blank">sovyan.com</a>.
</p>
<!-- Gambar -->
<p>Berikut adalah contoh gambar yang dimuat dengan tag HTML:</p>
<img src="https://sovyan.com/wp-content/uploads/2025/01/Tutorial-html-1-768x576.jpg" alt="Contoh Gambar" width="300">
<!-- Footer -->
<footer>
<p>© 2025 Halaman Gue. Semua Hak Dilindungi.</p>
</footer>
</body>
</html>
Hasil kode:
Penjelasan Kode:
- Heading Tags (
<h1>hingga<h6>):
Menunjukkan hierarki teks dari yang paling penting hingga kurang penting. - Paragraf (
<p>):
Digunakan untuk memuat teks dalam bentuk paragraf. - Link (
<a>):
Membuat hyperlink yang mengarah ke halaman tertentu.target="_blank"membuat link terbuka di tab baru. - Gambar (
<img>):
Menampilkan gambar dengan atributsrcuntuk sumber gambar danaltuntuk deskripsi gambar jika tidak bisa dimuat.
Tips Belajar HTML
- Praktek Langsung: Cara terbaik buat belajar HTML adalah dengan langsung praktek. Lo bisa pakai editor teks sederhana kayak Notepad atau TextEdit, atau pakai editor online yang banyak tersedia.
- Pelajari Sumber Daya Online: Ada banyak tutorial dan dokumentasi online yang bisa bantu lo memahami HTML lebih dalam. Salah satunya adalah W3Schools yang punya banyak contoh dan penjelasan lengkap.
- Eksperimen dengan Kode: Jangan takut buat coba-coba ubah kode dan lihat hasilnya. Dengan begitu, lo bakal lebih paham gimana setiap elemen HTML bekerja.
Kesimpulan
Belajar HTML itu nggak sesulit yang dibayangkan. Dengan memahami struktur dasar dan fungsi dari setiap tag, lo udah bisa mulai bikin halaman web sederhana. Teruslah belajar dan eksplorasi, karena dunia web development itu luas dan selalu berkembang. Selamat ngoding, bro!
Komentar