Sekarang kita akan belajar membuat suatu halaman HTML mengunakan fungsi CSS tersebut...
Tampilan halaman HTML yang telah saya buat yaitu :
CSS Script untuk tampilan diatas yaitu :
#wrapper {
margin: auto;
width: 900px;
border: 1px solid red;
background: #FEABAB;
}
#header {
height: 80px;
border: 1px solid red;
margin: 7px 0 0 0;
repeat: x;
background: url(back.png);
}
#logo {
height: 70px;
width: 70px;
margin: 5px 0 0 20px;
float: left;
}
#textheader {
height: 70px;
width: 500px;
margin: 5px 20px 0 0;
float: left;
font-size : 20px;
font-color : white;
}
#buttonsearch {
float: right;
margin : 30px 0 0 0;
width: 50px;
height : 30px;
border : 1px solid orange;
}
#fieldsearch {
float: right;
margin : 30px 50px 0 0;
width: 150px;
height : 30px;
border : 2px solid black;
}
#button {
float: right;
cursor: pointer;
font-size: 10px;
font-weight: bold;
height: 30px;
margin: 0 0 0 7px;
text-align: center;
vertical-align: bottom;
white-space: pre;
width: 50px;
}
#text{
border: 1px solid #ffffff;
color: #000000;
font-size: 13px;
font-variant: normal;
height: 25px;
line-height: normal;
width: 148px;
}
#menuheader ul {
float: right;
width: 250px;
margin: 0;
padding: 0 27px 0 0;
list-style: none;
}
#menuheader ul li a{
float: left;
width: 45px;
font-size: 10px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #00034b;
border-right: 1px solid #5f3b11;
}
#inner{
float: left;
width : 900px;
height : auto;
margin:5px 0;
border: 1px solid red;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid white;
background: white;
}
#leftmenu ul {
width: 180px;
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: #FF8B8B no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #FF1F1F no-repeat left center; color: #ffffff
}
#inner1{
float: left;
width: 685px;
height: auto;
margin-left : 5px;
border: 1px solid red;
}
#top{
float: left;
width: 683px;
height: 100px;
border: 1px solid red;
}
#maincontent {
float: left;
width: 500px;
height: 225px;
border: 1px solid red;
background: white;
}
#right{
float : right;
width: 175px;
height: 150px;
border: 1px solid red;
background: #FF8B8B;
}
#footer {
clear: both;
height: 50px;
border: 3px solid white;
font-size : 10px;
}
HTML Script untuk tampilan diatas yaitu :
<!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>Halaman Web 2</title>
<link rel="stylesheet" href="gaya2.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="garuda.png" width="70" height="70"></img>
</div>
<div id="textheader">
<h2> I LOVE REPLUBIK INDONESIA</h2>
</div>
<div id="menuheader">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#Situs_Map">Situs Map</a></li>
<li><a href="#RSS">RSS</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About_US">About Us</a></li>
</ul>
</div>
<div id="fieldsearch">
<input type="text" name="q" size="10" id="text" title="searchfield" />
</div>
<div id="buttonsearch">
<input type="submit" name="Search" value="Search" alt="Search" id="button" title="Search" />
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</div>
<div id="inner1">
<div id="top">
<img src="sawah.jpg" width="200" height="98" align="left"></img>
<img src="bali.jpg" width="200" height="98" align="left"></img>
<img src="visit.jpg" width="283" height="98" align="left"></img>
</div>
<div id="maincontent">
<h1> VISIT INDONESIA YEAR 2010</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="right">
Hot Event
<ul>
<li><a href="#">Sail Bunaken</a></li>
<li><a href="#">Larung Sembonyo</a></li>
<li><a href="#">Java jazz Festival</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p align="center"> copyright 2010 by ratna </p>
</div>
</div>
</body>
</html>
Selamat mencoba...
Semoga bermanfaat..^_^
0 komentar:
Posting Komentar