HTML Basic
Bab 1: Jangan Menghafal, Pahami Polanya
Di bab ini, kita akan mempelajari "Kosakata Dasar" yang menyusun 90% konten di internet. Kuncinya: jangan menghafal kodenya, tapi pahami fungsinya. Setelah kamu punya editor (dari bab sebelumnya), sekarang saatnya menulis konten nyata.
💡 Aturan Emas HTML:
Apapun yang ingin kamu tampilkan ke pengunjung (Teks, Gambar, Video), WAJIB ditulis di antara tag <body> dan </body>. Jangan pernah menulis konten di luar area ini.
Bab 2: HTML Headings (Judul)
Heading adalah judul atau sub-judul. HTML menyediakan 6 level heading, mulai dari yang paling penting (besar) sampai yang paling detail (kecil).
<h1>
Main Heading. Ini adalah judul utama halaman. Seperti judul buku. Google sangat menyukai tag ini, jadi pastikan hanya ada SATU <h1> per halaman.
<h2> - <h3>
Sub Headings. Digunakan untuk membagi bab atau bagian penting dalam halaman. Gunakan ini untuk struktur artikelmu.
<h4> - <h6>
Minor Headings. Judul kecil untuk detail tambahan, widget, atau catatan kaki.
Contoh Visual Headings:
<h1>Ini Judul Utama (H1)</h1>
<h2>Ini Sub-Judul (H2)</h2>
<h3>Ini Lebih Kecil (H3)</h3>Bab 3: HTML Paragraphs (Paragraf)
Untuk menulis teks biasa, artikel, atau deskripsi, kita menggunakan tag <p>. Browser akan otomatis memberikan jarak (margin) di atas dan di bawah paragraf agar teks mudah dibaca.
⚠️ Jebakan Pemula:
Di HTML, menekan tombol ENTER berkali-kali di keyboard TIDAK akan membuat baris baru di browser! Browser mengabaikan spasi dan enter yang berlebihan (dianggap satu spasi).
Jika ingin memaksa ganti baris di tengah paragraf, gunakan tag Empty Element bernama <br> (Line Break).
Perhatikan Bedanya:
<p>Ini adalah paragraf.</p>
<p>Ini paragraf lain.</p>
<p>Baris ini <br> dipotong paksa.</p>Bab 4: HTML Links (Tautan)
Inilah yang membuat internet menjadi "Jaring Laba-laba" (Web). Kita bisa menghubungkan satu halaman ke halaman lain menggunakan tag <a> (Anchor).
Tag ini spesial karena membutuhkan Atribut. Atribut adalah informasi tambahan yang disisipkan di dalam tag pembuka. Untuk link, kita butuh atribut href (Hypertext Reference) untuk memberitahu tujuan linknya.
- <a>: Tag pembuka Anchor.
- href="...": Atribut yang berisi alamat tujuan (URL).
- Klik Saya: Teks yang bisa diklik oleh user (Anchor Text).
- </a>: Tag penutup.
Coba Klik Link Ini:
<a href="https://google.com" target="_blank">Pergi ke Google</a>Catatan: Tambahkan target="_blank" agar link terbuka di tab baru.
Bab 5: HTML Images (Gambar)
Sebuah website tanpa gambar akan membosankan seperti koran lama. Kita menggunakan tag <img> untuk menampilkan foto.
Uniknya, tag gambar adalah Empty Tag, artinya dia TIDAK PERLU tag penutup (</img>). Dia berdiri sendiri dan menggunakan atribut untuk bekerja.
- src (Source): Lokasi file gambar. Bisa nama file (jika satu folder) atau URL lengkap dari internet.
- alt (Alternative Text): Teks pengganti jika gambar rusak/gagal dimuat. Ini SANGAT PENTING untuk aksesibilitas (pembaca layar bagi tuna netra) dan SEO.
- width/height: Mengatur ukuran gambar dalam pixel.
Menampilkan Logo:
<img src="logo.png" alt="Logo Codivay" width="200">Bab 6: ⚡ Proyek Kilat - Kartu Nama Digital
Ayo gabungkan semua ilmu di bab ini! Misi kamu adalah membuat profil biodata sederhana yang berisi Judul, Paragraf, Link, dan Gambar.
🎯 Misi Basic:
- ✅ Buat Judul Utama
<h1>dengan teks: Profil Saya - ✅ Buat Paragraf
<p>dengan teks: Belajar HTML itu seru - ✅ Tambahkan Link
<a>dengan teks: Hubungi Saya (href bebas). - ✅ Tambahkan Gambar
<img>(gunakan src bebas/dummy).
Pusat Dokumentasi Developer
Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:
Layanan & Jasa
Fondasi Utama
Visual & Media
Alat Bantu Dev
Standar Global
Langkah Selanjutnya
Pondasi dasarmu sudah kuat! Sekarang saatnya memahami bagaimana elemen-elemen tersebut saling menyusun struktur yang lebih kompleks. Kita akan mempelajari konsep "Sarang" (Nesting) dan anatomi elemen secara mendalam.
INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY
Lanjut ke HTML Elements »