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
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> Cendana </center></font>
</td>
</tr>
<tr valign="top">
<td style="background-color:gray;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;"><font color=white><center>
This here content<br>
http://cendana25.blogspot.co.id/
</center></font></td>
</tr>
<tr>
<td colspan="2" style="background-color:gray;text-align:center;">
Copyright © 2016 cendana weblog</td>
</tr>
</table>
</body>
</html>
Maka hasilnya seperti berikut :
- Menggunakan Elemen Div
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:blue;">
<font color=white><center>
<h1 style="margin-bottom:0;"><center>Cendana Weblog<center></h1></div>
</center></font>
<div id="menu" style="background-color:gray;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>
This here Content <br>
http://cendana25.blogspot.co.id/</center></font></div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2016 Cendana 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 dapatmenggunakan dan menyesuaikan).
Sekian dari pembahasan Cara Membuat Layouts di HTML semoga berguna untuk semuanya Terima Kasih
Referensi
No comments:
Post a Comment