HTML Dasar
HTML Menengah
HTML Mahir
HTML Referensi
HTML Contoh
HTML Resources

HTML Layout


HTML Layout

Sangat penting bagi anda untuk memberikan tampilan yang menarik bagi halaman website anda.

Dalam mendesain sebuah web layout anda bisa menggunakan tiga metode :

  • Menggunakan elemen table 
  • Menggunakan elemen div dan span

Table Layout


Penggunaan tabel sebagai layout merupakan metode pembuatan layout yang paling awal.

Menggunakan elemen table sebagai layout merupakan cara yang kurang tepat, sebab table dibuat dengan tujuan untuk menampilkan data tabular.

Contoh :

Judul utama dari website anda

Menu Utama
HTML
CSS
PHP...
Isi / content
www.codingku.com

source-code :

Codingku HTML Editori
<table width="100%" border="0">
<tr>
<td colspan="2" style="background-color:#CC99FF;">
<h1>Judul utama dari website anda</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFCCFF;
width:100px;text-align:top;">
<b>Menu Utama</b><br>
HTML<br>
CSS<br>
PHP...
</td>
<td style="background-color:#eeeeee;height:200px;
width:300px;text-align:top;">
Isi / content
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#CC99FF;">
<center>
www.codingku.com</center></td></tr>
</table>
Coba sendiri »


Div & Span Layout

  • Elemen div adalah termasuk block level element.
  • Elemen div bisa mengandung banyak elemen2 HTML lain di dalamnya.
  • Desain layout menggunakan div digunakan pada banyak desain halaman web pada masa sekarang.

contoh :
Judul utama halaman web ini
Menu Utama
HTML
PHP
PERL...
Isi / content
Copyright © 2012 www.codingku.com

source code :

Codingku HTML Editori
<div style="width:100%">
<div style="background-color:#CC99FF;">
<b style="font-size:150%">Judul utama halaman web ini</b>
</div>
<div style="background-color:#FFCCFF;
height:200px;width:100px;float:left;">
<b>Menu Utama</b><br />
HTML<br />
PHP<br />
PERL...
</div>
<div style="background-color:#eeeeee;
height:200px;width:300px;float:left;">
Isi / content
</div>
<div style="background-color:#CC99FF;clear:both">
<center>
Copyright © 2012 www.codingku.com
</center>
</div>
</div>
Coba sendiri »


Mohon bantu share :



Situs ini masih dalam versi beta, artinya masih dalam proses pengembangan baik dari segi bug maupun isi yg kurang lengkap. Silahkan melihat-lihat yang sudah ada sementara ini, tiap hari kami akan berusaha untuk melengkapi kekurangannya...




Codingku adalah situs yang diperuntukan bagi orang-orang yang ingin belajar, mencoba dan berlatih.
Contoh-contoh disederhanakan untuk meningkatkan dasar kemampuan membaca dan pemahaman. Isi, tutorial, referensi dan contoh-contoh diperiksa secara berkala untuk menghindari kesalahan.
Kami tidak dapat memberikan garansi bahwasanya semua isi yang terdapat di dalam situs codingku adalah benar.
Dengan menggunakan situs ini, berarti anda telah membaca dan menerima kesepakatan dari kami.

UUD 45 buah buahan hotel fluid in knee