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
samalmantap ini infonya....posting pada :2013-08-29 22:06:08
ZuhryAda yang lebih akurat gaxposting pada :2013-11-28 22:49:04
AdminTutorial lainnya silahkan dibaca disini : http://media-kreatif.com/home/post/category/8/html-xhtml.prmposting pada :2013-11-28 22:53:32
NifranAku jadi semakin ngerti tantang css,, mantap potingnya,,makasihposting pada :2013-12-26 17:16:56
arumSiiiip......mudah dimengerti ganposting pada :2014-02-25 10:48:15
Dada MiradaThanks gan ane lagi mulai belajar ini , tapi bisa juga menggunakan tabel untuk membuat layoutposting pada :2014-03-17 16:44:12
Afahrurroji | TutorialMantap gan, penjelasan yang sederhana dan mudah untuk dimengerti. makasih sudah berbagi.posting pada :2014-11-10 06:13:24
Kedai Ace MaxsThanks guys artikelnya :)posting pada :2015-03-05 09:23:51
rizkyterimakasih atas ilmunyaposting pada :2015-04-13 08:01:42
anikenapa saya tidak bisa ya? tolong bantu posting pada :2016-05-11 17:07:22
RahmaTerimakasih, ini sangat membantuposting pada :2016-08-10 20:23:59
vitalokaThanks guys artikelnya :)posting pada :2016-12-28 16:03:34
Zona Outbound IndonesiaMasih bingung euyyy...posting pada :2017-02-19 22:37:03
young lexnama asli young lexposting pada :2017-10-17 13:03:25
         
     
         
 
         
   
         
   
 

Tulis komentar