Cara membuat header dan footer di website adalah hal yang harus Anda ketahui jika ingin memberikan pengalaman pengguna yang optimal di website Anda. Ya, kedua elemen ini tak sekedar membuat tampilan website jadi lebih menarik, tetapi juga lebih mudah untuk dijelajahi. Ingin tahu caranya?
Kali ini, kita akan bahas bagaimana cara membuat header dan footer di website sekaligus beberapa ide yang mungkin bisa menginspirasi Anda dalam membuatnya. Namun sebelum terlalu jauh membahas masing-masing elemen, tak ada salahnya untuk sedikit memahami lagi tentang header dan footer ini bukan?
Cara Membuat Header Website
Pada suatu website, header adalah bagian atas halaman yang berisi tulisan dengan ukuran lebih besar. Nah, tulisan dalam header ini biasanya memajang nama situs serta logo untuk menguatkan identitas website. Selain kedua item tersebut, tak sedikit pemilik website yang menambahkan deskripsi sekilas tentang logo yang dipajang di header.
Ciri lain yang ada pada header yaitu adanya kolom pencarian dengan ikon kaca pembesar di pojok kanan. Fitur ini tentunya akan lebih memudahkan pengunjung untuk menemukan konten atau informasi apapun yang mungkin tersedia di website Anda.
Sesuai namanya, header akan selalu berada di atas, baik itu di atas konten maupun widget di website. Untuk membuat header, Anda bisa menambahkan tag <header>…</header> setelah tag <body> sehingga header akan berada menempati posisi atas konten.
Selanjutnya, Anda bisa menambahkan kode css pada di tag yang ingin diubah, misalnya menyisipkan beberapa script css antara lain untuk background, padding dan color. Tujuannya adalah untuk menyesuaikan tampilan dari header, agar serasi dan isinya tetap mudah terbaca.
Sementara footer, akan menempati posisi bawah halaman website. Pada bagian ini, biasanya digunakan untuk memajang informasi seperti hal-hal terkait hak cipta, sumber daya, berbagai link tambahan, sponsorhip hingga kepemilikan website. Bahkan tak jarang pula footer ini digunakan untuk widget yang menampilkan postingan lain di website.
Untuk membuat footer, Anda bisa mulai dengan menambahkan kode <footer> isi </footer> sebelum tag </body>. Tak hanya sampai di situ, tentu Anda juga ingin menyesuaikan tampilannya agar tetap serasi dengan halaman website Anda. Anda pun bisa mencoba css untuk menyesuaikannya, yaitu tag css Background (warna footer), tag css Text Align (posisi teks center, left atau right), tag css Color (warna teks) dan tag css Padding (mengatur posisi), misalnya:
<footer style=”background: blue; color: #fff; padding: 10px; text-align: right;”>
<p>Powered By SitusAnda</p>
</footer>
Berikutnya, Anda mungkin memerlukan beberapa referensi untuk bisa merancang header dan footer yang paling ideal dengan website Anda. Untuk itu, ada beberapa ide yang tak ada salahnya untuk Anda simak berikut ini:
- Sub Footer: digunakan untuk menambahkan informasi tentang menu dan copyright guna meningkatkan kredibilitas website
- Informasi detail: digunakan untuk menampilkan kontak, layanan yang ditawarkan, akun resmi sosial media atau bahkan persuasi lainnya yang dapat menunjang CTA
- Filter produk: untuk website toko online, hal ini memudahkan pengunjung menemukan produk yang mereka cari di katalog yang besar
- Site Link: untuk menampilkan lebih banyak menu tanpa mengorbankan kerapian tampilan halaman website
- Transisi warna: untuk membuat website lebih menarik, Anda bisa menggunakan transisi warna yang unik pada footer
- Animasi: pada website tertentu, animasi juga bisa digunakan pada footer untuk membuatnya jadi semakin unik dan menarik
- Gambar: menggunakan header yang disesuaikan dengan topik website sehingga ikut meningkatkan awareness
- Responsifitas: tak jarang pemilik website yang mengutamakan kecepatan pemuatan website dengan melakukan optimasi header, misalnya menggunakan parallax header
Kesimpulan
Setelah membaca cara membuat header dan footer di website dan beberapa hal yang bisa Anda coba di atas, pastinya kini Anda sudah lebih siap. Silakan berkreasi dengan header dan footer untuk mengoptimalkan potensi website. Namun jangan lupakan responsifitas dan relevansinya pula.
