Cara Membuat Layout (Tata Letak) Halaman Website dengan HTML
Layout pada halaman web sangat penting untuk membuat website supaya terlihat lebih bagus. Dalam merancang Layout untuk halaman web, harus ekstra hati-hati. Pada umumnya website berisikan berbagai kolom (seperti format pada majalah atau koran), untuk membuat berbagai kolom dibutuhkan tag <table> atau tag <div>.
CSS juga sering ditambahkan untuk merubah posisi elemen atau membuat background, bisa juga untuk mempercantik tampilan halaman web. Dibawah ini adalah contoh dari pembuatan Layout menggunakan tag <table> dan tag <div>.
Contoh pembuatan Layout dengan menggunakan tag <table>
Cara sederhana untuk membuat Layout dengan menggunakan tag <table> pada HTML adalah sebagai berikut :
<html>
<body>
<table width = "500" border = "0">
<tr>
<td colspan = "2" style = "background-color:#00ffff;">
<h1>Judul Pada Halaman Web</h1>
</td>
</tr>
<tr>
<tr valign = "top"><td style = "background-color:#680000; width:100px; text-align:top;">
<b>Daftar Isi</b><br/>
HTML<br/>
XHTML<br/>
CSS<br/>
Java Script</td>
<td style = "background-color:#b0b0b0; height:200px; width:400px; text-align:top;">
Masukan Artikel nya Disini</td>
</tr>
<tr>
<td colspan = "2" style = "background-color:#33cccc; text-align:center;">created by @ mm-stm webdesign</td>
</tr>
</body>
</html>
Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :
Judul Pada Halaman Web
|
Daftar Isi
HTML
XHTML
CSS
Java Script |
Masukan Artikel nya Disini |
created by @ mm-stm webdesign |
Contoh pembuatan Layout dengan menggunakan elemen <div>
elemen div adalah elemenblock level yang digunakan untuk mengelompokan elemen-elemen HTML. Perhatikan contoh penggunaan elemen <div> dibawah ini:
<html>
<body>
<div id = "container" style = "width:500px">
<div id = "header" style = "background-color:#00ffff;">
<h1 style = "margin-bottom:0;">Judul Pada Halaman Web</h1>
</div>
<div id = "menu" style = "background-color:#680000; height:200px; width:100px; float:left;">
<b>Daftar Isi</b><br/>
HTML<br/>
XHTML<br/>
CSS<br/>
Java Script</div>
<div id = "content" style = "background-color:#B0B0B0; height:200px; width:400px; float:left;">Masukan Artikel nya Disini</div>
<div id = "footer" style = "background-color:33cccc; clear:both; text-align:center;">created by @ mm-stm webdesign
</div>
</body>
</html>
Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :
Masukan Artikel nya Disini
Sampai disini dulu postingan saya untuk kali ini
Sumber: http://beyblogdesign.blogspot.com/2013/04/cara-membuat-layout-tata-letak-website.html