Page layout dan template HTML

Kamu bisa membuat layout web HTML dengan membagi-bagi document HTML dengan tag <div> atau dengan cara membagi-bagi dan membentuk web page dengan table. Sebuah table bisa dipakai untuk menyimpan element apapun termasuk table yang dengan cara ini kamu bisa membentuk sebuah web page.

Standard layout

Biasanya layout web berbasis HTML yang sering kita lihat terdiri dari beberapa element yaitu banner disebelah atas, dibawahnya ada navigation di sebelah kiri dan di kanannya baru content. Lihat contoh di bawah.

Code basic layout 1:

<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" id="shell" height="250" width="400">
<tr height="50">
<td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>banner di sebelah atas</td></tr>
</table>
</td>
</tr>
<tr height="200">
<td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr><td>HTML</td></tr>
<tr><td>CSS</td></tr>
<tr><td>Javascript</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td>Content artikel di sebelah sini</td></tr>
</table>
</td>
</tr>
</table>

Hasil basic layout 1:

Content artikel di sebelah sini

Code basic layout 2:

<table id="shell" title="Shell" height="250" width="400"
border="0" bgcolor="black" cellspacing="1" cellpadding="0">
<tr height="50">
<td bgcolor="white">
<table title="banner" id="banner">
<tr><td>banner di sebelah atas</td></tr>
</table>
</td>
</tr>
<tr height="25">
<td bgcolor="white">
<table title="Navigation" id="navigation">
<tr><td>HTML</td>
<td>CSS</td>
<td>Javascript</td></tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="white">
<table title="Content" id="content">
<tr>
<td>Content artikel di sebelah sini</td>
</tr>
</table>
</td>
</tr>
</table>

Hasil basic layout 2:

Content artikel di sebelah sini

Layout yang bukan menggunakan table melainkan <div> tag bisa kamu lihat dibawah.

Code basic layout 3:

<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Title bisa kamu taruh di sini</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 artikel sebelah sini</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © bangjuju.com</div>
</div>
</body>
</html>

Hasil basic layout 3:

Content artikel sebelah sini

One Response to “Page layout dan template HTML”

  1. Andang says:

    #tanya bang juju, kalau mau membuat link target ke content itu gimana ya? trims.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>