REVISI

LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

MODUL 3

DESAIN WEB (LAYOUT DAN MENU)

Untuk memenuhi tugas matakuliah Praktikum Pemrograman Web

yang dibimbing oleh Bapak Didik Dwi Prasetya

Asisten Praktikum :

Oleh:

DAVID EKA KRISTIANTO

(130533608210)

PTI C 2013

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA

UNIVERSITAS NEGERI MALANG

MARET 2015

1. Jevri T. Ardiansyah 2. Devi Ratnasari

A. STUDI KASUS 1. Halaman Home

a. File Index.html Article

ARTICLES FOLLOW US ON : twitter facebook HOME PROFIL ARTICLES SEARCH

PTI c 2013 um.ac.id elektro.um.ac.id PTI C 2013 Modul CSS Modul VB Modul GRAFKOM Modul Multimedia

Layout Dalam dunia desain, Layout

berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.

Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

HOME | PROFILE | ARTICLES | CONTACT PTI C-2013. All Rights Reserved. Designed by david

eka kristianto.

b. File Stylesheet.css @charset "utf-8"; /* CSS Document */ body { font:100% Lucida Sans Unicode, Lucida Grande, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000; } .twoColHybLtHdr #col1 { width: 60%; background-image:url(recbg.jpg); margin: 0 auto; border: 1px solid #000; text-align: left; } .twoColHybLtHdr #col4 { float: left; width: 12em; background-image:url(recbg.jpg); padding: 0px 0px; } .twoColHybLtHdr #col4 h3, .twoColHybLtHdr #col4 p { margin-left: 10px; margin-right: 10px; } .twoColHybLtHdr #col2 { font: sans-serif; background: #000; padding: 0 0px; } .twoColHybLtHdr #col2 h1 { color:#FFF; font:Verdana; font-size:50px; margin: 0; padding: 10px 0; } .twoColHybLtHdr #col6 { margin:auto; background:#FFF; } .twoColHybLtHdr #col7 { padding: 0 10px; background:#000; color:#FF0; } .twoColHybLtHdr #col7 p { text-align:center; margin: 0; padding: 10px 0; } #col5 { float:right; clear:right; padding-top:28px; padding-

bottom:47px; color:#00F;} #col5 a:hover {color:#d91d2a; } #col3 a:hover {color:#d91d2a; } #col3 {font-color:#00F; }

.social { float:right; width:160px; padding-top:0px; }

.social span { float:left; display:inline-block; font-size:15px; color:#FFF; line-height:10px; padding-right:5px; }

.social ul { list-style:none; }

.social ul li { float:left; display:inline; width:16px; padding-right:2px; }

.social ul li a { float:left; display:inline; width:16px; height:16px; background:url('social.gif') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; }

.social ul li a.facebook { background-position:-18px 0; } #search { width:346px; margin:0 0 0 auto; } #search label { float:left; display:inline; font-size:14px; font-

weight:bold; color:#000; line-height:24px; padding-right:6px; } #search .search-field { width:150px; border: 1px solid #000;

background:#fff; } #search .search-button { font-size:14px; font-weight:bold; border:0;

background:#FFF; color:#000; cursor:pointer; } #sub-col5 { display:block; clear:right; border-top:1px dashed #666;

border-bottom:1px dashed #666; padding:8px 0; } #sub-col5 ul { list-style:none; } #sub-col5 ul li { float:left; display:inline; padding-right:25px; } #sub-col5 ul li a { font-size:20px; font-weight:bold; color:#00F;

line-height:24px; text-decoration:none; } #sub-col5 ul li a:hover { color:#F00; }

c. Hasil tampilan

2. Halaman Profil a. File Indek.html

Profile MY Profile FOLLOW US ON : twitter facebook HOME PROFIL ARTICLES SEARCH

PTI c 2013 um.ac.id elektro.um.ac.id PTI C 2013 Modul CSS Modul VB Modul GRAFKOM Modul Multimedia div> My Profil NIM : 130533608210 Nama : DAVID EKA KRISTIANTO Program Studi : S1 Pendidikan Teknik Informatika

Tmp/tgl Lahir : Kab. Malang / 03 Des 1995 Jenis Kelamin : Laki-laki Alamat : DSN Sumbersari Telp : 085815145682 Agama : Islam Email : davidekakristianto@ymail.com HOME |

PROFILE | ARTICLES | CONTACT PTI C-2013. All Rights Reserved. Designed by david eka kristianto.

b. File Stylesheet.css @charset "utf-8"; /* CSS Document */ body { font:100% Lucida Sans Unicode, Lucida Grande, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000; } .twoColHybLtHdr #col1 { width: 60%; background-image:url(recbg.jpg); margin: 0 auto; border: 1px solid #000000; text-align: left; } .twoColHybLtHdr #col2 { font: sans-serif; background: #000; padding: 0 0px; } .twoColHybLtHdr #col2 h3 { color:#FFF; font:Verdana; font-size:50px; margin: 0; padding: 10px 0; } .twoColHybLtHdr #col4 { float: left; width: 16em; background: #fff; padding:0px 0px 0px; } .twoColHybLtHdr #col4 h3, .twoColHybLtHdr #col4 p { margin-left: 10px; margin-right: 10px; }

.twoColHybLtHdr #col6 { margin:auto; color:#000; background-color:#FFF; width:auto; } .twoColHybLtHdr #col7 { padding: 0 10px; background:#000; color:#FF0; } .twoColHybLtHdr #col7 p { text-align:center; margin: 0; padding: 10px 0; } #col5 { float:right; clear:right; padding-top:28px; padding-bottom:47px; color:#00F;} #col5 a:hover {color:#d91d2a; } #col3 a:hover {color:#d91d2a; } #col3 {font-color:#00F; } .social { float:right; width:160px; padding-top:0px; } .social span { float:left; display:inline-block; font-size:15px; color:#FFF; line-height:10px; padding-right:5px; } .social ul { list-style:none; } .social ul li { float:left; display:inline; width:16px; padding-right:2px; } .social ul li a { float:left; display:inline; width:16px; height:16px; background:url('social.gif') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; } .social ul li a.facebook { background-position:-18px 0; } #search { width:346px; margin:0 0 0 auto; } #search label { float:left; display:inline; font-size:14px; font-weight:bold; color:#000; line-height:24px; padding-right:6px; } #search .search-field { width:150px; border: 1px solid #000; background:#fff; } #search .search-button { font-size:14px; font-weight:bold; border:0; background:#FFF; color:#000; cursor:pointer; }

c. Hasil tampilan

3. Halaman Article a. File Indek.html

Article ARTICLES FOLLOW US ON :

twitter facebook HOME PROFIL ARTICLES SEARCH PTI c 2013 um.ac.id elektro.um.ac.id PTI C 2013 Modul CSS Modul VB Modul GRAFKOM Modul Multimedia Layout

Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS. Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut: HOME | PROFILE | ARTICLES | CONTACT PTI C-2013. All Rights Reserved. Designed by david eka kristianto.

b. File Stylesheet.css @charset "utf-8"; /* CSS Document */ body { font:100% Lucida Sans Unicode, Lucida Grande, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000; } .twoColHybLtHdr #col1 { width: 60%; background-image:url(recbg.jpg); margin: 0 auto; border: 1px solid #000; text-align: left; } .twoColHybLtHdr #col4 { float: left; width: 12em; background-image:url(recbg.jpg); padding: 0px 0px; } .twoColHybLtHdr #col4 h3, .twoColHybLtHdr #col4 p {

margin-left: 10px; margin-right: 10px; } .twoColHybLtHdr #col2 { font: sans-serif; background: #000; padding: 0 0px; } .twoColHybLtHdr #col2 h1 { color:#FFF; font:Verdana; font-size:50px; margin: 0; padding: 10px 0; } .twoColHybLtHdr #col6 { margin:auto; background:#FFF; } .twoColHybLtHdr #col7 { padding: 0 10px; background:#000; color:#FF0; } .twoColHybLtHdr #col7 p { text-align:center; margin: 0; padding: 10px 0; } #col5 { float:right; clear:right; padding-top:28px; padding-bottom:47px; color:#00F;} #col5 a:hover {color:#d91d2a; } #col3 a:hover {color:#d91d2a; } #col3 {font-color:#00F; } .social { float:right; width:160px; padding-top:0px; } .social span { float:left; display:inline-block; font-size:15px; color:#FFF; line-height:10px; padding-right:5px; } .social ul { list-style:none; } .social ul li { float:left; display:inline; width:16px; padding-right:2px; } .social ul li a { float:left; display:inline; width:16px; height:16px; background:url('social.gif') no-repeat 0 0; font-size: 0; line-height: 0; text-indent: -4000px; } .social ul li a.facebook { background-position:-18px 0; } #search { width:346px; margin:0 0 0 auto; } #search label { float:left; display:inline; font-size:14px; font-weight:bold; color:#000; line-height:24px; padding-right:6px; } #search .search-field { width:150px; border: 1px solid #000; background:#fff; } #search .search-button { font-size:14px; font-weight:bold; border:0; background:#FFF; color:#000; cursor:pointer; } #sub-col5 { display:block; clear:right; border-top:1px dashed #666; border-bottom:1px dashed #666; padding:8px 0; } #sub-col5 ul { list-style:none; } #sub-col5 ul li { float:left; display:inline; padding-right:25px; } #sub-col5 ul li a { font-size:20px; font-weight:bold; color:#00F; line-height:24px; text-decoration:none; } #sub-col5 ul li a:hover { color:#F00; }

c. Hasil Tampilan

d. Penjelasan : pada studi kasus diatas yaitu membuat tampilan website

menggunakan grid , dimana terdapat heder, fotter, main, dan menu untuk menuju halaman beranda, profil, dan artikel. Kemudian dalam halaman terdapat dua contain, yaitu kontain kiri (col5) berisi link untuk menuju ke halaman website lain, dan contain sebelah kanan (col6) yang berisi konten atau isi dari website tersebut.