Cara membuat Layout (Tata Letak) Website dengan HTML
Layout pada halaman web sangat penting untuk membuat website sobat terlihat lebih bagus. Dalam merancang Layout untuk halaman web, sobat 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>. Pada umumnya CSS juga 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;">Isi Artikel Sobat Disini</td></tr><tr><td colspan = "2" style = "background-color:#33cccc; text-align:center;">created by @ beyblogdesign</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 | Isi Artikel Sobat Disini |
| created by @ beyblogdesign | |
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>Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :
<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;">Isi Artikel Sobat Disini</div>
<div id = "footer" style = "background-color:33cccc; clear:both; text-align:center;">created by @ beyblogdesign</>div
</div>
</body>
</html>
Judul Pada Halaman Web
Isi Artikel Sobat Disini
Sampai disini dulu postingan saya untuk kali ini, terimakasih.
