BELAJAR CODE HTML LAYOUT

                                                CARA MEMBUAT TATA LETAK (LAYOUT)


Oc kita lanjut .....x ini TP akan share tentang buat tata letak dengan elemen <div>...

Tempat Pencarian

Menu

Nasi goreng

Lontong Sayur

Pecel

SELAMAT MENIKMATI
Somoga anda menikmati apa yang telah kami hidangkan

copyright (C) tempat-pencarian.blogspot.com

ini menggunakan elemen <div> ini kodenya :...



<div id="continer" style="width: 500px;">

<div id="header" style="background-color: orange;">
<h1 style="margin-bottom: 0;">
Tempat Pencarian</h1>
</div>
<div id="Menu" style="background-color: yellow; float: left; height: 200px; width: 100px;">
<b>Menu</b>

Nasi goreng

Lontong Sayur

Pecel</div>
<div id="content" style="background-color: white; float: left; height: 200px; text-align: center; width: 400px;">
SELAMAT MENIKMATI
Somoga anda menikmati apa yang telah kami hidangkan

</div>
<div id="footer" style="background-color: orange; clear: both; text-align: center;">
copyright (C) tempat-pencarian.blogspot.com</div>

Sesuaikan lebar dan panjangnya............( px ) pixel.


Di bawah ini menggunakan elemen table, contoh :

Tempat Pencarian
MENU Kopi Susu juice	Minum cepetan ntar keburu dingin loooh...
Copyright (c) tempat-pencarian.blogspot.com

ini kodenya :


<table border="0" style="width: 500px;"><tbody>
<tr> <td colspan="2" style="background-color: blue;">
<h1>
Tempat Pencarian</h1>
</td> </tr>
<tr> <td style="background-color: powderblue; text-align: top; width: 100px;">
<b>MENU</b>

Kopi

Susu

juice</td> <td style="background-color: white; height: 200px; text-align: top; width: 400px;">Minum cepetan ntar keburu dingin loooh...</td></tr>
<tr> <td colspan="2" style="background-color: blue; text-align: center;">Copyright (c)tempat-pencarian.blogspot.com</td></tr>
</tbody></table>

Sesuaikan lebar dan panjangnya......(px) pixel. sekian dulu moga bermanfaat.

TANKS BEFORE