~~ SELAMAT DATANG KELAS 6 A DAN 6 B~~

Identitas :

Nama Guru: Silvia Ranti, S.Kom

Hari / Tanggal: Senin, 24 Agustus 2026

Fase / Kelas: C / 6A dan 6B

Mata Pelajaran: Teknologi Informasi dan Komunikasi (TIK)

Materi: Membuat garis horizontal dengan menggunakan HTML

Pertemuan Ke: 5 (2 JP)

🌟 MEMBUAT GARIS HORIZONTAL DENGAN HTML 🌟

🌷 APERSEPSI

Bismillahirrahmanirrahim.

Assalamu’alaikum Wr. Wb.

Apa kabar anak-anak sholih dan sholihah? 😊
Semoga hari ini semuanya dalam keadaan sehat, bahagia, dan siap mengikuti pembelajaran TIK dengan penuh semangat.

Sebelum belajar, jangan lupa untuk selalu bersyukur kepada Allah SWT atas segala nikmat yang telah diberikan kepada kita.

Allah adalah Maha Khaliq (Pencipta). Allah SWT menciptakan manusia, alam semesta, serta memberikan kemampuan kepada manusia untuk belajar dan menciptakan berbagai teknologi.

Allah juga Maha Malik (Pemelihara). Allah memelihara dan memberikan kesempatan kepada kita untuk belajar menggunakan teknologi dengan baik dan bertanggung jawab.

Allah adalah Maha Razaq (Pemberi Rezeki). Allah memberikan ilmu dan kemampuan kepada kita sebagai bekal untuk kehidupan. Salah satunya adalah kemampuan mempelajari teknologi komputer dan HTML.

Hari ini kita akan belajar membuat garis horizontal pada halaman web menggunakan HTML. Garis horizontal dapat digunakan untuk memisahkan bagian-bagian informasi agar halaman web terlihat lebih rapi dan mudah dibaca.

Mari kita belajar dengan tenang, teliti, dan menyenangkan. 🌟

🌙 Hadis tentang Menuntut Ilmu

مَنْ سَلَكَ طَرِيقًا يَلْتَمِسُ فِيهِ عِلْمًا، سَهَّلَ اللَّهُ لَهُ بِهِ طَرِيقًا إِلَى الْجَنَّةِ

Artinya:
“Barang siapa menempuh jalan untuk mencari ilmu, maka Allah akan memudahkan baginya jalan menuju surga.”

(HR. Muslim)

Hadis ini mengajarkan kepada kita bahwa menuntut ilmu adalah sesuatu yang mulia. Saat belajar HTML, Notepad, dan teknologi komputer, kita hendaknya belajar dengan sungguh-sungguh, sabar, teliti, dan menggunakan ilmu tersebut untuk hal-hal yang bermanfaat.

Pesan untuk anak-anak:
🌟 “Mari belajar TIK dengan niat mencari ilmu yang bermanfaat. Gunakan teknologi dengan bijak untuk berkarya, belajar, dan membantu sesama.”

🎯 CAPAIAN PEMBELAJARAN (CP)

Peserta didik memahami konsep dasar HTML, penggunaan Notepad sebagai editor teks, serta struktur dan elemen dasar dalam dokumen HTML.

🎯 TUJUAN PEMBELAJARAN (TP)

Setelah mengikuti pembelajaran, peserta didik diharapkan mampu:

Menjelaskan pengertian HTML dengan bahasa sederhana.
Mengenal Notepad sebagai editor teks untuk membuat dokumen HTML.
Menjelaskan fungsi tag HTML sederhana.
Mengenal tag <hr> untuk membuat garis horizontal.
Menuliskan kode HTML sederhana menggunakan Notepad.
Membuat dokumen HTML yang menampilkan garis horizontal dengan benar.
Menyimpan dokumen HTML dengan ekstensi .html.
Membuka file HTML menggunakan browser dan mengamati hasilnya.
Meaningful: Menghubungkan penggunaan garis horizontal dengan kebutuhan membuat halaman web yang rapi.
Mindful: Bekerja secara teliti, sabar, dan bertanggung jawab saat menuliskan kode HTML.
Joyful: Menunjukkan rasa senang dan percaya diri saat mencoba membuat halaman HTML sederhana.

🧭 ALUR TUJUAN PEMBELAJARAN (ATP)

Peserta didik mengikuti langkah-langkah berikut:

➜ Mengenal kembali pengertian HTML dan kegunaannya dalam membuat halaman web.

➜ Mengenal Notepad sebagai aplikasi sederhana untuk menulis kode HTML.

➜ Mengamati struktur dasar dokumen HTML.

➜ Mengenal tag <hr> sebagai elemen HTML untuk membuat garis horizontal.

➜ Guru memberikan demonstrasi cara menulis kode HTML menggunakan Notepad.

➜ Peserta didik mencoba mengetik kode HTML secara mandiri.

➜ Peserta didik menyimpan file dengan format .html.

➜ Peserta didik membuka file HTML menggunakan browser.

➜ Peserta didik mengamati garis horizontal yang muncul pada halaman web.

➜ Peserta didik melakukan modifikasi sederhana pada halaman HTML dan mengamati hasilnya.

➜ Peserta didik mengerjakan latihan untuk mengetahui pemahaman materi.

🧩 MODEL / METODE

Model: Discovery Learning, PJBL Project Based Learning

Metode:

Tanya jawab
Demonstrasi
Praktik langsung
Diskusi
Penugasan

💻 PENJABARAN MATERI

Modul TIK Kelas 6

🌐 MATERI PEMBELAJARAN

1. Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language.

HTML digunakan untuk membuat dan menyusun struktur sebuah halaman web.

Dengan HTML kita dapat membuat halaman yang berisi:

Teks
Judul
Paragraf
Gambar
Tautan
Tabel
Garis horizontal
dan berbagai elemen lainnya.

2. Apa Itu Notepad?

Notepad adalah aplikasi editor teks sederhana yang dapat digunakan untuk menulis kode HTML.

Notepad memiliki tampilan sederhana sehingga cocok digunakan untuk belajar membuat dokumen HTML dasar.

Contoh alurnya:

Notepad → Menulis kode HTML → Menyimpan sebagai .html → Membuka dengan Browser

📝 3. Struktur HTML Sederhana

Contoh dokumen HTML sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML</title>
</head>
<body>

    <h1>Belajar HTML</h1>
    <p>Ini adalah halaman web sederhana.</p>

</body>
</html>

Beberapa bagian penting:

<html>
Menandai awal dan akhir dokumen HTML.

<head>
Berisi informasi mengenai halaman web.

<title>
Menentukan judul halaman yang tampil pada tab browser.

<body>
Berisi isi utama halaman web.

➖ 4. Membuat Garis Horizontal dengan HTML

Untuk membuat garis horizontal pada halaman HTML, kita dapat menggunakan tag:

<hr>

Tag <hr> digunakan untuk membuat garis horizontal sebagai pemisah antara bagian-bagian pada halaman web.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Garis Horizontal</title>
</head>
<body>

    <h1>Belajar HTML</h1>

    <hr>

    <p>Saya sedang belajar membuat halaman web.</p>

</body>
</html>

Hasilnya:

Belajar HTML

━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Saya sedang belajar membuat halaman web.

🖥️ 5. LANGKAH-LANGKAH PRAKTIK

Langkah 1

Buka aplikasi Notepad pada komputer.

Langkah 2

Ketik kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Garis HTML</title>
</head>
<body>

    <h1>Belajar HTML</h1>

    <hr>

    <p>Hari ini saya belajar membuat garis horizontal.</p>

</body>
</html>

Langkah 3

Klik File → Save As.

Langkah 4

Beri nama file:

belajar.html

Langkah 5

Pada bagian Save as type, pilih:

All Files

Langkah 6

Simpan file.

Langkah 7

Cari file belajar.html, kemudian buka menggunakan browser.

Langkah 8

Amati hasilnya.

🎉 Selamat! Kalian telah berhasil membuat garis horizontal menggunakan HTML.

⭐ 6. TUGAS PRAKTIK

Buatlah sebuah halaman HTML sederhana dengan ketentuan:

Judul halaman: Belajar HTML
Buat heading: Saya Suka Belajar TIK
Buat satu paragraf tentang kegiatan belajar TIK.
Buat garis horizontal menggunakan tag <hr>.
Simpan dengan nama:

tugas_html_nama.html

Buka hasilnya menggunakan browser.

📝 7. ASESMEN FORMATIF

A. Pilihan Ganda

1. HTML merupakan singkatan dari ....

A. HyperText Markup Language
B. Hyper Tool Making Language
C. HighText Machine Language
D. Hyperlink Text Making Language

2. Aplikasi sederhana yang dapat digunakan untuk menulis kode HTML adalah ....

A. Calculator
B. Notepad
C. Paint
D. Camera

3. Tag yang digunakan untuk membuat garis horizontal adalah ....

A. <line>
B. <br>
C. <hr>
D. <horizontal>

4. File HTML biasanya disimpan dengan ekstensi ....

A. .docx
B. .jpg
C. .pptx
D. .html

5. Setelah file HTML dibuat menggunakan Notepad, untuk melihat hasil halaman web kita dapat membukanya menggunakan ....

A. Browser
B. Calculator
C. Paint
D. File Explorer saja

B. Isian

1. HTML adalah singkatan dari ____________.

2. Aplikasi sederhana untuk menulis kode HTML adalah ____________.

3. Tag HTML untuk membuat garis horizontal adalah ____________.

C. Esai

1. Jelaskan fungsi tag <hr> dalam HTML!

2. Jelaskan langkah sederhana membuat file HTML menggunakan Notepad sampai dapat dilihat di browser!

🔐 KUNCI JAWABAN DAN PEMBAHASAN

Pilihan Ganda

A — HTML adalah singkatan dari HyperText Markup Language.
B — Notepad dapat digunakan sebagai editor teks sederhana untuk menulis HTML.
C — Tag <hr> digunakan untuk membuat garis horizontal.
D — Dokumen HTML disimpan dengan ekstensi .html.
A — Browser digunakan untuk menampilkan hasil dokumen HTML.

Isian

HyperText Markup Language
Notepad
<hr>

Esai

1. Tag <hr> digunakan untuk membuat garis horizontal yang berfungsi sebagai pemisah antarbagian pada halaman HTML.

2. Langkahnya yaitu membuka Notepad, mengetik kode HTML, memilih Save As, menyimpan dengan ekstensi .html, kemudian membuka file tersebut menggunakan browser untuk melihat hasilnya.

🌟 KESIMPULAN / REFLEKSI

📚 Kesimpulan Materi

Hari ini kita telah belajar bahwa HTML digunakan untuk membuat dan menyusun halaman web. Kita juga mengenal Notepad sebagai editor teks sederhana untuk menulis kode HTML.

Untuk membuat garis horizontal pada halaman web, kita menggunakan tag:

<hr>

File HTML dapat disimpan dengan ekstensi .html kemudian dibuka menggunakan browser untuk melihat hasilnya.

💭 Refleksi Pembelajaran

Setelah mengikuti pembelajaran hari ini:

Saya sudah bisa:
☑ Mengenal HTML.
☑ Menggunakan Notepad untuk menulis kode HTML.
☑ Mengenal tag <hr>.
☑ Membuat garis horizontal.
☑ Menyimpan file HTML.
☑ Membuka hasil HTML menggunakan browser.

Pertanyaan refleksi:

Apa yang dimaksud dengan HTML?
Apa fungsi Notepad dalam pembelajaran hari ini?
Apa fungsi tag <hr>?
Apakah kamu berhasil membuat garis horizontal?
Bagian mana yang masih terasa sulit?

🔎 Kendala Pembelajaran

Tuliskan kendala yang dialami selama praktik:

🔄 Tindak Lanjut

Peserta didik yang sudah memahami materi dapat mencoba membuat halaman HTML sederhana dengan beberapa garis horizontal dan teks.

Peserta didik yang masih mengalami kesulitan akan mendapatkan bimbingan dan praktik ulang secara bertahap.

🌱 PESAN HARI INI

“Belajar teknologi bukan hanya tentang bisa menggunakan komputer, tetapi juga belajar menciptakan sesuatu dengan ilmu yang kita miliki.”

Tetap semangat belajar, teliti dalam menulis kode, dan gunakan teknologi untuk hal-hal yang bermanfaat. 💻✨

Alhamdulillah.

Wassalamu’alaikum Wr. Wb.

Dokumentasi ;

Senin 24 Agustus 2026 TIK Kelas 6B (09.00 - 10.10) Dan 6A (10.25 - 11.35) MAULID NABI MUHAMMAD