Revisi Web Modul 3 Grid

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 :
1. Jevri T. Ardiansyah
2. Devi Ratnasari
3.
Oleh:
DAVID EKA KRISTIANTO
(130533608210)
PTI C 2013
FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
UNIVERSITAS NEGERI MALANG
MARET 2015
A. STUDI KASUS
1. Halaman Home
a. File Index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Article</title>
<link rel="stylesheet" href="style2.css">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"><style type="text/css">
</style></head>
<body class="twoColHybLtHdr"
onLoad="MM_preloadImages('../david/rumah/css/images/movie2.jpg','.
./david/rumah/css/images/comingsoon2.jpg','../david/rumah/css/images/movie6.jpg')">
<div id="col1">
<div id="col2">
<table width="882" border="0">
<tr>
<td width="281"><img src="backgroundblog.jpg" width="281"
height="158"></td>
<td width="181"><h1>ARTICLES</h1> </td>
<td>
<div class="social">
<span>FOLLOW US ON :</span></span>
<ul>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="facebook" href="#">facebook</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div id="col3">
<center><table width="884" height="20" border="0">
<tr>
<th width="112" scope="col"><a href="aaa1.html">HOME</a></th>
<th width="113" scope="col"><a href="aaa.html">PROFIL</a></th>
<th width="131" scope="col"><a href="aa.html">ARTICLES</a></th>
<th width="350" scope="col"><div id="search">
<form action="home_submit" method="get" acceptcharset="utf-5">
<label for="search-field">SEARCH</label>
<input type="text" name="search field"
value="Enter search here" id="search-field" title="Enter search
here" class="blink search-field" />
<input type="submit" value="GO!"
class="search-button" />
</form>
</div></th>
</tr>
</table>
</center>
</div>
<div id="col4">
<div id="col5">
<ul>
<li><a href="#">PTI c 2013</a></li>
<li><a href="http://um.ac.id">um.ac.id</a></li>
<li><a
href="http://elektro.um.ac.id">elektro.um.ac.id</a></li>
</ul>
</div><hr>
<h3>PTI C 2013</h3>
<hr>
<div id="col5">
<ul>
<li><a
<li><a
<li><a
<li><a
</li>
</ul>
href="#">Modul
href="#">Modul
href="#">Modul
href="#">Modul
CSS</a></li>
VB</a></li>
GRAFKOM</a></li>
Multimedia</a>
</div>
</div>
<div id="col6">
<h1>Layout</h1>
<p>
Dalam dunia desain, <span id="ofs6ef_2">Layout</span>
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.</p>
<p>Sebuah dokumen <span id="ofs6ef_18">web</span> umumnya memiliki
elemen-elemen <span id="ofs6ef_4">sebagai</span> berikut:</p>
<div id="web-layout-elements"><img src="aa_WebLayoutElements.png"
alt="Elemen-elemen Layout pada Dokumen Web" width="270"
height="219" align="absbottom"></div>
<div id="box-model">
<div id="properti-height-dan-width"></div>
</div>
<div id="pembuatan-grid"> </div>
</div>
<br class="clearfloat" />
<div id="col7">
<p>
<a href="aaa1.html">HOME</a> <span>|</span>
<a href="aaa.html">PROFILE</a> <span>|</span>
<a href="aa.html">ARTICLES</a> <span>|</span>
<a href="#">CONTACT </a>
</p>
<p> © PTI C-2013. All Rights Reserved. Designed by david
eka kristianto. </a></p>
</script>
</body>
</html>
b. File Stylesheet.css
@charset "utf-8";
/* CSS Document */
<style type="text/css">
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;
}
float: left;
width: 12em;
padding: 0px 0px;
}
.twoColHybLtHdr #col4 h3, .twoColHybLtHdr #col4 p {
margin-left: 10px;
margin-right: 10px;
}
font: sans-serif;
background: #000;
padding: 0 0px;
}
.twoColHybLtHdr #col2 h1 {
color:#FFF;
font:Verdana;
font-size:50px;
margin: 0;
padding: 10px 0;
}
margin:auto;
background:#FFF;
}
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; paddingbottom:47px; color:#00F;}
#col5 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; paddingright:2px; }
.social ul li a { float:left; display:inline; width:16px;
height:16px; background:url('social.gif') no-repeat 0 0; fontsize: 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; fontweight: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; }
</style>
c. Hasil tampilan
2. Halaman Profil
a. File Indek.html
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="style.css">
</script>
</style></head>
<div id="col1">
<div id="col2">
<tr>
height="158"></td>
<td width="289">
<h3>MY Profile</h3></td>
<td width="304"> <div class="social">
<ul>
<li><a class="twitter"
href="#">twitter</a></li>
<li><a class="facebook"
href="#">facebook</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div id="col3">
<tr>
<th width="131" scope="col"><a
href="aa.html">ARTICLES</a></th>
<form action="home_submit" method="get"
accept-charset="utf-5">

</form>
</div></th>
</tr>
</table>
</center>
</div>
<div id="col4">
<div id="col5">
<ul>
<li><a
</ul>
</div><hr>
<h3>PTI C 2013</h3>
<hr>
<div id="col5">
<ul>
<li><a href="#">Modul CSS</a></li>

<li><a href="#">Modul VB</a></li>
<li><a href="#">Modul GRAFKOM</a></li>
<li><a href="#">Modul Multimedia</a></li>
</ul>
</div>
div>
<div id="col6">
<center><h2><strong>My Profil</strong></h2></center>
<span><img src="a.jpg" width="169" height="255" align="left"
longdesc="a.jpg">
<table width="464" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td width="412"><table width="362" align="center" id="onecolumn-emphasis">
<tbody>
<tr>
<td width="110" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">NIM</span></td>
<td width="12" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">:</span></td>
<td width="247" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">130533608210</span></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">Nama</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">:</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">DAVID EKA KRISTIANTO</span></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">Program Studi</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">S1 Pendidikan Teknik Informatika</span></td>

</tr>
<tr>
<td height="25" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">Tmp/tgl Lahir</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">Kab. Malang / 03 Des 1995</span></td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">Jenis Kelamin</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">Laki-laki</span></td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">Alamat</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">DSN Sumbersari</span></td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">Telp</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">085815145682</span></td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">Agama</span></td>
<td bgcolor="#FFFFFF"><span id="one-column-emphasis"
title="Klik untuk mengubah no HP...">Islam</span> <span id="onecolumn-emphasis"><br>
</span></td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF"><span id="onecolumn-emphasis">Email</span></td>
<td bgcolor="#FFFFFF"><span id="one-columnemphasis">davidekakristianto@ymail.com</span></td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p></td>
</tr>
</table></div>
<div id="col7">
<p>
<a
<a
<a
<a
href="aaa1.html">HOME</a> <span>|</span>
href="aaa.html">PROFILE</a> <span>|</span>
href="aa.html">ARTICLES</a> <span>|</span>
href="#">CONTACT </a>
</p>
<p> © PTI C-2013. All Rights Reserved.
david eka kristianto. </a></p>
</div>
</div>
<script type="text/javascript">
<!-swfobject.registerObject("FLVPlayer");
//-->
</script>
</body>
</html>
Designed by
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
width: 60%;
margin: 0 auto;
text-align: left;
}
font: sans-serif;
background: #000;
padding: 0 0px;
}
color:#FFF;
font:Verdana;
font-size:50px;
margin: 0;
padding: 10px 0;
}
float: left;
width: 16em;
background: #fff;
padding:0px 0px 0px;
}
margin-left: 10px;
margin-right: 10px;
margin:auto;
color:#000;
background-color:#FFF;
width:auto;
}
padding: 0 10px;
background:#000;
color:#FF0;
}
text-align:center;
margin: 0;
padding: 10px 0;
}
.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; }
background:#fff; }
#search .search-button { font-size:14px; font-weight:bold; border:0;
background:#FFF; color:#000; cursor:pointer; }
</style>
c. Hasil tampilan
3. Halaman Article
a. File Indek.html
<html>
<head>
<title>Article</title>
<link rel="stylesheet" href="style2.css">
</script>
</style></head>
<div id="col1">
<div id="col2">
<tr>
height="158"></td>
<td width="181"><h1>ARTICLES</h1> </td>
<td>
<div class="social">
<ul>
<li><a class="twitter"
href="#">twitter</a></li>
<li><a class="facebook"
href="#">facebook</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div id="col3">
<tr>
<th width="131" scope="col"><a
href="aa.html">ARTICLES</a></th>
<form action="home_submit" method="get"
accept-charset="utf-5">
</form>
</div></th>
</tr>
</table>
</center>
</div>
<div id="col4">
<div id="col5">
<ul>

<li><a
</ul>
</div><hr>
<h3>PTI C 2013</h3>
<hr>
<p>
<div id="col5">
<ul>
</li>
<li><a href="#">Modul CSS</a></li>

<li><a href="#">Modul VB</a></li>
<li><a href="#">Modul GRAFKOM</a></li>
<li><a href="#">Modul Multimedia</a>
</ul>
<p> </p>
</div>
</div>
<div id="col6">
<h1>Layout</h1>
<p>
Dalam dunia desain, <span id="ofs6ef_2">Layout</span>
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.</p>
<p>Sebuah dokumen <span id="ofs6ef_18">web</span> umumnya memiliki
elemen-elemen <span id="ofs6ef_4">sebagai</span> berikut:</p>
<div id="web-layout-elements"><img
src="aa_WebLayoutElements.png" alt="Elemen-elemen Layout pada
Dokumen Web" width="270" height="219" align="absbottom"></div>
<div id="box-model">
<div id="properti-height-dan-width"></div>
</div>
<div id="pembuatan-grid"> </div>
</div>
<div id="col7">
<p>
<a href="aaa1.html">HOME</a> <span>|</span>
<a href="aaa.html">PROFILE</a> <span>|</span>
<a href="aa.html">ARTICLES</a> <span>|</span>
<a href="#">CONTACT </a>
</p>
<p> © PTI C-2013. All Rights Reserved. Designed by
david eka kristianto. </a></p>
<script type="text/javascript">
</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
width: 60%;
margin: 0 auto;
text-align: left;
}
float: left;
width: 12em;
padding: 0px 0px;
}

margin-left: 10px;
margin-right: 10px;
}
font: sans-serif;
background: #000;
padding: 0 0px;
}
color:#FFF;
font:Verdana;
font-size:50px;
margin: 0;
padding: 10px 0;
}
margin:auto;
background:#FFF;
}
padding: 0 10px;
background:#000;
color:#FF0;
}
text-align:center;
margin: 0;
padding: 10px 0;
}
.social ul li a { float:left; display:inline; width:16px;
height:16px; background:url('social.gif') no-repeat 0 0; fontsize: 0; line-height: 0; text-indent: -4000px; }
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; }

</style>
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.

Revisi Web Modul 3 Grid

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Revisi Web Modul 3 Grid

Diunggah oleh

Hak Cipta:

Format Tersedia

REVISI

LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

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

<input type="submit" value="GO!"

<li><a href="#">Modul CSS</a></li>

<td bgcolor="#FFFFFF"><span id="one-columnemphasis">S1 Pendidikan Teknik Informatika</span></td>

<li><a href="#">PTI c 2013</a></li>

<li><a href="#">Modul CSS</a></li>

.twoColHybLtHdr #col4 h3, .twoColHybLtHdr #col4 p {

#sub-col5 ul li a:hover { color:#F00; }

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

Anda mungkin juga menyukai