27 Desember 2012
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
1
2
3
4
5
6
7
8
9
10
11
| <html> <head> <title>membuat layout header</title> </head> <body> <div id="header"> </div> </body></html> |
2. Membuat script CSS untuk mengatur TAG DIV
1
2
3
4
5
6
7
8
9
| #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
1
2
| <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
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
1
2
3
4
5
6
7
8
9
10
11
| <html> <head> <title>membuat layout header</title> </head> <body> <div id="header"> </div> </body></html> |
2. Membuat script CSS untuk mengatur TAG DIV
1
2
3
4
5
6
7
8
9
| #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
1
2
| <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
Langganan:
Postingan (Atom)