HTML Introduction

❮ Home Next ❯

Bab 1: Apa Itu HTML?

Selamat datang di CODIVAY, tempat di mana perjalananmu menjadi seorang Web Developer profesional dimulai. Langkah pertama yang mutlak harus kamu kuasai adalah HTML.

Kamu mungkin bertanya, "Kenapa harus HTML dulu? Kenapa tidak langsung belajar bikin aplikasi canggih?" Jawabannya sederhana: Karena HTML adalah tanah pijakan dari seluruh internet. Tidak ada satupun website di dunia ini—mulai dari Google, Facebook, Tokopedia, hingga website sederhana—yang bisa berdiri tanpa HTML.

💡 Definisi Resmi:

HTML adalah singkatan dari HyperText Markup Language.

Ini BUKAN bahasa pemrograman yang berisi logika matematika rumit (seperti Python atau C++). HTML adalah Bahasa Penanda (Markup Language). Tugas utamanya hanya satu: Memberitahu browser bagaimana struktur sebuah halaman harus ditampilkan.

1. HyperText

Kata "HyperText" merujuk pada "teks di dalam teks" yang memiliki kekuatan super. Kekuatan apa? Kekuatan untuk menghubungkan! Ini adalah sistem link (tautan) yang memungkinkan kamu berpindah dari satu halaman ke halaman lain hanya dengan sekali klik. Tanpa HyperText, internet hanyalah sekumpulan dokumen terpisah yang membosankan.

2. Markup Language

Bayangkan kamu adalah editor majalah. Kamu mencoret-coret naskah penulis dengan spidol merah: "Ini judul besar!", "Ini paragraf biasa", "Ini gambar taruh di sini". Itulah tugas HTML. Kita menggunakan kode (tag) untuk "menandai" bagian-bagian teks agar browser tahu fungsinya.

3. Standard Web

HTML adalah standar internasional yang dikelola oleh W3C (World Wide Web Consortium). Artinya, kode HTML yang kamu tulis di laptopmu di Indonesia, akan dibaca dan ditampilkan SAMA PERSIS oleh browser di Amerika, Jepang, atau kutub utara sekalipun.

Jadi, kesimpulannya: HTML adalah kerangka atau tulang punggung dari sebuah website. Tanpa HTML, website tidak akan memiliki bentuk.

Bab 2: Analogi "The Holy Trinity" Web

Di dunia web development modern, kita mengenal "Tiga Pilar Utama" yang saling bekerja sama. Kamu tidak bisa menjadi developer handal jika hanya menguasai salah satunya. Mari kita gunakan analogi Tubuh Manusia agar lebih mudah dipahami:

1. HTML (Tulang/Kerangka)

HTML berfungsi sebagai struktur. Ia menentukan: "Di sini ada kepala, di sini ada tangan, di sini ada kaki."

Tanpa tulang, manusia hanya akan menjadi tumpukan daging tanpa bentuk. Begitu juga website, tanpa HTML, tidak ada konten yang bisa ditampilkan.

2. CSS (Kulit & Baju)

CSS (Cascading Style Sheets) berfungsi sebagai tampilan. Ia menentukan: "Warna kulitnya sawo matang, bajunya merah, rambutnya ikal."

Tanpa CSS, website akan terlihat polos, kaku, dan membosankan (hanya teks hitam di latar putih).

3. JavaScript (Otak & Otot)

JavaScript (JS) berfungsi sebagai perilaku/logika. Ia menentukan: "Jika tangan disentuh, dia akan melambai. Jika mata kena cahaya, dia berkedip."

Tanpa JS, website hanya menjadi "patung manekin" yang diam. JS membuatnya interaktif dan dinamis.

Di kursus ini (Intro HTML), kita akan melupakan dulu soal kecantikan (CSS) dan kecerdasan (JS). Kita akan fokus 100% untuk membangun tulang/kerangka yang kokoh.

Bab 3: Sejarah Singkat HTML

Sebelum kita mulai ngoding, ada baiknya kita menghormati sejarah. HTML tidak muncul begitu saja.

Bab 4: Anatomi Dokumen HTML

Sekarang, mari masuk ke teknis. Setiap file HTML di dunia ini memiliki struktur dasar yang sama. Anggap ini sebagai "Standar Pabrik". Jika kamu tidak mengikuti struktur ini, browser akan bingung.

Kode "Boilerplate" HTML5:

<!DOCTYPE html>
<html lang="id">

  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman Saya</title>
  </head>

  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah website pertamaku di CODIVAY.</p>
  </body>

</html>

Bedah Kode Per Baris (Sangat Penting!):

Mari kita bedah satu per satu agar kamu paham fungsinya, bukan sekadar hafal.

<!DOCTYPE html>

Ini adalah "Deklarasi". Kode ini berteriak kepada browser: "Hei Chrome! Saya menggunakan HTML5 versi terbaru! Tolong render halaman ini dengan mode standar modern, jangan pakai mode jadul tahun 90-an!". Wajib ditaruh di baris paling pertama.

<html> ... </html>

Ini adalah Elemen Akar (Root Element). Bayangkan ini sebagai koper besar. Semua baju, celana, dan barang-barangmu (kode HTML lainnya) HARUS masuk ke dalam koper ini. Tidak boleh ada kode di luar koper ini.

<head> ... </head>

Ini adalah bagian "Kepala" atau "Otak" website. Isinya adalah informasi untuk mesin (browser & Google), BUKAN untuk manusia. Apa yang kamu tulis di sini TIDAK AKAN MUNCUL di halaman utama website. Isinya biasanya judul tab, settingan karakter, link ke CSS, dll.

<title> ... </title>

Menentukan teks yang muncul di Tab Browser paling atas. Ini sangat penting agar user tahu tab mana yang sedang mereka buka, dan juga sangat penting untuk pencarian Google (SEO).

<body> ... </body>

Ini adalah bagian "Tubuh". Inilah area kerjamu yang sesungguhnya! Apapun yang kamu tulis di sini (Teks, Gambar, Tombol, Video) AKAN TAMPIL di layar pengunjung website. 90% waktu ngodingmu akan dihabiskan di dalam tag body ini.

Bab 5: Konsep Tags (Sistem Sandwich)

HTML bekerja dengan sistem Tag (Penanda). Hampir semua elemen HTML memiliki pasangan: Tag Pembuka dan Tag Penutup. Agar mudah diingat, bayangkan seperti roti sandwich yang membungkus isinya.

🍞
<h1> Tag Pembuka
Konten / Isi
(Daging Sandwich)
🍞
</h1> Tag Penutup

⚠️ Aturan Penting:

  • Tag penutup SELALU memiliki tanda garis miring (/). Contoh: </p>, </body>.
  • Jangan pernah lupa menutup tag! Jika kamu lupa menutup tag <h1>, browser mungkin akan menganggap seluruh sisa halamanmu sebagai judul besar.
  • Semua tag ditulis dalam huruf kecil (lowercase). Meskipun HTML tidak protes jika kamu pakai huruf besar, tapi standar profesional mewajibkan huruf kecil.

Bab 6: Bagaimana Browser Bekerja?

Pernahkah kamu bertanya-tanya, bagaimana tulisan kode yang aneh bisa berubah menjadi tampilan website yang cantik?

Web Browser (Chrome, Firefox, Edge, Safari) sebenarnya adalah sebuah mesin penerjemah yang sangat canggih. Prosesnya disebut Rendering:

  1. Request: Kamu mengetik "codivay.com". Browser meminta file ke server.
  2. Response: Server mengirimkan file HTML (berisi teks kode).
  3. Parsing: Browser membaca kode HTML baris demi baris dari atas ke bawah.
  4. DOM Tree: Browser menyusun struktur pohon elemen di memori komputer.
  5. Display: Browser melukis (paint) hasilnya ke layarmu.

Jadi, file HTML sebenarnya hanyalah "Surat Perintah" kepada browser. Browser-lah yang melakukan kerja keras untuk menampilkannya.

Bab 7: Eksperimen Kode Langsung

Teori tanpa praktik adalah omong kosong. Di CODIVAY, kami menyediakan editor langsung di browser agar kamu bisa bereksperimen tanpa perlu menginstal software apapun terlebih dahulu.

Cobalah ubah teks di bawah ini. Ganti "Halo Dunia" dengan namamu, atau ganti isi paragrafnya.

Editor Latihan CODIVAY:

<h1>Halo Dunia!</h1>
<p>Saya siap belajar di CODIVAY.</p>

Klik tombol di atas untuk membuka Editor Live Run.

Bab 8: ⚡ Proyek Kilat - Misi Pertama

Sekarang saatnya ujian praktek sesungguhnya! Kamu diminta untuk membangun struktur HTML dasar yang valid secara manual. Ini adalah Fondasi yang akan kamu gunakan seumur hidup karir codingmu.

⚠️ Catatan: Fitur Copy-Paste dimatikan di kotak editor di bawah ini. Kamu dipaksa mengetik manual agar memori otot jarimu terlatih dengan sintaks < > dan /.

🎯 Target Misi Kamu:

  • ✅ Ketik tag pembuka <html> dan penutupnya.
  • ✅ Masukkan tag <body> di dalamnya.
  • ✅ Di dalam body, buat Judul <h1> dengan teks persis: Langkah Awal
  • ✅ Di bawah judul, buat Paragraf <p> dengan teks persis: Situs Belajarku

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:

Layanan & Jasa

Pembuatan Website Template Web Jasa Iklan

Fondasi Utama

Tag & Struktur Atribut Elemen Atribut Global Simbol & Karakter

Visual & Media

Kamus Warna Grafik Canvas Audio & Video Cek Browser

Alat Bantu Dev

Konversi PX ke EM Shortcut Keyboard Status HTTP URL Encoding

Standar Global

Kode Bahasa Kode Negara Atribut Event

Langkah Selanjutnya

Sekarang kamu sudah paham konsep dasarnya. Selanjutnya, kita akan membahas alat tempur (Software) yang digunakan para developer profesional untuk menulis kode.

Lanjut ke HTML Editors »
❮ Home Next: HTML Editors ❯