revisi web modul 3 grid

REVISILAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEBMODUL 3DESAIN WEB (LAYOUT DAN MENU)Untuk memenuhi tugas matakuliah Praktikum Pemrograman Webyang dibimbing oleh Bapak Didik Dwi Prasetya

Asisten Praktikum :

Oleh:DAVID EKA KRISTIANTO(130533608210)PTI C 2013FAKULTAS TEKNIKJURUSAN TEKNIK ELEKTROPRODI S1 PENDIDIKAN TEKNIK INFORMATIKAUNIVERSITAS NEGERI MALANGMARET 2015A. STUDI KASUS1. 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 Profila. 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.Jevri T. Ardiansyah

Devi Ratnasari