Pertemuan 2: Frontend Web – HTML, CSS, dan JavaScript

Mata Kuliah: Aplikasi Web (TW2). Durasi: 120 menit (Tatap Muka). Target: Mahasiswa semester 2.

Tujuan Pembelajaran

• Menyusun struktur halaman web dengan HTML
• Menata tampilan dan tata letak dengan CSS
• Menambahkan interaktivitas menggunakan JavaScript
• Membangun halaman web statis yang rapi dan responsif

Capaian Pembelajaran

Mahasiswa mampu membangun halaman web statis yang utuh menggunakan HTML untuk struktur, CSS untuk tampilan, dan JavaScript untuk interaktivitas sederhana.

Konsep Materi

Untuk memperkuat pemahaman, mahasiswa diajak memperhatikan bahwa sebuah halaman sederhana dapat dilihat dari dua sudut pandang yang berbeda. Pandangan pertama adalah kode sumber yang ditulis pengembang; pandangan kedua adalah hasil yang tampil di layar. Keduanya terhubung erat: perbaikan kode langsung mengubah tampilan, dan kesalahan kecil pada struktur dapat menyebabkan halaman tampak rusak. Kebiasaan memeriksa kode dengan teliti menjadi keterampilan yang harus ditanamkan sejak awal.

Langkah kecil yang mudah dilakukan adalah selalu menyusun kode dengan indentasi rapi dan memberi komentar singkat pada bagian yang penting. Komentar membantu pembaca lain, bahkan diri sendiri di kemudian hari, memahami maksud kode. Mengatur nama dan kelas dengan pola yang jelas juga memudahkan ketika halaman semakin banyak dan kompleks. Dari kebiasaan-kebiasaan kecil inilah pengembang yang baik dibangun, jauh sebelum mempelajari teknik lanjutan.

Tata letak menjadi aspek penting dalam desain. Flexbox adalah teknik CSS yang memudahkan penyusunan elemen dalam satu atau dua dimensi, misalnya agar sebuah kartu selalu berada di tengah layar atau agar beberapa tombol tersusun rapi berjajar. Dengan media query dan satuan fleksibel seperti persentase, tampilan dapat menyesuaikan diri dengan lebar layar ponsel maupun komputer. Responsivitas kini menjadi syarat yang hampir tidak dapat ditawar oleh pengguna modern.

Dari sisi interaktivitas, JavaScript memberi kemampuan untuk merespons setiap tindakan pengguna. Sebagai contoh, sebuah tombol dapat memunculkan pesan, form dapat dicek terlebih dahulu, atau bagian halaman dapat diperbarui tanpa memuat ulang seluruhnya. Kemampuan ini membedakan halaman yang hidup dari halaman yang statis, dan merupakan keterampilan dasar yang akan dipakai kembali ketika mempelajari pengambilan data melalui API pada pertemuan selanjutnya.

Frontend adalah seluruh yang dilihat dan diinteraksikan pengguna dalam aplikasi web. Tiga teknologi utama penyusunnya adalah HTML, CSS, dan JavaScript. HTML (HyperText Markup Language) mendefinisikan struktur dan elemen halaman, seperti judul, paragraf, gambar, tautan, dan formulir, melalui tag yang bertingkat. CSS (Cascading Style Sheets) mengatur tampilan elemen tersebut, meliputi warna, ukuran huruf, jarak, tata letak, dan animasi. JavaScript menambahkan perilaku dinamis, seperti menampilkan pesan saat tombol diklik atau memvalidasi isian formulir sebelum dikirim.

HTML ditulis berpasangan tag pembuka dan penutup. Sebagai contoh, elemen paragraf ditulis dengan tag pembuka dan penutup yang mengapit teksnya, sedangkan elemen heading memakai tag sampai sesuai tingkat judul. Struktur halaman diawali deklarasi dokumen dan tag html yang berisi bagian head untuk informasi serta body untuk isi yang tampil. Elemen dapat diberi atribut seperti id dan class yang berguna sebagai penanda untuk gaya CSS maupun manipulasi dengan JavaScript.

CSS dapat ditulis langsung di dalam elemen, pada bagian head dengan tag style, atau pada berkas terpisah dengan tag link. Cara terpisah paling dianjurkan karena memisahkan struktur dari tampilan sehingga mudah dipelihara. Selektor CSS memilih elemen berdasarkan tag, berdasarkan class yang diawali titik, atau berdasarkan id yang diawali pagar. Properti umum meliputi color untuk warna teks, background untuk latar, margin dan padding untuk jarak, serta font-size untuk ukuran huruf. Media query membuat halaman responsif sehingga tampil baik pada layar lebar maupun layar ponsel.

JavaScript berjalan di sisi browser dan mampu mengubah halaman tanpa perlu memuat ulang. Dengan sebuah event listener, pemrogram dapat menanggapi tindakan pengguna seperti klik, lalu mengubah isi atau gaya elemen. Kemampuan mengubah dokumen secara langsung inilah yang menjadi cikal bakal pengalaman aplikasi web yang hidup. Kemampuan menulis ketiga teknologi ini menjadi prasyarat sebelum memasuki materi backend pada pertemuan berikut.

Langkah Praktik

1. Buat berkas index.
2. html dan tulis struktur HTML berisi judul, paragraf perkenalan, gambar, dan dua tombol.
3. Buat berkas style.
4. css lalu tautkan melalui tag link.
5. Atur warna latar, tipografi, dan tata letak dengan flexbox agar isi berada di tengah.
6. Buat berkas app.
7. js dan tautkan dengan tag script.
8. Tambahkan event listener klik yang mengubah teks pada paragraf.

index.html dan app.js

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Profil</title><link rel="stylesheet" href="style.css"></head>
<body>
  <h1>Halo, Selamat Datang</h1>
  <p id="pesan">Salam dari aplikasi web pertama Anda.</p>
  <button id="tombol">Klik Saya</button>
  <script src="app.js"></script>
</body>
</html>

const tombol = document.getElementById('tombol');
const pesan = document.getElementById('pesan');
tombol.addEventListener('click', function () {
  pesan.textContent = 'Anda telah mengklik tombol!';
});

Latihan / Proyek

• Rancang halaman biodata lengkap dengan judul, foto, dan daftar riwayat
• Atur tampilan agar elemen berada di tengah dan dimensinya responsif
• Tambahkan tombol yang mengubah warna latar saat diklik
• Buat tautan antar dua halaman dalam satu proyek
• Terapkan media query agar tampilan menyesuaikan ukuran layar

Rekap & Tindak Lanjut

Mahasiswa mampu membangun halaman web statis yang melibatkan struktur, gaya, dan interaktivitas. Ketiga teknologi ini menjadi bahasa dasar frontend yang terus dipakai pada materi integrasi dan proyek akhir.