ini css-nya :
body {
margin: 10px auto;
width: 800px;
}
header,nav,section,footer {
display:block;
}
header {
height:70px;
width:800px;
background-image:url(header.gif);
}
nav{
float:left;
width:800px;
height:40px;
background:red;
}
section{
float:left;
width:800px;
height:517px;
}
sidebar {
float:left;
height:505px;
width:255px;
border:6px solid black;
}
sidebar2 {
float: right;
height:358px;
width:532px;
background:black;
}
sidebar3 {
float: right;
height:159px;
width:532px;
background:red;
}
footer {
width:800px;
clear:both;
height:38px;
background:black;
}
ul {
margin:0;
padding:0;
list-style: none;
}
ul li {
position: relative;
float: right;
width:65px;
}
li ul {
position: absolute;
top: 1px;
display: none;
}
ul li a {
display: block;
text-decoration:none;
line-height:2px;
color:red;
padding:7px;
background:black;
margin:1px 1px;
}
ini html-nya :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>>> Halla <<</title>
<link rel="stylesheet" href="style.css" type=text/css />
</head>
<body>
<header>
</header>
<nav>
<font size="3" face="cambria"><div align="center">
<ul id="nav">
<li><a href="">photos</a></li>
<li><a href="">tips</a></li>
<li><a href="">tutorial</a></li>
<li><a href="">news</a></li>
<li><a href="">home</a></li>
</ul>
<font color = "solid blue" SIZE="4" face="cambria">
<div align="left">
search
<input type=”search” name=”search” size="20" width="15">
</nav>
<section>
<sidebar>
<img src="12.jpg">
</sidebar>
<sidebar2>
<font color = "red" SIZE="2" face="cambria">
<br>
pesona cintamu menjamah jiwaku semoga kilau ini abadi untuk selamanya gelora selalu
ku mau terbang dan tenggelam menjalani semua ini reguklah nafasku resapi denyutnya
bawalah diri ini ke alam cinta nan abadi sambutlah kekasih
<br>
<br>pesona cintamu menjamah jiwaku semoga kilau ini abadi untuk selamanya gelora selalu
ku mau terbang dan tenggelam menjalani semua ini reguklah nafasku resapi denyutnya
bawalah diri ini ke alam cinta nan abadi sambutlah kekasih
<br>
<br>pesona cintamu menjamah jiwaku semoga kilau ini abadi untuk selamanya gelora selalu
ku mau terbang dan tenggelam menjalani semua ini reguklah nafasku resapi denyutnya
bawalah diri ini ke alam cinta nan abadi sambutlah kekasih
<br>-by : netral-
</sidebar2>
<sidebar3>
<font color = "black" SIZE="4" face="cambria">
<br> --> kunjungi & follow ™
<font color = "black" SIZE="3" face="cambria">
<br><br><a href="http://www.facebook.com/"> Halla Puspaning Palupi</a>
<br><a href="http://vitrolic11.blogspot.com/"> vitrolic11.blogspot.com</a>
<br><a href="http://vitrolic11@yahoo.com/"> vitrolic11@yahoo.com</a>
</sidebar3>
</section>
<footer>
<font color = "white" SIZE="2" face="cambria"><div align="center">
Home | News dan Media | Tutorial | Tips dan Trik | Downloads
<br><font color = "red" SIZE="3" face="cambria"><div align="center">
™ Halla Puspaning Palupi - 209533421944 ™
</footer>
</body>
</html>
Tugas Rumah_modul4
Studi Kasus_modul 4
ini css-nya :
body {
margin: 10px auto;
width: 750px;
}
header{
border:1px solid green;
height: 80px;
}
nav {
border:1px solid blue;
height:20px;
}
section{
padding:15px;
border:1px solid red;
height:370px;
}
article{
float:left;
border:2px dashed red;
height:340px;
width:550px;}
aside{
float:right;
border:2px dashed black;
height:340px;
width:150px;
}
footer{
border:1px solid green;
height:20px;
}
ini html-nya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<link rel="stylesheet" href="SK.css" type="text/css"/>
<head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
FACE_MU Halla
<!DOCTYPE html>
<html lang="en">
<head>
<title>HallaPuspaningPalupi Face-mu</title>
<body background="bg.jpg">
<style type="text/css">
<!--
.bag1 {
float: left;
width: 1300px;
heigt: 700px;
background: #333fff;
border: 1px solid #333fff;
}
.bag2 {
float: left;
padding: 10px;
width: 1300px;
heigt: 50px;
}
-->
</style>
</head>
<body>
<div class="bag1">
<table border=0 align="left" cellspacing=0 cellpadding=0>
<!-- Header -->
<tr>
<th width="210" colspan=2></th>
<th width="7100" rowspan=3 colspan=2 align="left"><img src="facemu.png"></th>
<th width="210" align="left" colspan=2><font color="white" face="arial" size="2">Email:</font></th>
<th width="210" align="left" colspan=2><font color="white" face="arial" size="2">Password:</font></th>
<th width="210" colspan=2></th>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="210" align="left" colspan=2><input type="text" /></td>
<td width="210" align="left" colspan=2><input type="text" /></td>
<td width="210" colspan=2><input type="submit" value="Masuk" /></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="210" align="left" colspan=2><font color="white" face="arial" size="1"><input type="checkbox" />Biarkan saya tetap masuk</td>
<td width="210" align="left" colspan=2><font color="white" face="arial" size="1">Lupa kata sandi anda?</td>
<td width="210" colspan=2></td>
</tr>
</table>
</div>
<br/>
<br/><br/><br/>
<div class="bag2">
<table border=0 align="left" cellspacing=0 cellpadding=0>
<!-- Header -->
<tr>
<td width="210" colspan=2></td>
<td width="710" rowspan=13 colspan=2><font color="#333fff" face="arial" size="4" align="left">
Face-mu membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda di Indonesia.
<br/><br/><br/><img src = "gambarku.jpg" width="600" height="300">
</font></td>
<td width="110" colspan=2></td>
<td width="610" align="left" colspan=2><font color="#333fff" face="arial" size="5">Mendaftar</font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="610" align="left" colspan=2><font color="#333fff" face="arial" size="3">Gratis, sampai kapanpun</font><hr align="left" width=60% color="#333fff"/></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Nama Depan</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Nama Belakang</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Email Anda</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Masukan Ulang Email</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Kata Sandi Baru</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<input type="text"/></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Saya Seorang</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<select name="jk">
<option>Laki-Laki</option>
<option>Perempuan</option>
</select></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140" align="left"><font color="#333fff" face="arial" size="1">Saya Seorang</td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">:<select name="tgl">
<option>01</option><option>02</option><option>03</option>
<option>04</option>05<option>06</option><option>07</option><option>08</option>
</select>
<select name="bln">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option><option>April</option><option>Mei</option>
</select>
<select name="thn">
<option>1991</option>
<option>1992</option>
<option>1993</option><option>1995</option><option>1996</option>
</select>
</font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140"></td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1">Mengapa saya perlu mengisinya?</font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="140"></td>
<td width="440" align="left"><font color="#333fff" face="arial" size="1"><input type="submit" value="Mendaftar"></font></td>
</tr>
<tr>
<td width="210" colspan=2></td>
<td width="110" colspan=2></td>
<td width="610" align="left" colspan=2><hr color="#333fff" width=60% align="left"/><font color="#333fff" face="arial" size="1">Buat halaman</font>
<font color="black" face="arial" size="1">untuk selebritis, group musik, atau bisnis</font></td>
</tr>
</table>
</div>
<br/>
<br/><br/><br/><br/>
<div class="bag1" align="right">
Face-mu 2011 © HallaPuspaningPalupi
</div>
</body>
</html>
Grafik Berbasis Tabel_modul 2
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Grafik Berbasis Tabel_halla</title>
</head>
<font color="white">
<body bgcolor="brown">
<body>
<table width="700" border="0" align="left">
<tr>
<caption><b><p> PERBANDINGAN FITUR <p></caption>
</tr>
<!--Mengatur Tabel-->
<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>
<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<!--Baris data pertama-->
<tr>
<td width="25" align="center">1</td>
<td width="150">Garansi seumur hidup</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>
<!--Baris data kedua-->
<tr>
<td width="25" align="center">2</td>
<td width="150">Multiuser</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>
<!--Baris data ketiga-->
<tr>
<td width="25" align="center">3</td>
<td width="150">Update otomatis</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>
<!--Baris data keempat-->
<tr>
<td width="25" align="center">4</td>
<td width="150">Cetak laporan</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<!--Baris data kelima-->
<tr>
<td width="25" align="center">5</td>
<td width="150">Notifikasi error</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr
<!--Baris data keenam-->
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td width="25" align="center">6</td>
<td width="150">Ubah tema</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<!--Baris data ketujuh-->
<tr>
<td width="25" align="center">7</td>
<td width="150">Try icon</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
<body background="haha.jpg">
</table>
</body>
</html>
Grafik Batang Berbasis Tabel_modul 2
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>
<head>
<title>Grafik batang_halla</title>
</head>
<font color="red">
<body bgcolor="black">
<br></br>
<hr align="left" width="800" color="orange"></hr>
<table width="600" border="0">
<tr><td width="400"><strong><b>Perusahaan</strong></td></b>
<td width="400"><strong><b>Pendapatan</strong></td></tr></b>
</table>
<hr align="left" width="800" color="pink"/>
<table width="600" border="0">
<tr><td width="175">Angin Reboot Ltd</td>
<td width="175" colspan=3></td>
<td width="175" colspan=2 bgcolor="purple"></td>
<td width="175">+150%</td></tr>
<tr><td width="175">Command Prompt, Inc</td>
<td width="175" colspan=3></td>
<td width="75" bgcolor="green"></td>
<td width="100">+55%</td>
<td width="175"></td></tr>
<tr><td width="175">Hibernate Ltd</td>
<td width="75"></td>
<td width="50" align="right">-23%</td>
<td width="50" bgcolor="blue"></td>
<td width="350" colspan=3></td></tr>
<tr><td width="175">Shutdown Ltd</td>
<td width="75" align="right">-75%</td>
<td width="100" colspan=2 bgcolor="yellow"></td>
<td width="350" colspan=3></td></tr>
</table>
<hr align="left" width="800" color="blue"/>
<img src="a.gif">
</body>
</html>
