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 :
Judul Pada Halaman Web
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
Tidak ada komentar:
Posting Komentar