cara membuat layout web dengan html

Membuat Layout dari sebuah halaman web sangat diperlukan sebagai visualisasi konsep dari tampilan final website yang akan dibangun.

Layout merupakan pemetaan & peletakan konten pada website yang di bagi menjadi beberapa bagian.

Kebanyakan website membagi konsep Layout nya ke dalam beberapa kolom yang dapat dibuat menggunakan:

—TABLE, menggunakan tag <table> … </table>

—LAYER, menggunakan tag <div>… </div>

Cara paling sederhana membuat layout HTML adalah dengan menggunakan Table (Tag <table>…</table>) dengan memanfaatkan colspan/rowspan dari tiap – tiap kolom yang dibutuhkan.

Gunakan ukuran presentasi untuk lebar dari Table agar tampilan Web Proporsional.

—Contoh: <table width=“100%”> …

—

Gunakan Table sebagai layouting dasar (header,maincontent,footer,dll), sementara isi dari tiap2 layouting dasar tersebut bisa berupa HTML ataupun table lagi.

HTML Layout #4

<table border=”1″ cellpadding=”5″ cellspacing=”0″ width=”100%”>
<tr>
<td colspan=”2″>HEADER</td>
</tr>
<tr>
<td width=”30%” valign=”top”>SIDEBAR</td>
<td valign=”top”>MAINCONTENT<br /><br /><br /><br /></td>
</tr>
<tr>
<td colspan=”2″>FOOTER</td>
</tr>
</table>
Gambar :

HTML Layout dengan Layer

Layer merupakan layouting yang terdiri dari blok – blok element. Dimana di dalam setiap blok tersebut dapat berisi HTML sesuai dengan kebutuhan.

Layer Menggunakan Tag <div> … </div> untuk mendefinisikan blok element dimana perilaku dari div tersebut diatur sepenuhnya oleh CSS, sehingga dapat dikatakan Layouting menggunakan Layer sangat tergantung/dipengaruhi oleh CSS.

HTML Layout #4 dengan Layer

<div id=”container”>
<div id=”header”>HEADER</div>
<div id=”sidebar”>SIDEBAR</div>
<div id=”maincontent”>MAINCONTENT</div>
<div id=”footer”>FOOTER</div>
</div>
</body>
Gambar :

• HTML DOCTYPES

DOCTYPE atau Document Type Definition (DTD) merupakan spesifikasi aturan untuk tag markup yang digunakan dalam sebuah halaman web.

Sebuah deklarasi DOCTYPE mengacu pada aturan untuk bahasa markup, sehingga browser dapat menampilkan konten dengan benar sesuai DOCTYPE nya.

DOCTYPE bukanlah sebuah tag HTML, melainkan sebuah instruksi kepada browser yang akan me-render- halaman web tersebut.

Deklarasi DOCTYPE harus diletakkan pada halaman awal dari HTML.

  ditulis oleh : taufik asikin