Pada bagian ini kita akan belajar bagaimana cara menambahkan header dan footer ke dalam halaman kalkulator digital agar tampak lebih terstruktur dan profesional.
Kenapa Perlu Header dan Footer?
- Header berfungsi sebagai judul atau deskripsi kalkulator.
- Footer bisa berisi informasi tambahan seperti nama pengembang atau copyright.
- Membuat tampilan lebih rapi, informatif, dan berkesan profesional.
Update HTML
Tambahkan kode <header> dan <footer> dalam file index.html Anda:
<header>
<h1>Kalkulator Digital</h1>
<p>Alat hitung sederhana untuk operasi matematika dasar</p>
</header>
<div class="calculator">
<!-- Kalkulator ada di sini -->
</div>
<footer>
<p>© 2025 Kalkulator Digital - Dibuat oleh ZE COME Training Center</p>
</footer>
Menambahkan CSS untuk Header dan Footer
Agar tampilannya lebih rapi, tambahkan CSS berikut:
/* Gaya Header */
header {
text-align: center;
margin-bottom: 20px;
}
header h1 {
font-size: 36px;
color: #333;
margin-bottom: 5px;
}
header p {
font-size: 18px;
color: #777;
}
/* Gaya Footer */
footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #777;
}
footer p {
margin: 0;
}
Penjelasan Perubahan
- Header: ditambahkan judul Kalkulator Digital dengan deskripsi singkat, teks disejajarkan ke tengah.
- Footer: menampilkan teks copyright dan nama pengembang di bagian bawah.
- Tata Letak: penambahan margin agar ada jarak proporsional antara header, kalkulator, dan footer.
Hasil Akhir
Dengan menambahkan header dan footer, website kalkulator Anda akan terlihat lebih profesional, informatif, dan nyaman digunakan. Silakan sesuaikan teks atau gaya sesuai kebutuhan!
Kesimpulan
Pada Part 5 ini kita berhasil menambahkan header dan footer pada kalkulator.