Modul_Pengajaran_HTML_SMP_5_Sesi_Detail.pptx
azzaalfarizi
0 views
22 slides
Oct 14, 2025
Slide 1 of 22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
About This Presentation
Modul Pembelajaran HTML untuk SMP
Slide Content
Modul Pengajaran HTML untuk SMP — 5 Sesi Tujuan: Memahami HTML5 modern dan membuat proyek mini Desain: Profesional, ramah SMP Disusun untuk 5 sesi pembelajaran
Sesi 1 — Pengenalan HTML & Struktur Dasar Tujuan: Mengenalkan HTML dan membuat dokumen HTML pertama Apa itu HTML? (Definisi singkat) Peran HTML dalam website: struktur, bukan tampilan atau interaksi Hubungan dengan CSS & JavaScript (analogi rumah) Struktur dasar dokumen: <!DOCTYPE html>, <html>, <head>, <body> Latihan: Buat file HTML sederhana menampilkan teks 'Halo, nama saya ...'
Tag, Elemen, dan Atribut Tag pembuka dan penutup: <tag>konten</tag> Elemen = kombinasi tag + konten Atribut memberikan informasi tambahan: contoh src, href, alt Contoh: <a href='https://contoh.com'>Link</a>, <img src='foto.jpg' alt='Foto'>
Heading dan Paragraf Heading: <h1> sampai <h6> (urut dari penting ke kurang penting) Paragraf: <p> untuk blok teks Komentar: <!-- Ini komentar --> untuk catatan kode
Latihan Sesi 1 — Tugas Praktik Buat file index.html dengan judul, 1 paragraf perkenalan, dan sebuah heading Simpan & buka di browser lalu screenshot hasilnya Kumpulkan file atau screenshot di platform yang disepakati (Google Classroom / USB / email)
Sesi 2 — Elemen Teks & Format Tujuan: Memformat teks dan membuat daftar Tag-format: <b>, <i>, <u>, <strong>, <em> Daftar: <ul> (tak berurutan) dan <ol> (berurutan) dengan <li> Kutipan: <blockquote> untuk kutipan panjang Garis pemisah: <hr>
Contoh Kode — Format Teks Contoh: <h1>Judul</h1> <p>Halo, saya <strong>Ana</strong> dan saya suka <em>menggambar</em>.</p> Gunakan komentar untuk memberi catatan: <!-- paragraf tentang hobi -->
Kuis Singkat Sesi 2 1. Tag apa yang digunakan untuk daftar tidak berurutan? (a) <ol> (b) <ul> (c) <li> 2. Mana tag yang memberi penekanan semantik? (a) <b> (b) <em> (c) <u> 3. Bagaimana menulis komentar di HTML?
Latihan Sesi 2 — Tugas Praktik Buat halaman berisi biodata singkat dengan heading, paragraf, dan daftar hobi Tambahkan format penekanan pada salah satu kata Simpan & serahkan
Sesi 3 — Gambar, Link, dan Tabel Tujuan: Menambahkan media dan tautan ke halaman Gambar: <img src='...' alt='...'> (bahasa aksesibilitas) Link: <a href='url'>Teks</a> (link internal & eksternal) Tabel: <table>, <tr>, <th>, <td> (untuk data terstruktur)
Contoh Kode — Gambar & Link <img src='foto.jpg' alt='Foto Profil' width='200'> <a href='https://contoh.com' target='_blank' rel='noopener'>Kunjungi Situs</a>
Latihan Sesi 3 — Tugas Praktik Buat halaman 'Daftar Teman' dengan foto kecil, nama, dan link profil (bisa dummy) Buat tabel sederhana yang berisi 3 kolom: Nama | Kelas | Hobi Simpan & serahkan
Kuis Singkat Sesi 3 1. Atribut apa yang wajib untuk aksesibilitas gambar? (a) src (b) alt (c) width 2. Tag apa untuk membuat tautan? (a) <link> (b) <a> (c) <href>
Sesi 4 — Formulir & Elemen Semantik (HTML5) Tujuan: Memahami tag form dan struktur semantik HTML5 Elemen semantik: <header>, <nav>, <section>, <article>, <footer> Formulir: <form>, <label>, <input>, <textarea>, <button> Tipe input HTML5: email, number, date, url, dll.
Contoh Kode — Formulir <form action='#' method='post'> <label for='nama'>Nama:</label> <input type='text' id='nama' name='nama' required> <button type='submit'>Kirim</button> </form>
Latihan Sesi 4 — Tugas Praktik Buat formulir pendaftaran klub dengan label yang sesuai Gunakan tipe input email dan required untuk beberapa field Uji validasi dengan memasukkan data yang salah
Kuis Singkat Sesi 4 1. Tag mana yang digunakan untuk memasukkan teks panjang? (a) <input> (b) <textarea> (c) <label> 2. Mengapa menggunakan <label> bersama input?
Sesi 5 — Proyek Mini: Halaman Profil Pribadi Tujuan: Menerapkan seluruh materi menjadi satu halaman lengkap Komponen wajib: header, foto profil, deskripsi, tabel data, form kontak, footer Langkah kerja: rancang -> buat struktur -> isi konten -> uji di browser Rubrik penilaian: struktur (30%), kelengkapan (30%), tata letak & aksesibilitas (20%), kreativitas (20%)
Contoh Template Sederhana <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Profil Saya</title> </head> <body> <header><h1>Nama Siswa</h1></header> <!-- foto, deskripsi, tabel, form --> </body> </html>
Kuis Akhir & Refleksi Kuis 5 soal (gabungan materi semua sesi) Refleksi siswa: apa tantangan & apa yang paling menyenangkan? Langkah selanjutnya: memperkenalkan CSS untuk penataan
Tips Pengajaran & Catatan Untuk Guru Berikan contoh langsung di layar: live coding sederhana Gunakan pair programming: siswa berpasangan saling membantu Siapkan template untuk siswa yang tertinggal Tekankan praktik & debugging sederhana (cek console, periksa tag tidak tertutup)
Sumber & Materi Tambahan Dokumentasi resmi HTML (MDN Web Docs) Contoh latihan: w3schools, freeCodeCamp (bagus untuk referensi) Rekomendasi: lanjutkan ke materi CSS dasar setelah ini
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 0
- Slides 22
- Age 47 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
44 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
44 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
36 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
33 views
21
Know for Certain
DaveSinNM
19 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
23 views