MATERI BELAJAR

InformatikaMAN Media Belajar Coding

Pembelajaran Web Interaktif MAN

Mari Belajar Web Coding Bersama InformatikaMAN!

Kuasai fondasi utama pemrograman web modern: HTML untuk struktur, CSS untuk tampilan visual cantik, dan JavaScript untuk interaksi seru!

</>

Modul Pembelajaran Utama

Modul 1: HTML Basics

Pelajari kerangka dasar website, struktur tag HTML, paragraf, gambar, dan tombol interaktif.

Buka Modul

Modul 2: CSS Styling

Ubah tampilan web jadi estetis dengan warna, font, melengkungkan sudut elemen, dan efek visual.

Buka Modul

Modul 3: JavaScript

Berikan "otak" pada website! Buat tombol yang merespon klik, penghitung otomatis, dan kondisi logika.

Buka Modul

Modul 1: Pengenalan HTML

HyperText Markup Language — Pondasi Struktur Halaman Web

HTML ibarat tulang dan kerangka pada tubuh manusia. HTML memberi tahu web peramban (browser) komponen apa saja yang perlu ditampilkan, seperti judul, teks paragraf, gambar, atau tombol.

<h1> s/d <h6>

Digunakan untuk membuat judul/heading utama. Tag <h1> adalah yang paling besar.

<p> (Paragraph)

Digunakan untuk menulis paragraf atau teks penjelas utama.

<button>

Digunakan untuk membuat tombol interaktif yang bisa diklik oleh pengguna.

<img src="...">

Digunakan untuk menyisipkan gambar pada halaman web.

Uji Coba Langsung HTML (Live Demo)

Ketikkan Kode HTML di sini: <h1 style="color: #059669;">Halo, Siswa MAN! 👋</h1> <p>Ini adalah teks paragraf buatan saya sendiri.</p> <button style="background: #059669; color: white; border: none; padding: 8px 16px; border-radius: 8px; font-weight: bold;">Klik Saya!</button>

Hasil Tampilan Real-Time (Preview):

Modul 2: Menghias Web dengan CSS

Cascading Style Sheets — Tata Pakaian dan Dekorasi Visual Web

Atur Properti CSS Secara Visual:

Ukuran Teks (font-size): 20px

Lengkungan Sudut (border-radius): 16px

Warna Latar (background-color): Biru Muda (#eff6ff) Hijau Mint (#ecfdf5) Kuning Keemasan (#fef3c7) Merah Muda (#fce7f3)

Pilih Warna Teks (color):

Hasil Tampilan Elemen CSS:

Informatika MAN Hebat! 🌟

Gaya elemen ini berubah secara opsional melalui kontrol CSS di samping.

Kode CSS Ter-generate:

Modul 3: Logika Interaktif dengan JavaScript

Memberi Respon Aksi, Logika, dan Pengolahan Data

Studi Kasus 1: Variable & Function

Aplikasi Penghitung Digital

0

Studi Kasus 2: Boolean & Condition (if/else)

Simulasi Saklar Lampu

💡

Lampu Menyala! (true)

Lab Koding Web Interaktif

Gabungkan HTML, CSS, dan JS secara bersamaan dalam laboratorium mini!

Ketikkan Kode Lengkap (HTML + CSS + JS):

Hasil Eksekusi Web (Live Output):

🎯

Kuis Jago Web Informatika MAN

Uji pengetahuanmu tentang HTML, CSS, dan JavaScript! Jawab 5 pertanyaan bergambar & pilihan ganda untuk mendapatkan Sertifikat Bintang Emas.

Jumlah Soal 5 Soal

Target Skor 100 Poin

Hadiah Sertifikat

Soal 1 dari 5 Skor: 0

HTML

💡 Penjelasan Pembahasan:

🏆

Selamat! Kuis Selesai

Nama Siswa

Nilai Akhir Kamu:

100

Sempurna! Kamu berhasil memahami modul koding dengan sangat baik!

Sertifikat Kelulusan

Madrasah Aliyah Negeri - Informatika Web

SERTIFIKAT PENGHARGAAN

Diberikan secara bangga kepada:

Siswa Pembelajar MAN

Kelas: X-1

Atas keikutsertaan dan keberhasilan menyelesaikan Modul Belajar Web Coding (HTML, CSS, dan JavaScript) dengan nilai memuaskan!

InformatikaMAN Interactive

Media Pembelajaran Digital

🎖️

Guru Mata Pelajaran Informatika,

Asbihannor

Asbihannor, S.Kom.

Tanda Tangan Digital

© 2026 InformatikaMAN — Media Pembelajaran Web Coding Interaktif untuk Siswa Madrasah Aliyah Negeri.

Didesain Ceria, Ringkas, dan Responsif untuk Masa Depan Digital Indonesia 🚀