LAPORAN
PRAKTIKUM PEMROGRAMAN BERBASIS WEB
BAB III
Desain Web (Layout dan
Menu)
Untuk memenuhi tugas
matakuliah Praktikum Pemrograman Berbasis
Web
yang dibimbing oleh
Bapak Didik Dwi Prasetya
Oleh:
INTAN SOLIKHATUL MABRURO
(120533430993)
FAKULTAS
TEKNIK
JURUSAN
TEKNIK ELEKTRO
PRODI
S1 PENDIDIKAN TEKNIK INFORMATIKA
UNIVERSITAS
NEGERI MALANG
MARET
2014
DASAR TEORI
1.
Permasalahan Penggunaan Property
Float
Property float berfungsi
“mengapungkan” elemen. Sehingga elemen tersebut akan berpindah sesuai isi dari
property float. Permasalahan yang muncul adalah float merusak alur dari
halaman. Ketika menggunakan properti float, elemen-elemen lain akan menjadi
mengikuti aturan kiri atau kanan dari float.
Salah satu cara umum yang
dilakukan untuk mengatasi permasalahan float adalah penggunaan clear:both;.
2.
Teknik Clear Fix
Permasalahan lain muncul
setelah penggunaan style clear:both; . Jika kita tidak mengetahui dengan pasti
di mana elemen selanjutnya akan diletakkan, maka style clear:both tidak akan
dapat bekerja dengan baik. Metode lain untuk membersihkan float ialah dengan
menggunakan teknik “clear fix”.
3. Grid System
Salah satu cara untuk membuat
halaman lebih mudah diprediksi ialah dengan menggunakan garis pembantu
penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web. Sebagai
garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan
ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah
Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk
menyusun elemen secara merata.
Jika ingin membuat halaman berukuran 960 px memiliki
12 Grid, kita dapat melakukan perhitungan berikut:
lebar_grid = 960 / 12
lebar_grid = 80 px
Jika ingin setiap kolom
memiliki jarak 20 px kita dapat menambahkan margin ke kiri dan ke kanan pada
setiap kolom, sebanyak setengah dari jarak yang diinginkan (10 px), seperti
berikut:
konten_grid = 80 - jarak
= 80 - 20
= 60 px
Sehingga ukuran margin kiri dan kanan dari elemen
adalah:
margin_kiri_kanan = jarak / 2
= 20 / 2
= 10 px
B.
TUJUAN
·
Memahami penggunaan teknik “clear
fix” dalam membuat layout website
·
Memahami fungsi Grid
System
·
Mampu menggunakan teknik “clear
fix” dan Grid System untuk membuat layout website
B.
LATIHAN
LATIHAN
1
Penggunaan Property Clear:both
Tuliskan style css berikut pada sebuah file bernama style.css
index.html
style.css
Tampilan
Menjalankan halaman web di atas melalui localhost
LATIHAN
2
Tulisakan style.css berikut pada sebuah file bernama style.css
-
Source Code
Index2.html
style.css
Tampilan
Buka web tersebut melalui localhost
LATIHAN
3
Kita dapat memulai pembuatan
kode dengan memberikan nama kelas, untuk setiap ukuran Grid. Misalnya, kita
menggunakan nama kelas “coln” untuk setiap kolom Grid, dengan n adalah lebar
kolom yang diinginkan. Misalnya, kolom berukuran 2 Grid akan memiliki nama
kelas col2, 4 kolom memiliki nama kelas col4, dan seterusnya. Untuk
mengawali, hilangkan padding, margin atas bawah, dan berikan warna serta float
kepada seluruh kolom yang ada:
-
Source Code
My_grid.html
grid.css
Tampilan
Buka halaman my_grid.html melalui localhost
B.
KESIMPULAN
Dalam
praktikum web modul 3 kitadikenalkan dengan Property float yang berfungsi untuk mengapungkan elemen. Sehingga
elemen tersebut akan berpindah sesuai isi dari property float. Dalam
penggunaannya akan merusak elemen-elemen halaman salah satu cara umum yang
dilakukan untuk mengatasi permasalahan float adalah penggunaan clear:both;.
Kemudian terdapat teknik clear fix yang digunakan untuk membersihkan float. Dan
terakhir terdapat Grid System yaitu garis pembantu yang digunakan untuk
memprediksi dalam penusunan elemen web. Grid dibuat dalam berbagai bentuk dan
ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah
Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk
menyusun elemen secara merata.
C.
DAFTAR
RUJUKAN
Modul 3. 2014. Desain
Web (Layout dan Menu). Modul Ajar Praktikum Pemrograman Web. Jurusan Teknik
Elektro FT UM.
