Cara Membuat Layouts di HTML

Cara Membuat Layouts di HTML

http://moodle.gprc.ab.ca/file.php/712/multimedia_2.jpg

Cara Membuat Layouts di HTML - Dari Judulnya aja udah lumayan gampang tapi kalau di kerjakan sudah lumayan susah,maka mari kita bahas di sini oke langsung aja pembahasanya :

Web Layouts

Kebanyakan website telah menempatkan konten mereka di beberapa kolom (diformat seperti majalah atau koran).
Beberapa kolom diciptakan dengan menggunakan tag table atau <div>. Beberapa CSS biasanya juga ditambahkan ke posisi elemen, atau untuk membuat latar belakang atau warna-warni tampilan untuk halaman.

HTML Layouts - Menggunakan Tabel

Cara paling mudah untuk menciptakan layout adalah dengan menggunakan tag table HTML.
Contoh berikut menggunakan tabel dengan 3 baris dan 2 kolom - baris pertama dan terakhir meliputi kedua kolom menggunakan atribut colspan:

<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:black;">
<font face=Arial color=white size=8><center> Echo Indo</center></font>
</td>
</tr>

<tr valign="top">
<td style="background-color:white;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:black;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:white;text-align:center;">
Copyright © 2012 Echo Indo Weblog</td>
</tr>
</table>

</body>
</html>

Maka hasilnya akan seperti berikut :

Menggunakan Elemen Div

Elemen div adalah tingkat blok elemen yang digunakan untuk mengelompokkan elemen HTML.
Contoh berikut ini menggunakan lima elemen div untuk membuat tata letak kolom ganda, menciptakan hasil yang sama seperti pada contoh sebelumnya:

<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:white;">
<h1 style="margin-bottom:0;"><center>Echo Indo Weblog<center></h1></div>

<div id="menu" style="background-color:white;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:black;height:200px;width:400px;float:left;"><font color=white><center>
http://newbie-programer.blogspot.com</center></font></div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2012 Echo Indo Weblog</div>

</div>

</body>
</html>

Maka hasilnya akan seperti ini :

HTML Layout - Tips Berguna

Tip: Keuntungan terbesar menggunakan CSS adalah bahwa, jika Anda menempatkan kode CSS dalam sebuah style sheet eksternal, situs Anda menjadi Jauh Lebih Mudah untuk mempertahankan. Anda dapat mengubah layout semua halaman Anda dengan mengedit satu file.

Tip: Karena layout canggih membutuhkan waktu untuk membuat, pilihan yang lebih cepat adalah dengan menggunakan template. Pencarian Google untuk website template gratis (ini adalah layout situs pre-built Anda dapat menggunakan dan menyesuaikan).