Langsung ke konten utama

Materi Ajar Kelas 6 Pertemuan Ke - 3 Semester Ganjil

 IDENTITAS

Nama Guru : Erni Sri Wahyuni

Hari / Tanggal : Kamis, 13 Agustus 2026 Fase / Kelas : C / 6 Al Khawarizmi 

Mata Pelajaran : TIK

Materi : Pengenalan Kode HTML Dasar

Pertemuan Ke : ke-3 (2 JP)


Apersepsi :

Bismillahirrahmanirrahim, Assalamu’alaikum Wr. Wb.

Apa kabar anak sholih/ah? Bagaimana kabarnya hari ini? Semoga anak-anak semua dalam keadaan sehat, bahagia dan semangat selalu. Sudahkan anak-anak melaksanakan shalat subuh hari ini? Jangan lupa ya anak-anak. Dimana shalat adalah kewajiban kita sebagai seorang muslim. Dimana Allah sudah sangat baik dengan kita, dengan segala kebesaran-Nya. Allah Maha Khaliq, zat yang menciptakan kita, Allah juga Maha Malik, zat yang memelihara kita dengan sebaik-baiknya keadaan. Allah al Khalik, tidak hanya menciptakan kita sebagai manusia, tetapi juga Allah telah menciptakan sebuah teknologi yang sangat berguna di kehidupan kita. 

CP :
Murid mampu menggunakan perangkat lunak penyunting teks untuk membuat dokumen HTML sederhana, memahami struktur dasar HTML.


TP : 

Mengenal aplikasi penyunting teks (Notepad/Visual Studio Code) dan browser yang digunakan untuk membuat serta menampilkan halaman HTML.

· Melalui kegiatan pebelajaran hari ini memahami bahwa HTML merupakan salah satu dasar dalam membangun halaman web. (Meaningful)

· Melalui kegiatan belajar ini murid dilatih untuk:  (Mindful)

  • Teliti dalam menulis kode.
  • Memahami fungsi setiap tag.
  • Tidak sekadar menyalin kode.
  • Menyadari kesalahan dan memperbaikinya.
  • Merefleksikan proses belajarnya. 

· Pembelajaran dilakukan melalui praktik langsung, eksplorasi, permainan tebak kode, tantangan membuat halaman web, kerja berpasangan, dan menampilkan hasil karya di browser sehingga peserta didik merasa senang dan percaya diri. (Joyful)


ATP : 

  • Murid mampu menggunakan perangkat lunak penyunting teks untuk membuat dokumen HTML sederhana.


Model / Metode : Deep Learning, model Project Based Learning (PjBL), dan metode yang bervariasi mendukung pembelajaran yang bermakna, aktif, kreatif, dan menyenangkan, sekaligus mengembangkan keterampilan digital dasar sesuai Kurikulum Merdeka.


Penjabaran Materi :
1. Apa Itu HTML? 

HTML merupakan singkatan dari: 
HyperText Markup Language.HTML adalah bahasa markup yang digunakan untuk membuat dan menyusun struktur sebuah halaman web.

HTML bukan bahasa pemrograman seperti Python atau Java. HTML digunakan untuk memberikan struktur pada isi halaman web.

Dengan HTML kita dapat menentukan bagian halaman seperti: Judul
Subjudul
Paragraf
Tautan
Gambar
Daftar
Tabel
dan berbagai elemen lainnya.
 

Contoh sederhana
<h1>Belajar HTML</h1> <p>Saya sedang belajar membuat halaman web.</p>

Kode tersebut dapat menghasilkan halaman yang memiliki judul dan paragraf.
 

E. FUNGSI HTML

HTML memiliki beberapa fungsi utama.
1. Membuat struktur halaman web 

HTML menentukan bagian-bagian halaman seperti judul, paragraf, gambar, dan daftar.
 

2. Menampilkan informasi

HTML digunakan untuk menyajikan teks dan informasi pada halaman web.
 

3. Menghubungkan halaman

HTML dapat digunakan untuk membuat tautan atau link menuju halaman lain.
4. Menyusun konten

HTML membantu menyusun konten agar halaman web lebih terstruktur dan mudah dipahami.
F. APLIKASI YANG DIGUNAKAN UNTUK MEMBUAT HTML

Untuk belajar HTML dasar, kita tidak membutuhkan aplikasi yang rumit.
1. Text Editor

Text editor adalah aplikasi yang digunakan untuk menulis kode.

Contohnya: Notepad
Visual Studio Code
Notepad++
Sublime Text

Untuk pembelajaran kelas 6 SD, Notepad dapat digunakan karena sederhana dan mudah dipahami.
Fungsi Text Editor

Text editor digunakan untuk: Menulis kode HTML.
Mengedit kode HTML.
Menyimpan kode HTML.
Memperbaiki kesalahan kode.
 

G. BROWSER 
Setelah kode HTML dibuat menggunakan text editor, hasilnya dapat ditampilkan menggunakan browser.

Contoh browser: Google Chrome
Microsoft Edge
Mozilla Firefox
Opera
 

Fungsi Browser = Browser digunakan untuk Membaca dan menampilkan hasil kode HTML menjadi halaman web.
 

Perbedaan Text Editor dan Browser 
Text Editor Browser Digunakan untuk menulis kode Digunakan untuk melihat hasil kode
Contoh: Notepad Contoh: Chrome
Menyunting kode Menampilkan halaman web
Menghasilkan file HTML Membaca file HTML

Analogi Sederhana

Guru dapat menjelaskan: 
Text editor = tempat kita menulis resep.
Browser = tempat kita melihat hasil masakan dari resep tersebut.

 
H. MENGENAL KODE HTML

Kode HTML tersusun dari berbagai tag. Tag ditulis menggunakan tanda: < >

Contoh:
<h1>Judul</h1>

Pada contoh tersebut: <h1> = tag pembuka
Judul = isi
</h1> = tag penutup

Tag penutup biasanya menggunakan tanda /.
 

I. APA ITU TAG?

Tag adalah kode HTML yang digunakan untuk memberi tahu browser bagaimana suatu bagian halaman harus disusun atau ditampilkan. 
Contoh:
<p>Ini adalah paragraf.</p>

Tag:
<p>
digunakan untuk memulai paragraf.

Sedangkan:
</p>
digunakan untuk mengakhiri paragraf.
 

J. CONTOH TAG HTML DASAR

Tag Fungsi <html> Menandai dokumen HTML
<head> Berisi informasi tentang dokumen
<title> Menentukan judul halaman pada tab browser
<body> Berisi isi halaman yang ditampilkan
<h1> Membuat judul utama
<h2> Membuat subjudul
<p> Membuat paragraf
<br> Membuat pindah baris
<b> Membuat teks tebal
<i> Membuat teks miring

K. STRUKTUR DASAR HTML

Secara sederhana, struktur dasar HTML dapat ditulis sebagai berikut: <html> <head> <title>Halaman Saya</title> </head> <body> <h1>Belajar HTML</h1> <p> Saya sedang belajar HTML dasar. </p> </body> </html>

L. PENJELASAN STRUKTUR HTML 
1. <html> 

Tag <html> merupakan pembungkus utama seluruh dokumen HTML.

Strukturnya:
<html> ... </html>
Semua bagian utama dokumen HTML berada di dalam tag tersebut.
 

2. <head>
<head>
Bagian <head> berisi informasi mengenai dokumen HTML.

Contohnya:
<head> <title>Belajar HTML</title> </head>


4. <title>
<title>
Digunakan untuk menentukan judul yang ditampilkan pada tab browser. 
Contoh:
<title>Belajar HTML</title>

5. <body>
<body>
jika dibuka di browser, tulisan Belajar HTML akan muncul pada bagian tab. 
Bagian <body> berisi isi halaman yang akan ditampilkan kepada pengguna. 
Contohnya:
<body> <h1>Selamat Datang</h1> <p>Ini adalah halaman web saya.</p> </body>

M. BAGIAN PENTING DALAM STRUKTUR HTML

Secara sederhana, peserta didik dapat mengingat:
HTML │ ├── HEAD │ └── TITLE │ └── BODY  

Dengan demikian: 
<html> → dokumen HTML 
<head> → informasi dokumen 
<title> → judul tab browser 
<body> → isi halaman web 


N. CONTOH HTML LENGKAP 
Berikut contoh sederhana yang dapat diketik oleh peserta didik: <html> <head> <title>Website Saya</title> </head> <body> <h1>Selamat Datang</h1> <p> Nama saya Ahmad. </p> <p> Saya siswa kelas 6 SD. </p> </body> </html>


Kesimpulan :

1. Kesimpulan materi  

Guru memberikan umpan balik positif dan merangkum tentang struktur dasar html.

2. Refleksi pembelajaran

- Kendala

- Tindak lanjut

- Jumlah siswa yang paham/belum paham

Komentar

Posting Komentar

Popular Posts

Kisi - Kisi STS Kelas 5 Semester Genap

Hari / Tanggal : Rabu/ 12 Maret 2025 Mata Pelajaran : TIK / Komputer Kelas : 5 (SD Al - Azhar 1 Bandar Lampung) Tema :  Menggunakan Program Microsoft Excel Assalamualaikum wr.wb Bagaimana kabar anak sholeh dan sholehah ? Alhamdulillah semoga kita semua dalam keadaan sehat dan selalu dalam lindungan Allah SWT aamiin. Pada pertemuan kali ini, miss akan memberikan kisi-kisi untuk Penilaian Tengah Semester. Sholeh-Sholehah bisa mempelajari dari kisi-kisi ini ya :). Berikut kisi-kisi nya: Ms Excel adalah progam pengolah angka yang dilengkapi dengan fitur kalkulasi dan pembuatan grafik. Berikut ini adalah gambar Tampilan Microsoft Office Excel : Berikut adalah keterangan-keterangan dari tampilan diatas: 1. Office Button, terdiri atas perintah New document, open dokument, save, save as, print, prepare, send, publish, close. 2. Quick Access terdiri dari beberapa tombol yang bisa mempercepat pekerjaan kita. isi tombol tersebut sebagian ada pada menu office button, kecuali undo dan redo. 3. ...
Posting Komentar
Baca selengkapnya

Kisi - Kisi US 2026

Hari / Tanggal : Kamis/ 7 Mei 2026 Mata Pelajaran : TIK / Komputer Kelas : 6 (SD Al - Azhar 1 Bandar Lampung) Tema :  Menggunakan Program Microsoft Office, Program Coreldraw, dan HTML Assalamualaikum wr.wb Bagaimana kabar anak sholeh dan sholehah ? Alhamdulillah semoga kita semua dalam keadaan sehat dan selalu dalam lindungan Allah SWT aamiin. Bagamana nih... Sudah siap untuk melaksanakan Ujian Sekolah??? Yukkk kita persiapkan dengan cara belajar dengan giat dan tekun:) Pada pertemuan kali ini, miss akan memberikan kisi-kisi untuk Ujian Sekolah. Sholeh-Sholehah bisa mempelajari dari kisi-kisi ini ya :). Berikut kisi-kisi nya: https://drive.google.com/file/d/11ctUjhTxkheDkHV_lTJPOmPPk8S2DM4o/view?usp=sharing Baiklah untuk pertemuan hari ini hanya itu saja yang dapat Miss sampaikan. Semoga apa yang Miss sampaikan berguna untuk sholeh-sholehah belajar ya:) Jangan lupa berdoa sebelum memulai ujian dan good luck kids:) Tetap semangat sekolahnya dan tetap istiqomah untuk melaksanakan sha...
2 komentar
Baca selengkapnya

Materi Ajar Kelas 6 Pertemuan Ke 8 Semester Genap

Hari / Tanggal : Selasa/ 3 Maret 2026 Mata Pelajaran : TIK / Komputer Kelas : 6 Ibnu Sina (SD Al - Azhar 1 Bandar Lampung) Tema :  Menggunakan Program Microsoft Office, Program Coreldraw, dan HTML Assalamualaikum wr.wb Bagaimana kabar anak sholeh dan sholehah ? Alhamdulillah semoga kita semua dalam keadaan sehat dan selalu dalam lindungan Allah SWT aamiin. Pada pertemuan kali ini, miss akan memberikan kisi-kisi untuk Latihan Ujian Sekolah. Sholeh-Sholehah bisa mempelajari dari kisi-kisi ini ya :). Berikut kisi-kisi nya: https://docs.google.com/document/d/1m11lr9UpyYCgIii0N9HV0b5rvx87POU7/edit?usp=sharing&ouid=111766177864914153420&rtpof=true&sd=true Baiklah untuk pertemuan hari ini hanya itu saja yang dapat Miss sampaikan. Semoga apa yang Miss sampaikan berguna untuk sholeh-sholehah belajar ya:) Jangan lupa berdoa sebelum memulai ujian dan good luck kids:) Tetap semangat sekolahnya dan tetap istiqomah untuk melaksanakan shalat 5 waktu berjamaah dan tepat waktu. Sampai b...
Posting Komentar
Baca selengkapnya