Belajar HTML Part 20 - Tata Letak Halaman (Layout)

Dalam desain web, layout adalah penataan elemen-elemen dalam sebuah halaman dengan benar. Dalam layout terdapat sangat banyak elemen-elemennya sehingga pada tutorial ini tidak dapat dibahas secara keseluruhan. Pada pembahasan layout di tutorial ini, hanya elemen-elemen tertentu saja.

Contoh layout halaman web

Bagian Header

Elemen header merupakan elemen yang berisi judul dokumen. Pada umumnya elemen header diisi dengan logo website, daftar isi website, form pencarian ataupun nama halaman yang sedang ditampilkan.

Dalam penggunaannya, elemen header dapat berisi elemen heading (<h1>-<h6>) tapi keberadaan elemen tersebut tidak begitu diperlukan. Dalam sebuah dokumen HTML, biasanya ditemukan lebih dari satu elemen header.

Bagian Navigation

Menu atau navigasi merupakan tempat atau wadah untuk link yang memberikan akses ke halaman-halaman lain dalam suatu web.

Bagian Sidebar

Sidebar artinya disamping atau bersebelahan dengan bagian konten. Dalam pembuatan sidebar letaknya boleh di sebelah kiri maupun di sebelah kanan konten, sesuai dengan kretivitas desainer. Sidebar digunakan untuk merepresentasikan bagian halaman yang berkaitan dengan konten disekitar elemen sidebar itu sendiri.

Bagian Konten

Konten merupakan bagian utama dari dokumen web. Konten digunakan untuk menyisipkan teks, gambar maupun yang lainnya.

Bagian Footer

Bagian footer merupakan penutup dari sebuah halaman website. Fungsinya adalah untuk menampilkan informasi lain tentang website, seperti penulis artikel, hak cipta, lisensi pengunaan, daftar isi halaman, ataupun link ke halaman lain bahkan ke website lain.

Source Code halaman web sederhana:

Copy seluruh source code di bawah ini ke dalam teks editor HTML, kemudian simpan dalam suatu folder, kemudian beri nama "index.html" tanpa tanda kutip.

<!DOCTYPE html>
<html>
<head>
 <title>Title Halaman</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <div class="wrapper">

   <div class="header">   
     <h1>KING-OCTAHASAN</h1>
     <p>Belajar membuat layout website sederhana</p>
   </div>
   <div class="menu">
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorial HTML</a></li>
        <li><a href="#">Tutorial CSS</a></li>
        <li><a href="#">Tutorial PHP</a></li>
        <li><a href="#">Tutorial Javascript</a></li>    
     </ul>
   </div>
   
   <div class="sidebar-content">
     <div class="sidebar">
        <p>Ini adalah sidebar</p>
     </div>

     <div class="content">
        <p>
        Ini adalah konten
        </p>
     </div>
   </div>

   <div class="footer">
   Ini adalah footer
   </div>

 </div>   <!--div penutup wrapper-->

</body>
</html>

Berikut adalah kode CSS-nya. Simpan dalam folder yang sama dengan kode HTML di atas! Beri nama "style.css" tanpa tanda kutip.

/*CSS Halaman*/
* {
 margin:0;
 padding:0;
}

.wrapper{
 background: lightskyblue;
 width: 900px;
 margin: 10px auto;
 font-family: verdana;
}

/*css header*/
.wrapper .header{
 background: black;
 height: 100px;
 padding: 2px 10px;
 color: white;
 text-align: center;
 padding: 50px 20px 20px 20px;
}
/*batas css header*/

/*css menu*/
.wrapper .menu{
 background: yellow;
}

.wrapper .menu ul{
 padding: 0;
 margin: 0;
 background: gray;
 overflow: hidden;
}

.wrapper .menu ul li{
 float: left;
 list-style-type: none;
 padding: 10px;
}

.wrapper .menu ul li a{
 text-decoration: none;
 color: white;
 padding-left: 45px;
}
/*batas css menu*/

/*css sidebar-content*/
.sidebar-content{
 height: 450px;
}

/*css sidebar*/
.wrapper .sidebar-content .sidebar{
 background: #BDBDBD;
 float: left; 
 width: 25%;
 height: 100%;
}

.wrapper .sidebar-content .sidebar p {
 text-align: center;
 margin: 20px;
}

/*batas css sidebar*/
.wrapper .sidebar-content .content{
 background: #D8D8D8;
 float: left;
 height: 100%;
 width: 75%; 
}

.wrapper .sidebar-content .content p {
 margin: 20px;
 text-align: justify;
}

/*batas css sidebar-content*/
.wrapper .footer{
 padding: 10px;
 background-color: black;
 color: white;
 text-align: center;
}

Hasilnya: