Web Programming Basic
  • Pengenalan HTML
  • Pengenalan CSS
  • Tugas Pembelajaran CSS
  • Pengenalan Javascript Dan Dom
  • Membuat Halmaan Login
  • Membuat Halaman Dashboard
  • Pembelajaran Framework Bootstrap
  • Membuat tampilan login dengan framework bootstrap
  • Membuat Tampilan Dashboard Dengan Bootstrap
  • Membuat Tampilan Portofolio diri
  • Evaluasi Dan Pembuatan Akun Linkedin
  • Exam
Powered by GitBook
On this page

Exam

Ujian Pemahaman HTML, CSS, dan Bootstrap

Instruksi:

  1. Kerjakan soal-soal berikut dengan menulis kode HTML dan CSS.

  2. Gunakan Bootstrap untuk mempercepat pembuatan elemen dan layout.

  3. Tampilan akhir yang diharapkan adalah sebuah halaman web sederhana yang responsif dengan penggunaan elemen-elemen HTML yang sesuai dan desain menggunakan CSS dan Bootstrap.

Soal 1: Struktur Dasar HTML (25 poin) Buatlah sebuah halaman HTML yang memiliki struktur sebagai berikut:

  • Sebuah header yang berisi nama situs web dan menu navigasi.

  • Sebuah section yang berisi dua kolom:

    • Kolom pertama berisi gambar dan deskripsi singkat.

    • Kolom kedua berisi daftar produk yang masing-masing memiliki gambar dan deskripsi singkat.

  • Sebuah footer yang berisi informasi hak cipta.

Petunjuk:

  • Gunakan tag HTML yang tepat untuk setiap elemen (misalnya, <header>, <nav>, <section>, <footer>, dll).

  • Gunakan elemen gambar <img> dengan atribut alt yang sesuai.

Soal 2: Styling CSS (25 poin) Tambahkan CSS untuk mendesain halaman dari soal sebelumnya:

  • Atur warna latar belakang header dan footer agar berbeda dengan latar belakang utama halaman.

  • Gaya teks di header dan footer agar menjadi warna putih.

  • Setiap kolom dalam section harus memiliki padding dan margin yang rapi.

  • Gunakan CSS Flexbox untuk menyusun kolom dengan rata kiri dan kanan pada tampilan desktop, dan stack (tumpuk) pada tampilan mobile.

Soal 3: Penggunaan Bootstrap (30 poin) Dengan menggunakan Bootstrap:

  • Atur layout halaman agar responsif menggunakan grid system Bootstrap (misalnya, .container, .row, .col-md-*, dll).

  • Gunakan komponen Navbar Bootstrap untuk menu navigasi di header.

  • Gunakan komponen Card dari Bootstrap untuk menampilkan produk dengan gambar dan deskripsi di kolom kedua.

Soal 4: Responsivitas dan Media Queries (20 poin) Gunakan media queries untuk memastikan halaman dapat ditampilkan dengan baik di berbagai perangkat:

  • Pada tampilan mobile, menu navigasi diubah menjadi tombol dropdown.

  • Gambar dalam kolom pertama dan produk dalam kolom kedua memiliki ukuran yang responsif dan tidak meluap dari layar.

  • Kolom-kolom dalam section ditumpuk pada tampilan dengan layar kecil (lebar kurang dari 768px).

Contoh Struktur Halaman:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Sederhana</title>
    <!-- Link Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-pzjw8f+ua7Kw1TIq0pUksz7a4XQo5E1RJ0E8h8NwWlQ==">
    <style>
        /* Tambahkan CSS khusus Anda di sini */
        body {
            background-color: #f8f9fa;
        }
        header {
            background-color: #007bff;
            color: white;
            padding: 10px 0;
        }
        footer {
            background-color: #343a40;
            color: white;
            padding: 10px 0;
        }
        .card {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>Nama Situs Web</h1>
            <nav>
                <ul class="nav">
                    <li class="nav-item"><a class="nav-link text-white" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link text-white" href="#">Produk</a></li>
                    <li class="nav-item"><a class="nav-link text-white" href="#">Kontak</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="gambar.jpg" alt="Deskripsi Gambar" class="img-fluid">
                <p>Deskripsi gambar ini...</p>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <img src="produk1.jpg" class="card-img-top" alt="Produk 1">
                    <div class="card-body">
                        <h5 class="card-title">Produk 1</h5>
                        <p class="card-text">Deskripsi singkat produk 1.</p>
                    </div>
                </div>
                <div class="card">
                    <img src="produk2.jpg" class="card-img-top" alt="Produk 2">
                    <div class="card-body">
                        <h5 class="card-title">Produk 2</h5>
                        <p class="card-text">Deskripsi singkat produk 2.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container text-center">
            <p>&copy; 2025 Nama Situs Web. Semua hak cipta dilindungi.</p>
        </div>
    </footer>

    <!-- Link JavaScript Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

Kriteria Penilaian:

  • Struktur HTML yang tepat dan penggunaan elemen-elemen yang sesuai (25 poin).

  • Desain CSS yang jelas dan responsif (25 poin).

  • Penggunaan Bootstrap untuk layout dan komponen (30 poin).

  • Responsivitas halaman web (20 poin).

PreviousEvaluasi Dan Pembuatan Akun Linkedin

Last updated 4 months ago