Materi Ajar Kelas 6 Pertemuan Ke 13 Semester Ganjil

💻 Materi TIK Kelas 6 🔗

Membuat Tautan (Link) dengan Tag <a>
📅 Pertemuan Hari Ini

🏷️ <a> ➡️ 🔗

📚 IDENTITAS
📚 Nama Guru: Erni Sri Wahyuni
📚 Mata Pelajaran: TIK
📚 Hari/Tanggal: Jumat/16 Oktober 2026
📚 Pertemuan: Ke-13
🎓 Kelas: 6 Al Jazari dan Ibnu Sina
💡 Materi: Membuat link pada halaman web
🎯 Tujuan Umum: Memahami penggunaan tag a

📌 CAPAIAN PEMBELAJARAN (CP)

Peserta didik mampu mengenal, memahami, dan mempraktikkan penggunaan tag HTML <a> beserta atribut href untuk membuat tautan (link) yang menghubungkan ke halaman lain atau situs web, sehingga mampu membuat halaman web yang lebih interaktif dan saling terhubung, sekaligus melatih logika berpikir dan ketelitian dalam menulis kode program dasar.

🎯 TUJUAN PEMBELAJARAN (TP)

TP Umum: Peserta didik mampu memahami dan menggunakan tag <a> untuk membuat tautan yang menghubungkan halaman atau situs web.

Tujuan Pembelajaran Mendalam

🧘 Mindful: Peserta didik mampu mengamati dengan teliti struktur penulisan tag <a> beserta atribut href, serta memastikan alamat tautan dituliskan dengan benar sebelum mempraktikkannya.

💡 Meaningful: Peserta didik memahami manfaat nyata tautan dalam kehidupan sehari-hari, misalnya menghubungkan ke sumber belajar, media sosial sekolah, atau halaman web lain yang bermanfaat.

🎉 Joyful: Peserta didik belajar dengan senang dan percaya diri melalui video, kuis interaktif, dan praktik langsung membuat tautan sendiri pada halaman web.

🧭 ALUR TUJUAN PEMBELAJARAN (ATP)

1. Peserta didik mengingat kembali materi tag <img> pada pertemuan sebelumnya.
2. Peserta didik mengamati struktur penulisan tag <a> beserta atributnya.
3. Peserta didik menjelaskan fungsi atribut href dengan bahasa sendiri.
4. Peserta didik mempraktikkan menuliskan kode <a> sederhana untuk menghubungkan ke halaman lain.
5. Peserta didik mempraktikkan membuat tautan yang terbuka di tab baru menggunakan target="_blank".
6. Peserta didik menerapkan penyisipan tautan pada halaman web sederhana buatan sendiri.
7. Peserta didik mengevaluasi hasil tautan dengan mengujinya di browser.

🧩 MODEL / METODE PEMBELAJARAN

Model: Discovery Learning dipadukan dengan Problem Based Learning (praktik membuat tautan langsung)
Metode: Demonstrasi, Praktik Langsung (hands-on coding), Tanya Jawab, dan Kuis Interaktif
Pendekatan: Pembelajaran Mendalam (Deep Learning) — Mindful, Meaningful, Joyful

🌟 PEMBUKAAN: MENGENAL KEBESARAN ALLAH

Sebelum belajar, yuk kita renungkan sebentar bersama-sama 🤲

Al-Khalik (Maha Pencipta) 🏞️ — Allah menciptakan alam semesta yang saling terhubung dengan rapi: air sungai mengalir dari gunung menuju laut, akar pohon menghubungkan tanah dengan daun, semuanya tersambung dalam satu sistem yang sempurna.

Ar-Razzaq (Maha Pemberi Rezeki) 🌐 — Allah memberi kita rezeki berupa ilmu dan teknologi internet yang menghubungkan kita dengan berbagai sumber informasi dari seluruh dunia.

Al-Malik (Maha Merajai) 👑 — Allah adalah Raja yang mengatur hubungan antar segala sesuatu di alam semesta dengan sangat rapi dan teratur, seperti tautan-tautan web yang saling terhubung satu sama lain.

🤔 Pertanyaan Renungan:
1. Coba amati bagaimana air sungai mengalir dari gunung menuju laut, saling terhubung dalam satu sistem yang sangat rapi. Bagaimana hal itu menunjukkan kebesaran Allah Al-Khalik?
2. Allah Ar-Razzaq memberi kita nikmat teknologi internet yang menghubungkan kita dengan ilmu dari seluruh dunia. Bagaimana kita bisa memanfaatkan nikmat ini dengan bijak saat membuat tautan hari ini?
3. Allah Al-Malik mengatur hubungan antar segala sesuatu di alam semesta dengan penuh keteraturan. Bagaimana kita bisa meniru keteraturan itu saat menghubungkan satu halaman web ke halaman lain menggunakan tag <a>?

1️⃣ APERSEPSI: BENAR ATAU SALAH (Materi Sebelumnya: Tag img)

Ayo ingat kembali pelajaran sebelumnya tentang tag <img>! Jawablah Benar atau Salah.

1. Tag <img> digunakan untuk menyisipkan gambar pada halaman web. (___)
2. Atribut src digunakan untuk menentukan alamat/lokasi file gambar. (___)
3. Tag <img> selalu memerlukan tag penutup </img>. (___)
4. Atribut alt menyediakan teks alternatif jika gambar gagal ditampilkan. (___)
5. Atribut width dan height tidak berpengaruh pada ukuran gambar. (___)

✅ Kunci Jawaban: 1. Benar   2. Benar   3. Salah   4. Benar   5. Salah

2️⃣ VIDEO PEMBELAJARAN

🎬 Yuk tonton video berikut sebelum kita belajar lebih lanjut!

▶️ Tonton video: Cara Membuat Tautan dengan Tag a

*Guru dapat memilih salah satu video dari hasil pencarian di atas yang paling sesuai untuk siswa kelas 6 SD.

📖 PENJELASAN MATERI: TAG <a>

🔗📄➡️📄

Apa itu Tag <a>?
Tag <a> (disebut juga anchor) adalah tag HTML yang digunakan untuk membuat tautan (link) yang menghubungkan satu halaman web ke halaman lain atau ke situs web lain. Berbeda dengan tag <img>, tag <a> memerlukan tag penutup </a>.

Atribut-atribut Penting pada Tag <a>:

Atribut	Fungsi
href	Menentukan alamat/tujuan tautan (wajib ada)
target="_blank"	Membuka tautan di tab/jendela baru

Contoh Kode Tag <a>:

<a href="https://www.wikipedia.org">Kunjungi Wikipedia</a>

🔗 Hasil tampilan: Kunjungi Wikipedia — tulisan ini akan tampil berwarna biru bergaris bawah, dan jika diklik akan mengarahkan pembaca ke situs Wikipedia.

Contoh Kode Tautan yang Terbuka di Tab Baru:

<a href="https://www.wikipedia.org" target="_blank">Kunjungi Wikipedia</a>

🆕 Dengan tambahan target="_blank", saat tautan diklik, halaman baru akan terbuka di tab baru tanpa menutup halaman sebelumnya.

Manfaatnya: menghubungkan pembaca ke sumber belajar lain, media sosial sekolah, atau halaman web lain, sehingga halaman web menjadi lebih interaktif dan bermanfaat.

3️⃣ LATIHAN SOAL PILIHAN GANDA (10 Soal)

Tingkat kesukaran meningkat dari mudah ➡️ sedang ➡️ sukar

1. (Mudah) Tag yang digunakan untuk membuat tautan/link pada halaman web adalah...
   A. <link>   B. <a>   C. <href>   D. <url>
2. (Mudah) Atribut yang digunakan untuk menentukan alamat tujuan tautan adalah...
   A. src   B. alt   C. href   D. target
3. (Mudah) Teks yang bisa diklik pada sebuah tautan terletak...
   A. Di antara tag <a> dan </a>   B. Di dalam atribut src   C. Di luar tag <a>   D. Di dalam tag <img>
4. (Mudah) Tag <a> termasuk jenis tag yang...
   A. Tidak memerlukan tag penutup   B. Hanya bisa dipakai sekali   C. Harus diletakkan di dalam <ol>   D. Selalu berpasangan dengan tag penutup
5. (Sedang) Atribut yang digunakan agar tautan terbuka di tab/jendela baru adalah...
   A. href="_blank"   B. target="_blank"   C. src="_blank"   D. alt="_blank"
6. (Sedang) Penulisan kode tautan yang benar adalah...
   A. <a>https://google.com</a>   B. <link href="https://google.com">Google</link>   C. <a href="https://google.com">Google</a>   D. <a src="https://google.com">Google</a>
7. (Sedang) Jika atribut href tidak diisi dengan alamat yang benar, maka tautan akan...
   A. Tidak dapat mengarahkan ke halaman yang dituju   B. Otomatis diperbaiki oleh browser   C. Berubah menjadi gambar   D. Menghapus seluruh halaman
8. (Sukar) Rama ingin membuat tautan menuju situs resmi sekolahnya yang terbuka di tab baru agar halaman awal tidak tertutup. Kode yang tepat digunakan Rama adalah...
   A. <a href="sekolah.com">Situs Sekolah</a>   B. <a src="sekolah.com" target="_blank">Situs Sekolah</a>   C. <a>sekolah.com</a>   D. <a href="sekolah.com" target="_blank">Situs Sekolah</a>
9. (Sukar) Dinda membuat tautan <a href="https://wikipedia.org">Klik di sini</a> pada halaman tugasnya. Jika tautan tersebut diklik oleh pembaca, maka yang akan terjadi adalah...
   A. Halaman tugas Dinda akan terhapus   B. Pembaca akan diarahkan menuju situs Wikipedia   C. Gambar akan muncul menggantikan teks   D. Tidak terjadi apa-apa
10. (Sukar) Perhatikan kode berikut: <a href="https://perpustakaan-digital.id" target="_blank">Kunjungi Perpustakaan Digital</a>. Fungsi atribut target="_blank" pada kode tersebut adalah...
    A. Mengubah warna tautan   B. Menyisipkan gambar perpustakaan   C. Membuka tautan di tab/jendela baru   D. Menghapus tautan setelah diklik

✅ Kunci Jawaban:
1. B   2. C   3. A   4. D   5. B   6. C   7. A   8. D   9. B   10. C

4️⃣ PEMETAAN MINDFUL, MEANINGFUL, JOYFUL

🧘 Mindful terlihat pada: kegiatan renungan kebesaran Allah di awal pembelajaran, serta saat peserta didik mengamati dengan teliti struktur tag <a> dan memastikan alamat href ditulis dengan benar sebelum mempraktikkannya.

💡 Meaningful terlihat pada: penjelasan manfaat tautan dalam kehidupan sehari-hari (menghubungkan ke sumber belajar, situs sekolah), serta contoh soal cerita (Rama & Dinda) yang menghubungkan materi dengan situasi nyata.

🎉 Joyful terlihat pada: penggunaan video pembelajaran, kuis benar/salah dan pilihan ganda yang interaktif, serta contoh kode dan hasil tampilan tautan yang membuat belajar coding terasa menyenangkan.

📝 KESIMPULAN

Tag <a> beserta atribut href dan target="_blank" adalah kode HTML penting untuk membuat tautan yang menghubungkan satu halaman web ke halaman atau situs lain, sehingga halaman web menjadi lebih interaktif dan bermanfaat. Sama seperti Allah Al-Khalik yang menciptakan alam semesta yang saling terhubung dengan rapi, kita juga belajar menghubungkan halaman web dengan kode yang rapi dan benar. Semoga ilmu yang kita dapatkan hari ini menjadi bekal yang bermanfaat dan menjadi bentuk rasa syukur kita kepada Allah atas nikmat Al-Khalik dan Ar-Razzaq. 🌟

✨ Selamat belajar, anak-anak hebat! Sampai jumpa di pertemuan berikutnya 👋 ✨