Kodeloka
  1. Kodeloka
  2. Kelas HTML
  3. Materi

Materi tertulis · 27 modul

Materi HTML

Kelas HTML berbahasa Indonesia: 27 modul tentang cara web bekerja, teks semantik, tautan, media responsif, tabel, formulir, elemen interaktif, aksesibilitas, metadata, dan performa.

Buka kelas interaktif →Mulai dari awal

1 · Fondasi

  1. 1. Cara Web Bekerja: Dari Ketikan URL hingga Piksel di LayarMemahami perjalanan sebuah permintaan web mulai dari resolusi DNS, koneksi TCP/TLS, protokol HTTP, hingga bagaimana peramban mengubah dokumen HTML menjadi tampilan…
  2. 2. Anatomi URL, MIME Type (Content-Type), dan Content NegotiationMemahami bagaimana peramban dan server menyepakati tipe dokumen melalui header MIME (text/html, image/avif, application/json), pengodean persen URL, serta bahaya MIME…
  3. 3. Struktur Dokumen HTML Modern dan Atribut GlobalMembedah anatomi dokumen HTML5 yang valid mulai dari deklarasi DOCTYPE, elemen akar, pengaturan karakter UTF-8, viewport responsif, hingga aturan sintaks dan atribut…
  4. 4. Teks dan Tipografi Semantik: Memberi Makna pada KontenMenggunakan elemen teks HTML berdasarkan makna semantiknya—mulai dari hierarki subjudul, paragraf, daftar, kutipan, hingga penanda kode dan waktu—bukan sekadar demi…
  5. 5. Melacak Perubahan Teks (ins, del, s) dan Semantik EditorialMenandai riwayat penyuntingan dokumen secara semantik menggunakan <ins> dan <del> (beserta atribut cite dan datetime), membedakan <del> dari <s>, serta menggunakan…
  6. 6. Elemen Teks Teknis Lanjutan: data, wbr, bdo, dan pre AksesibelMenghubungkan nilai ramah-manusia dan ramah-mesin dengan elemen <data>, mengatur titik pemenggalan URL/path panjang dengan <wbr>, memaksa arah teks dengan <bdo>, serta…
  7. 7. Struktur Tata Letak Semantik dan Landmark DokumenMerancang arsitektur halaman web yang bermakna menggunakan elemen penanda wilayah (landmark) seperti <header>, <nav>, <main>, <article>, <section>, <aside>, <search>…
  8. 8. Tautan, Struktur URL, dan Navigasi yang AmanMenguasai elemen jangkar <a>, perbedaan jalur URL absolut dan relatif, navigasi fragmen halaman, skema khusus, serta atribut keamanan dan aksesibilitas pada tautan.

2 · Media & Tabel

  1. 9. Gambar, Media Responsif, Audio, dan VideoMenyajikan gambar, grafik vektor (SVG), audio, dan video secara cepat, responsif di berbagai ukuran layar menggunakan srcset, sizes, dan <picture>, serta ramah…
  2. 10. Grafik Vektor (svg) Inline dan Pengantar canvasMenyematkan grafik vektor tajam dengan <svg> inline, menguasai koordinat viewBox, mewarisi warna teks melalui currentColor, memastikan aksesibilitas ikon SVG, serta…
  3. 11. Peta Gambar (map & area) dan Elemen Penyematan (object, embed)Membuat wilayah klik interaktif di atas gambar menggunakan <map> dan <area>, alternatif modern berbasis SVG interaktif, serta kapan menggunakan <object> untuk…
  4. 12. Elemen audio dan Subtitel/Transkrip track (WebVTT) untuk Aksesibilitas MediaMenyematkan pemutar suara dan siniar (podcast) standar web menggunakan elemen <audio>, menyediakan format alternatif (audio/ogg; codecs=opus, audio/mp4, audio/mpeg)…
  5. 13. Elemen video Mendalam: Poster, playsinline, Multi-Codec (AV1/WebM/MP4), dan Subtitel trackMenyajikan video di web dengan cepat, hemat pita lebar, dan aksesibel menggunakan elemen <video>, atribut width/height anti-CLS, gambar sampul poster, aturan muted…
  6. 14. Tabel Data yang Terstruktur dan AksesibelMenyajikan data tabular secara akurat menggunakan <table>, <caption>, <thead>, <tbody>, <tfoot>, serta mengaitkan sel kepala (<th>) dengan data (<td>) menggunakan…

3 · Formulir

  1. 15. Formulir Web dan Kontrol Masukan ModernMembangun formulir HTML yang ergonomis dan aksesibel menggunakan <form>, <label>, <fieldset>, beragam tipe <input> modern, <select>, <datalist>, <textarea>, serta…
  2. 16. Validasi Formulir Bawaan dan Constraint Validation APIMemanfaatkan validasi deklaratif HTML5 (required, minlength, maxlength, min, max, step, pattern), mengatur gaya visual status validasi dengan :user-invalid, serta…
  3. 17. Pola Formulir Lanjutan: Atribut form, Token autocomplete, meter, dan progressMerancang pengalaman formulir tingkat lanjut dengan memanfaatkan token autocomplete spesifik, mengaitkan kontrol di luar elemen <form> menggunakan atribut form="id"…
  4. 18. Atribut Global Interaktif: contenteditable, spellcheck, autocapitalize, enterkeyhint, dan draggableMengoptimalkan ergonomi papan ketik seluler dan penyuntingan langsung menggunakan atribut global contenteditable="plaintext-only", enterkeyhint, inputmode…

4 · Elemen Interaktif

  1. 19. Elemen Interaktif Bawaan: details, dialog, Popover API, dan templateMembangun komponen antarmuka interaktif seperti akordeon, jendela dialog modal, dan panel sembul (popover) menggunakan kemampuan bawaan HTML modern tanpa ketergantungan…
  2. 20. Komponen Web Bawaan HTML: template, slot, dan Declarative Shadow DOMMembangun struktur komponen yang terenkapsulasi dan dapat digunakan ulang langsung di HTML menggunakan <template>, proyeksi konten <slot name="...">, serta Declarative…
  3. 21. Menyematkan Konten Eksternal (iframe), Atribut sandbox, dan Keamanan BingkaiMenyematkan halaman atau layanan pihak ketiga menggunakan <iframe> secara aman dan aksesibel melalui pembatasan hak sandbox, allow, referrerpolicy, loading="lazy", serta…

5 · Aksesibilitas

  1. 22. Aksesibilitas Web (a11y) dan WAI-ARIA DasarMenerapkan prinsip WCAG (POUR), navigasi papan ketik dan manajemen fokus, aturan pertama penggunaan WAI-ARIA, serta atribut penting seperti aria-label, aria-labelledby…
  2. 23. Internasionalisasi HTML (lang, dir, bdi, ruby) dan Notasi Matematika (math)Menangani konten multibahasa dan teks dua arah (bidirectional text) secara akurat menggunakan <bdi>, <bdo>, dir="auto", translate="no", anotasi fonetik <ruby>, serta…

6 · Metadata & Performa

  1. 24. Metadata Dokumen, SEO Teknis, Open Graph, dan JSON-LDMengoptimalkan keterbacaan halaman oleh mesin pencari dan platform media sosial menggunakan <title>, <meta name="description">, <link rel="canonical">, protokol Open…
  2. 25. Performa Pemuatan HTML, Resource Hints, dan Core Web VitalsMengoptimalkan kecepatan pemuatan halaman dan metrik Core Web Vitals (LCP, INP, CLS) langsung dari markup HTML melalui strategi pemuatan skrip (defer, async…

7 · Praktik & Proyek

  1. 26. Audit Kualitas HTML, Inspeksi Accessibility Tree, dan Daftar Periksa ProduksiMenguji dan memvalidasi dokumen HTML sebelum naik ke produksi melalui pemeriksaan sintaks W3C/WHATWG, inspeksi Accessibility Tree di Browser DevTools, pengauditan…
  2. 27. Proyek Akhir Kelas HTML: Halaman Portofolio dan Dokumentasi Teknis Insinyur Perangkat LunakMengintegrasikan seluruh materi kelas HTML—mulai dari struktur landmark semantik, metadata SEO & JSON-LD, gambar responsif, tabel perbandingan arsitektur, komponen…