Komponen sebuah halaman website secara umum terdiri dari minimal 4 bagian, yaitu header, konten, sidebar/aside, dan footer. Bagian header berisi informasi umum seperti nama website, deskripsi website, logo, navigasi, dan sebagainya. Bagian konten merupakan bagian utama sebuah website yang berisi konten sebuah halaman website. Bagian sidebar/aside merupakan bagian yang berisi informasi tambahan seperti tulisan terbaru, tautan, tulisan terpopuler, navigasi tambahan, dan sebagainya. Sedangkan bagian footer berisi informasi website seperti hak cipta, credit link, dan sebagainya.
Melalui post ini, saya akan menjelaskan cara membagi komponen-komponen website tersebut pada tempatnya masing-masing (tanpa menyertakan navigasi di bagian header). Pembagian komponen halaman website ini menggunakan format HTML 5.
Karena versi HTML yang digunakan adalah HTML 5, maka deklarasi DOCTYPEnya cukup sederhana.
<!DOCTYPE html>
Gunakan contoh kode berikut untuk diletakan di antara tag body.
<header>
<h1>Judul Website</h1>
</header>
<article>
<h2>Judul Konten</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<aside>
<h3>Judul Sidebar</h3>
<ul>
<li>Sidebar Baris Pertama</li>
<li>Sidebar Baris Kedua</li>
</ul>
</aside>
<footer>
Bagian Footer
</footer>
Buat file baru bernama style.css pada folder tempat file html berada dan isi dengan kode CSS berikut.
body {
width: 800px;
margin: auto;
}
header {
text-align: center;
}
article {
width: 596px;
float: left;
}
aside {
width: 200px;
float: right;
}
footer {
clear: both;
}
Agar terlihat bagian-bagiannya secara jelas, tambahkan kode CSS untuk border pada setiap bagian, yaitu sebagai berikut.
border: solid 1px black;
Contoh hasilnya bisa dilihat pada gambar di bawah ini.
Letak masing-masing komponen diatur sebagaimana biasanya. Header terletak di atas, konten (article) berdampingan dengan sidebar (aside), dan footer berada di bagian paling bawah.
Mohon maaf jika pembahasan ini kurang lengkap karena tidak memuat pembahasan mengenai navigation (nav) dan mengatur layout agar responsive.
Oleh Opan
Dipostkan May 16, 2017
Seorang guru matematika yang hobi ngeblog dan menulis. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang saya miliki.