htmlcssjs

html itu materi dasar belol

Materi Dasar Web: HTML, CSS, dan JavaScript

Tiga bahasa inti pembuatan halaman web:

Bahasa	Peran	Analogi rumah
HTML	Struktur & isi halaman	Kerangka dan dinding
CSS	Tampilan & tata letak	Cat, dekorasi, tata ruang
JavaScript	Perilaku & interaksi	Listrik, saklar, pintu otomatis

BAGIAN 1 — HTML

HTML (HyperText Markup Language) adalah bahasa markup. Isi halaman dibungkus tag supaya browser tahu mana judul, paragraf, gambar, dan seterusnya.

1.1 Struktur Dasar Dokumen#

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Pertamaku</title>
</head>
<body>
    <h1>Halo Dunia</h1>
    <p>Ini paragraf pertama.</p>
</body>
</html>

<!DOCTYPE html> : menandakan dokumen HTML5.
<head> : metadata (judul tab, charset, link CSS). Tidak tampil di halaman.
<body> : seluruh isi yang tampil di halaman.

1.2 Anatomi Elemen#

HTML

<a href="https://example.com" target="_blank">Klik di sini</a>

Tag pembuka: <a>, tag penutup: </a>
Atribut: href, target (berpasangan nama="nilai")
Konten: teks "Klik di sini"
Elemen kosong (tanpa penutup): <img>, <br>, <hr>, <input>

1.3 Teks#

HTML

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h6>Judul Paling Kecil</h6>

<p>Paragraf dengan <strong>teks tebal</strong>, <em>teks miring</em>,
   dan <mark>teks ter-highlight</mark>.</p>

<br>   <!-- baris baru -->
<hr>   <!-- garis pemisah -->

Catatan: gunakan satu <h1> per halaman, dan urutkan heading (h1 → h2 → h3) agar rapi untuk SEO dan aksesibilitas.

1.4 List#

HTML

<!-- Tidak berurutan -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

<!-- Berurutan -->
<ol>
    <li>Belajar HTML</li>
    <li>Belajar CSS</li>
    <li>Belajar JavaScript</li>
</ol>

1.5 Link dan Gambar#

HTML

<a href="halaman2.html">Ke halaman 2</a>
<a href="#bagian3">Loncat ke bagian 3</a>

<img src="foto.jpg" alt="Deskripsi foto" width="300">

alt wajib diisi: tampil kalau gambar gagal dimuat dan dibaca oleh screen reader.

1.6 Tabel#

HTML

<table border="1">
    <thead>
        <tr>
            <th>Nama</th>
            <th>NIM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Budi</td>
            <td>1030125001</td>
        </tr>
    </tbody>
</table>

1.7 Form#

HTML

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

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

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

    <select name="jurusan">
        <option value="if">Informatika</option>
        <option value="si">Sistem Informasi</option>
    </select>

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

    <textarea name="pesan" rows="4"></textarea>

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

Tipe input yang sering dipakai: text, email, password, number, date, checkbox, radio, file.

1.8 Elemen Semantik#

Tag dengan makna jelas, lebih baik daripada <div> di mana-mana.

HTML

<header>   Kepala halaman / logo / navigasi   </header>
<nav>      Menu navigasi                      </nav>
<main>     Konten utama                       </main>
<section>  Satu bagian tematik                </section>
<article>  Konten mandiri (artikel, post)     </article>
<aside>    Sidebar / info tambahan            </aside>
<footer>   Kaki halaman                       </footer>

1.9 Block vs Inline#

Block	Inline
Mulai di baris baru, lebar penuh	Mengalir dalam baris, selebar isi
`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `img`

1.10 Atribut Global#

id : pengenal unik (satu halaman, satu id satu elemen)
class : pengelompokan, boleh dipakai banyak elemen
style : CSS langsung (hindari, lebih baik file CSS terpisah)
title : tooltip saat hover

BAGIAN 2 — CSS

CSS (Cascading Style Sheets) mengatur tampilan elemen HTML.

2.1 Cara Memasang CSS#

HTML

<!-- 1. Inline (kurang disarankan) -->
<p style="color: red;">Merah</p>

<!-- 2. Internal -->
<style>
    p { color: red; }
</style>

<!-- 3. Eksternal (disarankan) -->
<link rel="stylesheet" href="style.css">

2.2 Sintaks#

CSS

selektor {
    properti: nilai;
    properti-lain: nilai;
}

2.3 Selektor#

CSS

p { }                 /* elemen */
.kartu { }            /* class */
#header { }           /* id */
* { }                 /* semua elemen */

div p { }             /* p keturunan div */
div > p { }           /* p anak langsung div */
h1 + p { }            /* p tepat setelah h1 */

a:hover { }           /* saat kursor di atas */
input:focus { }       /* saat input aktif */
li:first-child { }
li:nth-child(2n) { }  /* genap */
p::first-line { }     /* pseudo-element */

input[type="text"] { }  /* selektor atribut */

Prioritas (specificity), dari rendah ke tinggi: elemen < class < id < inline style. !important mengalahkan semuanya, tapi jangan sering dipakai.

2.4 Warna dan Satuan#

CSS

color: red;
color: #ff5733;
color: rgb(255, 87, 51);
color: rgba(0, 0, 0, 0.5);   /* ada transparansi */
color: hsl(200, 80%, 50%);

Satuan	Keterangan
`px`	Piksel, ukuran tetap
`%`	Persen dari elemen induk
`em`	Relatif terhadap font-size induk
`rem`	Relatif terhadap font-size root (html)
`vw` / `vh`	1% lebar / tinggi viewport

2.5 Teks dan Font#

CSS

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 1px;
}

2.6 Box Model#

Setiap elemen adalah kotak dengan lapisan: content → padding → border → margin.

CSS

.kotak {
    width: 200px;
    padding: 20px;               /* ruang di dalam border */
    border: 2px solid #333;
    margin: 10px auto;           /* ruang di luar; auto = tengah */
    box-sizing: border-box;      /* width sudah termasuk padding+border */
}

Singkatan: margin: 10px 20px 30px 40px; urutannya atas, kanan, bawah, kiri (searah jarum jam). Dua nilai: atas-bawah kiri-kanan.

Tips: tambahkan reset ini di awal.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2.7 Background, Border, Bayangan#

CSS

.kartu {
    background-color: #1e1e2e;
    background-image: url('bg.jpg');
    background-size: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #667eea, #764ba2);
}

2.8 Display dan Position#

CSS

display: block;
display: inline;
display: inline-block;
display: none;        /* sembunyikan, tidak makan ruang */

CSS

position: static;     /* default */
position: relative;   /* geser dari posisi asalnya */
position: absolute;   /* relatif ke induk ber-position */
position: fixed;      /* menempel di layar */
position: sticky;     /* menempel setelah di-scroll sampai batas */

top: 0; left: 0; z-index: 10;

2.9 Flexbox (Tata Letak Satu Dimensi)#

CSS

.container {
    display: flex;
    flex-direction: row;            /* row | column */
    justify-content: space-between; /* sumbu utama */
    align-items: center;            /* sumbu silang */
    gap: 16px;
    flex-wrap: wrap;
}

.item {
    flex: 1;   /* bagi ruang sama rata */
}

Nilai justify-content: flex-start, center, flex-end, space-between, space-around, space-evenly.

Memusatkan elemen di tengah layar:

CSS

.tengah {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

2.10 Grid (Tata Letak Dua Dimensi)#

CSS

.galeri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.responsif {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

Kapan pakai apa: Flexbox untuk satu baris/kolom (navbar, deretan tombol), Grid untuk susunan baris dan kolom sekaligus (galeri, dashboard).

2.11 Responsive Design#

CSS

.kartu { width: 100%; }

@media (min-width: 768px) {
    .kartu { width: 50%; }
}

@media (min-width: 1024px) {
    .kartu { width: 33.33%; }
}

Pendekatan mobile first: tulis gaya untuk layar kecil dulu, lalu tambah min-width untuk layar besar. Jangan lupa tag <meta name="viewport"> di HTML.

2.12 Transisi dan Animasi#

CSS

.tombol {
    background: #3b82f6;
    transition: all 0.3s ease;
}
.tombol:hover {
    background: #2563eb;
    transform: translateY(-2px) scale(1.05);
}

@keyframes muncul {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kartu {
    animation: muncul 0.6s ease forwards;
}

2.13 CSS Variables#

CSS

:root {
    --warna-utama: #3b82f6;
    --bg: #0f172a;
}
body {
    background: var(--bg);
    color: white;
}
.tombol {
    background: var(--warna-utama);
}

BAGIAN 3 — JavaScript

JavaScript membuat halaman interaktif: merespons klik, mengubah isi halaman, memvalidasi form, mengambil data dari server.

3.1 Memasang JavaScript#

HTML

<!-- Internal -->
<script>
    console.log("Halo!");
</script>

<!-- Eksternal, taruh sebelum </body> atau pakai defer -->
<script src="app.js" defer></script>

3.2 Variabel dan Tipe Data#

JAVASCRIPT

let umur = 19;              // bisa diubah
const nama = "Fadli";       // tidak bisa di-assign ulang
var lama = 1;               // gaya lama, hindari

let teks = "string";
let angka = 3.14;
let benar = true;
let kosong = null;
let belum;                  // undefined
let daftar = [1, 2, 3];
let objek = { nama: "Budi", umur: 20 };

console.log(typeof angka);  // "number"

3.3 Operator#

JAVASCRIPT

// Aritmatika: + - * / % **
let hasil = 10 % 3;     // 1 (sisa bagi)

// Perbandingan: gunakan === bukan ==
5 === "5";   // false (tipe beda)
5 == "5";    // true  (hindari)

// Logika
true && false;  // false (AND)
true || false;  // true  (OR)
!true;          // false (NOT)

3.4 Kondisi#

JAVASCRIPT

let nilai = 80;

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

// Ternary
let status = nilai >= 60 ? "Lulus" : "Tidak lulus";

// Switch
switch (hari) {
    case "senin":
        console.log("Awal pekan");
        break;
    default:
        console.log("Hari lain");
}

3.5 Perulangan#

JAVASCRIPT

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let n = 0;
while (n < 3) {
    console.log(n);
    n++;
}

const buah = ["apel", "jeruk", "mangga"];
for (const b of buah) {
    console.log(b);
}

3.6 Fungsi#

JAVASCRIPT

// Deklarasi
function tambah(a, b) {
    return a + b;
}

// Arrow function
const kali = (a, b) => a * b;

// Parameter default
function sapa(nama = "Teman") {
    return `Halo, ${nama}!`;   // template literal
}

console.log(tambah(2, 3));   // 5
console.log(sapa());         // Halo, Teman!

3.7 Array dan Objek#

JAVASCRIPT

const angka = [1, 2, 3, 4, 5];

angka.push(6);          // tambah di akhir
angka.pop();            // hapus dari akhir
angka.length;           // jumlah elemen

// Method fungsional
angka.map(x => x * 2);            // [2,4,6,8,10]
angka.filter(x => x % 2 === 0);   // [2,4]
angka.reduce((a, b) => a + b, 0); // 15
angka.find(x => x > 3);           // 4

// Objek
const mhs = {
    nama: "Budi",
    nim: "1030125001",
    sapa() {
        return "Halo, saya " + this.nama;
    }
};
console.log(mhs.nama);
console.log(mhs["nim"]);
mhs.umur = 20;           // tambah properti

// Destructuring
const { nama, nim } = mhs;

3.8 DOM (Document Object Model)#

DOM adalah representasi halaman HTML sebagai pohon objek yang bisa diubah lewat JavaScript.

Memilih elemen#

JAVASCRIPT

const judul = document.getElementById("judul");
const semuaKartu = document.querySelectorAll(".kartu");
const tombol = document.querySelector("#btn");

Mengubah elemen#

JAVASCRIPT

judul.textContent = "Judul Baru";
judul.innerHTML = "<em>Judul</em> Baru";
judul.style.color = "red";

judul.classList.add("aktif");
judul.classList.remove("aktif");
judul.classList.toggle("aktif");

judul.setAttribute("title", "Tooltip");

Membuat dan menghapus elemen#

JAVASCRIPT

const li = document.createElement("li");
li.textContent = "Item baru";
document.querySelector("ul").appendChild(li);

li.remove();

3.9 Event#

JAVASCRIPT

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

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

// Event lain: dblclick, mouseover, keydown, input, change, submit, load

const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
    e.preventDefault();          // cegah reload halaman
    const nama = form.nama.value;
    console.log(nama);
});

3.10 Contoh Terpadu: Counter#

HTML

HTML

<div class="counter">
    <button id="kurang">-</button>
    <span id="angka">0</span>
    <button id="tambah">+</button>
</div>

CSS

CSS

.counter {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}
.counter button {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;
}
.counter button:hover {
    transform: scale(1.1);
}

JavaScript

JAVASCRIPT

let hitung = 0;
const angka = document.getElementById("angka");

document.getElementById("tambah").addEventListener("click", () => {
    hitung++;
    angka.textContent = hitung;
});

document.getElementById("kurang").addEventListener("click", () => {
    hitung--;
    angka.textContent = hitung;
});

3.11 Contoh Terpadu: To-Do List#

HTML

<input type="text" id="tugas" placeholder="Tulis tugas...">
<button id="tambahTugas">Tambah</button>
<ul id="daftar"></ul>

JAVASCRIPT

const input = document.getElementById("tugas");
const daftar = document.getElementById("daftar");

document.getElementById("tambahTugas").addEventListener("click", () => {
    const teks = input.value.trim();
    if (teks === "") return;

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

    li.addEventListener("click", () => li.classList.toggle("selesai"));

    const hapus = document.createElement("button");
    hapus.textContent = "x";
    hapus.addEventListener("click", () => li.remove());

    li.appendChild(hapus);
    daftar.appendChild(li);
    input.value = "";
});

CSS

.selesai {
    text-decoration: line-through;
    opacity: 0.6;
}

3.12 Asynchronous: setTimeout, Promise, fetch#

JAVASCRIPT

// Jalankan setelah 2 detik
setTimeout(() => console.log("2 detik berlalu"), 2000);

// Ulang tiap 1 detik
const timer = setInterval(() => console.log("tik"), 1000);
clearInterval(timer);

// Ambil data dari API dengan async/await
async function ambilData() {
    try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.error("Gagal:", err);
    }
}
ambilData();

3.13 localStorage#

Menyimpan data di browser, tidak hilang saat halaman ditutup.

JAVASCRIPT

localStorage.setItem("tema", "gelap");
const tema = localStorage.getItem("tema");
localStorage.removeItem("tema");

// Untuk objek/array, ubah ke JSON dulu
localStorage.setItem("data", JSON.stringify({ a: 1 }));
const data = JSON.parse(localStorage.getItem("data"));

BAGIAN 4 — Ringkasan dan Latihan

4.1 Alur Kerja Ketiganya#

HTML membuat elemen dan struktur.
CSS memilih elemen lewat selektor lalu mengatur tampilannya.
JavaScript memilih elemen lewat DOM, lalu merespons event dan mengubah isi atau gaya.

4.2 Kesalahan Umum#

Kesalahan	Perbaikan
Lupa menutup tag	Rapikan indentasi, pakai editor yang memberi highlight
Path file CSS/JS salah	Cek nama dan lokasi file
Elemen `null` di JavaScript	Taruh `<script>` di akhir body atau pakai `defer`
Pakai `==`	Pakai `===`
`id` dobel	`id` harus unik, pakai `class` untuk banyak elemen
Lupa `e.preventDefault()` pada form	Tambahkan di handler submit

4.3 Latihan#

Buat halaman profil diri berisi foto, biodata (tabel), dan daftar hobi.
Buat navbar horizontal dengan Flexbox yang berubah jadi vertikal di layar kecil.
Buat galeri 3 kolom dengan Grid, tiap kartu punya efek hover.
Buat tombol ganti tema terang/gelap, simpan pilihannya di localStorage.
Buat form pendaftaran dengan validasi: nama tidak boleh kosong, email harus ada tanda @.
Buat kalkulator sederhana (+, -, ×, ÷).
Ambil daftar user dari API jsonplaceholder lalu tampilkan sebagai kartu.

4.4 Referensi Lanjutan#

MDN Web Docs: https://developer.mozilla.org
CSS Tricks (panduan Flexbox & Grid): https://css-tricks.com
javascript.info: https://javascript.info

FONDASI HTML

GETTING STARTED

htmlcssjs

Materi Dasar Web: HTML, CSS, dan JavaScript

BAGIAN 1 — HTML

1.1 Struktur Dasar Dokumen#

1.2 Anatomi Elemen#

1.3 Teks#

1.4 List#

1.5 Link dan Gambar#

1.6 Tabel#

1.7 Form#

1.8 Elemen Semantik#

1.9 Block vs Inline#

1.10 Atribut Global#

BAGIAN 2 — CSS

2.1 Cara Memasang CSS#

2.2 Sintaks#

2.3 Selektor#

2.4 Warna dan Satuan#

2.5 Teks dan Font#

2.6 Box Model#

2.7 Background, Border, Bayangan#

2.8 Display dan Position#

2.9 Flexbox (Tata Letak Satu Dimensi)#

2.10 Grid (Tata Letak Dua Dimensi)#

2.11 Responsive Design#

2.12 Transisi dan Animasi#

2.13 CSS Variables#

BAGIAN 3 — JavaScript

3.1 Memasang JavaScript#

3.2 Variabel dan Tipe Data#

3.3 Operator#

3.4 Kondisi#

3.5 Perulangan#

3.6 Fungsi#

3.7 Array dan Objek#

3.8 DOM (Document Object Model)#

Memilih elemen#

Mengubah elemen#

Membuat dan menghapus elemen#

3.9 Event#

3.10 Contoh Terpadu: Counter#

3.11 Contoh Terpadu: To-Do List#

3.12 Asynchronous: setTimeout, Promise, fetch#

3.13 localStorage#

BAGIAN 4 — Ringkasan dan Latihan

4.1 Alur Kerja Ketiganya#

4.2 Kesalahan Umum#

4.3 Latihan#

4.4 Referensi Lanjutan#