Mata Kuliah: Pemrograman Berbasis Web
🧭 1. Pengertian Layout Web
7
📖 Deskripsi
Layout web adalah cara menyusun dan mengatur elemen-elemen pada halaman website agar terlihat rapi, terstruktur, dan mudah digunakan.
🧠 Narasi
Layout dapat diibaratkan seperti denah rumah. Tanpa layout yang baik, pengguna akan kesulitan menemukan informasi. Layout menentukan bagaimana konten ditampilkan, di mana posisi menu, dan bagaimana interaksi pengguna terjadi.
🧩 2. Konsep Responsive Design
6
📖 Deskripsi
Responsive design adalah teknik membuat tampilan website agar dapat menyesuaikan dengan berbagai ukuran layar (desktop, tablet, smartphone).
🧠 Narasi
Saat ini pengguna mengakses web dari berbagai perangkat. Website harus mampu beradaptasi secara otomatis agar tetap nyaman digunakan, tanpa harus membuat versi terpisah.
📦 3. Box Model dalam Layout
6
📖 Deskripsi
Box model merupakan dasar dalam mengatur layout.
🧱 Komponen
| Elemen | Fungsi |
|---|---|
| Content | Isi |
| Padding | Jarak dalam |
| Border | Batas |
| Margin | Jarak luar |
🧠 Narasi
Pengaturan margin dan padding menentukan jarak antar elemen sehingga layout terlihat rapi.
📐 4. Display Property
8
📖 Deskripsi
Properti display menentukan bagaimana elemen ditampilkan.
🧱 Tabel Display
| Nilai | Fungsi |
|---|---|
| block | Satu baris penuh |
| inline | Dalam satu baris |
| inline-block | Gabungan |
| none | Tidak ditampilkan |
💻 Contoh
div {
display: block;
}
🧠 Narasi
Pemahaman display penting sebelum masuk ke layout modern seperti Flexbox dan Grid.
📊 5. Flexbox (Flexible Box Layout)
7
📖 Deskripsi
Flexbox digunakan untuk mengatur layout satu dimensi (baris atau kolom).
🧱 Properti Utama
| Properti | Fungsi |
|---|---|
| display: flex | Mengaktifkan flexbox |
| justify-content | Horizontal |
| align-items | Vertikal |
💻 Contoh
.container {
display: flex;
justify-content: center;
align-items: center;
}
🧠 Narasi
Flexbox mempermudah penataan elemen tanpa perlu float atau positioning kompleks.
🧮 6. CSS Grid Layout
7
📖 Deskripsi
Grid digunakan untuk layout dua dimensi (baris dan kolom).
🧱 Properti
| Properti | Fungsi |
|---|---|
| display: grid | Aktifkan grid |
| grid-template-columns | Kolom |
| grid-template-rows | Baris |
💻 Contoh
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
🧠 Narasi
Grid cocok untuk layout kompleks seperti dashboard atau halaman utama website.
📱 7. Media Queries
7
📖 Deskripsi
Media queries digunakan untuk membuat desain responsive.
💻 Contoh
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
🧠 Narasi
Media queries memungkinkan CSS berubah sesuai ukuran layar.
📏 8. Satuan Responsif
7
📖 Deskripsi
Satuan responsif membantu desain fleksibel.
🧱 Tabel
| Satuan | Fungsi |
|---|---|
| % | Relatif parent |
| vw/vh | Berdasarkan layar |
| rem/em | Relatif font |
🧠 Narasi
Menghindari penggunaan px berlebihan membantu membuat layout lebih fleksibel.
🧱 9. Framework Layout (Bootstrap)
9
📖 Deskripsi
Framework seperti Bootstrap membantu membuat layout lebih cepat.
🧱 Konsep Grid Bootstrap
| Elemen | Fungsi |
|---|---|
| container | Pembungkus |
| row | Baris |
| col | Kolom |
🧠 Narasi
Framework mempercepat pengembangan tanpa harus menulis CSS dari nol.
⚠️ 10. Kesalahan Umum dalam Layout
6
📖 Deskripsi
Kesalahan yang sering terjadi:
🧱 Daftar
- Tidak responsive
- Overlapping elemen
- Ukuran tetap (fixed)
- Tidak menggunakan flex/grid
🧠 Narasi
Kesalahan layout dapat menyebabkan pengalaman pengguna buruk.
🧪 11. Studi Kasus Praktikum
🎯 Tugas
Buat layout website:
- Header
- Navbar
- Content
- Sidebar
- Footer
Gunakan:
- Flexbox atau Grid
- Media Queries
- Responsive units
🎯 12. Kesimpulan
- Layout menentukan struktur web
- Flexbox dan Grid adalah tools utama
- Responsive design wajib di era modern
- Media queries membuat desain adaptif
🎓 Penutup
Setelah materi ini, mahasiswa siap mempelajari:
➡️ UI/UX Design
➡️ Framework frontend lanjutan
➡️ Pengembangan web profesional
