Dalam dunia pengembangan web modern, dua pilar utama yang tak terpisahkan adalah HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets). Keduanya bekerja sama untuk menciptakan pengalaman visual yang kaya dan berfungsi di browser. Memahami dasar-dasar kedua bahasa ini adalah langkah pertama wajib bagi siapa pun yang bercita-cita menjadi pengembang web.
HTML adalah bahasa markup standar yang digunakan untuk mendeskripsikan struktur halaman web. Ia tidak mengatur tampilan visual; tugasnya adalah menandai elemen-elemen konten seperti paragraf, judul, tautan, gambar, dan daftar. HTML menggunakan serangkaian tag yang mengapit konten, memberikan makna semantik pada data tersebut.
Struktur dasar sebuah dokumen HTML selalu mencakup tag wajib seperti <!DOCTYPE html>, <html>, <head> (untuk metadata), dan <body> (untuk konten yang terlihat).
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halaman Saya</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>
Setiap tag memiliki peran spesifik. Misalnya, <h1> menandakan judul terpenting, sementara <p> menandai sebuah blok teks paragraf. Dengan mengorganisir konten secara logis menggunakan HTML, kita memastikan aksesibilitas dan kemudahan pembacaan oleh mesin pencari (SEO).
Jika HTML adalah kerangka bangunan, maka CSS adalah arsitek interior dan eksteriornya. CSS bertanggung jawab penuh atas presentasi visual elemen HTML—warna, tipografi, tata letak, spasi, dan responsivitas desain. Tanpa CSS, semua halaman web akan terlihat seperti dokumen teks polos tanpa pemformatan.
CSS bekerja dengan cara menyeleksi (selecting) elemen HTML mana yang akan dimodifikasi, kemudian menerapkan sekumpulan deklarasi (properti dan nilai) padanya. Terdapat tiga cara utama untuk menerapkan CSS: inline (di dalam tag), internal (di dalam tag <style> di <head>), dan eksternal (melalui file .css terpisah). Pendekatan eksternal sangat dianjurkan untuk menjaga kerapian dan skalabilitas kode.
Sebagian besar styling dilakukan melalui properti seperti color (warna teks), background-color (warna latar belakang), font-size (ukuran huruf), dan yang terpenting, properti tata letak seperti display, margin, dan padding.
/* Contoh penerapan CSS */
body {
font-family: Arial, sans-serif; /* Mengatur font untuk seluruh body */
background-color: #f0f0f0;
}
h1 {
color: navy; /* Mengubah warna teks judul menjadi biru tua */
text-align: center; /* Memusatkan teks */
}
.container {
width: 80%; /* Membatasi lebar container */
margin: 20px auto; /* Membuat margin atas/bawah dan otomatis menengahkan elemen */
}Pemisahan tanggung jawab antara HTML dan CSS adalah kunci efisiensi pengembangan. Dengan memisahkan struktur dari gaya, pengembang dapat dengan mudah memperbarui tampilan seluruh situs web hanya dengan memodifikasi satu file CSS, tanpa perlu menyentuh ribuan baris kode HTML konten.
Selain itu, fokus pada bahasa HTML dan CSS secara mendalam memungkinkan penciptaan desain yang responsif. CSS modern, menggunakan teknik seperti Flexbox dan Grid Layout, memungkinkan kita mendefinisikan bagaimana tata letak harus menyesuaikan diri secara otomatis pada berbagai ukuran layar, mulai dari desktop besar hingga layar ponsel yang sempit. Inilah yang membuat halaman Anda terlihat rapi di perangkat mana pun, sebuah kebutuhan mutlak di era digital saat ini. Menguasai kedua bahasa ini berarti Anda telah memegang kendali penuh atas fondasi dan estetika presentasi konten di internet.