css
body {margin: 10px auto;
width: 750px;
}
header, nav, section, content, footer, article, aside, huruf,logo {
display:block;
border:1px solid Blue;
}
header {
background-image:url(hd.jpg);
height:80px;
border:1px solid green;
}
nav {
background-color: #AFEEEE;
height:30px;
}
article{
float: left;
border: 3px solid Black;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
margin-right: 1px;
height: 400px;
width: 250px;
}
teksemail{
float:left;
width:80px;
height:20px;
border:px ;
}
aside{
float: right;
border: px ;
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
height: 250px;
width: 485px;
}
event {
background-color: #AFEEEE;
float: right;
border: px ;
margin-right: 1px;
margin-left: 1px;
margin-top: 1px;
margin-bottom: 1px;
height: 150px;
width: 485px;
}
section {
border: px ;
margin-left: px;
width:600;
height:410px;
}
#huruf{
margin-top: 25px;
margin-left: 20px;
color: white;
font-size: 30px;
float:left;
font-weight:bold;
}
footer{
clear:both;
background-image:url(Footer.jpg);
border:1px solid green;
height:20px;
}
#logo{
margin-left: 20px;
float:left;
height:80;
width:80;
}
#box_search {
margin-top: 10x;
margin-left: 10px;
float: left;
}
#text{
Float:left;
margin-top:2px;
Color: Blue;
size: 9;
}
#footer2{
margin-top: 1px;
margin-bottom: 1px;
color:white;
}
#formHome{
float:right;
margin-left:8px;
width:50px;
color: white;
height:20px;
border:px ;
background-color:#3D59AB ;
}
#formnews{
float:right;
width:100px;
color: white;
margin-left: 8px;
height:20px;
background-color: #3D59AB;
border:px ;
}
li{color: blue;}
ul{color: blue;}
#formtutorial{
float:right;
margin-left: 8px;
width:60px;
height:20px;
color: white;
border:px ;
background-color: #3D59AB;
}
#formtips{
float:right;
margin-left: 8px;
width:90px;
color: white;
height:20px;
border:px ;
background-color:#3D59AB;
}
#formdownload{
float:right;
margin-left: 8px;
width:75px;
height:20px;
color: white;
border:px ;
background-color: #3D59AB;
}
html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Powered By Rantnrave Vorkro 13</title>
<link rel="Shortcut icon" href="Indonesia.png">
<link rel="stylesheet" href="mypratikum.css" type="text/css" />
</head>
<body>
<header>
<div id="logo"><img src="Logo.png" height= "80" width="80"/></div>
<div id="huruf">TEKNIK ELEKTRO PTI UM 209533421967</div>
</header>
<nav>
<div id="text">Search</div>
<div id="box_search"><input type="text"/><td></div>
<font color="white">
<input type="submit" Value="Downloads" id="formdownload">
<input type="submit" Value="Tips & Tricks"id="formtips">
<input type="submit" Value="Tutorial"id="formtutorial">
<input type="submit" Value="News & Media" id="formnews">
<div id="formHome">
<input type="submit" Value="Home" id="formHome">
</font>
</nav>
<section>
<aside>
One of the most annoying things I have noticed with personal computers is the noticeable drop off in speed and performance as the system gets older. When I first buy the system or when I have freshly installed Windows the whole system seems to zip along, programs open faster the system starts up faster. A few months of hard use later and I get more and more frustrated, I am forced to wait for everything as my PC grinds along apparently making hard work of the smallest task.
</aside>
<article>
<img src="FElic.jpg" height="400" width="250">
</article>
<event>
<font color="#royal_blue">Events: </font>
<ul>
<li><a href="#Jalan-Jalan Malam">Jalan-Jalan Malam</a></li>
<li><a href="#Praktek Industri">Praktek Industri</a></li>
<li><a href="#Ngeband">Ngeband 'Summertime'</a></li>
</ul>
</event>
</section>
<footer>
<div id="footer2" align="center">
Home|News&Media|Tutorial|tips & Tricks|Downloads
</div>
</footer>
</body>
</html>
Tidak ada komentar:
Posting Komentar