Cara membuat Layout (Tata Letak) Halaman Website pada HTML

Layout pada halaman web sangat penting untuk membuat website agan terlihat lebih bagus. Dalam merancang Layout untuk halaman web, agan harus ekstra hati-hati. Pada umumnya website berisikan berbagai kolom  (seperti format pada majalah atau koran), untuk membuat berbagai kolom dibutuhkan tag <table> atau tag <div>. Pada umumnya CSS juga ditambahkan untuk merubah posisi elemen atau membuat background, bisa juga untuk mempercantik tampilan halaman web. Dibawah ini adalah contoh dari pembuatan Layout menggunakan tag <table> dan tag <div>.

Contoh pembuatan Layout dengan menggunakan tag <table>

cara sederhana untuk membuat Layout dengan menggunakan tag <table> pada HTML adalah sebagai berikut :

<html>
<title> Contoh membuat Layout pada Halaman Website </title>
<body>
<table width = “500” border = “0”>
<tr>
<td colspan = “2” style = “background-color:#C0C0C0;”>
<h1>Judul Halaman-nya</h1>
</td>
</tr>
<tr>
<tr valign = “top”><td style = “background-color:#C0C0C0; width:100px; text-align:top;”>
<b>Home</b><br/>
Profile<br/>
Gallery<br/>
Buku Tamu<br/>
</td>
<td style = “background-color:#C0C0C0; height:200px; width:400px; text-align:top;”>
Isikan Artikelnya disini gan :)</td>
</tr>
<tr>
<td colspan = “2” style = “background-color:#C0C0C0; text-align:center;”>Created by raka-sharing</td>
</tr>
</body>

</html>

 maka setelah dibuat script diatas, akan menjadi seperti ini :

Tinggal agan kreasikan / kembangkan scriptnya sendiri 🙂

Terimakasih.

Leave a Reply

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