.png)
KUMPULAN PROMPT STUDI KASUS HTML ONLY
🧩 STUDI KASUS 1
📌 Website Profil Sekolah Vokasi
🎯 Prompt untuk Mahasiswa
Buatlah sebuah website profil sekolah vokasi menggunakan HTML murni (tanpa CSS dan JavaScript).
Website harus terdiri dari minimal 3 halaman yang saling terhubung.
📋 Kebutuhan Halaman
1️⃣ index.html
-
Header berisi:
-
Nama Sekolah
-
Logo (gunakan tag
<img>)
-
-
Navigation menu (Home, Jurusan, Kontak)
-
Section:
-
Sambutan Kepala Sekolah
-
Visi & Misi (gunakan
<ul>atau<ol>)
-
-
Footer:
-
Copyright
-
2️⃣ jurusan.html
-
Daftar jurusan menggunakan:
-
<h2> -
<p> -
<ul>
-
-
Buat tabel jumlah siswa tiap jurusan menggunakan
<table>
3️⃣ kontak.html
-
Form kontak menggunakan:
-
<form> -
<input type="text"> -
<input type="email"> -
<textarea> -
<button>
-
🎓 Tujuan Pembelajaran
Mahasiswa mampu menggunakan:
-
Struktur HTML5
-
Semantic layout (
header,nav,section,footer) -
Table
-
Form
-
Hyperlink antar halaman
🧩 STUDI KASUS 2
📌 Website UMKM Makanan
(Sesuai dengan latar belakang Bapak sebagai owner UMKM ayam goreng 👌)
🎯 Prompt
Buat website sederhana untuk UMKM Ayam Goreng Nusantara menggunakan HTML saja.
📋 Struktur Halaman
index.html
-
Nama brand
-
Gambar produk
-
Deskripsi usaha
-
Menu makanan (gunakan
<ol>)
menu.html
-
Tabel daftar menu:
-
Nama
-
Harga
-
Keterangan
-
order.html
-
Form pemesanan:
-
Nama
-
Alamat
-
Pilihan menu (gunakan
<select>) -
Jumlah
-
Metode pembayaran (radio button)
-
🎓 Evaluasi
Mahasiswa dinilai dari:
-
Kerapian struktur HTML
-
Penggunaan semantic tag
-
Validasi struktur dokumen
-
Navigasi antar halaman
🧩 STUDI KASUS 3
📌 Sistem Informasi Perpustakaan
🎯 Prompt
Buat sistem informasi perpustakaan sederhana berbasis HTML saja.
📋 Halaman yang Harus Ada
-
Beranda
-
Daftar Buku
-
Form Peminjaman
📘 Spesifikasi
Daftar Buku
Gunakan <table> dengan kolom:
-
No
-
Judul
-
Pengarang
-
Tahun
-
Status
Form Peminjaman
Gunakan:
-
Input text
-
Date
-
Dropdown
-
Submit
🧩 STUDI KASUS 4
📌 Portal Berita Sederhana
(Sesuai dengan pengalaman Bapak mengajar web portal berita)
🎯 Prompt
Buat portal berita sederhana dengan HTML saja.
📋 Struktur Wajib
-
Header (nama portal)
-
Navigation (Kategori)
-
Section berita utama
-
Section berita terbaru
-
Aside (berita populer)
-
Footer
Gunakan:
-
<article> -
<section> -
<aside> -
<time>
🧩 STUDI KASUS 5
📌 Dashboard Mahasiswa (HTML Static)
🎯 Prompt
Buat halaman dashboard mahasiswa tanpa CSS dan JavaScript.
📋 Isi Halaman
-
Biodata mahasiswa
-
Tabel KRS
-
Tabel Nilai
-
Link download KHS (dummy link)
-
Form update profil
📊 Rubrik Penilaian (Untuk Dosen)
| Aspek | Bobot |
|---|---|
| Struktur HTML benar | 25% |
| Semantic Tag digunakan | 20% |
| Navigasi antar halaman | 15% |
| Form & Table valid | 20% |
| Kerapian & konsistensi | 20% |
🚀 BONUS: Prompt Tingkat Lanjut
Buat website Company Profile Startup Digital dengan:
Minimal 5 halaman
Menggunakan semantic HTML lengkap
Tabel pricing
Form registrasi
Embed video YouTube
Embed Google Maps
Tidak ada komentar:
Posting Komentar