Dalam
proses belajar HTML, proese membuat tampilan pada sebuah halaman
(layout) web/blog adalah sangat penting hukumnya bagi anda yang sedang
belajar dalam pembuatan sebuah web/blog.
berikut adalah contoh tampilan (layout) HTML sederhana dengan kolaborasi style (CSS)
"Tenang saja kita akan belajar css pada bab-bab selanjutnya"
Tampilan ( Layout) dengan kolaborasi Tabel
pada contoh ini kita akan menggunakan kolaborasi tabel pada tampilan layout, perhatikan contoh
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>
Cobalah Sendiri »
Maka akan tampak seperti di bawah ini :
Tampilan (Layout) dengan kolaborasi element DIV
Elemen div merupakan tingkat blok elemen yang digunakan untuk mengelompokkan elemen HTML.
Contoh
berikut menggunakan lima elemen div untuk membuat tata letak kolom, dan
menciptakan hasil yang sama seperti pada contoh di atas 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>
Cobalah Sendiri »
maka akan tampak seperti ini :
0 komentar:
Posting Komentar