Memudahkan Belajar HTML: Tag Teks dan Gambar, Panduan Praktis untuk Guru Kreatif!

Diterbitkan tanggal: 17-07-2025
Penulis: Muhammad Ullil Fahri

coding untuk guru tutorial HTML sederhana AI untuk pendidikan

Belajar HTML: Tag Teks dan Gambar untuk Guru

Memudahkan Belajar HTML: Tag Teks dan Gambar, Panduan Praktis untuk Guru Kreatif!

Hai Bapak/Ibu guru! Pernah merasa kesulitan membuat materi ajar yang menarik dan interaktif untuk siswa? HTML bisa jadi solusinya! Jangan khawatir, HTML itu tidak sesulit yang dibayangkan, kok. Saya sendiri awalnya juga merasa begitu, tapi setelah mencoba, ternyata seru banget!

Memahami Tag Teks Dasar di HTML

Tag itu seperti 'perintah' ke browser untuk menampilkan sesuatu. Contohnya, untuk membuat judul, kita pakai tag <h1> sampai <h6>. Semakin kecil angkanya, semakin besar judulnya.

<h1>Ini Judul Utama</h1>
<h2>Ini Sub Judul</h2>

Hasilnya:

Ini Judul Utama

Ini Sub Judul

Untuk membuat paragraf, gunakan tag <p>:

<p>Ini adalah paragraf yang berisi penjelasan tentang materi ajar.</p>

Hasilnya:

Ini adalah paragraf yang berisi penjelasan tentang materi ajar.

Oh ya, jangan lupa setiap tag pembuka (misalnya <h1>) harus ditutup dengan tag penutup (</h1>)!

Menambahkan Gambar ke Materi Ajar

Gambar bisa membuat materi ajar jadi lebih menarik dan mudah dipahami. Untuk menambahkan gambar, kita pakai tag <img>. Tag ini sedikit berbeda, karena tidak perlu tag penutup.

<img src="nama_gambar.jpg" alt="Deskripsi Gambar">

Penjelasan:

src adalah lokasi gambar. Pastikan filenya ada di folder yang sama dengan file HTML kamu, ya. Bisa juga link dari internet.
alt adalah teks alternatif yang akan muncul jika gambar gagal dimuat. Ini penting untuk aksesibilitas dan SEO!

Contohnya, saya sering menggunakan gambar ilustrasi dari Canva untuk memperjelas konsep. Cara memasukkannya tinggal unggah gambar ke folder proyek, lalu masukkan nama filenya di src.

Praktik Langsung!

Coba Bapak/Ibu guru buat file HTML sederhana dengan judul, paragraf, dan sebuah gambar. Bukalah file tersebut di browser. Lihat hasilnya! Kalau ada yang kurang pas, jangan ragu untuk mencoba lagi. Trial and error itu bagian dari proses belajar, kok!

Tips Tambahan

Gunakan editor teks sederhana seperti Notepad (Windows) atau TextEdit (Mac).
Simpan file dengan ekstensi .html (misalnya materi_ajar.html).
Selalu periksa kembali kode HTML kamu untuk menghindari kesalahan kecil.
Jangan takut bereksperimen!

Semoga panduan singkat ini bermanfaat ya, Bapak/Ibu guru! Dengan sedikit latihan, Bapak/Ibu bisa membuat materi ajar yang lebih menarik dan efektif untuk siswa.

Referensi:

Selamat berkarya dan terus menginspirasi! Oh iya, kalau artikel ini bermanfaat, jangan lupa bagikan ke rekan guru lainnya, ya! Mari berbagi ilmu dan pengalaman bersama!

🚀 Solusi Guru Modern: Aplikasi Catatan Kelas AI – Analisis Siswa Otomatis, Cepat, dan Akurat!