5. Layout Halaman HTML

Sebelum membaca materi ini, diharapkan anda sudah mengikuti materi sebelumnya tentang tag dasar, elemen, dan atribut HTML. Jika belum jangan paksa langsung bab ini, karena belajar programming perlu urutan pengetahuan yang sesuai, sehingga belajarnya tidak bolak balik yang akan membingungkan kita sendiri.

Di beberapa web tutorial HTML, teori dijelaskan dengan sangat detail, satu persatu tag dikupas panjang lebar. Namun disini saya hanya menyingkat saja karena tujuan utama belajar HTML untuk pemula adalah yang penting paham teori dasar dan bisa praktek dasar2 HTML dengan mudah dan cepat.

Makanya kita perlu sepakat kalau semua script disini harus di ketik sendiri, tidak copy paste.

Langsung saja, kita akan membuat layout halaman web, disitu ada header, left sidebar, content, dan footer. Ada yang menggunakan <table> satunya lagi menggunakan <div>.

Untuk pemula lebih mudah menggunakan <table>, karena konsepnya hanya baris dan kolom.

Untuk pemula boleh juga menggunakan <div> karena ada banyak styling css yang menantang.

1. Layout HTML dengan <table>

Ketikkan kode di bawah ini, beri nama layout_table.html ya...

<!DOCTYPE html>
<html>

   <head>
      <title>Layout HTML menggunakan table</title>
   </head>

   <body>
      <table width = "100%" border = "0">         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3" style="padding:10px">
               <h1>Ini adalah header halaman web</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaaaaa" width = "30%" style="padding:10px">
               <h2>Main Menu</h2>
               <ul>
                    <li><a href="layout_table.html" title="Home">Home</a></li>
                    <li><a href="halaman_html.html" title="HTML">HTML</a></li>
                    <li><a href="halaman_css.html" title="CSS">CSS</a></li>
                    <li><a href="halaman_javascript.html" title="Javascript">Javascript</a></li>
               </ul>
            </td>
            
            <td bgcolor = "#eeeeee" width = "70%" height = "300" style="padding:10px">
               <p>Ini adalah isi dari home</p>
               <p>Ada ditengah dengan background #eeeeee</p>
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3" style="padding:10px">
               <center>
                  Footer area<br />Copyright 2018 namawebmu.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

 

Hasilnya akan tampil seperti dibawah ini:

Tag <table>

Merupakan tag yang digunakan untuk membuat table, tag ini harus ditutup dengan pasangannya <table>isi komponen</table>.
Tag table memiliki atribut width="100%" artinya lebar tabel 100% dari halaman browser.
atribut border="0" artinya tidak ada garis border pada tabel, jika diisi 1 maka border tabel akan ditampilkan.

Tag <tr>

Digunakan untuk membuat baris, tag ini harus berada dalam <table>. Untuk membuat tabel dengan 3 baris, maka dibutuhkan 3 pasang <tr>
Pada <tr> yang pertama terdapat 1 elemen <td>, yang berarti berisi 1 kolom.
Elemen <td> memiliki atribut colspan="2" artinya sebenarnya tabel mempunyai 2 buah kolom, namun di merge jadi 1.

Tag <td>

Digunakan untuk membuat kolom, tag ini berada dalam <tr>. Untuk membuat baris berisi 2 kolom, maka dibutuhkan 2 pasang <td>.
Pada <tr> yang kedua, terdapat 2 buah <td>, satu untuk menu kiri, satunya lagi untuk content.
<td> pertama memiliki atribut width="30%", dimana lebar menu kiri mempunyai ukuran 30% dari tampilan web.
Pada <tr> ketiga, sama seperti yang pertama, berisi elemen <td> yang memiliki atribut colspan="2", dimana 2 kolom di merge jadi 1.

2. Layout HTML dengan <div>

Nah pada bagian ini kita akan mencoba membuat tampilan layout halaman web menggunakan <div>.

Lihat saja contoh di bawah ini, kalau mau coba, silahkan diketik dengan nama file layout_div.html

<!DOCTYPE html>
<html>
    <head>
        <title>Layout HTML menggunakan DIV</title>
        <style> 
            .flex-container {
                display: -webkit-flex;
                display: flex;  
                -webkit-flex-flow: row wrap;
                flex-flow: row wrap;
                text-align: center;
            }
            .flex-container > * {
                padding: 15px;
                -webkit-flex: 1 100%;
                flex: 1 100%;
            }
            .article {
                text-align: left;
                background: #eeeeee;
            }
            header {background: #b5dcb3;}
            footer {background: #b5dcb3;}
            .nav {background:#aaaaaa;}
            .nav ul {
                list-style-type: none;
                padding: 0;
            }
            .nav ul a {
                text-decoration: none;
            }
            @media all and (min-width: 768px) {
                .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
                .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
                footer {-webkit-order:3;order:3;}
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <header>
                <h1>Ini adalah header halaman web</h1>
            </header>
            <nav class="nav">
               <h2>Main Menu</h2>
               <ul>
                    <li><a href="layout_div.html" title="Home">Home</a></li>
                    <li><a href="halaman_html_div.html" title="HTML">HTML</a></li>
                    <li><a href="halaman_css_div.html" title="CSS">CSS</a></li>
                    <li><a href="halaman_javascript_div.html" title="Javascript">Javascript</a></li>
               </ul>
            </nav>
            <article class="article">
                <h1>Welcome</h1>
                <p>Ini adalah isi dari home</p>
                <p>Ada ditengah dengan background #eeeeee</p>
            </article>
            <footer>
               <center>
                  Footer area<br />Copyright 2018 namawebmu.com
               </center>
            </footer>
        </div>
    </body>
</html>
<!--sumber dari w3school-->

 

Berikut tampilan kode di atas, jika dijalankan dengan layar kecil (min 768px) maka tampilan akan berubah, konten akan berpindah ke bawah menu, hal ini disebut responsive.

Gimana?  Lumayan sulit dipahami kan? heheh
Pada layout menggunakan <div> kita akan melihat banyak <style> CSS, yang digunakan untuk memformat elemen pada dokumen HTML.

Misalnya pada <div class="flex-container">, div tersebut di style menggunakan .flex-container {isi style}.
Demikian juga elemen <header>, di atur dengan menggunakan style header {isi style}.
tenang saja, pada saatnya nanti akan dibahas panduan CSS untuk pemula.

Yang penting kita tahu bahwa untuk layout menggunakan <div> caranya seperti itu, mayoritas web sekarang menggunakan div untuk layout, karena lebih responsive dan lebih mudah dicustom.

Okay, ga perlu diambil pusing dulu karena materi kita adalah HTML bukan CSS, lanjut ya...