Data Ajar

Modul Ajar Informatika Kelas 9 SMP: Teknologi Informasi dan Komunikasi (Bab 2)

Pembelajaran integrasi konten multimedia audio-video, pembuatan situs web statis sederhana (HTML/CSS), sistem manajemen konten (CMS), serta kompresi berkas media digital.

Capaian dan tujuan pembelajaran

  • Peserta didik mampu memproduksi konten multimedia terintegrasi untuk menyampaikan informasi.
  • Peserta didik mampu menjelaskan perbedaan format berkas dan prinsip kompresi media digital.
  • Peserta didik mampu merancang halaman web sederhana menggunakan struktur HTML dan CSS dasar.

Materi pokok & uraian konsep pembelajaran

Bab Teknologi Informasi dan Komunikasi kelas 9 mengarahkan peserta didik dari konsumen konten digital menjadi produsen karya multimedia dan pengembang laman web edukatif.

Peserta didik mempelajari teknik penyuntingan audio-video terpadu, pemformatan berkas multimedia, prinsip kompresi data (*lossless* dan *lossy*), serta tata letak elemen visual yang estetis dan ramah pengguna.

Materi dilanjutkan dengan dasar perancangan antarmuka web menggunakan bahasa markah HTML (*Hypertext Markup Language*) dan penataan gaya CSS (*Cascading Style Sheets*), serta publikasi konten melalui platform blog dan Sistem Manajemen Konten (*CMS*).

Peta subtopik bahasan

  • Produksi dan Penyuntingan Multimedia

    Menggabungkan klip video, rekaman suara narasi, teks judul, dan musik latar bebas hak cipta.

  • Format Berkas dan Algoritma Kompresi Data

    Membedakan format raster-vektor (JPEG, PNG, SVG) serta kompresi audio-video (MP3, MP4, WebM).

  • Dasar Struktur Web HTML dan Tata Letak CSS

    Menulis tag dasar HTML (heading, paragraf, gambar, hyperlink, tabel) dan selektor styling CSS.

  • Pengelolaan Konten Digital Melalui CMS

    Membuat dan mempublikasikan artikel portofolio karya pada platform blog sekolah secara aman.

Istilah kunci dan glosarium

HTML
Hypertext Markup Language, bahasa markah standar untuk menstrukturkan halaman dan konten di World Wide Web.
CSS
Cascading Style Sheets, bahasa lembar gaya yang digunakan untuk mengatur tampilan, warna, dan tata letak halaman HTML.
Lossy Compression
Metode pemadatan ukuran berkas data di mana sebagian informasi detail yang tidak terlalu terlihat/terdengar dihilangkan secara permanen (seperti JPEG, MP3).
Lossless Compression
Metode kompresi data yang memperkecil ukuran berkas tanpa menghilangkan data asli sedikit pun (seperti PNG, ZIP).
CMS
Content Management System, perangkat lunak yang memungkinkan pengguna membuat, mengedit, dan mempublikasikan konten web tanpa perlu menguasai kode pemrograman rumit.

Instrumen asesmen formatif & contoh soal pembelajaran

5 butir instrumen soal pilihan ganda berbasis HOTS untuk mengukur pemahaman konsep pada bab ini. Dilengkapi kunci jawaban dan uraian pembahasan analitis.

Soal 1

Tag HTML yang digunakan untuk membuat tautan aktif (*hyperlink*) menuju halaman web lain adalah...

  • A. `<link>`
  • B. `<a>`
  • C. `<href>`
  • D. `<url>`
Lihat Kunci Jawaban & Pembahasan
Kunci Jawaban: Pilihan B

Pembahasan: Tag `<a>` (anchor) dengan atribut `href` (misalnya `<a href="https://ajar.id">Klik</a>`) digunakan untuk membuat tautan web.

Soal 2

Format gambar yang paling tepat digunakan untuk menampilkan logo sekolah dengan latar belakang transparan dan garis vektor yang tajam adalah...

  • A. JPEG
  • B. PNG atau SVG
  • C. BMP
  • D. GIF
Lihat Kunci Jawaban & Pembahasan
Kunci Jawaban: Pilihan B

Pembahasan: PNG mendukung transparansi saluran alfa (alpha channel) tanpa gradasi pecah, sedangkan SVG adalah format vektor yang tidak pecah saat diperbesar.

Soal 3

Perbedaan mendasar antara kompresi *Lossy* dan kompresi *Lossless* adalah...

  • A. Kompresi Lossless selalu menghasilkan berkas berukuran lebih kecil dari Lossy
  • B. Kompresi Lossy membuang sebagian data minor demi ukuran berkas yang jauh lebih hemat, sedangkan Lossless mempertahankan 100% data asli
  • C. Kompresi Lossless hanya berlaku untuk teks
  • D. Kompresi Lossy tidak bisa dibuka di peramban web
Lihat Kunci Jawaban & Pembahasan
Kunci Jawaban: Pilihan B

Pembahasan: Kompresi Lossy mengorbankan sedikit fidelitas detail yang tak kasat mata demi pemangkasan drastis ukuran berkas (misal JPEG/MP3).

Soal 4

Perhatikan aturan kode CSS berikut: ```css p { color: blue; font-size: 16px; } ``` Kode tersebut berfungsi untuk...

  • A. Mengubah warna semua paragraf menjadi biru dengan ukuran huruf 16 piksel
  • B. Membuat tautan baru berwarna biru
  • C. Menghapus semua teks pada halaman web
  • D. Mengubah warna latar belakang web menjadi biru
Lihat Kunci Jawaban & Pembahasan
Kunci Jawaban: Pilihan A

Pembahasan: Selektor elemen `p` menargetkan seluruh tag paragraf di dalam berkas HTML dan menerapkan properti warna teks biru serta ukuran font 16px.

Soal 5

Platform *Content Management System* (CMS) banyak dipilih oleh sekolah untuk membuat portal mading digital karena...

  • A. Hanya bisa dijalankan tanpa koneksi internet
  • B. Memungkinkan guru dan siswa mempublikasikan karya artikel serta gambar dengan mudah melalui antarmuka editor visual
  • C. Otomatis memperbaiki nilai rapor siswa
  • D. Tidak membutuhkan ruang penyimpanan server
Lihat Kunci Jawaban & Pembahasan
Kunci Jawaban: Pilihan B

Pembahasan: CMS memisahkan manajemen konten dari pemrograman teknis sehingga mempermudah kolaborasi penulisan artikel secara visual (WYSIWYG).

Instrumen evaluasi lengkap, lembar kerja peserta didik (LKPD), dan rubrik penilaian sumatif tersedia di dalam paket berkas perangkat ajar di bawah ini.

Unduh Modul Ajar (.docx) 43 KB

Petunjuk penggunaan berkas

Setelah mengunduh berkas perangkat ajar, ikuti langkah berikut untuk menggunakannya secara optimal:

  1. Buka dokumen menggunakan Microsoft Word, Google Docs, atau LibreOffice.
  2. Sesuaikan identitas satuan pendidikan, nama guru pengampu, NIP, serta alokasi waktu kelas.
  3. Cetak instrumen asesmen atau bagikan lembar kerja (LKPD) kepada peserta didik.

Bahan ajar Informatika lainnya

  • Berpikir Komputasional

    Informatika SMP Kelas 7 · Semester 1

  • Teknologi Informasi dan Komunikasi

    Informatika SMP Kelas 7 · Semester 1

  • Sistem Komputer

    Informatika SMP Kelas 7 · Semester 1