Membuat Halaman Website HTML Lengkap

Komponen website secara umum terdiri dari 4 bagian, yaitu header, content, sidebar/widget, dan footer. Bagian header berisi informasi umum seperti nama website, deskripsi website, logo, navigasi, dan sebagainya. Bagian content merupakan bagian utama sebuah website yang berisi konten sebuah halaman website. Bagian sidebar/widget 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. Pada post ini akan dijelaskan cara membagi komponen-komponen website tersebut secara umum tanpa menyertakan navigasi di bagian header. Pembagian komponen halaman website ini menggunakan tag div dan kode CSS yang dibuat eksternal.

OK, langsung saja, di antara tag body buat kode sebagai berikut.

<div class="header">
<h1>Judul Website</h1>
</div>
<div class="content">
<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>
</div>
<div class="sidebar">
<h3>Judul Sidebar</h3>
<ul>
<li>Sidebar Baris Pertama</li>
<li>Sidebar Baris Kedua</li>
</ul>
</div>
<div class="footer">
Bagian Footer
</div>

Pada file style.css tambahkan kode sebagai berikut.

body {
width: 800px;
margin: auto;
}

.header {
text-align: center;
}

.content {
width: 596px;
float: left;
}

.sidebar {
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 di bawah ini.

Untuk format HTML terbaru, yaitu HTML 5 kodenya adalah sebagai berikut.

<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>

File style.css menjadi seperti berikut.

body {
width: 800px;
margin: auto;
}

header {
text-align: center;
}

article {
width: 596px;
float: left;
}

aside {
width: 200px;
float: right;
}

footer {
clear: both;
}

Selamat Mencoba.

Bagikan

Oleh Opan pada
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.

Kunjungan Halaman Bulan Ini
Protected by Copyscape CodeCogs - An Open Source Scientific Library