Ilustrasi komponen utama pembuatan web
Membuat situs web sederhana di era digital ini tidak lagi memerlukan keahlian pemrograman tingkat tinggi. Dengan menguasai tiga pilar utama pengembangan web sisi klien—HTML, CSS, dan JavaScript—Anda bisa membangun halaman web yang fungsional dan menarik secara visual. Artikel ini akan memandu Anda melalui langkah-langkah dasar implementasi ketiga teknologi tersebut untuk proyek perdana Anda.
HTML (HyperText Markup Language) adalah tulang punggung dari setiap halaman web. Fungsinya adalah mendefinisikan struktur konten: di mana letak judul, paragraf, gambar, dan tautan berada. Untuk membuat web sederhana, kita hanya perlu satu berkas, misalnya `index.html`.
Setiap halaman web yang baik harus dimulai dengan deklarasi DOCTYPE dan elemen root ``. Struktur minimal yang harus Anda kenali mencakup tag `
` (untuk metadata seperti judul dan tautan ke CSS) dan `` (untuk konten yang terlihat oleh pengguna).
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Web Pertamaku</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Selamat Datang di Situs Saya</h1>
<p id="paragrafAwal">Ini adalah paragraf pertama yang akan kita ubah gayanya menggunakan CSS.</p>
<button id="tombolUbah">Klik Saya</button>
<script src="script.js"></script>
</body>
</html>
Perhatikan bahwa kita sudah menyertakan tautan ke `style.css` (untuk tampilan) dan `script.js` (untuk interaktivitas) di dalam HTML ini. Pemisahan peran ini sangat penting untuk menjaga kode tetap terorganisir.
Jika HTML adalah kerangka, maka CSS (Cascading Style Sheets) adalah cat dan dekorasi. CSS bertanggung jawab penuh atas bagaimana elemen HTML ditampilkan: warna, tata letak, ukuran font, dan responsivitas desain.
Untuk memastikan tampilan rapi di perangkat seluler (mobile-first), kita akan menggunakan prinsip desain responsif. Dalam berkas `style.css` (atau di dalam tag `