HTML - Tata Letak
Tata letak halaman web sangat penting untuk memberikan tampilan yang lebih baik ke situs web Anda. Butuh banyak waktu untuk mendesain tata letak situs web dengan tampilan dan nuansa yang bagus.
Sekarang-a-hari, semua situs web modern menggunakan kerangka kerja berbasis CSS dan JavaScript untuk menghasilkan situs web yang responsif dan dinamis tetapi Anda dapat membuat tata letak yang baik menggunakan tabel HTML sederhana atau tag divisi yang dikombinasikan dengan tag pemformatan lainnya. Bab ini akan memberi Anda beberapa contoh tentang cara membuat tata letak yang sederhana namun berfungsi untuk halaman web Anda menggunakan HTML murni dan atributnya.
Tata Letak HTML - Menggunakan Tabel
Cara paling sederhana dan paling populer untuk membuat tata letak adalah menggunakan tag HTML <table>. Tabel ini disusun dalam kolom dan baris, sehingga Anda dapat memanfaatkan baris dan kolom ini sesuka Anda.
Contoh
Misalnya, contoh tata letak HTML berikut dibuat menggunakan tabel dengan 3 baris dan 2 kolom tetapi kolom header dan footer mencakup kedua kolom menggunakan atribut colspan -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tata Letak Beberapa Kolom - Menggunakan Tabel
Anda dapat mendesain halaman web Anda untuk menempatkan konten web Anda di beberapa halaman. Anda dapat menyimpan konten Anda di kolom tengah dan Anda dapat menggunakan kolom kiri untuk menggunakan menu dan kolom kanan dapat digunakan untuk memasang iklan atau beberapa hal lainnya. Tata letak ini akan sangat mirip dengan yang kita miliki di situs web tutorialspoint.com.
Contoh
Berikut adalah contoh untuk membuat tata letak tiga kolom -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tata Letak HTML - Menggunakan DIV, SPAN
Elemen <div> adalah elemen level blok yang digunakan untuk mengelompokkan elemen HTML. Meskipun tag <div> adalah elemen level blok, elemen HTML <span> digunakan untuk mengelompokkan elemen pada level sebaris.
Meskipun kita dapat mencapai tata letak yang cukup bagus dengan tabel HTML, tetapi tabel tidak benar-benar dirancang sebagai alat tata letak. Tabel lebih cocok untuk menyajikan data tabular.
Note - Contoh ini menggunakan Cascading Style Sheet (CSS), jadi sebelum memahami contoh ini, Anda harus memiliki pemahaman yang lebih baik tentang cara kerja CSS.
Contoh
Di sini kita akan mencoba untuk mencapai hasil yang sama menggunakan tag <div> bersama dengan CSS, apapun yang telah Anda capai dengan menggunakan tag <table> pada contoh sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Anda dapat membuat tata letak yang lebih baik menggunakan DIV, SPAN bersama dengan CSS. Untuk informasi lebih lanjut tentang CSS, silakan lihat Tutorial CSS.