RSS

Membuat Header Web sederhana

04 Mar

Header web sederhana, seperti gambar di bawah ini:

Ini dapat dilakukan dengan menggunakan css code

* { margin: 0; }

body { margin:5px auto; padding:0; font:0.72em/150% Arial; }

#wrapper { margin:auto; width:980px;}

#header { height:80px; margin:0px auto;background:#000;}

#header-content{height:70px; margin:auto; background:blue;}

#menu-top { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold;}

#logo { float:left; margin:10px 10px 10px 50px; height:50px;}

#site-title h1{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% ‘Arial’; font-weight: bold;}

#search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;}

Sedangkan untuk kode HTML-nya:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”en” xml:lang=”en”>

<head>

<title>In Case</title>

<link type=”text/css” rel=”stylesheet” href=”csscoba.css” />

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<div id=”header-content”>

<div id=”menu-top”>

Home | Sitemap | RSS | Contact | About Us

</div>

<div id=”logo”>

<img src=”UMLogo.jpg” width=”60″/>

</div>

<div id=”site-title”>

<h1>TEKNIK ELEKTRO</h1>

</div>

<div id=”search”>

Search : <input name=”q” size=”20″ type=”text”/>

</div>

</div>

</div>

</div>

Advertisements
 
2 Comments

Posted by on March 4, 2010 in PTI478

 

2 responses to “Membuat Header Web sederhana

  1. haryononthoboga

    October 22, 2014 at 7:22 pm

    kalo yang blog ini pake kode seperti diatas ga’ gan?

     
    • rokhimatul

      October 28, 2014 at 8:37 am

      Engga. Hehehe. Blog ini mah udah pake template udah jadi *malu*

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
The Way I Am

Live everyday as if it was your last

Some Good Eats

Eat and don't worry about it

Anggriani

Bacalah! Tulislah !

Padepokan Budi Rahardjo

belajar untuk menjadi manusia ...

Catatanku

Ini adalah album yang berisi catatan yang saya tulis dalam perjalanan waktu hidup. Catatan yang terinspirasi dari apa yang saya lihat, saya baca, saya dengar, dan saya rasakan.

Catatan Bang Akrie

Simplicity.Humble.Joyfull

%d bloggers like this: