Header pada website merupakan penunjuk identitas sebuah website. Header juga bisa digunakan sebagai alat promosi, dengan mencantumkan bidang usaha, kantor-kantor cabang, bank-bank langganannya, alamat, dan nomor alat komunikasi seperti telepon atau fax. Unsur-unsur yang ada pada header web antara lain :
- Unsur utama : Nama indentitas, alamat lengkap, dan nomor telepon.
- Unsur tambahan : Logo/simbol, gambar hiasan/tema, slogan, judul utama dari web, atau gambaran tentang isi yang terkandung dalam web.
Membuat sebuah header web tidaklah susah, karena yang terpenting adalah unsur utama yang ada pada header tersebut. Berikut ini adalah contoh header yang ada pada website :
header.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Studi Kasus 2</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<title>Studi Kasus 2</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu" align="right">
Home | Sitemap | RSS | Contact | About Us
<div id="search">
<td>Search <input type="text" /></td>
</div>
</div> <div id="logo">
</div> <div id="TE">
TEKNIK ELEKTRO
</div>
</div>
</div>
</body>
</html>
styles.css
#wrapper {
margin:auto;
width:auto;
background-image: url(Gradien.jpg);
}
#header {
height:100px;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #333333;
}
#menu {
float:right;
margin-right:50px;
width:250px;
height:30px;
font-family: Arial;
font-size: 12px;
}
#logo {
float:left;
margin-left:50px;
width:100px;
height:100px;
background-image: url(UM.png);
background-repeat: no-repeat;
}
#TE {
float:left;
margin-top:30px;
width:320px;
font-family: Arial;
font-size: 36px;
font-weight: bold;
color: #000099;
}
#search {
float:right;
margin-top:53px;
width:210px;
height:20px;
}
Hasil tampilannya adalah seperti berikut :
Contoh di atas merupakan contoh header sederhana, masih ada contoh-contoh header yang lebih menarik lagi yang dapat ditemui pada website yang ada di internet. Semakin menarik header sebuah website, semakin memberi kesan profesional pada pengunjung yang membuka website tersebut.
Keep Fighting Spirit On The Fire...
0 komentar:
Posting Komentar