Home
Website

Membuat Halaman HTML untuk Menu Lain - Web Perpustakaan #Part 3

Membuat Halaman HTML untuk Menu Lain - Web Perpustakaan #Part 3 | UKK RPL


Membuat Halaman HTML untuk Menu Lain

Berikut adalah template HTML untuk halaman Koleksi, Tentang Kami, dan Kontak.

koleksi.html

<!-- Start HTML code koleksi.html -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Koleksi - Perpustakaan Digital</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Perpustakaan Digital</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="koleksi.html">Koleksi</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>Koleksi Buku</h2>
        <p>Di sini Anda dapat menemukan koleksi buku kami.</p>
    </section>
    <footer>
        <p>&copy; 2024 Perpustakaan Digital. All rights reserved.</p>
    </footer>
</body>
</html>
<!-- Finish HTML code koleksi.html -->

tentang.html

<!-- Start HTML code tentang.html -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tentang Kami - Perpustakaan Digital</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Perpustakaan Digital</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="koleksi.html">Koleksi</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>Tentang Kami</h2>
        <p>Perpustakaan Digital adalah tempat untuk mengakses buku-buku berkualitas secara online.</p>
    </section>
    <footer>
        <p>&copy; 2024 Perpustakaan Digital. All rights reserved.</p>
    </footer>
</body>
</html>
<!-- Finish HTML code tentang.html -->

kontak.html

<!-- Start HTML code kontak.html -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontak - Perpustakaan Digital</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Perpustakaan Digital</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="koleksi.html">Koleksi</a></li>
                <li><a href="tentang.html">Tentang Kami</a></li>
                <li><a href="kontak.html">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>Kontak Kami</h2>
        <p>Jika Anda memiliki pertanyaan, silakan hubungi kami melalui email di <a href="mailto:info@perpustakaan.com">info@perpustakaan.com</a>.</p>
    </section>
    <footer>
        <p>&copy; 2024 Perpustakaan Digital. All rights reserved.</p>
    </footer>
</body>
</html>
<!-- Finish HTML code kontak.html -->

Langkah Menjalankan Website

  1. Simpan setiap file HTML (index.html, koleksi.html, tentang.html, dan kontak.html) ke dalam folder perpustakaan_digital.
  2. Jalankan server XAMPP dan akses halaman dari http://localhost/perpustakaan_digital/.

Sekarang Anda memiliki website perpustakaan digital dengan fitur pencarian koleksi dan navigasi yang terhubung ke halaman berbeda.

Jika Anda memerlukan bantuan lebih lanjut atau memiliki pertanyaan tentang membuat Web Perpustakaan Digital, jangan ragu untuk menghubungi ZE COME Training Center. Kami siap membantu Anda!

Lanjutkan ke Part berikutnya ya...

Post a Comment