Tutorial Belajar HTML5 Bagian 21 : Cara Membuat Layout di HTML

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar HTML5 Bagian 20 : Cara Membuat Kode Javascript di HTML, selanjutnya kita akan mempelajari bagaimana cara membuat layout di HTML.

Layout halaman web sangat penting untuk memberikan tampilan yang lebih baik ke web Anda.

Butuh banyak waktu untuk mendesain layout situs dengan tampilan dan nuansa yang bagus.

Pada saat ini, semua web modern membuat desain web dengan CSS dan JavaScript untuk menghasilkan situs yang responsif dan dinamis.

Namun, untuk pelajaran dasar, Anda dapat membuat Layout yang baik menggunakan tabel HTML sederhana atau tag <div> yang dikombinasikan dengan tag pemformatan lainnya.

Pada tutorial ini, kita akan belajar beberapa contoh cara membuat Layout yang sederhana namun berfungsi untuk halaman web Anda menggunakan HTML murni dan atributnya.

Layout HTML – Menggunakan Tabel

Cara paling sederhana dan paling populer untuk membuat Layout adalah menggunakan tag HTML <table>.

Tabel ini disusun dalam kolom dan baris, sehingga Anda dapat memanfaatkan baris dan kolom ini sesuka Anda.

Misalnya, contoh Layout HTML berikut ini dibuat menggunakan tabel dengan 3 baris dan 2 kolom, kolom header dan footer mencakup kedua kolom menggunakan atribut colspan :

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout Menggunakan Table</title>
   </head>

   <body>
      <table width = "100%" 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 />
               HTML<br />
               PHP<br />
               CSS...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Teknik dan Pengaturan Tutorial
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2021 MbahWP.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

Browser akan menampilkan hasil sebagai berikut :

Layout Beberapa Kolom – Menggunakan Tabel

Anda dapat mendesain halaman web untuk menempatkan konten web di beberapa halaman.

Anda dapat menyimpan konten di kolom tengah, menggunakan kolom kiri sebagai menu dan kolom kanan untuk memasang iklan atau beberapa hal lainnya.

Layout ini akan sangat mirip dengan Layout website pada umumnya.

Berikut ini contoh pembuatan layout 3 kolom:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout Dengan 3 Kolom</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 />
               CSS...
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Tenknik dan Pengaturan Tutorial
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Menu Kanan</b><br />
               HTML<br />
               PHP<br />
               Javascript...
            </td>
         </tr>
         
      <table>
   </body>

</html>

Browser akan menampilkan hasil sebagai berikut :

Layout HTML – Menggunakan DIV, SPAN

Elemen <div> adalah elemen blok level yang digunakan untuk mengelompokkan elemen HTML.

Jika tag <div> adalah elemen blok level, maka elemen HTML <span> digunakan untuk mengelompokkan elemen pada inline level.

Meskipun kita dapat menggunakan table untuk membuat layout, tapi tag <table> dibuat memang bukan untuk mendesain layout website.

Tag <table> bertujuan membuat tabel untuk menyajikan data tabular.

Catatan – pada contoh ini, kita menggunakan Cascading Style Sheet (CSS), jadi sebelum memahami contoh ini, Anda sebaiknya paham cara menggunakan CSS.

Di sini, kita akan mencoba membuat sebuah layout sederhana menggunakan tag <div> digabung dengan CSS :

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout Menggunakan DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>Ini Adalah Judul Utama Halaman Web </h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Menu Utama</b></div>
            HTML<br />
            PHP<br />
            CSS...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Teknik dan Pengaturan Tutorial</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Menu Kanan</b></div>
            HTML<br />
            PHP<br />
            CSS...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2021 MbahWP.com
            </center>
         </div>
			
      </div>
   </body>

</html>

Browser akan menampilkan hasil sebagai berikut :