Lewati ke konten utama
pelatihan
.org
Belajar. Praktik. Berkembang.
Kategori
ID
Masuk
Daftar
Menu
Kurikulum HTML: 6 Bab, 60 Lesson — pelatihan.org
Beranda
/
Katalog
/
HTML
/
Kurikulum
Kurikulum
Kurikulum HTML
Belajar HTML online lewat 60 lesson terstruktur, contoh kode, dan 300 soal kuis.
60 lesson
6 bab
300 soal
Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.
01
HTML Tutorial
40 lesson
01
HTML Introduction
HTML (HyperText Markup Language) adalah bahasa markah standar yang dipakai untuk membangun struktur sebuah halaman web. HTML terdiri dari serangkaian elemen yang ditulis dengan…
02
HTML Editors
Untuk menulis HTML kamu membutuhkan sebuah text editor, yaitu aplikasi sederhana untuk mengetik dan menyimpan teks. Bisa memakai editor bawaan sistem seperti Notepad (Windows)…
03
HTML Basic
Setiap dokumen HTML memiliki kerangka dasar yang selalu sama: deklarasi doctype, elemen <html>, bagian <head> untuk metadata, dan <body> untuk konten yang tampil. Elemen <title>…
04
HTML Elements
Elemen HTML adalah blok penyusun halaman, terdiri dari tag pembuka, konten, dan tag penutup. Beberapa elemen bersifat void (kosong) seperti <br> dan <img> sehingga tidak perlu…
05
HTML Attributes
Attribute (atribut) adalah informasi tambahan yang diberikan pada tag HTML untuk mengatur cara kerja atau tampilan elemen. Atribut ditulis di tag pembuka dengan pola…
06
HTML Headings
Heading pada HTML ditulis dengan tag <h1> sampai <h6>, di mana <h1> adalah heading terbesar dan paling penting, sedangkan <h6> paling kecil. Heading bukan sekadar teks besar,…
07
HTML Paragraphs
Paragraf teks pada HTML dibungkus dengan tag <p>, dan browser akan menambahkan sedikit ruang otomatis di antara paragraf. Untuk memaksa baris baru di dalam paragraf dapat dipakai…
08
HTML Styles
Gaya pada elemen HTML dapat langsung diberikan melalui atribut style dengan pola properti: nilai. Beberapa contoh properti yang sering dipakai adalah color untuk warna teks,…
09
HTML Formatting
HTML menyediakan elemen khusus untuk memberi makna format pada teks, misalnya <b> dan <strong> untuk tebal, <i> dan <em> untuk miring, serta <mark> untuk menyorot teks. Selain…
10
HTML Quotations
HTML memiliki elemen khusus untuk kutipan dan teks terkait, yaitu <blockquote> untuk kutipan panjang dan <q> untuk kutipan pendek di dalam kalimat. Browser otomatis menambahkan…
11
HTML Comments
Komentar HTML ditulis di antara <!-- dan --> dan tidak akan ditampilkan di halaman hasil. Komentar berguna untuk mencatat penjelasan kode, menonaktifkan sementara sebagian…
12
HTML Colors
Warna dalam HTML dapat dinyatakan dengan tiga cara: nama warna seperti red, kode heksadesimal seperti #ff0000, atau fungsi seperti rgb(255, 0, 0) dan hsl(). Warna biasanya…
13
HTML CSS
CSS (Cascading Style Sheets) dipakai untuk mengatur tampilan halaman seperti warna, layout, dan font. Ada tiga cara memasang CSS pada HTML: inline (di atribut style), internal…
14
HTML Links
Tautan (link) dibuat dengan elemen <a> dan atribut href yang menunjuk tujuan alamat. Link bisa bersifat absolut dengan URL lengkap atau relatif dengan path menuju berkas di…
15
HTML Images
Gambar disisipkan dengan elemen <img> yang bersifat void dan memakai atribut src sebagai lokasi berkas. Atribut alt wajib diisi sebagai deskripsi gambar untuk aksesibilitas dan…
16
HTML Project
Proyek bio sederhana menggabungkan berbagai elemen HTML dasar menjadi satu halaman profil pribadi yang utuh. Kamu akan memakai heading untuk nama, paragraf untuk deskripsi,…
17
HTML Favicon
Favicon adalah ikon kecil yang muncul di tab browser, bookmark, dan address bar sebagai penanda identitas sebuah situs. Favicon didefinisikan di bagian <head> memakai elemen…
18
HTML Page Title
Judul halaman ditulis dengan elemen <title> di dalam <head> dan tampil pada tab browser, hasil pencarian, serta saat halaman dibookmark. Judul yang deskriptif membantu pengguna…
19
HTML Tables
Tabel HTML dipakai menampilkan data berbentuk baris dan kolom, disusun dari <table>, <tr> untuk baris, serta <th> dan <td> untuk sel. <th> menandai judul kolom atau baris yang…
20
HTML Lists
HTML menyediakan tiga jenis daftar: <ul> untuk daftar tidak berurut dengan bullet, <ol> untuk daftar bernomor, dan <dl> untuk daftar deskripsi. Setiap item daftar ditulis dengan…
21
HTML Block & Inline
Elemen HTML dapat dikelompokkan menjadi block-level yang menempati lebar penuh seperti <div> dan <p>, serta inline yang hanya membungkus sebagian teks seperti <span> dan <a>.…
22
HTML Div
Elemen <div> adalah wadah block-level generik yang tidak memiliki makna khusus, dipakai untuk mengelompokkan elemen lain agar mudah diberi gaya atau disusun dalam layout. Dengan…
23
HTML Classes
Atribut class memberi nama pengelompok pada sebuah elemen sehingga bisa diberi gaya CSS yang sama secara berulang. Satu kelas bisa dipakai oleh banyak elemen, dan sebuah elemen…
24
HTML Id
Atribut id dipakai untuk menamai sebuah elemen secara unik di dalam satu halaman. Nilai id tidak boleh ganda agar tetap valid, dan di CSS ditulis dengan tanda pagar seperti…
25
HTML Buttons
Tombol dalam halaman web dibuat dengan elemen <button> yang bisa berisi teks maupun elemen lain di dalamnya. Tombol yang berfungsi mengirim formulir memakai atribut…
26
HTML Iframes
Iframe dibuat dengan elemen <iframe> untuk menanamkan dokumen lain, seperti peta atau video, di dalam halaman. Atribut src menentukan halaman yang ditampilkan dan atribut width…
27
HTML JavaScript
JavaScript dapat disisipkan ke halaman HTML dengan elemen <script>. Kode biasanya diletakkan sebelum penutup </body> agar elemen halaman sudah dimuat lebih dulu. Selain kode…
28
HTML File Paths
File path menentukan lokasi berkas gambar, CSS, atau halaman lain yang direferensikan halaman. Path relatif menunjuk berkas relatif terhadap posisi halaman saat ini, sedangkan…
29
HTML Head
Elemen <head> berisi metadata tentang halaman yang tidak langsung tampil, namun penting bagi browser, mesin pencari, dan layanan lain. Di dalamnya ada <meta>, <title>, <link>,…
30
HTML Layout
Layout halaman modern disusun dari elemen semantik seperti <header>, <nav>, <section>, <article>, <aside>, dan <footer> yang masing-masing memegang peran tertentu. Struktur ini…
31
HTML Responsive
Halaman responsif menyesuaikan tampilannya agar nyaman dibuka di layar apa pun, dari ponsel hingga desktop. Kuncinya ada pada meta viewport dan penggunaan CSS media query serta…
32
HTML Computercode
HTML menyediakan elemen khusus untuk menampilkan potongan kode komputer dan teks teknis, antara lain <code>, <kbd>, <samp>, dan <var>. Elemen <code> menandai potongan kode, <kbd>…
33
HTML Semantics
Elemen semantik adalah tag yang memiliki makna jelas, seperti <header>, <nav>, <article>, <section>, <aside>, dan <footer>. Berbeda dengan <div> yang netral, elemen semantik…
34
HTML Style Guide
Gaya penulisan HTML yang rapi membuat kode lebih mudah dibaca dan dipelihara oleh tim developer. Praktik yang dianjurkan antara lain menulis elemen dalam huruf kecil, memberi…
35
HTML Entities
HTML entity adalah kode pengganti untuk menampilkan karakter khusus yang biasa dipakai oleh sintaks HTML, seperti tanda kurung siku atau tanda kurung besar. Setiap entity ditulis…
36
HTML Symbols
Karakter khusus seperti panah, mata uang, dan tanda musik tidak tersedia langsung pada keyboard, sehingga dapat ditampilkan lewat kode entity HTML. Setiap simbol punya kode…
37
HTML Emojis
Emoji dapat langsung disisipkan ke dalam HTML karena mendukung Unicode, sehingga tidak memerlukan gambar atau library tambahan. Emoji bisa ditulis langsung sebagai karakter atau…
38
HTML Charsets
Charset menentukan cara browser mengubah byte menjadi karakter teks agar tulisan tampil benar. Standar yang umum dipakai adalah UTF-8 karena mendukung hampir semua huruf dan…
39
HTML URL Encode
URL encoding mengubah karakter khusus dalam alamat web menjadi format aman berbasis persen (%) dan kode heksadesimal. Contohnya, spasi menjadi %20 sehingga URL tetap valid saat…
40
HTML vs. XHTML
XHTML adalah versi HTML yang ditulis mengikuti aturan ketat XML, sehingga setiap elemen wajib ditutup, atribut harus memakai nilai valid, dan struktur harus berurutan.…
02
HTML Forms
6 lesson
01
HTML Forms
Formulir HTML dipakai mengumpulkan input pengguna seperti nama, email, dan pesan, lalu mengirimnya ke server. Elemen utamanya adalah <form> sebagai wadah, <label> untuk…
02
HTML Form Attributes
Elemen <form> memiliki beberapa atribut penting seperti action untuk tujuan pengiriman, method untuk cara pengiriman, target untuk menentukan tempat hasil dibuka, serta…
03
HTML Form Elements
Selain <input>, HTML menyediakan elemen khusus untuk formulir seperti <select> beserta <option> untuk pilihan bergugusan, <textarea> untuk isian teks panjang, serta <label>,…
04
HTML Input Types
Elemen <input> memiliki banyak nilai type yang mengatur jenis isian, mulai dari text, email, number, date, sampai color dan range. Setiap type memberi keyboard dan validasi yang…
05
HTML Input Attributes
Atribut pada elemen <input> memperkaya perilaku isian, misalnya value untuk nilai awal, placeholder untuk petunjuk, dan readonly atau disabled untuk membatasi input. Atribut…
06
Input Form Attributes
Selain pada elemen <input>, beberapa atribut juga bisa ditempel langsung pada elemen <form>. Contohnya autocomplete untuk mengaktifkan saran isian otomatis, novalidate untuk…
03
HTML Graphics
2 lesson
01
HTML Canvas
Elemen <canvas> menyediakan bidang gambar yang bisa digambar secara programatik menggunakan JavaScript. Canvas bersifat bitmap, artinya setiap piksel digambar dan hasilnya tidak…
02
HTML SVG
SVG (Scalable Vector Graphics) dipakai untuk menampilkan grafik berbasis vektor yang tetap tajam saat diperbesar. Bentuk seperti lingkaran dan persegi ditulis sebagai elemen XML,…
04
HTML Media
5 lesson
01
HTML Media
HTML5 menyediakan elemen bawaan untuk memutar multimedia, yaitu <video> untuk film dan <audio> untuk suara, sehingga tidak lagi bergantung pada plugin tambahan. Kedua elemen…
02
HTML Video
Elemen <video> memutar berkas video langsung di halaman, dengan atribut seperti width, height, controls, autoplay, dan loop. Untuk menampilkan poster saat video belum dipakai,…
03
HTML Audio
Elemen <audio> digunakan untuk memutar berkas suara seperti musik atau rekaman langsung di halaman. Sama seperti video, kamu bisa memakai controls, autoplay, loop, dan beberapa…
04
HTML Plug-ins
Elemen <object> dan <embed> dipakai menyisipkan konten eksternal seperti berkas PDF, gambar, atau media tambahan ke halaman. <object> bersifat fleksibel dengan atribut data dan…
05
HTML YouTube
Video YouTube dapat ditampilkan di halaman dengan menempelkan kode embed dari elemen <iframe>. Cukup ganti ID video pada alamat src, lalu atur width dan height sesuai kebutuhan.…
05
Web APIs
7 lesson
01
Web APIs
Web API adalah antarmuka pemrograman bawaan browser yang bisa dipakai JavaScript untuk berinteraksi dengan fitur sistem dan data pengguna. Contohnya Geolocation untuk lokasi, Web…
02
Geolocation API
Geolocation API memungkinkan halaman web memperoleh lokasi perangkat pengguna, seperti latitude dan longitude, dengan izin dari pengguna. Lokasi diperoleh lewat method…
03
Drag and Drop API
Drag and Drop API memungkinkan pengguna memindahkan elemen dengan menyeret (drag) lalu melepasnya (drop) di area tertentu. Pengaktifan dimulai dengan atribut draggable="true"…
04
Popover API
Popover API memungkinkan menampilkan panel tambahan seperti tooltip, menu, atau dialog kecil di atas konten utama tanpa harus membuat tata letak khusus. Aktifkan dengan atribut…
05
Web Storage API
Web Storage API menyediakan cara menyimpan data di sisi klien dalam pasangan kunci-nilai, yaitu localStorage yang permanen dan sessionStorage yang hilang saat tab ditutup.…
06
Web Workers API
Web Worker memungkinkan JavaScript berjalan di background thread terpisah sehingga tugas berat seperti perhitungan tidak membekukan tampilan halaman. Worker dibuat dengan…
07
Server-Sent Events API
Server-Sent Events (SSE) memungkinkan server mengirim data secara terus-menerus ke halaman web melalui satu jalur koneksi HTTP. Di sisi klien, objek EventSource dipakai untuk…