BAB XIV

CSS – Website Layout

A. Capaian Pembelajaran
Pada bab ini mempelajari penggunaan CSS Web Layout
,Header, Navigasi Bar, Menu, Konten dan Footer dalam
HTML. Setelah mempelajari bab ini, mahasiswa dapat
menggunakan dan membedakan Layout Web css dalam
HTML.

B. Materi
B.1 Pendahuluan

Sebuah website dapat dibagi menjadi berbagai

bagian yang terdiri dari header, Navigasi bar , kolom,
konten, serta footer berdasarkan berbagai desain tata
letak yang tersedia untuk pengembang. Tata letak yang
berbeda dapat dibuat dengan menggunakan tag div
dan menggunakan properti CSS untuk menatanya.
Tata letak/Layout CSS bertujuan untuk
menyatukan pola tata letak umum, hal-hal yang
mungkin perlu kita terapkan di situs kita. Selain
menyediakan kode yang dapat digunakan sebagai titik
 awal dalam proyek kita, materi ini menyoroti berbagai
cara penggunaan spesifikasi tata letak dan pilihan yang
dapat kita buat sebagai pengembang nantinya.
Pada umumnya sebuah website dibagi menjadi
header, menu, konten, dan footer:

B.2 CSS Tata Letak Website

Untuk menentukan desain layout terdapat banyak
pilihan . Tetapi pada gambar di atas, merupakan salah satu
paling sering digunakan, kita akan membahasnya pada
pertemuan ini.
1. Header
2. Navigasi Bar
3. Konten
4. Kolom
5. Footer
B.2.1 Header
Header biasanya terletak di bagian atas situs web
(atau tepat di bawah menu navigasi atas). Ini sering berisi
logo atau nama situs web:
Contoh :

Contoh lengkap :

Hasil pada browser :

B.2.2 Navigasi Bar
Bilah atau navigasi bar merupakan daftar link untuk
pengunjung menjelajahi website kita :
contoh :
Contoh lengkap :
Hasil pada browser :
B.2.3 Konten
Layout pada bagian ini, pada umumnya
kebergantungan pada target pengguna. Kita bisa
menggabungkan Layout pada berikut ini:

1 kolom ( pada umunya di peruntukan untuk browser

perangkat HP )
2 kolom (pada umumnya diperuntukan untuk gadget tablet
atau laptop)
tata letak 3 kolom (Pada Umumnya diperuntukan berbabsis
desktop)

Contoh dibawah ini kita akan membuat Layout 3 kolom, dan

merubahnya menjadi Layout 1 kolom di halaman yang lebih
kecil:
Contoh Lengkap :
Hasil pada Browser :
Catatan : Jika membuat layout 2 kolom, ganti lebarnya
menjadi ukurannya 50%. Jika membuat layout 4 kolom,
ukuran nya menggunakan 25%, dan seterusnya .

Catatan : Alternatif lain agar lebih update untuk membuat

layout kolom, dengan menggunakan CSS Flexbox. Tetapi
ini jika menggunakan Internet Explorer 10 dan versi
sebelumnya tidak didukung . Agar di dukung gunakan versi
IE6-10.
3.4 Kolom ukuran Tidak Sama
Konten utama adalah bagian terbesar dan terpenting
dari situs kita .
Adalah umum dengan lebar kolom yang tidak sama,
sehingga sebagian besar ruang dicadangkan untuk konten
utama. Konten samping (jika ada) sering digunakan sebagai
navigasi alternatif atau untuk menentukan informasi yang
relevan dengan konten utama. Kita bias ubah lebar sesuka
kita , tetapi ingat bahwa totalnya harus mencapai 100%:.

Contoh :
Hasil pada Browser :

3.5 Footer
Footer ditempatkan di bagian bawah halaman . Footer
sering berisi informasi seperti hak cipta dan info kontak
Contoh lengkap
Hasil pada Browser :
C. Latihan
Dengan menggunakan beberapa kode CSS di atas,
kita telah membuat tata letak situs web yang responsif, yang
bervariasi antara dua kolom dan lebar kolom penuh
bergantung pada lebar layar:

Buat Tampilan seperti dibawah ini menggunakan kode css

layout/tata letak :
D. Referensi
Adi, A. P. (2022). Panduan Cepat Belajar HTML, PHP, &
MYSQL. Elex Media Komputindo.

Jago Ngoding. (2022). HTML Dasar: Iframe. (diakses pada

11 November 2022). Tersedia pada
https://jagongoding.com/web/html/dasar/iframe/.

Css Introduction (2022), Attributr css (diakses pada 12

Desember 2022), tersedia pada
https://www.w3schools.com/css/css_intro.asp.