Materi Ajar Kelas 6 Pertemuan Ke 8 Semester Ganjil

📚 IDENTITAS
📚 Nama Guru: Erni Sri Wahyuni
📚 Mata Pelajaran: TIK
📚 Hari/Tanggal: Kamis/10 September 2026
📚 Pertemuan: Ke-8
🎓 Kelas: 6 Al Khawarizmi
💡 Materi: Menggunakan Tag Dasar HTML untuk Mengatur Tampilan Teks
🎯 Tujuan Umum: Memahami cara mengatur tampilan teks pada dokumen html

🎯 Capaian Pembelajaran (CP)

Peserta didik mampu memahami dan menerapkan struktur serta elemen dasar HTML untuk membuat halaman web sederhana. Peserta didik mampu menggunakan tag HTML secara tepat untuk mengatur struktur dan tampilan teks, serta menunjukkan sikap teliti, kreatif, bertanggung jawab, dan mampu mengembangkan hasil karya digital sederhana.

🎯 Tujuan Pembelajaran (TP)

TP Umum:
Peserta didik mampu memahami penggunaan cara mengatur tampilan teks pada HTML menggunakan tag dasar seperti <br>, <b>, <i>, <u>, dan <hr>.

Dimensi	Tujuan Pembelajaran
Mindful 🧘	Peserta didik mampu menggunakan tag HTML dengan teliti, menyadari bahwa setiap tag memiliki fungsi tertentu, serta memeriksa kembali kode sebelum melihat hasilnya pada browser.
Meaningful 💡	Peserta didik mampu menghubungkan penggunaan tag HTML dengan kebutuhan nyata, misalnya membuat judul, paragraf, teks penting, teks miring, teks bergaris bawah, dan garis pemisah pada halaman web.
Joyful 😊	Peserta didik mampu mencoba berbagai tag HTML melalui kegiatan praktik sederhana dan membuat tampilan teks yang menarik dengan rasa senang, percaya diri, dan kreatif.

🧭 Alur Tujuan Pembelajaran (ATP)

Tahap	Alur Tujuan Pembelajaran
1. Mengenal	Peserta didik mengenal fungsi tag <br>, <b>, <i>, <u>, dan <hr>.
2. Memahami	Peserta didik menjelaskan perbedaan fungsi masing-masing tag untuk mengatur tampilan teks.
3. Mencoba	Peserta didik menuliskan contoh kode HTML menggunakan tag dasar tersebut melalui text editor.
4. Mengaplikasikan	Peserta didik membuat halaman HTML sederhana yang menggunakan beberapa tag untuk mengatur tampilan teks.
5. Merefleksikan	Peserta didik memeriksa hasil kode, menemukan kesalahan sederhana, memperbaikinya, dan menjelaskan manfaat tag yang telah digunakan.

👩‍🏫 Model dan Metode Pembelajaran

Model: Demonstrasi dan Project Based Learning sederhana.
Metode: Tanya jawab, demonstrasi, diskusi, praktik langsung, eksplorasi, penugasan, dan refleksi.

🌙 Pembukaan Pembelajaran: Mengagumi Kebesaran Allah

Al-Khaliq (الخالق) berarti Allah Maha Pencipta. Allah menciptakan manusia dengan kemampuan berpikir dan belajar.

Ar-Razzaq (الرزاق) berarti Allah Maha Pemberi Rezeki. Ilmu, kesempatan belajar, komputer, dan teknologi yang kita gunakan merupakan nikmat yang harus disyukuri dan dimanfaatkan dengan baik.

Al-Malik (الملك) berarti Allah Maha Merajai. Semua yang ada di alam semesta berada dalam kekuasaan Allah. Teknologi yang kita gunakan juga harus dipakai secara bertanggung jawab.

Kaitannya dengan materi: Saat kita belajar HTML, kita menyusun kode sehingga komputer menampilkan teks dengan bentuk tertentu. Kemampuan manusia menciptakan teknologi dan bahasa pemrograman merupakan bagian dari nikmat ilmu yang Allah berikan.

💭 Pertanyaan mendalam:

• Mengapa manusia perlu belajar menggunakan teknologi dengan bijaksana?
• Jika manusia dapat membuat halaman web dengan kode, siapa yang menciptakan manusia dengan kemampuan berpikir dan belajar?
• Mengapa satu kode HTML dapat menghasilkan tampilan yang berbeda ketika kita mengubah tag-nya?
• Bagaimana cara kita menunjukkan rasa syukur kepada Allah ketika menggunakan komputer dan internet?

🔄 Apersepsi: Mengingat Materi Sebelumnya

Sebelum mempelajari tag untuk mengatur tampilan teks, mari mengingat kembali materi sebelumnya tentang elemen heading HTML seperti <h1> sampai <h6>.

1. Benar atau Salah: Tag <h1> digunakan untuk membuat heading dengan tingkat paling utama.

2. Benar atau Salah: Tag <h6> merupakan heading dengan tingkat yang lebih rendah dibandingkan <h1>.

3. Benar atau Salah: Semua tag heading <h1> sampai <h6> memiliki fungsi yang sama persis.

4. Benar atau Salah: Tag <h1> biasanya digunakan untuk judul utama halaman.

5. Benar atau Salah: Heading tidak dapat digunakan untuk membantu menyusun struktur informasi pada halaman web.

🎬 Video Pembelajaran

Sebelum mempelajari materi, simak video pembelajaran berikut sebagai pengantar:

▶️ Menonton Video: Tag Dasar HTML br, b, i, u, dan hr

Perhatikan fungsi setiap tag dan bandingkan hasilnya ketika kode dijalankan di browser.

📚 Materi Pembelajaran

HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk menyusun struktur halaman web. Selain membuat struktur, HTML juga memiliki berbagai tag yang dapat digunakan untuk mengatur tampilan dan penyajian teks.

Pada materi hari ini kita mempelajari lima tag dasar:

<br> <b> <i> <u> <hr>

1. ↩️ Tag <br> — Membuat Baris Baru

Tag <br> digunakan untuk membuat teks berpindah ke baris berikutnya. Tag ini berguna ketika kita ingin mengatur posisi teks agar tampil pada baris yang berbeda.

<p>
Nama saya Andi<br>
Saya siswa kelas 6 SD<br>
Saya sedang belajar HTML.
</p>

Hasilnya akan tampil menjadi:

Nama saya Andi
Saya siswa kelas 6 SD
Saya sedang belajar HTML.

Catatan: <br> tidak membutuhkan tag penutup seperti </br>.

2. 🅱️ Tag <b> — Membuat Teks Tebal

Tag <b> digunakan untuk menampilkan teks dalam bentuk tebal.

<p>Saya sedang belajar <b>HTML</b>.</p>

Hasilnya:

Saya sedang belajar HTML.

Tag ini dapat digunakan untuk memberikan perhatian lebih pada kata tertentu.

3. ✏️ Tag <i> — Membuat Teks Miring

Tag <i> digunakan untuk membuat teks menjadi miring.

<p>HTML adalah bahasa <i>markup</i>.</p>

Hasilnya:

HTML adalah bahasa markup.

4. ✍️ Tag <u> — Memberi Garis Bawah

Tag <u> digunakan untuk membuat teks memiliki garis bawah.

<p>Ini adalah <u>teks penting</u>.</p>

Hasilnya:

Ini adalah teks penting.

5. ➖ Tag <hr> — Membuat Garis Pemisah

Tag <hr> digunakan untuk membuat garis horizontal yang berfungsi sebagai pemisah antara bagian informasi.

<h2>Materi HTML</h2>
<hr>
<p>Kita belajar tag dasar HTML.</p>

Hasilnya:

Materi HTML

---

Kita belajar tag dasar HTML.

🧩 Contoh Penggunaan Bersama

Tag-tag tersebut dapat digunakan secara bersamaan untuk membuat teks lebih teratur.

<h1>Belajar HTML</h1>
<hr>

<p>
Nama: <b>Siti</b><br>
Kelas: <i>6 SD</i><br>
Materi: <u>HTML Dasar</u>
</p>

Contoh tersebut menggunakan:

• <hr> → membuat garis pemisah.
• <b> → membuat nama menjadi tebal.
• <i> → membuat teks kelas menjadi miring.
• <u> → memberi garis bawah pada materi.
• <br> → memindahkan teks ke baris berikutnya.

🧠 Tabel Ringkas Fungsi Tag

Tag	Fungsi	Contoh
<br>	Membuat baris baru.	Nama<br>Kelas
<b>	Membuat teks tebal.	<b>Penting</b>
<i>	Membuat teks miring.	<i>HTML</i>
<u>	Memberikan garis bawah pada teks.	<u>Belajar</u>
<hr>	Membuat garis horizontal sebagai pemisah.	<hr>

📝 Latihan Pilihan Ganda

Pilihlah jawaban yang paling tepat!

1. [Mudah]
Tag yang digunakan untuk membuat baris baru adalah ....
A. <br>
B. <b>
C. <i>
D. <hr>

2. [Mudah]
Tag <b> digunakan untuk ....
A. membuat garis
B. membuat teks tebal
C. membuat baris baru
D. membuat teks miring

3. [Mudah]
Tag yang digunakan untuk membuat teks miring adalah ....
A. <u>
B. <b>
C. <i>
D. <br>

4. [Sedang]
Perhatikan kode berikut:
Nama saya Budi<br>Kelas 6 SD
Fungsi <br> pada kode tersebut adalah ....
A. menebalkan teks
B. memberi garis bawah
C. membuat garis horizontal
D. memindahkan “Kelas 6 SD” ke baris berikutnya

5. [Sedang]
Kode yang tepat untuk membuat kata “HTML” menjadi tebal adalah ....
A. <b>HTML</b>
B. <i>HTML</i>
C. <u>HTML</u>
D. <br>HTML</br>

6. [Sedang]
Jika ingin memberi garis bawah pada kata “Belajar”, kode yang tepat adalah ....
A. <i>Belajar</i>
B. <b>Belajar</b>
C. <u>Belajar</u>
D. <br>Belajar</br>

7. [Sedang]
Tag <hr> paling tepat digunakan ketika kita ingin ....
A. membuat teks miring
B. membuat teks tebal
C. membuat baris baru
D. membuat garis pemisah antarbagian

8. [Sukar]
Perhatikan kode berikut:
<b>Nama</b><br><i>Kelas 6</i>
Tampilan yang dihasilkan adalah ....
A. Nama dan Kelas 6 berada dalam satu baris dan semuanya tebal
B. “Nama” tebal, kemudian “Kelas 6” berada di baris berikutnya dengan tulisan miring
C. “Nama” bergaris bawah dan “Kelas 6” tebal
D. “Nama” miring dan “Kelas 6” berada di baris yang sama

9. [Sukar]
Seorang siswa ingin membuat halaman yang terdiri dari judul, garis pemisah, kemudian informasi nama dan kelas pada baris yang berbeda. Tag yang paling tepat digunakan secara bersama adalah ....
A. <b>, <i>, dan <u>
B. <i> dan <u> saja
C. <hr> dan <br>
D. <b> dan <i> saja

10. [Sukar]
Perhatikan kode berikut:
<p><b>Belajar HTML</b><br> Saya sedang belajar <i>tag HTML</i>.<br> <u>Semangat belajar!</u></p>
Pernyataan yang benar adalah ....
A. Semua teks akan menjadi tebal
B. Semua teks akan menjadi miring
C. “Belajar HTML” tebal, “tag HTML” miring, dan “Semangat belajar!” bergaris bawah
D. Tidak ada teks yang berubah tampilannya

✅ Kunci Jawaban

1. A
2. B
3. C
4. D
5. A
6. C
7. D
8. B
9. C
10. C

🌱 Penerapan Pembelajaran Mendalam

Pendekatan	Penerapan dalam Pembelajaran
Mindful 🧘	Murid memperhatikan fungsi setiap tag, menulis kode dengan teliti, membaca kembali kode sebelum dijalankan, serta memeriksa kesalahan apabila tampilan tidak sesuai.
Meaningful 💡	Murid memahami bahwa tag HTML bukan sekadar kode, tetapi memiliki fungsi nyata untuk menyusun informasi agar halaman web lebih teratur, jelas, dan mudah dibaca.
Joyful 😊	Murid melakukan praktik langsung dengan mencoba kombinasi tag <br>, <b>, <i>, <u>, dan <hr> sehingga dapat melihat perubahan hasil secara langsung.

💻 Aktivitas Praktik Sederhana

Tantangan: Buatlah halaman HTML sederhana dengan ketentuan berikut:

1. Buat judul “Profil Saya”.
2. Gunakan <hr> setelah judul.
3. Tuliskan nama dan kelas pada baris berbeda menggunakan <br>.
4. Buat nama menjadi tebal menggunakan <b>.
5. Buat kata “belajar HTML” menjadi miring menggunakan <i>.
6. Buat satu kalimat penting menggunakan <u>.

<h1>Profil Saya</h1>
<hr>

<p>
Nama: <b>Nama Kamu</b><br>
Kelas: 6 SD<br>
Saya senang <i>belajar HTML</i>.<br>
<u>Saya akan belajar dengan sungguh-sungguh.</u>
</p>

🤔 Refleksi

• Tag apa yang paling mudah kamu pahami?
• Apa fungsi <br> dalam sebuah halaman HTML?
• Mengapa kita perlu menulis kode HTML dengan teliti?
• Tag apa yang ingin kamu coba kombinasikan dengan tag lainnya?
• Bagaimana perasaanmu setelah berhasil melihat hasil kode HTML di browser?

📌 Kesimpulan

HTML memiliki berbagai tag dasar yang dapat digunakan untuk mengatur penyajian teks pada halaman web. Tag <br> digunakan untuk membuat baris baru, <b> untuk membuat teks tebal, <i> untuk membuat teks miring, <u> untuk memberikan garis bawah, dan <hr> untuk membuat garis pemisah. Dengan memahami fungsi setiap tag dan menggunakannya secara tepat, kita dapat membuat halaman HTML yang lebih teratur, jelas, dan mudah dibaca. Yang terpenting, belajar HTML membutuhkan ketelitian, kreativitas, dan kemauan untuk terus mencoba. 🌟 Ingat: Kode yang sederhana dapat menghasilkan tampilan yang menarik jika kita memahami fungsi setiap tag dan menggunakannya dengan tepat.

💻 Selamat Belajar HTML!
Belajar dengan Mindful, memahami dengan Meaningful, dan berlatih dengan Joyful. 😊