1. Fondasi Struktur (HTML)
HTML (HyperText Markup Language) adalah tulang punggung dari setiap halaman web. Ini mendefinisikan struktur konten—teks, paragraf, gambar, tautan, dan tabel. Untuk membangun sebuah website yang baik, kita harus memastikan struktur HTML kita semantik (menggunakan tag yang tepat untuk fungsinya, seperti <header>, <main>, dan <section>). Dalam contoh ini, kita menyusun tata letak dasar yang mudah diakses dan dipahami oleh mesin pencari.
Struktur yang rapi sangat penting, terutama ketika kita merancang untuk tampilan seluler (mobile-first). Penggunaan <meta name="viewport"> di bagian kepala (head) adalah kunci untuk memastikan website menampilkan dirinya dengan benar di berbagai ukuran layar.
2. Estetika dan Tampilan (CSS)
CSS (Cascading Style Sheets) bertanggung jawab atas presentasi visual. Tanpa CSS, website hanya akan menjadi teks polos. Kami menggunakan CSS untuk menentukan warna, tata letak, tipografi, dan responsivitas. Dalam contoh ini, fokus utama adalah pada desain yang ramah seluler. Kami menerapkan display: flex; flex-direction: column; pada <body> untuk memastikan konten menumpuk secara vertikal, yang merupakan perilaku default yang ideal untuk perangkat genggam.
Selain itu, penggunaan media queries (meskipun terbatas dalam contoh ini) dan pengaturan max-width pada kontainer memastikan bahwa elemen tidak melebar tak terbatas di layar desktop, namun tetap menyesuaikan dengan baik di layar kecil. Efek bayangan (shadow) dan radius sudut (border-radius) ditambahkan untuk memberikan kedalaman dan sentuhan modern pada setiap bagian.
Visualisasi Sederhana
Representasi visual sederhana interaksi antara HTML, CSS, dan JavaScript.
3. Interaksi Dinamis (JavaScript)
JavaScript (JS) adalah bahasa pemrograman yang membuat website menjadi hidup. Sementara HTML menyediakan konten dan CSS menatanya, JS menangani perilaku—seperti memvalidasi formulir, membuat animasi kompleks, atau merespons interaksi pengguna.
Dalam contoh ini, kami menyertakan blok JavaScript sederhana di akhir dokumen. Ini adalah praktik terbaik untuk memastikan DOM (Document Object Model) sudah dimuat sepenuhnya sebelum skrip mencoba memanipulasinya. Skrip ini akan mendeteksi klik tombol dan mengubah teks output.
Klik tombol di bawah untuk melihat JavaScript beraksi:
Output akan muncul di sini.