Postingan

PWD 5 - Layout Halaman Web dengan CSS

Diterbitkan Diperbarui
Oleh Aulia Syarif Aziz 3 menit baca

Capaian Pembelajaran Pertemuan (Sub-CPMK)

Setelah mengikuti perkuliahan ini, mahasiswa mampu:

  1. Menjelaskan konsep layout dalam desain web.
  2. Menggunakan properti display untuk mengatur elemen HTML.
  3. Menerapkan Flexbox untuk membuat layout modern.
  4. Menggunakan properti position dalam CSS.
  5. Mendesain tata letak halaman web secara sederhana dan terstruktur.

1. Pendahuluan

Pada pertemuan sebelumnya, mahasiswa telah mempelajari dasar-dasar CSS untuk mengatur tampilan halaman web, seperti warna, font, dan jarak antar elemen.

Namun, untuk membangun website yang profesional, tidak cukup hanya mengatur tampilan. Diperlukan kemampuan untuk mengatur tata letak (layout) elemen secara sistematis.

Layout menentukan bagaimana elemen:

  • Disusun secara horizontal atau vertikal
  • Disejajarkan (alignment)
  • Mengisi ruang pada halaman

Pada pertemuan ini akan dibahas teknik layout modern menggunakan Flexbox serta pengaturan posisi elemen menggunakan CSS positioning.

2. Konsep Layout dalam Web

Layout adalah cara menyusun elemen-elemen HTML dalam suatu halaman agar terlihat terstruktur dan mudah dipahami.

Contoh layout umum:

  • Header
  • Navigation
  • Content
  • Sidebar
  • Footer

3. Properti Display

Properti display menentukan bagaimana elemen ditampilkan.

3.1 Block

1
2
3

div {
    display: block;
}

Ciri:

  • Mengambil satu baris penuh

Contoh elemen block:

  • <div>
  • <p>
  • <h1>

3.2 Inline

1
2
3

span {
    display: inline;
}

Ciri:

  • Tidak memulai baris baru
  • Lebar mengikuti konten

3.3 Inline-block

1
2
3

div {
    display: inline-block;
}

Ciri:

  • Sejajar seperti inline
  • Bisa diatur ukuran

3.4 None

1
2
3

div {
    display: none;
}

Elemen tidak ditampilkan.

4. Pengenalan Flexbox

Flexbox (Flexible Box Layout) adalah teknik layout modern yang digunakan untuk menyusun elemen dalam satu dimensi (horizontal atau vertikal).

4.1 Konsep Dasar Flexbox

Flexbox terdiri dari:

  • Container (induk)
  • Item (anak)

4.2 Mengaktifkan Flexbox

1
2
3

.container {
    display: flex;
}

4.3 Arah Flex (flex-direction)

1
2
3

.container {
    flex-direction: row;
}

Pilihan:

  • row → horizontal
  • column → vertikal

4.4 Alignment Horizontal (justify-content)

1
2
3

.container {
    justify-content: center;
}

Pilihan:

  • flex-start
  • center
  • space-between
  • space-around

4.5 Alignment Vertikal (align-items)

1
2
3

.container {
    align-items: center;
}

4.6 Contoh Flexbox

1
2
3
4
5

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.container {
    display: flex;
    justify-content: space-between;
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

5. CSS Positioning

CSS positioning digunakan untuk mengatur posisi elemen secara lebih spesifik.

5.1 Static (Default)

1
2
3

div {
    position: static;
}

5.2 Relative

1
2
3
4

div {
    position: relative;
    top: 10px;
}

Posisi relatif terhadap posisi awal.

5.3 Absolute

1
2
3
4
5

div {
    position: absolute;
    top: 0;
    left: 0;
}

Posisi relatif terhadap parent yang memiliki posisi.

5.4 Fixed

1
2
3
4

div {
    position: fixed;
    top: 0;
}

Tetap di posisi tertentu meskipun halaman di-scroll.

6. Kombinasi Layout Sederhana

Contoh layout sederhana:

1
2
3
4

<header>Header</header>
<nav>Menu</nav>
<main>Konten</main>
<footer>Footer</footer>

Dengan CSS:

1
2
3
4

header, nav, main, footer {
    padding: 20px;
    margin: 10px;
}

7. Best Practice Layout

  1. Gunakan Flexbox untuk layout modern
  2. Hindari penggunaan positioning berlebihan
  3. Gunakan struktur HTML yang jelas
  4. Gunakan class untuk styling layout
  5. Uji tampilan di berbagai ukuran layar

8. Kesalahan Umum

  • Tidak memahami perbedaan display
  • Salah penggunaan Flexbox
  • Overlapping karena positioning
  • Layout tidak responsif
  • Tidak menggunakan container

Rangkuman

Pada pertemuan ini telah dipelajari:

  1. Konsep layout dalam web
  2. Properti display
  3. Flexbox sebagai teknik layout modern
  4. CSS positioning
  5. Penyusunan layout sederhana

Kemampuan membuat layout merupakan keterampilan penting dalam pengembangan web modern.

Referensi

Materi Kuliah, Pemrograman Web Dasar
kuliah web
Postingan ini dilisensikan di bawah CC BY 4.0 oleh penulis.