GORESAN TINTA EMAS: Membuat Header Sederhana

Tahukah anda gimana cara membuat header sederhana? Mari kita belajar bersama cara membuat header sederhana dengan memanfaatkan division. Pendekatan yang efektif untuk memformat elemen-elemen HTML termasuk juga division adalah dengan menggunakan CSS. langkah pertama dalam membuat header adalah mendefinisikan atribut-atribut yang akan dipakai dan disimpan dengan format .css... nantinya file ini akan dipanggil untuk mengambil atribut-atribut yang telah dibuat. Berikut ini adalah contoh pembuatan atribut : #templatemo_menu_panel{ width: 1260px; height: 70px; repeat: x; background: url(back.png)} #templatemo_menu_section ul { float: right; width: 400px; margin: 0; padding: 0 50px 0 0; list-style: none; } #templatemo_menu_section ul li a{ float: left; width: 70px; padding: 0px 0; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; color: #00034b; border-right: 1px solid #5f3b11; } #searchfield{ border: 1px solid #ffffff; color: #000000; font-size: 13px; font-variant: normal; height: 15px; line-height: normal; width: 150px; } #searchbutton{ float: right; cursor: pointer; font-size: 12px; font-weight: bold; height: 20px; margin: 0 0 0 7px; text-align: center; vertical-align: bottom; white-space: pre; width: 66px; } #boxImage{ float: left; padding: 10px; width: 200px; height: 70px; } #boxText{ float: left; padding: 10px 0 0 0px; width: 400px; height: 0px; font-size: 30px; font-weight: bold; text-align: left; color: blue; } #boxButton{ float: right; padding: 20px 0 0 0; width: 70px; height: 35px; } #boxTF{ float: right; padding: 20px 85px 0 0; width: 170px; height: 35px;} langkah berikutnya adalah membuat file utama dengan format .html. Berikut ini adalah source code yang digunakan dalam membuat header sederhana: <!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>Header</title> <link href="elektro.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="templatemo_menu_panel"> <div id="boxImage" align="right"> <img src="um.png" height="50" width="50"/> </div> <div id="templatemo_menu_section"> <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="boxText"> TEKNIK ELEKTRO </div> <div id="boxTF"> <input type="text" name="q" size="10" id="searchfield" title="searchfield" /> </div> <div id="boxButton"> <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" /> </div> </div> </body> </html> Sekian tutorial singkat membuat header sederhana semoga bermanfaat...

GORESAN TINTA EMAS

Membuat Header Sederhana

0 komentar:

Posting Komentar

Chat

Visitors

About Me

Categories

Google Friends Connect

Friends Links

Facebook Badge

Downloads

Followers

Links

Rank

Page Rank

Buku

UM Blogger

Iklan

Page Popularity

Blog Visitor

MyBlogLog

Kumpul Blogger

Uang Panas