Ujian Tengah Semester Pemrograman Web 2024
Waktu Mulai:
16 Oktober 2024
14:30:00 WIB

Waktu Selesai:
20 Oktober 2024
23:59:59 WIB

Google Form:
Membuat Website menggunakan HTML dan CSS

Panduan:

A. Desain Halaman Web Responsif menggunakan pendekatan Column Drop Layout Pattern

Gambar Column Drop Layout Pattern

B. Desain dibuat mengikuti 4 Ukuran Halaman pada Tabel di bawah

Tabel Ukuran Halaman Web

UkuranBreakpoint (px)Keterangan
XS< 576pxLayar sangat kecil (mobile)
SM≥ 576pxLayar kecil (mobile landscape)
MD≥ 768pxLayar sedang (tablet)
LG≥ 992pxLayar besar (desktop)

D. Komposisi pada satu Halaman Web

  • Header adalah bagian halaman web yang berada di atas, berisi tentang logo/informasi
  • Sidebar adalah bagian halaman web yang berisi menu navigasi untuk berpindah ke halaman lain
  • Body adalah bagian halaman web yang berisi konten utama yang menggambarkan isi dari halaman
  • Footer adalah bagian halaman web yang berada di bawah, berisi tentang informasi tambahan

E. Membuat Microformat dari setiap halaman

Soal:

Buatlah 3 halaman HTML yang terdiri dari Halaman Utama, Halaman Formulir, dan Halaman Tabel. Membuat website Idola Saya boleh tentang Artis/Olahragawan/Penyanyi/Anime dll. Setiap Halaman harus dibuat terpisah berdasarkan Karakteristiknya.

Halaman Utama

  1. Judul halaman yang sesuai
  2. Logo
  3. Deskripsi singkat tentang website
  4. Memiliki sidebar

Halaman yang berisi Formulir

  1. Buatlah formulir
  2. Memiliki setidaknya 5 field dan setiap field harus memiliki label yang jelas.
  3. Field dapat berupa text, date, radio, checkbox, atau password
  4. Gunakan atribut required untuk field yang wajib diisi.
  5. Tambahkan tombol submit di bagian bawah form.
  6. Menggunakan method GET dan mendesain query string yang akan dikirim

Halaman yang berisi Tabel

  1. Buatlah tabel
  2. Tabel memiliki setidaknya 50 baris data (menggunakan data dummy)
  3. Gunakan styling CSS untuk memberikan warna latar belakang yang berbeda pada baris genap (even) dan ganjil (odd)
  4. Gunakan styling CSS untuk memberikan efek ketika baris pada tabel di sorot
  5. Bila ukuran tabel melebih jumlah ukuran baris buat agar header tetap (sticky) dan isi tabel dapat di scroll