Layout HTML
Agar lebih sukses, sebuah situs web harus memiliki lay-out yang bagus. Situs web ini tidak terlihat bagus karena semua kerja keras dan waktu yang diinvestasikan di dalamnya. Dalam bab ini, Anda akan menemukan beberapa tips untuk membuat tata letak yang sederhana namun berfungsi untuk situs web Anda
Layout HTML Menggunakan Tabel
Cara paling sederhana dan paling populer untuk membuat tata letak adalah menggunakan tag HTML <tabel>. Tabel ini disusun dalam kolom dan baris, sehingga Anda dapat menggunakan baris dan kolom ini dengan cara apa pun yang Anda suka.
Contoh:
<!DOCTYPE html> <html> <head> <title> Layout HTML Menggunakan Tabel </title> </head> <body> <center> <table width = "80%" border = "0"> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <h1>Ini adalah Judul Utama Halaman Web</h1> </td> </tr> <tr valign = "top"> <td bgcolor = "#aaa" width = "50"> <b>Menu Utama</b><br /><br /> <a href="#">HTML</a><br /><br /> <a href="#">PHP</a><br /><br /> <a href="#">PERL...</a> </td> <td bgcolor = "#eee" width = "100" height = "200"> Catatan Digital AK </td> </tr> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <center> Copyright © 2007 aguskuswanto.web.id </center> </td> </tr> </table></center> </body> </html>
Berikut adalah tampilannya
Ini adalah Judul Utama Halaman Web |
|
| Menu UtamaHTML | Catatan Digital AK |
Copyright © 2007 aguskuswanto.web.id |
|
Tata Letak Beberapa Kolom – Menggunakan Tabel
Anda dapat merancang halaman web untuk menempatkan konten web Anda di beberapa halaman. Anda dapat menyimpan konten di kolom tengah dan Anda dapat menggunakan kolom kiri untuk menggunakan menu dan kolom kanan dapat digunakan untuk memasang iklan atau beberapa hal lainnya.
Contoh:
Berikut adalah contoh untuk membuat tata letak tiga kolom
<!DOCTYPE html> <html> <head> <title>Tata Letak HTML Tiga Kolom</title> </head> <body> <center> <table width = "80%" border = "0"> <tr valign = "top"> <td bgcolor = "#aaa" width = "20%"> <b>Menu Utama</b><br /><br /> <a href="#">HTML</a><br /><br /> <a href="#">PHP</a><br /><br /> <a href="#">PERL...</a> </td> <td bgcolor = "#b5dcb3" height = "200" width = "60%"> Catatan Digital AK </td> <td bgcolor = "#aaa" width = "20%"> <b>Menu Kanan</b><br /><br /> <a href="#">CSS</a><br /><br /> <a href="#">Bootstrap</a><br /><br /> <a href="#">Mysql</a> </td> </tr> <table></center> </body> </html>
Tampilannya akan seperti ini:
| Menu UtamaHTML | Catatan Digital AK | Menu KananCSS |
Demikian untuk membuat layout HTML menggunakan Tabel. Semoga bermanfat
