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
2. Membuat script CSS untuk mengatur TAG DIV
Setelah membuat script CSS tersebut, simpanlah dengan nama style.css , kemudian linkkan dengan script html yang telah kita buat di atas dengan perintah berikut
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.
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.
