Cara Membuat Footer di HTML Secara Lengkap!

Suci Wulandari

•

08 August 2023

•

10139

Dalam mengembangkan sebuah web, banyak hal yang perlu diperhatikan. Membuat footer di HTML bisa membantu website terlihat semakin profesional. Footer merupakan bagian terakhir dari halaman web dan biasanya berisi informasi tambahan, tautan ke halaman penting, hak cipta, dan banyak lagi.

Dengan menggunakan HTML, kamu dapat dengan mudah membuat footer yang menarik dan informatif untuk situs web. Artikel ini akan membahas secara lengkap tentang cara membuat footer di HTML. Simak sampai selesai, ya!
Apa Itu Footer?
Footer adalah bagian terakhir dari halaman web yang terletak di bagian bawah. Footer seringkali berisi informasi seperti:
Tautan ke halaman penting seperti "Tentang Kami," "Kontak," "Kebijakan Privasi," dan lain-lain.
Informasi kontak seperti alamat, nomor telepon, dan alamat email.
Tautan ke media sosial.
Hak cipta dan keterangan legal lainnya.
Tautan ke sumber daya eksternal.
Dengan menyertakan footer di situs web, kamu memberikan pengguna akses cepat ke informasi penting dan membantu meningkatkan pengalaman pengguna. Selain itu, footer juga memberikan kesan profesional dan teratur pada situs web.
Cara Membuat Footer di HTML
Cara membuat footer di HTML akan dijelaskan secara rinci. Berikut ini adalah langkah-langkah yang perlu diikuti.

Lakukan Persiapan Terlebih Dulu

Sebelum memulai membuat footer, pastikan kamu sudah memiliki struktur dasar dari web menggunakan elemen-elemen HTML seperti <header>, <nav>, <main>, dan <footer>. Pastikan juga sudah ada file HTML yang ingin kamu tambahkan footer-nya.

Membuat Elemen Footer

Selanjutnya, kamu bisa mulai menambahkan elemen <footer> di file HTML. Elemen ini akan menjadi wadah untuk konten footer milikmu.

Contoh Kode:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Situs Web</title>
</head>
<body>
    <header>
        
    </header>
    <nav>
        
    </nav>
    <main>
        
    </main>
    <footer>
        
    </footer>
</body>
</html>

Menambahkan Informasi dan Tautan

Setelah elemen <footer> ditambahkan, kamu dapat mulai menambahkan konten seperti teks, tautan, dan informasi lainnya.

Contoh Kode:

<footer>
    <div class="footer-content">
        <p>Kontak Kami:</p>
        <p>Email: info@example.com</p>
        <p>Alamat: Jalan Contoh No. 123</p>
    </div>
    <div class="footer-links">
        <ul>
            <li><a href="tentang-kami.html">Tentang Kami</a></li>
            <li><a href="kontak.html">Kontak</a></li>
            <li><a href="kebijakan-privasi.html">Kebijakan Privasi</a></li>
        </ul>
    </div>
    <div class="social-media">
        <a href="#"><img src="facebook.png" alt="Facebook"></a>
        <a href="#"><img src="twitter.png" alt="Twitter"></a>
        <a href="#"><img src="instagram.png" alt="Instagram"></a>
    </div>
    <div class="footer-bottom">
        <p>Hak Cipta © 2023 Contoh Situs Web. Hak Cipta Dilindungi.</p>
    </div>
</footer>

Mengatur Tampilan Footer dengan CSS

Dibimbing.id - Membuat Footer 4

Dibimbing.id - Membuat Footer 5

Kamu juga dapat meningkatkan tampilan footer dengan menggunakan CSS. Dengan CSS, Sobat MinDi dapat mengatur tata letak, ukuran font, warna, dan banyak lagi sesuai dengan desain situs web yang diinginkan.
Contoh Kode CSS:

footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
}
.footer-content, .footer-links, .social-media, .footer-bottom {
    margin-bottom: 15px;
}
.footer-links ul {
    list-style-type: none;
    padding: 0;
}
.footer-links li {
    display: inline;
    margin-right: 20px;
}
.footer-links a {
    color: #fff;
    text-decoration: none;
}
.social-media img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

Footer di HTML untuk Web Berhasil

Setelah mengikuti langkah-langkah di atas, Sobat MinDi telah berhasil membuat footer di HTML untuk situs web. Footer akan memberikan tampilan profesional pada situs web dan memberikan akses mudah ke informasi penting bagi pengguna. Pastikan untuk selalu memperbarui footer jika ada perubahan dalam informasi kontak, tautan, atau informasi lainnya.

Manfaat Membuat Footer untuk Web
Menggunakan footer pada situs web memiliki beberapa manfaat yang penting. Footer bukan hanya sebagai elemen dekoratif, tetapi juga memberikan nilai fungsional dan pengalaman yang lebih baik bagi pengguna. Berikut adalah beberapa manfaat menggunakan footer di web.
Menampilkan informasi tambahan yang relevan bagi pengguna dan mudah diakses.
Meningkatkan navigasi: Footer dapat berfungsi sebagai area navigasi sekunder yang membantu pengguna menavigasi situs dengan lebih mudah. Tautan ke bagian penting situs atau halaman kategori produk/jasa dapat ditempatkan di footer. Ini membantu pengguna yang telah mencapai bagian bawah halaman untuk dengan cepat kembali ke bagian atas atau mengakses halaman-halaman penting lainnya.
Memberikan kesan profesional dan terpercaya sebab memberikan kesan transparansi pada pengguna.
Penyampaian hak cipta dan keterangan legal seperti kebijakan privasi dan syarat dan ketentuan penggunaan sehingga melindungi konten situs dari pelanggaran hak cipta.
Pengenalan media sosial dengan cara meletakkan tautan untuk diakses pengguna.
Search Engine Optimization (SEO) meningkat dengan adanya tautan-tautan penting yang diletakkan di footer. Hal tersebut membuat visibilitas web meningkat secara organik.

Semoga artikel di atas bisa membantumu saat akan membuat footer di HTML, ya. Ingin belajar lebih lanjut soal web development dan seluk beluknya? Inilah saat yang tepat untuk bootcamp programmer dari Dibimbing.id.

Melalui program tersebut, kamu bisa belajar dari mentor berpengalaman serta mendapat materi berkualitas seputar web development. Tunggu apalagi? Segera daftarkan dirimu untuk ikut bootcamp online Dibimbing.id di sini, ya! Jangan sampai kehabisan kuota.