Cara Membuat Footer Sederhana dengan HTML dan CSS

By Posted on

Cara Membuat Footer Sederhana dengan HTML dan CSS – Footer merupakan elemen penting dalam desain halaman web yang sering kali diabaikan. Namun, sebenarnya, footer memiliki peran yang cukup signifikan dalam memberikan informasi tambahan kepada pengunjung serta meningkatkan pengalaman pengguna secara keseluruhan. Dalam artikel ini, kelashtml akan membahas cara membuat footer sederhana menggunakan HTML dan CSS. Ikuti langkah-langkahnya dengan seksama untuk menciptakan footer yang menarik dan fungsional untuk situs web Anda.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda Siapkan untuk dapat membuat footer sederhana dengan html dan css:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Footer Sederhana dengan HTML dan CSS

1. Buat Folder Project Footer Sederhana

Pertama-tama, buatlah sebuah folder di dalam komputer Anda untuk menyimpan proyek footer sederhana ini. Anda bisa memberi nama folder sesuai dengan preferensi Anda.

2. Buat Folder “img”

Di dalam folder proyek Anda, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan gambar-gambar yang akan Anda gunakan dalam halaman web. Download beberapa gambar disini untuk diterapkan dalam project footer sederhana.

3. Buat Sebuah File “footer_sederhana.html”

Buatlah sebuah file HTML baru di dalam folder proyek Anda dan beri nama file tersebut “footer_sederhana.html“. File ini akan menjadi halaman utama yang akan menampilkan footer sederhana yang kita buat.

Baca Juga:  Cara Membuat Tabel Berwarna dengan HTML dan CSS

Berikut ini file html yang dapat Anda tambahkan untuk membuat footer sederhana dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Footer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Header Website</h1>
    </header>

    <div class="landing-page">
        <img src="img/landing.jpg" alt="Landing Page Image">
        <p>Kalimat di sini</p>
        <button>Beranda</button>
        <button>Tentang Kami</button>
        <button>Kontak</button>
    </div>

    <footer>
        <div class="footer-info">
            <h3>Websiteku</h3>
            <p>Temukan kami melalui platform dibawah ini.</p>
        </div>
        <div class="footer-icons">
            <a href="https://riztekno.com/"><img src="img/facebook.png" alt="Facebook"></a>
            <a href="https://riztekno.com/"><img src="img/logos.png" alt="Twitter"></a>
            <a href="https://riztekno.com/"><img src="img/instagram.png" alt="Instagram"></a>
        </div>
    </footer>
</body>
</html>
 

4. Buat File “style.css”

Sekarang, buatlah file CSS baru di dalam folder proyek Anda dan beri nama file tersebut “style.css“. File ini akan digunakan untuk mendesain tampilan footer.

Baca Juga:  Cara Membuat Pencarian di HTML

Berikut ini file css yang dapat Anda tambahkan untuk membuat footer sederhana dengan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.landing-page {
    text-align: center;
    margin: 50px auto;
}

.landing-page img {
    max-width: 50%;
    height: auto;
    margin-bottom: 20px;
}

.landing-page p {
    font-size: 18px;
}

.landing-page button {
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.footer-info {
    margin-bottom: 20px;
}

.footer-info h3 {
    margin-bottom: 10px;
}

.footer-icons a {
    margin: 0 10px;
}

.footer-icons img {
    width: 30px;
    height: 30px;
}

/* Additional button styles */
.landing-page button {
    padding: 12px 24px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.landing-page button:hover {
    background-color: #45a049;
}

/* Footer button styles */
.footer-info button {
    padding: 8px 16px;
    margin-top: 10px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.footer-info button:hover {
    background-color: #555;
}
 

5. Mengubah Tampilan Footer

Anda dapat mengubah tampilan footer sesuai dengan kebutuhan dan preferensi Anda dengan menyesuaikan properti CSS di file “style.css“. Misalnya, Anda dapat mengubah warna latar belakang, warna teks, atau ukuran padding.

Baca Juga:  Cara Membuat Button Radio di HTML

6. Simpan & Lihat Tampilan

Setelah mengedit file HTML dan CSS, simpan perubahan yang Anda buat. Kemudian, buka file “footer_sederhana.html” menggunakan browser web Anda untuk melihat tampilan footer sederhana yang telah Anda buat.

Preview hasil

Berikut ini preview hasil footer sederhana dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti panduan ini, Anda sekarang memiliki pengetahuan yang cukup untuk membuat footer sederhana yang menarik menggunakan HTML dan CSS. Ingatlah bahwa footer tidak hanya sekadar elemen tambahan, tetapi juga bagian penting dalam memberikan informasi kepada pengunjung dan meningkatkan navigasi di situs web Anda. Teruslah eksplorasi dan latihlah keterampilan desain web Anda, dan jangan ragu untuk menyesuaikan desain footer sesuai dengan identitas dan kebutuhan situs web Anda. Semoga artikel ini bermanfaat bagi Anda, dan selamat mengembangkan halaman web yang menarik dan informatif!

Related posts: