🌐 1. HTML (HyperText Markup Language)
Apa itu HTML?
HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat struktur halaman web.
HTML digunakan untuk menampilkan teks, gambar, tombol, link, tabel, dan lainnya.
Fungsi:
HTML digunakan untuk membuat struktur dasar halaman web. Ibaratnya, HTML adalah kerangka tubuh dari sebuah halaman.
Contoh kode HTML:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Pertama</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Elemen Umum HTML:
<h1>–<h6>: Judul<p>: Paragraf<a>: Tautan<img>: Gambar<div>: Container/blok<ul>,<ol>,<li>: Daftar
🎨 2. CSS (Cascading Style Sheets)
Apa itu CSS?
CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan/desain halaman web.
Dengan CSS, kamu bisa mengubah warna, ukuran teks, layout, background, dan banyak lagi.
Fungsi:
CSS digunakan untuk mempercantik halaman web (warna, font, layout, animasi, dll). CSS adalah tampilan luar dari halaman web.
Contoh kode CSS:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}Cara menghubungkan CSS ke HTML:
<link rel="stylesheet" href="style.css">
Beberapa properti CSS:
colorbackground-colorfont-sizemargin,paddingborderdisplay,position,flex
⚙️ 3. JavaScript (JS)
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang membuat halaman web interaktif dan dinamis.
Dengan JavaScript, kamu bisa membuat tombol yang bisa diklik, animasi, form yang bisa diisi, dan lainnya.
Fungsi:
JavaScript digunakan untuk menambahkan interaksi dan logika pada halaman web (misalnya: tombol klik, validasi form, animasi, dll). JS adalah otak dan otot dari halaman web.
Contoh kode JavaScript:
<button onclick="sayHello()">Klik Saya</button>
<script>
function sayHello() {
alert("Halo, dunia!");
}
</script>Kegunaan JavaScript:
- Menanggapi aksi pengguna (klik, ketik, dll)
- Mengubah konten HTML secara dinamis
- Mengontrol elemen HTML/CSS
- Berkomunikasi dengan server (AJAX/fetch API)
🧩 Hubungan HTML, CSS, dan JavaScript
Bayangkan membuat website seperti membangun rumah:
- HTML = rangka/bangunan rumah
- CSS = cat, dekorasi, dan desain rumah
- JavaScript = listrik, mesin, dan interaksi di rumah
Cara penggunaanya
💡 1. Alat yang Dibutuhkan
Kamu hanya perlu:
- Teks editor seperti:
👉 Visual Studio Code (VS Code) (rekomendasi)
Atau: Notepad, Sublime Text, dll. - Browser seperti: Chrome, Firefox, Edge, dll.
📝 2. Langkah-langkah Penggunaan HTML, CSS, dan JavaScript
✅ Langkah 1: Buat File HTML
- Buka teks editor
- Simpan file dengan nama:
index.html - Isi file-nya seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Web</title>
<!-- Hubungkan CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah halaman web pertamaku.</p>
<button onclick="tampilkanPesan()">Klik Aku!</button>
<!-- Hubungkan JavaScript -->
<script src="script.js"></script>
</body>
</html>
✅ Langkah 2: Buat File CSS
- Buat file baru, simpan dengan nama:
style.css - Isi dengan kode seperti ini:
body {
background-color: #e0f7fa;
font-family: sans-serif;
text-align: center;
}
h1 {
color: #00796b;
}
button {
padding: 10px 20px;
background-color: #009688;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
✅ Langkah 3: Buat File JavaScript
- Buat file baru, simpan dengan nama:
script.js - Isi dengan kode seperti ini:
function tampilkanPesan() {
alert("Selamat datang di website pertamaku!");
}
🚀 Cara Menjalankan
- Buka folder tempat kamu simpan file
index.html - Klik kanan → Open with Browser
- Lihat hasilnya! 🎉