Di era digital sekarang ini, hampir semua orang berinteraksi dengan website setiap harinya. Mulai dari buka media sosial, belanja online, baca berita, sampai nonton film, semuanya nggak lepas dari yang namanya website. Tapi pernah kepikiran nggak, gimana sih sebuah website bisa ada? Jawabannya ada di tiga teknologi utama: HTML, CSS, dan JavaScript.
Ketiga hal ini bisa dibilang sebagai “senjata utama” para web developer. Tanpa HTML, CSS, dan JavaScript, website nggak akan punya bentuk, tampilan, apalagi interaksi. Nah, biar lebih paham, yuk kita bahas satu per satu dengan detail.
Apa Itu HTML ( Hyper Text MarkUp Language )
HTML adalah bahasa markup yang jadi dasar dari semua halaman web. Kalau dianalogikan, HTML itu kerangka rumah. Tanpa kerangka, rumah nggak akan berdiri.
🔍 Apa Itu HTML?
- HyperText: artinya teks yang bisa saling terhubung lewat link.
- Markup Language: bahasa yang dipakai untuk “menandai” teks agar bisa dipahami browser.
Jadi HTML adalah bahasa yang mengatur struktur & konten website.
⚙️ Fungsi Utama HTML:
- Membuat struktur halaman web (judul, paragraf, gambar, tabel, dll).
- Menyediakan hyperlink untuk menghubungkan antar halaman.
- Menyimpan data penting seperti form (input, tombol, checkbox).
Contoh Sederhana HTML :
<!DOCTYPE html>
<html>
<head>
<title>Website pertama saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini Adalah Paragraf pertama saya di HTML.</p>
</body>
</html>
👉 Dari kode di atas, browser bisa ngerti: ada judul, ada heading besar, dan ada paragraf.
Apa Itu CSS ( Cascading Style Sheets )
Kalau HTML itu kerangka rumah, CSS adalah cat, furnitur, wallpaper, dekorasi, dan desain interiornya. Tanpa CSS, website cuma putih polos dengan tulisan hitam.
🔍 Apa Itu CSS?
CSS adalah bahasa styling untuk mempercantik tampilan web. Dia nggak ngatur struktur, tapi fokus di visual & desain.
⚙️ Fungsi Utama CSS:
- Mengatur warna, font, ukuran teks, background, dll.
- Membuat layout halaman (posisi kolom, header, footer).
- Bikin tampilan responsif di berbagai device (HP, tablet, laptop).
- Menambahkan animasi & efek visual.
Contoh Sederhana CSS :
body {
background-color: #f0f0f0;
font-family: Arial, sans-seri;
}
h1 {
color: blue;
text-align: center;
}
👉 Dengan CSS ini, halaman web jadi punya background abu-abu, font lebih rapi, dan judul warna biru di tengah.
Apa Itu JavaScript (JS)
Nah, JavaScript itu ibarat otak atau mesin otomatisasi di rumah. Kalau HTML bikin rangka, CSS bikin desain, JavaScript yang bikin rumah itu “hidup” — lampu bisa nyala otomatis, pintu bisa buka tutup sendiri.
🔍 Apa Itu JavaScript?
JavaScript adalah bahasa pemrograman yang dipakai untuk membuat website interaktif. Semua hal yang butuh aksi, logika, atau respon user biasanya dibuat dengan JavaScript.
⚙️ Fungsi Utama JavaScript:
- Membuat website bisa merespons tindakan pengguna (klik tombol, isi form).
- Menambahkan animasi dan efek dinamis.
- Menghubungkan website dengan server untuk ambil/olah data (misalnya saat buka Instagram atau YouTube).
- Bisa dipakai buat bikin aplikasi web, game, bahkan aplikasi mobile.
Contoh Sederhana JavaScript :
function salam() {
alert(“Halo, selamat datang di website saya!”)
}
Kalau kode ini dipasang di tombol, begitu tombol diklik, bakal muncul pesan pop-up.
👉 Tanpa JavaScript, website cuma statis alias cuma bisa dilihat tanpa interaksi.
🔄 Hubungan Antara HTML, CSS, dan JavaScript
ketiganya itu ibarat tim sepak bola:
- HTML = bek (fondasi/struktur pertahanan).
- CSS = gelandang (mengatur keindahan & alur permainan).
- JavaScript = striker (mencetak gol alias bikin interaksi).
Kalau salah satu hilang, permainan (website) nggak akan sempurna. Makanya, web developer harus ngerti tiga-tiganya.
📊 Kesimpulan
- HTML: bikin kerangka & konten web.
- CSS: bikin tampilan web lebih indah & responsif.
- JavaScript: bikin web jadi interaktif & dinamis.
Dengan menguasai ketiga teknologi ini, kita bisa bikin website modern yang rapi, menarik, dan interaktif.