SINTAS CSS nya :
#wrapper {
margin: auto;
width: 850px;
border: px #5e9711 solid;
}
header,nav,section,footer{
display:block;
border:1px solid pink;
}
#header {
height: 110px;
border-bottom: red solid;
border-top: red solid;
background-color:pink;
}
nav{
height:40px;
background-color:red;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position:relative;
float:left;
width: 100px;
}
li ul{
position: absolute;
top: 30px;
display: none;
}
ul li{
display: block;
text-decoration: none;
line-height: 20px;
color:#000;
font-weight: bold;
padding: 5px;
background-color:pink;
margin: 0 2px;
}
ul li a:haver {background: #66F;}
li:hover ul,li.over ul {display:block;}
#top_menu {
float:right;
width:100%;
font-size:80%; color: #fff;
border: 0px solid red;
}
#top_menu a { color: #fff; }
#header_h {
float:left;
padding: 0px 0;
width:100%;
border:0px solid red; }
#htop_right {
float:right;
padding-top: 35px;
padding-right: 2px;
width:300px;
height: 5px;
text-align: right; }
#h_logo {
float:left; margin:0px 5px 5px 30px; height:30px;
}
#h_font{float:left; padding:0px 10px; height:30px; margin:5px 0px; font:30px 'Verdana'; font-weight: bold;}
#inner {
float: left;
margin: 0 0;
}
#top{
float: left;
height: 80px;
width: 617px;
background:url(top1.jpg)left;
}
#content {
float: left;
width: 400px;
height: 300px;
}
section{
height:600px;
}
#article{
float:left;
margin: 10px;
border:2px dashed green;
}
#arside{
float:right;
margin: 10px;
width: 570px;
height: 580px;
border:2px dashed green;
}
sidebar {
float: right;
width: 580px;
height: 100px;
border: 2px solid pink;
background-color:red;
font : 100%; color :red;
}
#footer {
clear: both;
height: 50px;
font: center;
border-bottom: 2px solid pink;
background-color:red;
}
}
SINTAKS UNTUK HTML NYA :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum</title>
<link rel="stylesheet" href= "tugaspraktikum.css" type=text/css />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="top_menu">
</div>
<div id="header_h">
<div id="h_logo">
<img src="uu.png" border ="0" alt="um" />
</div>
<div id="h_font">
<font color="red"> <font face = "PAPYRUS"> LELA'S HOME PAGE</br>
</div>
<div id="htop_right">
<form action="" method="get">
Search <input type="text" name="q" size="20" value=""/>
</form>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<nav>
<ul id="nav">
<li><a href="">HOME</a></li>
<li><a href="">MY PROFILE</a>
<ul>
<li><a href="">EDIT PROFILE</a></li>
<li><a href="">UPLOAD</a></li>
</ul>
</li>
<li><a href="">MOVIE</a>
<ul>
<li><a href="">HOROR</a></li>
<li><a href="">ACTION</a></li>
<li><a href="">ROMANTIC</a></li>
<li><a href="">COMEDY</a></li>
</ul>
</li>
<li><a href="">MUSIC</a>
<ul>
<li><a href="">POP</a></li>
<li><a href="">ROCK</a></li>
<li><a href="">JAZZ</a></li>
<li><a href="">DANGDUT</a></li>
<li><a href="">KERONCONG</a></li>
</ul>
</li>
<li><a href="">STORY</a>
<ul>
<li><a href="">LOVE STORY</a></li>
<li><a href="">SAD STORY</a></li>
<li><a href="">FUN STORY</a></li>
</ul>
</li>
</ul>
<li><a href="">DOWNLOAD</a></li>
</nav>
</ul>
</div>
</div>
<section>
<div id="article">
<img src = "aku.jpg" height = "575" width="227"/>
</div>
<div id="left">
</div>
<div id="arside">
<font color="red"> <h1 align="center"><font face = "Palatino Linotype"> Fall For You </br><h1/>
<br>The best thing about tonight’s that we’re not fighting
<br>Could it be that we have been this way before
<br>I know you don’t think that I am trying
<br>I know you’re wearing thin down to the core
<p>
<br>But hold your breathe
<br>Because tonight will be the night
<br>That I will fall for you
<br>Over again
<br>Don’t make me change my mind
<br>Or I won’t live to see another day
<br>I swear it’s true,
<br>Because a girl like you is impossible to find
<br>You’re impossible to find
</div>
</section>
<sidebar>
EVENT :
<u1>
<li style="font-color:red">
<a href="#">HOME</a></li>
<li><a href="#">DOWNLOAD MUSIK</a></li>
<li><a href="#">DOWNLOAD MOVIE</a></li>
</u1>
</sidebar>
<div id="footer" align="center">
<font color="pink"> <h1> LELA ANDRIA FINATA / S1 PENDIDIKAN TEKNIK INFORMATIKA - 2009 </h1></font>
</div>
<div id="top">
</div>
<div id="content">
</div>
<div id="right">
</div>
</div>
</div>
</body>
</html>
