Membuat Game dengan HTML
Bagikan
TAHAP 1: PENGENALAN DASAR DENGAN HTML & CSS
Tujuan: Memperkenalkan struktur dasar dan gaya pada halaman web.
Materi 1: “Membuat Kartu Biodiri Diri Sendiri” (HTML)
· Konsep: Pengenalan tag HTML sederhana.
· Aktivitas:
· Buat file biodata.html.
· Gunakan tag <h1>, <p>, <ul>, <li>, dan <img>.
· Contoh Kode Sederhana:
“`html
<!DOCTYPE html> <html> <head> <title>Biodata Saya</title> </head> <body> <h1>Halo, Namaku [Nama Siswa]!</h1> <img src="foto-saya.jpg" alt="Foto Saya" width="150"> <p>Aku adalah siswa SMP yang suka:</p> <ul> <li>Bermain Game</li> <li>Mendengarkan Musik</li> <li>Olahraga</li> </ul> </body> </html>
Materi 2: “Menghias Kartu Biodata” (CSS Dasar)
· Konsep: Memperkenalkan CSS untuk mengubah warna, font, dan latar.
· Aktivitas:
· Tambahkan tag <style> di dalam <head>.
· Ubah warna latar belakang, warna teks, dan font.
· Contoh Kode:
“`html
<style>
body {
background-color: lightblue;
font-family: Arial;
text-align: center;
}
h1 {
color: darkblue;
}
</style>
(Tempelkan kode CSS ini di dalam <head> file HTML sebelumnya)
Materi 3: “Membuat Tombol yang Bisa Diklik” (HTML + CSS)
· Konsep: Memperkenalkan link dan styling tombol.
· Aktivitas:
· Buat tombol yang mengarah ke media sosial atau halaman favorit.
· Gunakan tag <a> dan hias dengan CSS agar seperti tombol.
· Contoh Kode:
“`html
<a href="https://www.youtube.com">Kunjungi YouTube Saya</a>
<style>
a {
background-color: red;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
a:hover {
background-color: darkred;
}
</style>
—
TAHAP 2: MEMBUAT WEBSITE SEDERHANA MULTI-HALAMAN
Tujuan: Mengkonsolidasi pemahaman HTML & CSS dengan proyek yang lebih besar.
Proyek: “Website Hobi Saya”
· Halaman 1: index.html (Halaman Utama dengan perkenalan)
· Halaman 2: game.html (Daftar game favorit)
· Halaman 3: musik.html (Playlist lagu favorit)
· Aktivitas:
· Buat navigasi yang konsisten di setiap halaman menggunakan <nav> dan <a>.
· Gunakan CSS untuk membuat navigasi yang menarik.
· Tambahkan gambar dan deskripsi untuk setiap hobi.
—
TAHAP 3: MENAMBAHKAN INTERAKTIVITAS DENGAN JAVASCRIPT
Tujuan: Memperkenalkan logika pemrograman dengan cara yang menyenangkan.
Materi 1: “Kuis Sederhana”
· Konsep: Variabel, alert, confirm, dan if-else.
· Aktivitas: Buat kuis dengan pertanyaan ya/tidak.
· Contoh Kode:
“`html
<script>
let jawaban = confirm("Apakah JavaScript itu menyenangkan?");
if (jawaban) {
alert("Hore! Kita sepakat!");
} else {
alert("Yah, coba dipelajari lagi ya!");
}
</script>
Materi 2: “Penghitung Klik”
· Konsep: Fungsi, event onclick, dan memanipulasi HTML.
· Aktivitas: Buat tombol yang menghitung berapa kali dia diklik.
· Contoh Kode:
“`html
<p>Jumlah Klik: <span id="counter">0</span></p>
<button onclick="tambahKlik()">Klik Saya!</button>
<script>
let hitungan = 0;
function tambahKlik() {
hitungan = hitungan + 1;
document.getElementById("counter").innerHTML = hitungan;
}
</script>
Materi 3: “Game Tebak Angka”
· Konsep: Loop, logika perbandingan, dan acak.
· Aktivitas: Komputer memilih angka acak, pemain menebak.
· Contoh Kode:
“`html
<script>
let angkaRahasia = Math.floor(Math.random() * 10) + 1;
let tebakan = prompt("Tebak angka antara 1-10:");
if (tebakan == angkaRahasia) {
alert("Selamat! Tebakanmu benar!");
} else {
alert("Yah salah! Angka yang benar adalah " + angkaRahasia);
}
</script>
—
TAHAP 4: PROYEK AKHIR YANG MENYENANGKAN
Pilihan Proyek (biarkan siswa memilih):
1. Cerita Interaktif: Website yang menampilkan cerita dengan pilihan yang menentukan akhir cerita.
2. Galeri Foto: Website untuk menampilkan koleksi foto dengan deskripsi.
3. Kalkulator Sederhana: Kalkulator untuk operasi dasar (+, -, *, /).
4. Website tentang Idola/Grup Band Favorit: Mengkombinasikan semua elemen yang telah dipelajari.
Tools yang Direkomendasikan:
1. Visual Studio Code: Editor code yang ringan dan powerful.
2. Replit: Platform online yang memudahkan untuk langsung mencoba tanpa instalasi.
3. CodePen: Bagus untuk bereksperimen dengan HTML, CSS, dan JavaScript secara visual.
