Cara Bikin Website
 / Membuat Layout

Suryaning Bawono   / 17 - 01 - 2015, Banyuwangi,Jawa Timur


Membuat Layout dalam html ada dua pilihan utama yaitu Membuat Layout dengan table dan Div. Untuk tingkat dasar,kita belajar membuat layout menggunakan tabel terlebih dahulu, setelah memahami style dan css ditingkat intermediet kita belajar membuat layout dengan div, karena membuat layout dengan div membutuhkan pemahaman yang baik tentang css dan style.
Dalam membuat layout dengan table,kita mengatur layout menggunakan kode <tr> dan <td> serta colspan dan rowspan. Sebagai contoh kita membuat layout sebagai berikut:


Contoh Kode:

<!doctype html>
<html>
<head>
<title>Belajar Bikin website</title>
</head>
<body>
<table width="100%" border="1"> <tr>
<td colspan="2"><img src="image/sampelheader.jpg" width="100%"></td>
</tr>
<tr>
<td width ="20%">
Menu </br>
<a href="#"> menu 1 </a> <br>
<a href="#"> menu 1 </a> <br>
<a href="#"> menu 1 </a> <br>
<a href="#"> menu 1 </a> <br>
<a href="#"> menu 1 </a> <br>

</td>
<td rowspan="2" width="80%">
<center><h1>Judul Konten </h1>
<img src="image/contohgambar.jpg" width="50%"> </center><br>
<p align="justify"> Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten </p>
<center>
<img src="image/contohgambar.jpg" width="50%"> </center><br>
<p align="justify"> Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten Artikel konten </p>
</td>
</tr>
<tr>
<td width="20%">
<img src="image/contohgambar1.jpg" width="100%">
</td>
</tr">
<tr>
<td colspan ="2"> <center> Ini Footer </center> </td>
</tr>
</table>
</body>
</html>


Contoh Tampilan pada text editor, (Saya menggunakan Notepad sebagai Text Editor)


Tampilan Pada Browser :