Lucia LADDERHTML Fundamentals Chapter 04
ID
Progres✕

Memuat progres belajar…

HTML-04-04 · LESSON 4 / 4 · ± 10 MENIT

Figures, Audio & Video Basics

Setelah lesson ini, kamu dapat mengelompokkan gambar dan keterangannya, serta mengenali kebutuhan controls, caption, dan transkrip pada media.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Foto observatorium bisa dipahami lebih baik bila memiliki keterangan. Namun keterangan di bawah gambar dan teks alternatif bukan selalu hal yang sama.

Mengelompokkan gambar dan keterangannya, serta mengenali kebutuhan controls, caption, dan transkrip pada media.

PAHAMI KONSEPNYA

01

Figure menyatukan media dan konteks

Figure membungkus konten mandiri seperti diagram, foto, atau cuplikan kode. Figcaption memberi keterangan yang terlihat, sebagai anak pertama atau terakhir figure. Alt tetap menjelaskan gambar kepada yang tidak melihatnya; caption dapat menambahkan konteks yang berbeda.

02

Media bergerak butuh kendali

Audio dan video menyediakan pemutar ketika diberi controls. Hindari autoplay untuk materi belajar. Sumber media dapat diberikan melalui src atau elemen source. Berkas harus benar-benar tersedia; menulis nama berkas tidak otomatis membuat rekamannya.

03

Akses terhadap isi media

Video dengan suara memerlukan caption tersinkron untuk ucapan dan bunyi penting, biasanya melalui track kind="captions" dengan berkas WebVTT. Transkrip membantu pembaca mengakses isi tanpa memutar media. Informasi visual penting juga perlu alternatif yang sesuai. Course ini memakai contoh markup media, tanpa menyediakan rekaman audio/video.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<figure>
  <img src="assets/observatory.svg" alt="Teleskop mengarah ke Bulan" width="640" height="360">
  <figcaption>Ilustrasi pengamatan Bulan dari observatorium.</figcaption>
</figure>

<!-- Pola media: sediakan sendiri berkas rekaman dan caption sebelum digunakan. -->
<video controls width="640">
  <source src="pengamatan.mp4" type="video/mp4">
  <track kind="captions" src="pengamatan-id.vtt" srclang="id" label="Indonesia">
</video>
<p>Transkrip: pengamat mengarahkan teleskop ke Bulan.</p>

HASIL DI BROWSER

Figure dapat dicoba dengan aset contoh. Bagian video menjelaskan pola markup; rekaman dan WebVTT tidak disertakan, sehingga tidak ada video yang diputar.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Video tutorial memiliki dialog. Apa yang membantu pengguna yang tidak mendengar suaranya?

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Satu figur yang bercerita

Buat figure berisi gambar observatorium dengan alt dan dimensi, lalu figcaption yang menjelaskan konteks pengamatan. Tambahkan paragraf yang menerangkan bahwa contoh ini berupa ilustrasi.

HTML
index.htmlHTMLLn 1, Col 12 baris2 spasi
Pintasan & bantuan editor
Ctrl + Space
Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F
Rapikan kode
Ctrl/⌘ + F
Cari dan ganti teks
Ctrl/⌘ + [ / ]
Kurangi / tambah indentasi
Tab
Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z
Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

Kembali ke kode awal?

Isi semua berkas pada tugas ini akan diganti dengan kode awal. Lesson yang sudah tuntas tetap tercatat.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

  • Figure mengelompokkan konten mandiri; figcaption menjelaskan konteksnya.
  • Audio dan video sebaiknya memberi controls.
  • Caption dan transkrip membantu akses media; berkas sumber harus tersedia.
Gambar & mediaAksesibilitas

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Figure & figcaption °Teks alternatif °Accessibility °
Library: Gambar yang jernih, halaman yang ringan ↗
Hadapi Chapter Trial →
01 / 06

Lucia LEXICON / DEFINISI SINGKAT

Pahami konsep ini

Cari pengetahuan di Lucia

JELAJAHI Lucia

Lucia LadderPilih bidang, lalu coursePerpustakaan LibraryPenjelasan dan konteks dalam bacaan mandiriKamus LexiconDefinisi, contoh, dan konteks konsepBelajarkuLanjutkan course dan tinjau progres di perangkat iniBacaan Dasar WebLima bacaan dan progres kuis yang sudah tersimpan

LADDER / BIDANG PENGETAHUAN

Pemrograman & Pengembangan1 course · preview lokalMusik & SeniBelum ada courseLiterasi & Keamanan DigitalBelum ada courseSains & PenemuanBelum ada courseSejarah & Pengetahuan UmumBelum ada course

LADDER / COURSE

HTML FundamentalsStruktur memberi makna pada halaman web. Pelajari HTML melalui penjelasan, latihan, dan proyek dua halaman.

LIBRARY / BACAAN

Apa yang terjadi saat kamu membuka sebuah website?Ikuti perjalanan kecil dari sebuah alamat hingga menjadi halaman di layarmu.Membaca alamat web tanpa tersesatDomain, path, query, dan fragment: bagian kecil dengan tugas yang berbeda.Tiga bahasa di balik satu halamanKenali struktur, tampilan, dan perilaku—tanpa harus menghafal kode.JSON: ketika data punya susunanBaca pasangan nama dan nilai, daftar, serta perbedaan teks dan angka.Gambar yang jernih, halaman yang ringanMengapa format, ukuran, transparansi, dan teks alternatif sama-sama penting.

LADDER / MATERI BELAJAR

What is HTML?HTML FundamentalsYour First HTML DocumentHTML FundamentalsInside the HeadHTML FundamentalsEdit, Preview, RepeatHTML FundamentalsTrial 1HTML FundamentalsTags vs. ElementsHTML FundamentalsUnderstanding AttributesHTML FundamentalsNesting & Void ElementsHTML FundamentalsComments & Character ReferencesHTML FundamentalsTrial 2HTML FundamentalsHeadings & ParagraphsHTML FundamentalsEmphasis, Importance & QuotesHTML FundamentalsListsHTML FundamentalsText with MeaningHTML FundamentalsTrial 3HTML FundamentalsLinks & URLsHTML FundamentalsFiles, Folders & NavigationHTML FundamentalsImages & Alternative TextHTML FundamentalsFigures, Audio & Video BasicsHTML FundamentalsTrial 4HTML FundamentalsPage LandmarksHTML FundamentalsSections & ArticlesHTML FundamentalsDiv, Span, ID & ClassHTML FundamentalsAccessible NavigationHTML FundamentalsTrial 5HTML FundamentalsWhen to Use a TableHTML FundamentalsRows & CellsHTML FundamentalsCaptions & HeadingsHTML FundamentalsAccessible TablesHTML FundamentalsTrial 6HTML FundamentalsForms & LabelsHTML FundamentalsInputs & Field ValuesHTML FundamentalsMore Form ControlsHTML FundamentalsBuilt-in Validation & SubmissionHTML FundamentalsTrial 7HTML FundamentalsPlan Your WebsiteHTML FundamentalsBuild the StructureHTML FundamentalsAdd Media & FormsHTML FundamentalsValidate, Debug & ReviewHTML FundamentalsMy First HTML WebsiteHTML Fundamentals

LEXICON / KONSEP

BrowserAplikasi untuk membuka, menampilkan, dan berinteraksi dengan halaman web.HTTPProtokol pertukaran permintaan dan respons antara klien dan server web.HTMLBahasa markup untuk memberi struktur dan makna pada konten web.JSONFormat teks untuk menyimpan atau bertukar data terstruktur.DNSSistem penamaan terdistribusi yang menghubungkan nama domain dengan informasi seperti alamat IP.HTTPSHTTP yang memakai TLS untuk melindungi pertukaran data selama perjalanan.ServerPerangkat lunak atau komputer yang menyediakan layanan kepada klien.URLAlamat yang menunjukkan lokasi suatu sumber daya beserta cara mengaksesnya.Nama domainNama berhierarki yang digunakan untuk mengenali suatu bagian dari sistem penamaan internet.TautanRujukan yang dapat diikuti untuk menuju sumber daya atau bagian dokumen lain.CSSBahasa stylesheet untuk mengatur tampilan dan tata letak dokumen web.JavaScriptBahasa pemrograman yang dapat menambahkan perilaku dinamis pada halaman web.DOMRepresentasi dokumen sebagai struktur objek yang dapat dibaca dan diubah lewat API.Object JSONKumpulan pasangan nama dan nilai dalam JSON, ditulis di antara kurung kurawal.ArrayUrutan nilai dalam JSON, ditulis di antara kurung siku.StringUrutan karakter yang mewakili teks; dalam JSON dibungkus tanda petik ganda.KompresiCara merepresentasikan data dengan ukuran yang lebih kecil.TransparansiKemampuan gambar untuk membiarkan latar di belakangnya terlihat seluruhnya atau sebagian.Gambar rasterGambar yang tersusun dari kisi piksel dengan dimensi tertentu.Teks alternatifTeks yang menyampaikan fungsi atau makna gambar ketika gambar tidak dapat dilihat.HTML elementUnit markup yang memberi struktur atau makna pada konten.HTML tagPenanda dalam kurung sudut yang membuka atau menutup elemen.HTML attributeInformasi tambahan pada tag pembuka sebuah elemen.HeadBagian dokumen HTML yang menyimpan metadata halaman.TitleNama dokumen HTML yang biasanya tampil pada tab dan bookmark browser.MetaElemen untuk menyatakan metadata yang tidak dicakup elemen metadata lainnya.Character encodingAturan untuk menghubungkan karakter teks dengan representasi byte.ViewportArea tempat browser menampilkan halaman pada suatu perangkat.Void elementElemen HTML yang tidak mempunyai konten anak atau tag penutup.Character referenceCara menulis karakter melalui referensi bernama atau numerik dalam HTML.HeadingElemen h1 hingga h6 yang menyatakan tingkat judul pada isi dokumen.Semantic HTMLPenggunaan elemen HTML berdasarkan makna dan fungsi kontennya.AccessibilityPraktik membuat konten dan interaksi dapat digunakan oleh orang dengan beragam kemampuan.HTML listStruktur untuk mengelompokkan item, dengan atau tanpa urutan yang bermakna.Relative pathAlamat sumber daya yang dihitung dari lokasi atau base URL dokumen.Figure & figcaptionElemen untuk mengelompokkan konten mandiri dengan keterangan yang terlihat.LandmarkBagian utama halaman yang membantu pengguna mengenali dan menavigasi strukturnya.HTML tableStruktur baris dan kolom untuk menyajikan data yang memiliki hubungan dua dimensi.HTML formKelompok kontrol yang memungkinkan pengguna memasukkan atau memilih data.Form labelNama yang menjelaskan kontrol form dan terhubung secara programatis dengannya.HTML validationPemeriksaan kesesuaian markup atau, pada form, pemenuhan aturan isian yang dinyatakan.