>>>>>Welcome to AreBeat's Blog<<<<<<

..........Semoga blog ini dapat bermanfaat sebagaimana mestinya........

Jumat, 05 Maret 2010

Membuat Header Web sederhana

Nah sekarang kita akan membuat sebuah header sederhana pada web menggunakan atau memanfaatkan CSS.
Tulis source code berikut ini ya….!!!!
<!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>display</title>
<style type="text/css" >
<!--
.box1 {
color: #0c0cbe;
margin: 50px;
padding-left: 250px;
font-weight: bold;
font-style: Arial;
}
#header{
background-image: url(back.jpg);
background-repeat: repeat-x;
width: 100%;
position: absolute;
}
#menu li {
display: inline;
}
#menu a {
float: right;
margin-right: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color:#FFFFFF;
padding:5px;
}
#menu a:hover, #menu .current_page_item a {
color:#0000CC;
}
#search{
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
float: right;
-->
</style>
</head>

<body>
<div id="header">
<ul id="menu">
<li>
<a href="aboutus.html">About Us</a>
<a href="contact.html">Contact |</a>
<a href="#">RSS |</a>
<a href="#">Sitemap |</a>
<a href="index.html"> Home |</a></li>
</ul>
<div class="box1">
<h1>TEKNIK ELEKTRO</h1>
<p>Program Studi Pendidikan Teknik Informatika
<div id="search"><form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield" />
</label>
</form></div>
</div>
</div>
</body>
</html>

maka akan tampil seperti ini :

1 komentar:

  1. bagus,tapi setelah dicoba gambarnya gak muncul.yg muncul cuma teksnya aja.TEKNIK ELEKTRO
    Program Studi Pendidikan Teknik Informatika.buka pke browser mozilla dan crome hasilnya tetap sama.
    cara meletakkan posisi gambar dimana c mbak?tlg pencerahanya,

    BalasHapus

Follow Me