Praktikum Modul 3: Tata Letak dan Desain Halaman Web

Praktikum Modul 3: Penerapan CSS3, Box Model, dan Navigasi Antarmuka Dropdown

Sesi praktikum laboratorium ketiga yang berfokus pada pengenalan Cascading Style Sheets (CSS3), konsep dasar CSS Box Model, serta pembuatan menu navigasi interaktif bertingkat (dropdown menu).

1. Ruang Lingkup Materi Praktikum

• Memahami 3 metode penerapan CSS: Inline Styles, Internal Stylesheet (<style>), dan External Stylesheet (<link rel="stylesheet">).
• Menguasai pemilih (selectors): universal, elemen, kelas (.class), ID (#id), serta kombinator (descendant, child, adjacent sibling).
• Membedah CSS Box Model: content, padding, border, dan margin, serta pengaruh properti box-sizing: border-box.

2. Implementasi Komponen Navigasi Interaktif

Mahasiswa membangun bilah navigasi modern dengan fitur menu bertingkat:

• Menata elemen daftar horizontal menggunakan properti display: flex atau inline-block.
• Mengonfigurasi menu submenu yang tersembunyi (display: none) dan memunculkannya secara mulus saat kursor pengguna berada di atas menu utama menggunakan pseudo-class :hover.

3. Berkas Laporan & Kode Sumber

• Laporan Praktikum (TPP 3): Berkas 24-085_Moch. Zamroni Fahreza_TPP3.pdf yang mengupas tuntas teknik penataan box model dan styling visual.
• Paket Kode Sumber (.ZIP): Berkas arsip kode-latihan-modul-3.zip yang berisikan berkas dropdown.html dan berkas styling eksternal latihan.html.