LAPORAN IIIPRAKTIKUM PEMROGRAMAN WEB

Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Web Yang Dibimbing oleh Bapak Didik Dwi Prasetya

Oleh:DAVID ZULIAN (120533430905)S1 PTI B 2012

UNIVERSITAS NEGERI MALANGFAKULTAS TEKNIKJURUSAN TEKNIK ELEKTROS1 PENDIDIKAN TEKNIK INFORMATIKAMARET 2013MODUL IIIDesain Web (Layout dan Menu)

1. TUJUAN1. Memahami penggunaan teknik clear fix dalam membuat layout website.1. Memahami fungsi Grid System.1. Mampu menggunakan teknik clear fix dan Grid System untuk membuat layout website.

1. LATIHAN1. Latihan 3.1 (Penggunaan Property Clear:both)1. Source Code

1. Print Screen

1. Penjelasanbody{width: 960px;}Mengatur lebar halaman web yang akan tampil.header, nav, aside, section, footer{background:#14BCE6;border: 1px solid white;color:white;font-size: 2em;font-variant: small-caps;text-align: center;}Bagian header, navigasi, sidebar, section(konten), dan footer diatur sama untuk background, border, warna huruf, ukuran huruf, variant huruf, dan rata(align).header, nav, footer, {width: 100%;}Mengatur lebar header, nav, dan footer ukurannya sama dengan lebar halaman web yaitu 960px.header, footer {height: 100px;}Tinggi header dan footer di samakan 100pxnav {height: 50px;}Tinggi nav diatur 50px.aside{footerfloat: left;height: 250px;width: 29.5%;}Sidebar diatur sebelah kiri dengan tinggi 250px dan lebar 29.5%.section#content:{float: right;height: 250px;width: 70%;}Section diatur sebelah kanan dengan tinggi 250px dan lebar 70%.footer {clear: both;}Pada footer pengaturan float dihapuskan.

1. Latihan 3.2 (Clear fix)1. Source Code

1. Print Screen

1. PenjelasanPada latihan ini hamper sama dengan latihan yang pertama tetapi ada penambahan untuk mengatur halaman lebih rapi. Pemambahan tersebut adalah header, nav, aside, dan section dimasukkan dalam divisi yang berbeda dengan footer. Pada div pertama(header, nav, aside, dan section) diatur pada cssnya dengan pengaturan clear fix. Penambahan lainnya adalah pengaturan margin halaman web dan height pada section di atur auto.

1. Latihan 3.3 (Pembuatan Grid)1. Source Code

1. Printscreen

1. PenjelasanPada latihan ini membuat ukuran grid dengan membandingkannya dengan lebar web. Pada latihan ini setiap kolom memiliki pengaturan yang sama yang membedakannya adalah pegaturana lebarnya. Pada bagian row dan container digunakan pangaturan clear fix untuk merapikan tampilan baris dalam container.

1. STUDI KASUS1. Source Code

1. PrintScreen

1. PenjelasanStudi Kasus ini membuat web dengan 3 menu yang menuju kehalaman masing-masisng, 4 link yang menuju alamat web, perandingan dari sidebar dan konten utama, dan dengan aturan perbandingannya adalah 1 .banding 3. Pada studi kasus ini sudah saya atur menjadi responsive untuk ukuran780px ke bawah. Saya menggunakan clear:both pada body dalam pengaturan responsive untuk menggilangkan alur floatnya.

1. DAFTAR RUJUKANModul 1 Praktikum Pemrograman Web (HTML). Jurusan Teknik Elektro FT UMWempen, Faithe. Tanpa tahun. Step by Step HTML5. Microsoft. PDF