Step by step membuat layout header dengan TAG DIV dan CSS

Bagi para pemula dalam bidang website, biasanya akan membuat layout website dengan menggunakan TAG TABLE , karena pembuatan layout website dengan TAG TABLE sangat mudah di lakukan terutama dengan bantuan software seperti Macromedia Dreamweaver. Akan tetapi metode design dengan menggunakan table saat ini sudah di tinggalkan dan mengarah pada penggunaan TAG DIV dan tentunya dengan CSS.

 

Jika kita hendak membuat layout bagian header sebuah halaman website, berikut langkah - langkah praktis yang bisa penulis sajikan untuk anda.

1. Buat bagian html dan simpan dengan nama layout.html

		<html>
			<head>
				<title>membuat layout header</title>
			</head>
			<body>
				<div id="header">
				
				</div>
			</body>
		</html>
	

2. Membuat script CSS untuk mengatur TAG DIV

		#header{
			font:normal 12px Tahoma,Verdana; /* Setting umum font pada bagian header */
			width:900px; /* Digunakan untuk mengatur lebar header */
			height:400px; /* Digunakan untuk mengatur tinggi header */
			margin-left:auto; /* Digunakan untuk mengatur jarak header dengan tepian layar secara otomatis */
			margin-right:auto; /* Sehingga tampilan header website akan berada tepat di tengah-tengah layar monitor */
			background-color:#ff9900; /*Menambahkan background warna pada header */
		}
	

Setelah membuat script CSS tersebut, simpanlah dengan nama style.css , kemudian linkkan dengan script html yang telah kita buat di atas dengan perintah berikut

		<link rel="stylesheet" href="style.css" type="text/css" />
	

Script diatas biasanya kita tempatkan diantara <head> dan </head>, supaya bisa di load terlebih dahulu pada saat halaman web dibuka

Jika semua sudah di jalankan dengan benar, cobalah jalankan layout.html dengan cara double klik, maka kita akan melihat posisi layout bagian header berada tepat ditengah layar

Cara diatas bisa diterapkan juga untuk membuat layout bagian tengah website,selamat mecoba dan semoga tulisan ini bermanfaat buat pembaca sekalian

 

Salam kreatif

 

 


Komentar pembaca

gitamantap gan nice share, di lanjutkan ya divnya, ane lagi mempelajari .^^posting pada :2012-04-10 20:14:24
Hendri PermanaTerimakasih banyak atas Ilmu nyaposting pada :2012-05-03 11:21:59
Nanang GunawanNice Post gan :)posting pada :2012-05-11 23:39:16
Adi SaputraKeren Gan,.,. thanks share nya,.,posting pada :2012-05-22 18:46:08
goyang pattah pattahwah ini cocok bgt buat saya yang gi belajar web, dah saya coba n berhasil sob, n ini gi coba modifikasi sob :)posting pada :2012-05-31 01:30:50
dabllinksangat bermanfaat sobat...terimakasih :) update terus sob...posting pada :2012-06-12 01:49:09
agusthanks a lot gan, biasanya aku juga binggung klo mau membuat body ke tengah-tengah layar monitor ternyata caranya gni.di lanjut ganposting pada :2012-06-18 13:16:29
wiwidane pake untuk belajar membuat website di sekolah ane gan thanks for sharenyaposting pada :2012-10-05 08:10:18
zulthnaks infonyaposting pada :2012-11-19 19:44:50

Tulis komentar

 




Today
Yesterday
All visitor

Pelatihan Website bersama Media Kreatif Indonesia

laboratorium Komputer dan teknology Kampus I ITN Malang 2013-07-09 08:00:00
 

Pelatihan Sistem Informasi

SMK Negeri 1 Lumajang 2013-05-01 12:00:00
 

Bakti sosial Teknik Kimia

Panti Asuhan Miftahul Huda II 2013-03-26 11:00:00
 

Bagaiamana metode pengajaran teknology yang paling efektif menurut anda ?

Beli buku, kemudian mempelajari sambil praktek
Mengikuti kursus sesuai bidang teknology
Belajar sendiri secara otodidak
Belajar dari contoh - contoh aplikasi yang sudah jadi
Belajar dari contoh - contoh yang paling sederhana
Semua pilihan benar