Tata letak halaman web adalah sangat penting untuk membuat website Anda terlihat baik. Desain tata letak halaman web Anda haruslah menarik.
Situs Layouts :
Kebanyakan website telah menempatkan konten mereka di beberapa kolom (diformat seperti majalah atau koran).
Beberapa kolom dibuat dengan menggunakan tag table atau <div>. Beberapa CSS biasanya juga ditambahkan unsur-unsur posisi, atau untuk membuat latar belakang atau melihat warna-warni untuk halaman.
HTML Layouts - Menggunakan Tabel :
Cara paling sederhana adalah dengan menciptakan layout menggunakan tag HTML <table>.
Contoh berikut menggunakan tabel dengan 3 baris dan 2 kolom - baris pertama dan terakhir meliputi kedua kolom menggunakan atribut colspan :
Contoh :
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>
</body>
</html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>
</body>
</html>
Kode HTML di atas akan menghasilkan hasil sebagai berikut :
HTML Layouts - Menggunakan Elemen Div :
Elemen div merupakan tingkat blok elemen yang digunakan untuk mengelompokkan elemen HTML.Contoh berikut menggunakan lima elemen div untuk membuat tata letak kolom ganda, menciptakan hasil yang sama seperti pada contoh sebelumnya.
Contoh :
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>
</div>
</body>
</html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>
</div>
</body>
</html>
Kode HTML di atas akan menghasilkan hasil sebagai berikut :
HTML Tags Tata Letak :
0 comments:
Post a Comment