LuciaKNOWLEDGE & LEARNING
ID
Ctrl K

Lucia / KNOWLEDGE & LEARNING

ID
Cari pengetahuanCtrl K

PROGRAMMING & DEVELOPMENT · PATH 01

HTML
Fundamentals.

Struktur memberi makna pada halaman web. Course ini membahas dasar HTML melalui materi dan praktik.

PemulaBahasa IndonesiaEstimasi 7–10 jamPreview lokal
Mulai course →Lihat kurikulum ↓

Tanpa pengalaman coding. Tanpa instalasi untuk mulai belajar.

Pemandu Lucia membuka buku untuk menemani perjalanan belajar HTMLDARI RASA INGIN TAHU
MENJADI KARYA PERTAMAMU.
08chapter bertahap
32lesson dengan praktik
07Chapter Trial
01website milikmu
SIAP UNTUK DIMULAI

0 / 32 lesson tuntas

Belajarku ↗

TUJUAN PEMBELAJARAN

Pemahaman terlihat dalam praktik.

  • Menyusun dokumen HTML dengan bahasa halaman, judul, dan metadata yang tepat.
  • Menulis teks, daftar, tautan, gambar, dan tabel yang sesuai dengan isi.
  • Memilih elemen semantik untuk memberi arti pada struktur halaman.
  • Membuat halaman lebih mudah digunakan melalui heading, alt, dan label.
  • Membangun form demonstrasi dengan validasi bawaan browser.
  • Memperbaiki markup dan menghasilkan website HTML dua halaman.

KURIKULUM

Dasar yang jelas membentuk pemahaman.

Semua chapter, lesson, Trial, dan proyek akhir dapat dibuka langsung. Urutan kurikulum membantu belajar; progres mencatat praktik yang tuntas.

01Web FoundationsKenali bahasa web dan buat dokumen pertamamu.Terbuka0 / 4 lesson
  1. 1What is HTML?Membedakan peran HTML, CSS, dan JavaScript, lalu menandai judul serta paragraf dengan HTML.± 8 menitTerbuka
  2. 2Your First HTML DocumentMenulis kerangka dokumen HTML dengan doctype, html, head, dan body pada tempatnya.± 10 menitTerbuka
  3. 3Inside the HeadMelengkapi judul tab, charset UTF-8, dan viewport di head sebuah dokumen.± 9 menitTerbuka
  4. 4Edit, Preview, RepeatMengubah dokumen HTML dan membedakan hasil edit di body dari metadata di head.± 8 menitTerbuka
  5. Chapter Trial — First Page4 soal konsep + 1 tugas kode · bisa diulang tanpa penaltiTerbuka
02Elements, Attributes & SyntaxBaca susunan kode dan perbaiki kesalahan kecil dengan percaya diri.Terbuka0 / 4 lesson
  1. 1Tags vs. ElementsMembedakan tag pembuka, isi, dan tag penutup, lalu menulis dua elemen lengkap.± 8 menitTerbuka
  2. 2Understanding AttributesMenambahkan atribut id, class, dan title pada tag pembuka dengan nilai yang tepat.± 9 menitTerbuka
  3. 3Nesting & Void ElementsMemperbaiki nesting dan menggunakan elemen void serta atribut boolean dengan benar.± 10 menitTerbuka
  4. 4Comments & Character ReferencesMenulis komentar dan menampilkan karakter khusus tanpa terbaca sebagai tag HTML.± 9 menitTerbuka
  5. Chapter Trial — Repair the Markup4 soal konsep + 1 tugas kode · bisa diulang tanpa penaltiTerbuka
03Meaningful Text & ListsUbah kumpulan teks menjadi konten yang punya struktur dan makna.Terbuka0 / 4 lesson
  1. 1Headings & ParagraphsMenyusun satu judul utama, subjudul bertingkat, dan paragraf sesuai hierarki isi.± 9 menitTerbuka
  2. 2Emphasis, Importance & QuotesMemilih strong, em, blockquote, dan q berdasarkan maksud kalimat.± 10 menitTerbuka
  3. 3ListsMembuat daftar berurutan, tidak berurutan, dan satu daftar bersarang dengan relasi yang tepat.± 10 menitTerbuka
  4. 4Text with MeaningMemberi makna pada cuplikan kode, tanggal, dan singkatan dalam teks.± 9 menitTerbuka
  5. Chapter Trial — Structure an Article4 soal konsep + 1 tugas kode · bisa diulang tanpa penaltiTerbuka
04Links, Images & MediaHubungkan halaman, temukan berkas, dan berikan konteks untuk media.Terbuka0 / 4 lesson
  1. 1Links & URLsMembuat tautan absolut, relatif, dan fragment dengan teks tujuan yang jelas.± 10 menitTerbuka
  2. 2Files, Folders & NavigationMenghubungkan dua berkas HTML dengan navigasi dua arah dan memahami path folder.± 10 menitTerbuka
  3. 3Images & Alternative TextMenambahkan gambar dengan sumber, dimensi, dan teks alternatif sesuai konteks.± 10 menitTerbuka
  4. 4Figures, Audio & Video BasicsMengelompokkan gambar dan keterangannya, serta mengenali kebutuhan controls, caption, dan transkrip pada media.± 10 menitTerbuka
  5. Chapter Trial — Connected Pages4 soal konsep + 1 tugas kode · bisa diulang tanpa penaltiTerbuka
05Semantic Page StructureBeri setiap bagian halaman peran yang jelas.Terbuka0 / 4 lesson
  1. 1Page LandmarksMengganti pembungkus generik dengan header, nav, main, dan footer yang sesuai.± 10 menitTerbuka
  2. 2Sections & ArticlesMemilih section, article, dan aside sesuai hubungan serta kemandirian konten.± 10 menitTerbuka
  3. 3Div, Span, ID & ClassMemakai div dan span untuk kebutuhan generik, sambil menjaga id unik dan class yang dapat dipakai ulang.± 8 menitTerbuka
  4. 4Accessible NavigationMembuat navigasi dengan teks jelas, skip link, dan struktur heading yang dapat diikuti.± 10 menitTerbuka
  5. Chapter Trial — Semantic Refactor4 soal konsep + 1 tugas kode · bisa diulang tanpa penaltiTerbuka
06Data TablesSajikan data yang saling berhubungan dengan tabel yang mudah dibaca.Terbuka0 / 4 lesson
  1. 1When to Use a TableMemilih tabel untuk data dua dimensi dan daftar untuk informasi yang tidak memerlukan kolom.± 8 menitTerbuka
  2. 2Rows & CellsMenulis baris, sel judul, dan sel data tabel dengan susunan yang konsisten.± 9 menitTerbuka
  3. 3Captions & HeadingsMemberi tabel caption serta mengelompokkan baris judul dan data dengan thead dan tbody.± 9 menitTerbuka
  4. 4Accessible TablesMenghubungkan sel judul dengan data menggunakan scope col dan row pada tabel sederhana.± 10 menitTerbuka
  5. Chapter Trial — Build a Data Table4 soal konsep + 1 tugas kode · bisa diulang tanpa penaltiTerbuka
07Forms & InputsBangun form yang jelas, berlabel, dan memberi petunjuk saat isian keliru.Terbuka0 / 4 lesson
  1. 1Forms & LabelsMembuat form dengan label yang terhubung ke kontrol melalui for dan id.± 10 menitTerbuka
  2. 2Inputs & Field ValuesMemilih type, name, value, radio, dan checkbox sesuai jenis informasi yang diminta.± 11 menitTerbuka
  3. 3More Form ControlsMenyusun form dengan textarea, select, tombol, dan kelompok fieldset yang diberi legend.± 10 menitTerbuka
  4. 4Built-in Validation & SubmissionMenambahkan validasi HTML bawaan dan menjelaskan batas pengiriman form tanpa backend.± 11 menitTerbuka
  5. Chapter Trial — Accessible Feedback Form4 soal konsep + 1 tugas kode · bisa diulang tanpa penaltiTerbuka
08Build, Check & ShipRencanakan, bangun, dan rapikan website HTML milikmu sendiri.Terbuka0 / 4 lesson
  1. 1Plan Your WebsiteMembuat rencana isi, pembaca, dan pembagian dua halaman sebelum menulis proyek.± 10 menitTerbuka
  2. 2Build the StructureMembangun dua dokumen yang lengkap, semantik, dan saling terhubung.± 12 menitTerbuka
  3. 3Add Media & FormsMelengkapi halaman dengan gambar informatif dan form demonstrasi berlabel tanpa menjanjikan pengiriman.± 12 menitTerbuka
  4. 4Validate, Debug & ReviewMenemukan kesalahan markup, memperbaiki hubungan penting, dan mencatat hasil review proyek.± 12 menitTerbuka
  5. Final Challenge — My First HTML WebsiteDua halaman HTML · rubrik 100 poin · review mandiriTerbuka

TANTANGAN AKHIR

Praktik menghubungkan konsep.

Buat website profil minat atau komunitas rekaan. Susun isi, hubungkan halaman, tambahkan ilustrasi dan form demo, lalu unduh proyek HTML-mu.

HTML sajaTanpa deadlineSelf-assessed
Lihat Final Challenge ↗
MY-FIRST-SITE/
├── index.html
├── about.html
├── assets/
│   └── observatory.svg
└── README.txt

Website statis yang bisa dibuka dari komputermu.

Ketentuan pembelajaran.

Haruskah semua jawaban langsung benar?

Tidak. Kamu dapat membaca ulang, membuka petunjuk, dan mencoba kembali tanpa penalti. Lesson dinyatakan tuntas setelah tugas mandirinya memenuhi tujuan; Trial memerlukan setidaknya 80/100 dan praktik inti yang benar.

Apakah progres tersimpan di akun?

Belum ada akun. Kode, jawaban, dan progres tersimpan di browser serta perangkat ini, terpisah per bahasa. Menghapus data situs menghapus progres. Unduh proyek akhir untuk menyimpan salinan berkasnya.

Apakah hasilnya sertifikat?

Tidak. Proyek akhir memakai pemeriksaan struktur dasar dan rubrik review mandiri berlabel self-assessed. Hasil ini adalah catatan perjalanan belajar, bukan sertifikasi terverifikasi.

Apa yang dipelajari setelah HTML?

CSS dapat membantu mengatur tampilan, JavaScript menambahkan perilaku, dan aksesibilitas memperdalam pengalaman pengguna. Course lanjutan tersebut belum tersedia di katalog. Sebagai pengantar, baca HTML, CSS, dan JavaScript di Library.

LADDER ↔ LIBRARY ↔ LEXICON

Konteks memperdalam pemahaman.

Bacaan dan konsep berikut dirujuk oleh materi course.

Kenali 29 konsep dalam jalur ini
Browser ↗HTML ↗HTTPS ↗URL ↗Tautan ↗CSS ↗JavaScript ↗Teks alternatif ↗HTML element ↗HTML tag ↗HTML attribute ↗Head ↗Title ↗Meta ↗Character encoding ↗Viewport ↗Void element ↗Character reference ↗Heading ↗Semantic HTML ↗Accessibility ↗HTML list ↗Relative path ↗Figure & figcaption ↗Landmark ↗HTML table ↗HTML form ↗Form label ↗HTML validation ↗

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.