hasil ini kita bisa peroleh dengan membuat linked css dan html.
berikut merupakan scrip css yang saya beri nama popy.css :
#wrapper {
margin: auto;
width: 1000px;
background-color:#00FFFF;
padding: 5px 2px 5px 2px;
}
#header {
height: 100px;
background-color:#00000B;
}
#header1 {
height: 20px;
text-align:right;
padding-right: 10px;
color:#000000;
}
#header2 {
height: 35px;
color:#FF0;
}
#header3 {
height: 25px;
text-align:right;
color:#00FFFF;
padding-right: 10px;
}
#inner {
margin:auto;
}
#sidebar {
float: left;
width: 200px;
height: 400px;
background-color:#00007F;
}
#top {
float: right;
width:800px;
height: 400px;
}
#content {
height: 100px;
}
#isi {
float: left;
width: 580px;
padding-left: 10px;
height: 300px;
background-color:#FFF5EE;
}
#info {
float: right;
width: 200px;
height: 300px;
padding-left: 10px;
background-color:#666;
}
#footer {
clear: both;
height: 50px;
color:#FFF;
background-color:#00C;
}
#leftmenu ul {
width: 200px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #0FF no-repeat left center;
margin: 0px 0px 1px; color: #000;
}
#leftmenu a:hover {
background: #0F0 no-repeat left center; color: #FFF;
}
dan berikut scrip htmlnya yang saya kasih nama popy.html :
<!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>Tugas2 Desain Layout Sederhana</title>
<link rel="stylesheet" href="desain.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="popy.jpg" width="104" height="97" align="left" />
<div id="header1">Home | RSS | Contact | About Me</div>
<div id="header2">
<h1>popy cahya h </h1>
</div>
<div id="header3">Search
<input type="text" />
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><strong><a href="#">Profil</a></strong></li>
<li><strong><a href="#">Photo</a></strong></li>
<li><strong><a href="#">About Me</a></strong></li>
<li><strong><a href="#">News</a></strong></li>
</ul>
</div>
</div>
<div id="top">
<div id="content"><img src="cahya.jpg" width="800" height="102" /></div>
<div id="isi">
<h2>stack</h2>
<p><br />
Stack atau tumpukan adalah suatu stuktur data yang penting dalam pemrograman, dimana stack bersifat LIFO (Last In First Out) yang dimana suatu benda yang masuk pertama kali akan dikeluarkan paling akhir. Contohnya antara lain : Suatu kerupuk yang dimasukan didalam sebuah kerodong yang pertama diambil adalah kerupuk yang dimasukkan paling akhir.</p>
<p>2010</p>
</div>
<div id="info">
<p><strong>cetak/ekspor
</strong>
<ul>
<li>Untuk Buku</li>
<li>Sebagai PDF</li>
<li>Versi Cetak</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p align="center">
© 2010 Popy_cahya_h@yahoo.co.id
</div>
</div>
</body>
</html>
slamat mencoba........
Tidak ada komentar:
Posting Komentar