VISITOR

21 April 2013

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>
<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>
 Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :

Isi Artikel Sobat Disini

Sampai disini dulu postingan saya untuk kali ini!!!!enjoyyyyyy

5 komentar:

  1. keren boss, update terus ya boss. Salam.

    BalasHapus
  2. keren bos, ane baru paham untuk membuat layout web pake html ini :D

    BalasHapus

Beri komentar Sobat untuk memperbaiki kekurangan dan kesalahan pada Blog ini dengan bahasa dan etika yang benar!!!! terima kasih