Belajar HTML, CSS, & JavaScript
Pelajari 3 pilar fundamental dalam pengembangan website dari nol hingga paham. Dilengkapi dengan materi terstruktur, tabel atribut & properti lengkap, serta playground koding live di setiap modulnya.
3 Pilar Utama Website
Dalam rekayasa web frontend, ketiga teknologi ini bekerja serentak membentuk ekosistem aplikasi web yang utuh:
- HTML (HyperText Markup Language): Sebagai kerangka dasar yang mendefinisikan struktur dan konten (teks, tautan, gambar, formulir).
- CSS (Cascading Style Sheets): Sebagai desainer tampilan fisik (warna, layout Grid/Flexbox, tipografi, dan adaptasi layar HP).
- JavaScript (JS): Sebagai sistem logika dan interaktivitas yang memanipulasi DOM, memproses event klik/input, dan berkomunikasi dengan API.
Pilih Modul Pembelajaran
Silakan klik topik di bawah atau gunakan menu navigasi di bagian atas:
Materi Lengkap: HTML5
HTML adalah bahasa standar penulisan dokumen web. HTML menggunakan sistem tags untuk menstrukturkan halaman.
1. Anatomi Tag & Atribut
Elemen HTML umumnya memiliki tag pembuka, atribut tambahan, konten teks, dan tag penutup:
<a href="https://google.com" target="_blank" class="link-utama">Kunjungi Google</a>
│ └── Atribut 1 ───────────┘ └── Atribut 2 ┘ │
Tag Buka Tag Tutup2. Struktur Wajib HTML5
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Web di Tab Browser</title>
</head>
<body>
<h1>Konten Utama Ditulis di Sini</h1>
</body>
</html>3. Daftar Tag Populer & Atributnya
| Tag HTML | Fungsi | Atribut Penting |
|---|---|---|
<a> |
Membuat tautan/link antar halaman | href, target (misal: _blank), rel |
<img> |
Menampilkan gambar (self-closing) | src, alt, width, height, loading="lazy" |
<form> |
Wadah formulir input data | action, method ("POST" / "GET") |
<input> |
Kolom input isian pengguna | type (text, email, password, number), placeholder, name |
<marquee> |
Teks berjalan (tag animasi klasik) | behavior (scroll, alternate), direction (left, right) |
4. Penggunaan Tag <a href>
Untuk menghubungkan ke situs web lain, selalu sertakan protokol https:// dan gunakan target="_blank" agar membuka di tab baru:
<!-- Membuka website luar di tab baru -->
<a href="https://wikipedia.org" target="_blank">Kunjungi Wikipedia</a>
<!-- Berpindah ke bagian halaman yang sama menggunakan ID -->
<a href="#html-tags">Lompat ke Tabel Tag</a>5. Playground Khusus HTML
Coba langsung menulis kode HTML di editor di bawah ini:
Materi Lengkap: CSS3
CSS mengatur tata letak, warna, tipografi, dan gaya visual dari elemen-elemen HTML.
1. CSS Box Model (Padding, Border, & Margin)
Setiap elemen HTML berbentuk kotak yang memiliki 4 lapisan penting:
- Content: Isi elemen seperti teks atau gambar.
- Padding: Jarak ruang antara konten dengan garis batas (border).
- Border: Garis batas pembungkus elemen.
- Margin: Jarak luar antara elemen dengan elemen lain di sekitarnya.
.kotak {
box-sizing: border-box; /* Rekomendasi: menjaga ukuran total tetap konsisten */
padding: 16px; /* Jarak dalam */
border: 2px solid #38bdf8;
margin: 20px auto; /* Jarak luar */
}2. Tata Letak Flexbox Modern
Flexbox mempermudah pengaturan elemen berjajar secara horizontal maupun vertikal:
.container-flex {
display: flex;
justify-content: space-between; /* Menjajarkan ke kiri-kanan */
align-items: center; /* Menjajarkan secara vertikal di tengah */
gap: 12px; /* Jarak antar anak elemen */
}3. Playground Khusus CSS
Materi Lengkap: JavaScript
JavaScript adalah bahasa pemrograman yang membuat website hidup dan interaktif melalui logika dan manipulasi DOM.
1. Variabel Modern (let vs const)
const namaSitus = "DevWeb ID"; // Nilai tetap tidak bisa diubah
let pengunjung = 100; // Nilai fleksibel bisa diperbarui
pengunjung += 1;2. Event Handling & Manipulasi DOM
const tombol = document.getElementById("btn-aksi");
const statusTeks = document.getElementById("status");
tombol.addEventListener("click", () => {
statusTeks.innerText = "Tombol berhasil diklik!";
statusTeks.style.color = "#16a34a";
});