Cara Membuat Layout Dengan Menggunakan Tabel di HTML

By | Januari 13, 2019
0 Comment

Apa itu Layout ?

Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Layout biasanya terdapat pada sebuah halaman web seperti blogger atau akun google. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi lebih komunikatif.

Fungsi layout adalah :

  1. untuk menambah halaman
  2. menduplikat halaman
  3. mengubah nama halaman
  4. mengahapus halaman
  5. melangkah ke halaman selanjutnya
  6. mengubah orientasi halaman “ dari portrait ke landscape / sebaliknya
  7. mewarnai halaman dengan warna solid/gambar

Baca Juga: Bentuk Form Pada HTML

Untuk membuat sebuah layout, kita bisa menggunakan notepad sebagai media untuk menuliskan tag yang di gunakan , tag tersebut adalah sebagai berikut

contoh sintak :

<table style="width:100%;border:0;" border="0">
<tr>
<td colspan="2" style="background-color:yellow;">kepala</td>
</tr>
<tr>
<td style="background-color:orange;width:30%;text-align:top;">isi<br />isi<br />isi<br />isi</td>
<td style="background-color:#eeeeee;height:200px;width:70%;text-align:top;">isi kanan</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;">ekor</td>
</tr>
</table>

Agar lebih mudahnya saya akan menuliskan cara dan penulisan tag yang di gunakan. Sebagai berikut :

contoh penulisan

<html>
<head>
</head>
<body>
<table style="width:100%;border:0;" border="0">
<tr>
<td colspan="2" style="background-color:yellow;">kunto</td>
</tr>
<tr>
<td style="background-color:orange;width:30%;text-align:top;">angga<br />samsul<br />kapsul<br />citra media solusindo...</td>
<td style="background-color:#eeeeee;height:200px;width:70%;text-align:top;">bejo utomo</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;">fajar</td>
</tr>
</html>

Baca Juga: Cara memasukkan Audio Musik di HTML

Jika sudah di tuliskan ke  dalam notepad, maka simpanlah tag tag tersebut dengan menggunakan (.html) agar tag tersebut dapat langsung menuju ke browser. Jika anda sudah menyimpannya kemudian buka dan secara otomatis akan menuju ke browser, maka akan muncul hasil seperti di bawah ini.

Gambar hasil dari pemasukan kode yang sudah di jalankan.

Penutup

Di atas adalah cara bagaimana membuat layout . Terimakasih atas kunjungan Anda ke halaman ini, semoga bermanfaat. Kritik dan saran saya harapkan. Terima Kasih