Tutorial HTML, CSS & JavaScript Dasar

HTML (HyperText Markup Language)
- Kategori   : markup language, bukan bahasa pemrograman
- Fungsi     : mendefinisikan struktur dan semantik dokumen
               lewat elemen (tag) yang membentuk DOM Tree
- Spesifikasi: distandarkan oleh WHATWG/W3C (versi terkini HTML5)
- Dieksekusi : diparsing oleh browser menjadi DOM (Document Object Model)

CSS (Cascading Style Sheets)
- Kategori   : style sheet language, bersifat deklaratif
- Fungsi     : mendefinisikan presentasi visual elemen DOM
               (layout, warna, tipografi) lewat rule berbasis selector
- Spesifikasi: distandarkan oleh W3C, terbagi dalam modul (CSS3+)
- Dieksekusi : diparsing browser menjadi CSSOM, digabung dengan
               DOM untuk membentuk Render Tree

JavaScript (JS)
- Kategori   : bahasa pemrograman scripting, interpreted,
               dynamically typed, mendukung paradigma
               multi-style (prosedural, OOP, functional)
- Fungsi     : memanipulasi DOM/CSSOM secara runtime,
               menangani event, logika, dan komunikasi data (API)
- Spesifikasi: mengikuti standar ECMAScript (ECMA-262), dikelola TC39
- Dieksekusi : dijalankan oleh JavaScript engine di browser
               (mis. V8 pada Chrome, SpiderMonkey pada Firefox)

<h1>Toko Buku Nusantara</h1>
<p>Menjual buku pelajaran dan novel.</p>
<button>Lihat Katalog</button>

h1 {
    color: #2d5016;
    font-size: 32px;
}
button {
    background: black;
    color: white;
    border-radius: 8px;
}

document.querySelector("button").addEventListener("click", () => {
    alert("Katalog akan segera dibuka!");
});

LANGKAH 1: Download
1. Buka https://code.visualstudio.com/
2. Download sesuai sistem operasi (Windows/Mac/Linux)
3. Jalankan installer, ikuti langkah default

LANGKAH 2: Install Extensions Penting
1. Buka tab Extensions (icon kotak di kiri)
2. Install: "Live Server" (preview otomatis di browser)
3. Install: "Prettier" (rapikan format kode otomatis)
4. Install: "Auto Rename Tag" (rename tag HTML berpasangan)

LANGKAH 3: Buat Folder Project
1. Buat folder: belajar-web
2. Buka folder tersebut di VS Code (File > Open Folder)

belajar-web/
│
├── index.html      (halaman utama)
├── style.css       (file styling)
└── script.js       (file JavaScript)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Halaman Pertama</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Halo, Dunia!</h1>

    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>         <!-- Beritahu browser ini HTML5 -->
<html lang="id">        <!-- Elemen root -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Tab Browser</title>
</head>
<body>
    <!-- Semua konten yang terlihat ada di sini -->
    <h1>Ini konten utama</h1>
</body>
</html>

<p class="intro" id="paragraf-1">Ini adalah teks</p>
  │      │              │            │           │
  │      └─ attribute    └─ attribute │           └─ tag penutup
  └─ tag pembuka                      └─ konten (isi elemen)

- Tag pembuka dan penutup membungkus konten
- Attribute memberi informasi tambahan (class, id, src, href, dst)
- Elemen "void" tidak punya penutup, contoh: <img>, <br>, <input>

<h1>Judul Paling Penting</h1>
<h2>Sub Judul</h2>
<h3>Sub-sub Judul</h3>
<!-- ... sampai <h6> (paling kecil) -->

<p>Ini adalah sebuah paragraf teks biasa.</p>

<strong>Teks tebal (penting)</strong>
<em>Teks miring (ditekankan)</em>
<br> <!-- ganti baris -->
<hr> <!-- garis horizontal pemisah -->

<!-- Link -->
<a href="https://www.google.com">Kunjungi Google</a>
<a href="halaman-lain.html">Halaman Lain</a>
<a href="#intro">Loncat ke bagian Intro</a>
<a href="https://x.com" target="_blank">Buka tab baru</a>

<!-- Gambar -->
<img src="foto.jpg" alt="Deskripsi gambar" width="300">

<!-- alt WAJIB diisi untuk aksesibilitas dan SEO -->

<!-- Unordered list (bullet) -->
<ul>
    <li>Apel</li>
    <li>Jeruk</li>
    <li>Mangga</li>
</ul>

<!-- Ordered list (bernomor) -->
<ol>
    <li>Buka text editor</li>
    <li>Ketik kode HTML</li>
    <li>Simpan sebagai .html</li>
</ol>

<!-- Nested list -->
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
</ul>

<!-- div: block-level, mengambil lebar penuh -->
<div class="card">
    <p>Konten di dalam sebuah kartu</p>
</div>

<!-- span: inline, hanya sebesar isinya -->
<p>Harga: <span class="harga">Rp 50.000</span></p>

<!-- div dan span tidak punya makna semantik,
     hanya digunakan sebagai "wadah" untuk styling -->

<header>   <!-- kepala halaman / navigasi -->
<nav>      <!-- kumpulan link navigasi -->
<main>     <!-- konten utama halaman -->
<section>  <!-- kelompok konten bertema sama -->
<article>  <!-- konten mandiri, mis. artikel/berita -->
<aside>    <!-- konten pendukung, mis. sidebar -->
<footer>   <!-- kaki halaman -->

<header>
    <nav><a href="#">Beranda</a></nav>
</header>
<main>
    <article>
        <h2>Judul Artikel</h2>
        <p>Isi artikel...</p>
    </article>
</main>
<footer><p>© 2026</p></footer>

<form action="/submit" method="POST">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <label for="umur">Umur:</label>
    <input type="number" id="umur" name="umur" min="1" max="100">

    <label>
        <input type="checkbox" name="setuju"> Saya setuju
    </label>

    <label>
        <input type="radio" name="gender" value="L"> Laki-laki
    </label>
    <label>
        <input type="radio" name="gender" value="P"> Perempuan
    </label>

    <label for="kelas">Kelas:</label>
    <select id="kelas" name="kelas">
        <option value="x">X</option>
        <option value="xi">XI</option>
        <option value="xii">XII</option>
    </select>

    <label for="pesan">Pesan:</label>
    <textarea id="pesan" name="pesan" rows="4"></textarea>

    <button type="submit">Kirim</button>
</form>

<table>
    <thead>
        <tr>
            <th>Nama</th>
            <th>Kelas</th>
            <th>Nilai</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ahmad</td>
            <td>XI RPL 1</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Budi</td>
            <td>XI RPL 1</td>
            <td>85</td>
        </tr>
    </tbody>
</table>

id="nilai-unik"          <!-- pengenal unik, hanya 1x per halaman -->
class="nama-nama-kelas"  <!-- boleh dipakai berulang, bisa lebih dari satu -->
style="color: red;"      <!-- inline style (hindari, lebih baik pakai CSS file) -->
title="Tooltip"          <!-- muncul saat kursor hover -->
data-user-id="123"       <!-- data custom, bisa dibaca lewat JavaScript -->
hidden                   <!-- menyembunyikan elemen -->
disabled                 <!-- menonaktifkan elemen form -->

<!-- Ini adalah komentar HTML, tidak tampil di browser -->

Tips penulisan HTML yang baik:
1. Selalu gunakan indentasi konsisten agar mudah dibaca
2. Tutup setiap tag yang punya pasangan penutup
3. Gunakan huruf kecil untuk nama tag dan attribute
4. Selalu isi atribut alt pada gambar
5. Gunakan elemen semantik daripada div untuk semuanya
6. Validasi HTML di https://validator.w3.org/

<!-- 1. Inline (di dalam tag, hindari untuk project besar) -->
<p style="color: blue;">Teks biru</p>

<!-- 2. Internal (di dalam <head>) -->
<head>
    <style>
        p { color: blue; }
    </style>
</head>

<!-- 3. External (file terpisah, paling direkomendasikan) -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

p {
    color: blue;
    font-size: 16px;
}

/*
selector → p
property → color, font-size
value    → blue, 16px
Setiap deklarasi diakhiri titik koma (;)
*/

/* Selector tag/elemen */
p { color: black; }

/* Selector class (bisa dipakai berkali-kali) */
.judul { font-weight: bold; }

/* Selector id (hanya untuk 1 elemen unik) */
#header { background: #333; }

/* Selector gabungan */
.card.aktif { border-color: green; }   /* punya kedua class */
h1, h2, h3 { font-family: sans-serif; } /* beberapa selector */

/* Selector turunan (descendant) */
nav a { text-decoration: none; }        /* semua <a> di dalam <nav> */

/* Selector anak langsung */
.list > li { margin-bottom: 5px; }

/* Pseudo-class */
a:hover { color: red; }         /* saat kursor di atas elemen */
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2) { color: gray; }

/* Pseudo-element */
p::first-letter { font-size: 2em; }
.box::before { content: "→ "; }

/* Format warna */
color: red;                 /* nama warna */
color: #ff0000;              /* hex */
color: rgb(255, 0, 0);       /* red green blue */
color: rgba(255, 0, 0, 0.5); /* dengan transparansi */
color: hsl(0, 100%, 50%);    /* hue saturation lightness */

/* Satuan ukuran */
width: 300px;    /* pixel, ukuran tetap */
width: 50%;      /* persentase dari parent */
font-size: 1.5rem; /* relatif terhadap ukuran root (html) */
font-size: 1.5em;  /* relatif terhadap ukuran parent */
width: 50vw;      /* 50% dari lebar viewport (layar) */
height: 100vh;    /* 100% dari tinggi viewport */

┌─────────────────────────────┐
│           margin             │  ← jarak ke elemen luar
│  ┌─────────────────────────┐ │
│  │        border           │ │  ← garis tepi kotak
│  │  ┌─────────────────────┐│ │
│  │  │      padding        ││ │  ← jarak dalam ke konten
│  │  │  ┌─────────────────┐││ │
│  │  │  │     content     │││ │  ← isi (teks/gambar)
│  │  │  └─────────────────┘││ │
│  │  └─────────────────────┘│ │
│  └─────────────────────────┘ │
└─────────────────────────────┘

.box {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
    box-sizing: border-box; /* width sudah termasuk padding+border */
}

p {
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: bold;      /* normal, bold, 100-900 */
    font-style: italic;
    text-align: center;     /* left, right, center, justify */
    text-decoration: underline;
    line-height: 1.6;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.box {
    background-color: #f0f0f0;
    background-image: url('gambar.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;    /* sudut membulat */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

display: block;       /* mengambil lebar penuh, baris baru (div, p, h1) */
display: inline;      /* hanya sebesar isinya, sebaris (span, a, strong) */
display: inline-block;/* sebaris tapi bisa diatur width/height */
display: none;        /* elemen disembunyikan total, tidak makan ruang */
display: flex;        /* mengaktifkan Flexbox pada children */
display: grid;         /* mengaktifkan Grid pada children */

position: static;    /* default, mengikuti alur normal */
position: relative;  /* posisi relatif ke posisi aslinya sendiri */
position: absolute;  /* posisi relatif ke parent terdekat yang "positioned" */
position: fixed;     /* menempel di viewport, tidak ikut scroll */
position: sticky;    /* normal sampai scroll melewati batas, lalu menempel */

.box {
    position: absolute;
    top: 10px;
    right: 10px;
}

.container {
    display: flex;
    flex-direction: row;       /* row (default) atau column */
    justify-content: center;   /* posisi horizontal: start, center, end,
                                   space-between, space-around */
    align-items: center;       /* posisi vertikal: start, center, end, stretch */
    gap: 15px;                 /* jarak antar item */
    flex-wrap: wrap;           /* item pindah baris jika tidak muat */
}

.item {
    flex: 1;    /* elemen ikut membesar mengisi ruang tersedia */
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 kolom sama lebar */
    grid-template-columns: repeat(3, 1fr); /* cara lain, sama hasilnya */
    grid-template-rows: auto auto;
    gap: 20px;
}

.item-besar {
    grid-column: span 2; /* mengambil 2 kolom */
}

/* Style default untuk semua ukuran layar */
.container {
    display: flex;
    flex-direction: row;
}

/* Berlaku hanya jika lebar layar maksimal 768px (tablet/HP) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    h1 {
        font-size: 24px;
    }
}

/* Pendekatan Mobile First: rancang untuk HP dulu,
   lalu tambah style untuk layar lebih besar */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

:root {
    --primary-color: #000000;
    --spacing: 16px;
}

.button {
    background: var(--primary-color);
    padding: var(--spacing);
}

/* Keuntungan: ubah 1 tempat, berubah di semua elemen
   yang memakainya — mirip variabel di JavaScript */

<!-- 1. Inline (di dalam attribute event, hindari) -->
<button onclick="alert('Halo')">Klik</button>

<!-- 2. Internal (di dalam <script>) -->
<script>
    console.log("Halo dari internal script");
</script>

<!-- 3. External (file terpisah, direkomendasikan) -->
<script src="script.js"></script>

let nama = "Ahmad";     // nilainya bisa diubah lagi
nama = "Budi";           // valid

const PI = 3.14;         // nilainya TIDAK bisa diubah
// PI = 3.15;             // Error!

var lama = "cara lama"; // hindari, punya scope membingungkan

// Konvensi penamaan: camelCase
let namaLengkap = "Ahmad Hidayat";
let umurSiswa = 20;

// console.log() untuk menampilkan nilai di Console browser
console.log(nama);

let nama = "Ahmad";        // String
let umur = 20;              // Number
let tinggi = 170.5;         // Number (int & float sama tipenya)
let aktif = true;           // Boolean
let kosong = null;          // Null (sengaja kosong)
let belumAda;               // Undefined (belum diberi nilai)
let hobi = ["Baca", "Coding"]; // Array
let siswa = {                // Object
    nama: "Ahmad",
    umur: 20
};

// Cek tipe data
console.log(typeof nama);   // "string"
console.log(typeof umur);   // "number"
console.log(typeof aktif);  // "boolean"

// Template literal (string interpolation)
let pesan = `Halo, nama saya ${nama} umur ${umur} tahun`;
console.log(pesan);

// Aritmatika
console.log(10 + 3);  // 13
console.log(10 % 3);  // 1 (modulo)
console.log(10 ** 2); // 100 (pangkat)

// Perbandingan
console.log(10 == "10");   // true (nilai sama, tipe diabaikan)
console.log(10 === "10");  // false (tipe berbeda, lebih aman pakai ===)
console.log(10 !== "10");  // true

// Logika
console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

// Assignment
let x = 10;
x += 5;  // x = 15
x -= 2;  // x = 13

// Ternary
let umur = 20;
let status = umur >= 18 ? "Dewasa" : "Anak-anak";

// Nullish coalescing & optional chaining
let nama = null;
console.log(nama ?? "Tanpa nama"); // "Tanpa nama"

let nilai = 85;

if (nilai >= 90) {
    console.log("A");
} else if (nilai >= 80) {
    console.log("B");
} else if (nilai >= 70) {
    console.log("C");
} else {
    console.log("D");
}

// Switch
let hari = "Selasa";
switch (hari) {
    case "Senin":
        console.log("Awal minggu");
        break;
    case "Sabtu":
    case "Minggu":
        console.log("Weekend");
        break;
    default:
        console.log("Hari biasa");
}

// For loop
for (let i = 1; i <= 5; i++) {
    console.log(i);
} // 1 2 3 4 5

// While loop
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// For...of (loop isi array)
let buah = ["Apel", "Jeruk", "Mangga"];
for (let item of buah) {
    console.log(item);
}

// For...in (loop key object)
let siswa = { nama: "Ahmad", umur: 20 };
for (let key in siswa) {
    console.log(key + ": " + siswa[key]);
}

// Array method sebagai alternatif loop
buah.forEach(item => console.log(item));

let angka = [3, 1, 4, 1, 5, 9];

angka.push(2);        // tambah di akhir → [3,1,4,1,5,9,2]
angka.pop();           // hapus dari akhir
angka.unshift(0);      // tambah di awal
angka.shift();         // hapus dari awal

console.log(angka.length);        // jumlah elemen
console.log(angka.includes(5));   // true
console.log(angka.indexOf(4));    // posisi index elemen 4

// map: transformasi tiap elemen jadi array baru
let dobel = angka.map(n => n * 2);

// filter: ambil elemen yang memenuhi syarat
let genap = angka.filter(n => n % 2 === 0);

// reduce: gabungkan jadi satu nilai
let total = angka.reduce((acc, n) => acc + n, 0);

// find: cari elemen pertama yang cocok
let ditemukan = angka.find(n => n > 4);

// sort
angka.sort((a, b) => a - b); // ascending

// Function declaration
function sapa(nama) {
    return "Halo, " + nama;
}
console.log(sapa("Ahmad"));

// Function expression
const kali = function(a, b) {
    return a * b;
};

// Arrow function (ES6+)
const tambah = (a, b) => a + b;
const kuadrat = x => x * x;       // 1 parameter, tanpa kurung
const sapaSingkat = () => "Halo!"; // tanpa parameter

// Default parameter
function greet(nama = "Teman") {
    return "Halo, " + nama;
}

// Parameter rest (jumlah tak terbatas)
function jumlahSemua(...angka) {
    return angka.reduce((a, b) => a + b, 0);
}
console.log(jumlahSemua(1, 2, 3, 4)); // 10

let siswa = {
    nama: "Ahmad",
    umur: 20,
    kelas: "XI RPL 1",
    sapa: function() {
        return "Halo, saya " + this.nama;
    }
};

console.log(siswa.nama);       // dot notation
console.log(siswa["kelas"]);   // bracket notation
console.log(siswa.sapa());     // panggil method

// Tambah/ubah property
siswa.email = "ahmad@sekolah.id";
siswa.umur = 21;

// Destructuring
const { nama, kelas } = siswa;
console.log(nama, kelas);

// Object.keys / values / entries
console.log(Object.keys(siswa));
console.log(Object.values(siswa));

// Ambil 1 elemen
const judul = document.getElementById("judul");
const tombol = document.querySelector(".btn-primary");
const pertama = document.querySelector("li");

// Ambil banyak elemen
const semuaLi = document.querySelectorAll("li");
const semuaCard = document.getElementsByClassName("card");

// querySelectorAll mengembalikan NodeList, bisa di-loop
semuaLi.forEach(li => console.log(li.textContent));

const judul = document.getElementById("judul");

judul.textContent = "Judul Baru";     // ubah teks saja
judul.innerHTML = "<i>Judul</i> Baru"; // ubah dengan HTML

judul.style.color = "red";
judul.style.fontSize = "24px";

judul.classList.add("aktif");
judul.classList.remove("nonaktif");
judul.classList.toggle("hidden"); // tambah jika belum ada, hapus jika sudah ada

judul.setAttribute("data-status", "selesai");
console.log(judul.getAttribute("data-status"));

const tombol = document.querySelector("#btnKlik");

tombol.addEventListener("click", function() {
    alert("Tombol diklik!");
});

// Dengan arrow function
tombol.addEventListener("click", () => {
    console.log("Diklik!");
});

// Event umum lainnya
input.addEventListener("input", (e) => {
    console.log(e.target.value); // nilai terkini saat mengetik
});

form.addEventListener("submit", (e) => {
    e.preventDefault(); // cegah reload halaman
    console.log("Form dikirim");
});

document.addEventListener("keydown", (e) => {
    console.log("Tombol keyboard: " + e.key);
});

// Buat elemen baru
const li = document.createElement("li");
li.textContent = "Item baru";

// Tambahkan ke dalam parent
const daftar = document.querySelector("ul");
daftar.appendChild(li);
// atau: daftar.append(li);

// Hapus elemen
li.remove();

// Contoh lengkap: tambah item dari input
function tambahItem() {
    const input = document.querySelector("#itemBaru");
    const li = document.createElement("li");
    li.textContent = input.value;
    document.querySelector("#daftarTugas").appendChild(li);
    input.value = ""; // kosongkan input
}

<!-- HTML -->
<input type="text" id="itemBaru" placeholder="Tulis tugas...">
<button onclick="tambahTugas()">Tambah</button>
<ul id="daftarTugas"></ul>

<script>
function tambahTugas() {
    const input = document.getElementById("itemBaru");
    const teks = input.value.trim();
    if (teks === "") return; // jangan tambah jika kosong

    const li = document.createElement("li");
    li.textContent = teks;

    // Klik item untuk mencoret (selesai)
    li.addEventListener("click", () => {
        li.style.textDecoration = "line-through";
    });

    document.getElementById("daftarTugas").appendChild(li);
    input.value = "";
}
</script>

// setTimeout: jalankan kode setelah delay tertentu
setTimeout(() => {
    console.log("Muncul setelah 2 detik");
}, 2000);

// fetch: mengambil data dari API (asynchronous)
async function ambilData() {
    try {
        const response = await fetch("https://api.contoh.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Terjadi kesalahan:", error);
    }
}

// Promise sederhana
const janji = new Promise((resolve, reject) => {
    const sukses = true;
    if (sukses) resolve("Berhasil!");
    else reject("Gagal!");
});

janji.then(hasil => console.log(hasil))
     .catch(err => console.error(err));

MDN Web Docs (referensi terlengkap):
https://developer.mozilla.org/id/

W3Schools (tutorial interaktif):
https://www.w3schools.com/

CSS Tricks:
https://css-tricks.com/

JavaScript.info:
https://javascript.info/

Can I Use (cek dukungan browser):
https://caniuse.com/

Validator HTML resmi:
https://validator.w3.org/