Cara Menambahkan Header dan Footer pada Halaman Portofolio HTML & CSS (Internal CSS) untuk Pemula – Part 2
Pada Part 1, kita telah membuat halaman portofolio sederhana menggunakan HTML dan CSS internal. Kini di Part 2, kita akan melanjutkan dengan menambahkan header (bagian atas) dan footer (bagian bawah) agar halaman lebih rapi dan profesional.
Langkah 1: Tambahkan CSS untuk Header & Footer
Buka file index.html yang telah Anda buat di Part 1. Cari bagian <style> di dalam <head>.
Lalu salin kode berikut dan letakkan di dalam tag <style>:
/* Gaya untuk header */
header {
background: #007bff;
color: #fff;
padding: 15px 20px;
text-align: center;
}
/* Menu navigasi di header */
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
/* Gaya untuk footer */
footer {
text-align: center;
background: #333;
color: #fff;
padding: 10px;
margin-top: 30px;
}
footer a {
color: #fff;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
💡 Penjelasan:
- header: Bagian atas halaman dengan warna biru dan teks putih.
- nav a: Link navigasi di header, memiliki jarak dan efek hover.
- footer: Bagian bawah halaman dengan latar gelap dan teks putih.
Langkah 2: Tambahkan Tag <header> di HTML
Setelah tag <body>, tambahkan kode berikut:
<header>
<h1>Portofolio Saya</h1>
<nav>
<a href="#about">Tentang</a>
<a href="#projects">Proyek</a>
<a href="#contact">Kontak</a>
</nav>
</header>
Letakkan tepat setelah <body>.
Langkah 3: Tambahkan Tag <footer> di HTML
Scroll ke bagian paling bawah, tepat sebelum </body>, lalu tambahkan kode berikut:
<footer> <p>© 2025 Portofolio Saya | Dibuat dengan ❤️ menggunakan HTML & CSS</p> </footer>
Posisi akhir file:
<section id="contact"> <h2>Kontak</h2> <p>Email: <a href="mailto:emailanda@gmail.com">emailanda@gmail.com</a></p> <p>LinkedIn: <a href="https://linkedin.com/in/username" target="_blank">Profil Saya</a></p> </section> <footer> <p>© 2025 Portofolio Saya | Dibuat dengan ❤️ menggunakan HTML & CSS</p> </footer> </body>
Langkah 4: Simpan dan Lihat Hasil
- Simpan file
index.html. - Buka file di browser (Chrome, Edge, atau Firefox).
- Sekarang halaman portofolio Anda memiliki header di atas dan footer di bawah.
Menu navigasi di header dapat mengarahkan Anda langsung ke bagian "Tentang", "Proyek", dan "Kontak".
🚀 Tips Optimasi SEO
- Gunakan kata kunci seperti “header footer html css” di judul dan deskripsi.
- Tambahkan link media sosial di footer seperti GitHub atau Instagram untuk personal branding.
- Gunakan judul yang jelas untuk setiap bagian seperti "Tentang Saya", "Proyek Saya", dan "Kontak".
Dengan langkah-langkah di atas, Anda telah menambahkan header dan footer pada halaman portofolio HTML & CSS sederhana Anda. Di Part 3, kita akan membuat tampilan portofolio menjadi responsive (mobile-friendly) agar rapi di semua perangkat.