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 :
bagus,tapi setelah dicoba gambarnya gak muncul.yg muncul cuma teksnya aja.TEKNIK ELEKTRO
BalasHapusProgram Studi Pendidikan Teknik Informatika.buka pke browser mozilla dan crome hasilnya tetap sama.
cara meletakkan posisi gambar dimana c mbak?tlg pencerahanya,