Untuk dapat membuat halaman web seperti di atas code CSS-nya adalah
#wrapper {
margin: auto;
width: 997px;
border: 0;
}
#header {
height: 120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('header.jpg');
}
#header1 {
height: 28px;
border: 1px solid orange;
margin-bottom:2px;
background:orange url('headerbottom.jpg');
}
#Logo {
float: left;
height: 80px;
width:237px;
margin-top:20px;
margin-left:20px;
border: 0;
background:red url('logo2.jpg');
}
#isi {
float: right;
height: 120px;
width:400px;
border: 0;
}
#menu {
float: left;
height: 25px;
width:700px;
margin-left:2px;
margin-top:2px;
border: 0;
}
#search {
clear:both;
float: right;
height: 20px;
width:250px;
margin-top:120px;
margin-right:30px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:50px;
margin-left:10px;
margin-top:5px;
border: 0;
}
#search2 {
float: right;
height: 17px;
width:90px;
margin-right:65px;
margin-top:4px;
border: 0;
background:white;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: right;
margin-right: 0px;
width: 250px;
height:420px;
border: 1px solid blue;
background:blue url('Sidebar.jpg');
}
#Inner2 {
float: left;
width: 742px;
height: 420px;
border: 1px solid blue;
}
#top{
height: 80px;
border: 0;
background:blue url('kotak.jpg');
}
#content {
float: left;
margin-top:10px;
margin-right:10px;
margin-left:15px;
width: 452px;
height: 323px;
border: 0;
}
#right {
float: left;
width: 250px;
height: 200px;
margin-top:30px;
border: 1px solid white;
background:blue url('LOGOBRI.jpg');
}
#identitas {
float: left;
width: 250px;
height: 100px;
margin-top:40px;
border: 0;
list-style-position:inside;
}
#footer {
clear: both;
height: 80px;
border: 1px solid blue;
background:blue url('footer.jpg');
}
#copy {
float: left;
width: 500px;
height: 25px;
margin-top:2px;
margin-left:30px;
border: 0;
list-style-position:inside;
}
.style2 {
font-size: 24px;
font-weight: bold;
color: #000099;
}
.style3 {
color: #0000CC;
font-weight: bold;
}
.style4 {
font-family: "Times New Roman", Times, serif;
font-size: xx-large;
color: #FFFFFF;
font-weight: bold;
}
.style6 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
.style7 {color: blue}
.style8 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
.style10 {
color: #FFFFFF; font-size: 12px;
}
.style11 {
color: #000066;
font-weight: bold;
}
.style12 {
font-family: "Calibri", Times, serif;
font-size: 12px;
color: black;
}
#rightmenu ul {
width: 250px;
list-style-type:none;
padding:0; margin:0;
}
#rightmenu a:link, #rightmenu a:visited, #rightmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#rightmenu a {
padding: 5px 0px 5px 15px; display: block;
background: blue url('button.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#rightmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}
Sedangkan untuk code html-nya adalah
<!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>Desain Halaman Web BRI</title>
<link rel="stylesheet" href="styleMod3.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="Logo">
</div>
<div id="isi">
<div id="search">
<div class="style7" id="search1">
<div align="right"><strong>
Search
</strong></div>
</div>
<div id="search2">
<input type="text" name="search2" id="search3" width="80px" />
</div>
</div>
</div>
</div>
<div id="header1">
<div class="style6" id="menu">
<div align="left" class="style7"><a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html" target="_blank" class="style7">Tentang Kami</a> | <a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html" target="_blank" class="style7">Berita</a> | <a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html" target="_blank" class="style7">Jasa dan Layanan</a> | <a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html" target="_blank" class="style7">Hubungan Investor</a> | <a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html" target="_blank" class="style7">Hubungi Kami</a> </div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="rightmenu">
<ul>
<li>
<div align="center"><a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html">Visi dan Misi</a></div>
</li>
<li>
<div align="center"><a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html">Sejarah</a></div>
</li>
<li>
<div align="center"><a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html">Manajemen</a></div>
</li>
<li>
<div align="center"><a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html">Agenda</a></div>
</li>
<li>
<div align="center"><a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html">Karir</a></div>
</li>
</ul>
</div>
</div>
<div id="Inner2">
<div id="top">
</div>
<div id="content">
<p class="style2">Bank Rakyat Indonesia</p>
<p class="style3">Bank Rakyat Indonesia (BRI) adalah salah satu bank milik pemerintah yang
terbesar di Indonesia. Pada awalnya Bank Rakyat Indonesia (BRI) didirikan di Purwokerto,
Jawa Tengah oleh Raden Bei Aria Wirjaatmadja dengan nama Hulp-en Spaarbank der Inlandsche
Bestuurs Ambtenaren atau Bank Bantuan dan Simpanan Milik Kaum Priyayi yang berkebangsaan
Indonesia (pribumi). Berdiri tanggal 16 Desember 1895, yang kemudian dijadikan sebagai hari kelahiran BRI.
</p>
</div>
<div id="right">
</div>
<div id="identitas">
<div align="center" class="style11"><u>Ni'mah Faadlilah<br/>107533407699<br/>Pendidikan Teknik Informatika</u>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="copy">
<p class="style12">Copyright © 2010 Ni'mah Faadlilah. All Rights Reserved. | <a href="http://localhost/Tugas2Modul3/Tugas2Modul3.html">Peta Situs</a>
</div>
</div>
</body>
</html>
0 komentar:
Posting Komentar