PricingLoginStart free
HTML Academy logo
HTMLPemulaWebTahap A1 → C122 bahasa

HTML Academy

Bina asas kukuh dalam pembangunan web dengan mempelajari HTML di Akademi HTML. Laluan pembelajaran CoddyKit yang merangkumi 40 kursus pendek dan 159 pelajaran interaktif, dengan tutor kecerdasan buatan 24/7 di sisi anda.

Kursus
40
Pelajaran
159
Langkah interaktif
2,096
Percuma untuk bermula
Kursus 1
GET IT ONGoogle PlayDownload on theApp Store
Kurikulum

40 kursus dalam laluan ini

Setiap kursus dalam laluan HTML Academy, mengikut urutan pembelajaran. Kursus pertama adalah percuma.

1

A13 pelajaranPercuma

Pelajari cara pelayar menghuraikan HTML, fungsi DOCTYPE, serta cara elemen html, head dan body menyusun setiap halaman web.

  1. 1Apakah HTML?
  2. 2Cara Pelayar Membaca HTML
  3. 3Blok Binaan Halaman
Mula belajar secara percuma
2

A14 pelajaranPRO

Kuasai tajuk, perenggan, penegasan, elemen sebaris dan kawalan ruang kosong dengan teg teks HTML.

  1. 1Pengepala h1-h6 dan Hierarkinya
  2. 2Perenggan, em, strong dan b i
  3. 3br, hr, blockquote dan pre
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
3

A14 pelajaranPRO

Bina navigasi dengan elemen sauh, URL mutlak dan relatif, pautan tab baharu serta pengecam fragmen.

  1. 1Elemen anchor dan Atribut href
  2. 2URL Mutlak berbanding Relatif
  3. 3Membuka Pautan dalam Tab Baharu dan Atribut Download
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
4

A14 pelajaranPRO

Paparkan imej secara responsif dengan img, srcset, elemen picture serta kapsyen rajah semantik.

  1. 1Elemen img: src, alt, width dan height
  2. 2Imej Responsif dengan srcset dan sizes
  3. 3Elemen picture untuk Arah Seni
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
5

A14 pelajaranPRO

Cipta senarai tidak tersusun, tersusun dan huraian dengan penyusunan bersarang serta makna semantik yang betul.

  1. 1Senarai Tidak Tersusun ul dan li
  2. 2Senarai Tersusun ol, start, reversed dan type
  3. 3Senarai Perihalan dl, dt dan dd
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
6

A24 pelajaranPRO

Bina jadual data yang boleh diakses dengan struktur yang betul, sel merentasi ruang, serta bahagian jadual.

  1. 1table, tr, td dan th
  2. 2Struktur thead, tbody dan tfoot
  3. 3colspan dan rowspan untuk Rentangan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
7

A24 pelajaranPRO

Fahami atribut id, class, style, hidden, tabindex dan data-* tersuai yang digunakan merentasi semua elemen HTML.

  1. 1id, class, style dan title
  2. 2Atribut hidden
  3. 3tabindex dan accesskey
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
8

A24 pelajaranPRO

Bina borang web yang boleh diakses dengan jenis input, label, butang, serta atribut action dan method bagi elemen form.

  1. 1Elemen form: action, method dan enctype
  2. 2Jenis Input: text, password, email, number dan tel
  3. 3Elemen label dan Kebolehcapaian
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
9

A24 pelajaranPRO

Perbaik borang dengan senarai juntai bawah, textarea, kumpulan kotak pilihan, butang radio dan pelengkapan automatik dengan datalist.

  1. 1Menu Juntai Select dan option
  2. 2Textarea untuk Masukan Berbilang Baris
  3. 3Kumpulan Kotak Pilihan dan Butang Radio
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
10

A24 pelajaranPRO

Gunakan atribut pengesahan HTML5 seperti required, pattern, min dan max untuk mengesahkan input pengguna sebelum penghantaran.

  1. 1required pattern min max dan maxlength
  2. 2Atribut novalidate
  3. 3Asas API Pengesahan Kekangan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
11

A24 pelajaranPRO

Gantikan div umum dengan elemen HTML5 yang bermakna seperti header, nav, main, footer, article dan section.

  1. 1header nav main dan footer
  2. 2Elemen article Kandungan Serba Lengkap
  3. 3Elemen section berbanding div
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
12

A24 pelajaranPRO

Terokai aside, details, summary, progress dan meter untuk menambahkan makna serta interaktiviti yang lebih kaya pada halaman.

  1. 1aside Kandungan Pelengkap
  2. 2figure dan figcaption Sekali Lagi
  3. 3details dan summary Widget Pendedahan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
13

A24 pelajaranPRO

Kuasai bahagian head: title, teg meta, viewport, URL kanonik, arahan robots dan favicon.

  1. 1title dan Peranannya dalam SEO
  2. 2meta charset viewport author dan description
  3. 3URL Kanonik dan meta robots
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
14

A24 pelajaranPRO

Benamkan audio dan video secara asli dengan HTML5, sediakan pelbagai format, serta tambahkan sari kata dengan track dan WebVTT.

  1. 1Elemen audio src controls loop autoplay
  2. 2Elemen video dan Nisbah Aspek
  3. 3Elemen source untuk Pelbagai Format
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
15

B14 pelajaranPRO

Fahami tahap WCAG, hierarki tajuk, strategi teks alt serta navigasi papan kekunci untuk halaman web inklusif.

  1. 1Mengapa Kebolehcapaian Penting Tahap WCAG
  2. 2Hierarki Tajuk untuk Pembaca Skrin
  3. 3Teks Alt Imej Bila dan Cara Menggunakannya
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
16

B14 pelajaranPRO

Tingkatkan kebolehcapaian dengan peranan, label dan huraian ARIA, serta amalkan prinsip menggunakan HTML asli terlebih dahulu.

  1. 1Bila Menggunakan ARIA berbanding HTML Asli
  2. 2role button alert dialog dan landmark
  3. 3aria-label aria-labelledby dan aria-describedby
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
17

B14 pelajaranPRO

Simpan dan akses metadata tersuai pada elemen HTML menggunakan atribut data-*, API dataset dan pemilih CSS.

  1. 1Sintaks data-* dan Konvensyen Penamaan
  2. 2Mengakses data-* dengan dataset dalam JavaScript
  3. 3Menggunakan data-* dengan Pemilih Atribut CSS
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
18

B14 pelajaranPRO

Gunakan elemen template untuk mentakrifkan penanda tidak aktif, klonkannya dengan cekap, serta bandingkan dengan pemaparan berasaskan innerHTML.

  1. 1Elemen template Kandungan Tidak Aktif
  2. 2Mengklon Templat dengan cloneNode
  3. 3Menggunakan template dengan Pemaparan JavaScript
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
19

B14 pelajaranPRO

Lukis bentuk, teks dan imej pada canvas 2D, serta animasikan semuanya dengan requestAnimationFrame.

  1. 1Menyediakan Canvas dan Konteks 2D
  2. 2Melukis Segi Empat dan Laluan
  3. 3Teks dan Imej pada Canvas
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
20

B14 pelajaranPRO

Benamkan grafik vektor boleh skala secara sebaris, gunakan bentuk asas, kawal viewBox, serta animasikan SVG dengan CSS.

  1. 1SVG Sebaris berbanding img dan object
  2. 2Bentuk SVG Asas rect circle path
  3. 3viewBox SVG dan Penskalaan Responsif
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
21

B14 pelajaranPRO

Benamkan kandungan luaran dengan iframe, fahami pengkotakan pasir untuk keselamatan, serta gunakan pemuatan malas untuk prestasi.

  1. 1Elemen iframe src dan sandbox
  2. 2Keselamatan iframe Serangan Clickjacking dan X-Frame-Options
  3. 3Elemen embed dan object
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
22

B14 pelajaranPRO

Simpan data pada sisi klien dengan localStorage dan sessionStorage, dengarkan peristiwa storan, serta ikuti garis panduan keselamatan.

  1. 1localStorage berbanding sessionStorage
  2. 2Mendapatkan Menetapkan dan Mengalih Keluar Item
  3. 3Mendengar Peristiwa Storan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
23

B14 pelajaranPRO

Laksanakan interaksi seret dan lepas dengan API Seret dan Lepas HTML5 serta objek dataTransfer.

  1. 1Atribut draggable dan Peristiwa dragstart
  2. 2Peristiwa dragover dan drop
  3. 3Objek dataTransfer
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
24

B14 pelajaranPRO

Optimumkan halaman untuk enjin carian dan perkongsian sosial dengan OpenGraph, Twitter Cards, JSON-LD dan hreflang.

  1. 1OpenGraph og:title og:description og:image
  2. 2Tag Meta Twitter Card
  3. 3Asas Data Berstruktur JSON-LD
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
25

B14 pelajaranPRO

Bina HTML yang selamat untuk e-mel menggunakan susun atur berasaskan jadual, gaya sebaris dan teknik imej merentas klien.

  1. 1Pendekatan Reka Letak Berasaskan Jadual
  2. 2Gaya Sebaris untuk E-mel
  3. 3Pengendalian Imej dalam Klien E-mel
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
26

B24 pelajaranPRO

Laksanakan corak togol, antara muka tab dan kawasan langsung, serta jalankan ujian dengan pembaca skrin sebenar.

  1. 1aria-expanded aria-controls untuk Togol
  2. 2aria-selected dan Corak Tab
  3. 3Rantau Langsung aria-live aria-atomic aria-relevant
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
27

B24 pelajaranPRO

Percepat pemuatan halaman dengan skrip async dan defer, petunjuk pramuat, imej yang dimuatkan secara malas, serta petunjuk sumber.

  1. 1Atribut async dan defer
  2. 2Preload Prefetch dan Preconnect
  3. 3Pemuatan Malas Imej loading=lazy
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
28

B24 pelajaranPRO

Takrifkan elemen HTML tersuai yang boleh diguna semula dengan API Custom Elements, panggil balik kitar hayat dan atribut yang diperhatikan.

  1. 1Menakrifkan Elemen dengan customElements.define
  2. 2connectedCallback dan disconnectedCallback
  3. 3Atribut Diperhatikan dan attributeChangedCallback
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
29

B24 pelajaranPRO

Kapsulkan penanda dan gaya dalam Shadow DOM, agihkan kandungan dengan slot, serta dedahkan API penggayaan dengan part.

  1. 1attachShadow dan Punca Bayangan
  2. 2Elemen Slot untuk Pengagihan Kandungan
  3. 3Gaya Berskop dalam DOM Bayangan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
30

B24 pelajaranPRO

Gunakan skrip modul ES, peta import untuk penentu modul ringkas, import dinamik dan konsep Module Federation.

  1. 1Skrip Modul ES type=module
  2. 2Peta Import importmap
  3. 3Import Dinamik dalam Modul
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
31

B24 pelajaranPRO

Bina dengan peningkatan progresif: mulakan dengan HTML yang kukuh, lapiskan CSS dan JavaScript, serta kesan ciri dengan betul.

  1. 1Falsafah PE Mulakan dengan HTML
  2. 2Pengesanan Ciri berbanding Penghidu Pelayar
  3. 3Degradasi Beransur-ansur berbanding Peningkatan Progresif
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
32

B24 pelajaranPRO

Sediakan HTML untuk khalayak global dengan sokongan lang, dir, bdi, bdo, charset dan teks dari kanan ke kiri.

  1. 1Atribut lang dan Pembaca Skrin
  2. 2dir=rtl untuk Teks Kanan ke Kiri
  3. 3Elemen bdi dan bdo
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
33

B24 pelajaranPRO

Lindungi halaman daripada XSS, clickjacking dan serangan suntikan dengan CSP, sandbox, SRI serta amalan pengendalian HTML yang selamat.

  1. 1Polisi Keselamatan Kandungan meta http-equiv
  2. 2XSS melalui innerHTML dan Cara Mencegahnya
  3. 3Penyahkotakpasiran iframe dan Polisi Kebenaran
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
34

B24 pelajaranPRO

Manfaatkan FormData, API Pengesahan Kekangan, mesej kesahan tersuai dan pengurusan keadaan borang.

  1. 1API FormData
  2. 2API Pengesahan Kekangan
  3. 3reportValidity dan setCustomValidity
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
35

B24 pelajaranPRO

Urus sejarah pelayar dengan pushState, peristiwa popstate dan API Navigasi moden untuk penghalaan SPA.

  1. 1pushState dan replaceState
  2. 2Peristiwa popstate
  3. 3Penghalaan Berasaskan Hash berbanding Berasaskan Laluan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
36

B24 pelajaranPRO

Gunakan IntersectionObserver untuk melaksanakan pemuatan malas, tatal tanpa penghujung dan pencetus animasi yang dipautkan pada tatalan.

  1. 1API IntersectionObserver dan Ambang
  2. 2Pemuatan Malas dengan IntersectionObserver
  3. 3Pelaksanaan Tatalan Tanpa Kesudahan
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
37

B24 pelajaranPRO

Konfigurasikan aplikasi web progresif dengan manifes aplikasi web, pendaftaran pekerja perkhidmatan dan halaman sandaran luar talian.

  1. 1Manifes Aplikasi Web
  2. 2Pendaftaran Service Worker daripada HTML
  3. 3Warna Tema dan Ikon Aplikasi
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
38

B24 pelajaranPRO

Sahkan penanda dengan W3C Validator, audit HTML dengan Lighthouse dan uji kebolehcapaian dengan pa11y serta axe.

  1. 1Pengesah Markup W3C
  2. 2Audit HTML Lighthouse
  3. 3Pa11y dan axe untuk Ujian Kebolehcapaian
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
39

B24 pelajaranPRO

Terokai ciri HTML yang sedang muncul: DOM Bayangan Deklaratif, API Popover, selectlist dan atribut command.

  1. 1DOM Bayangan Deklaratif
  2. 2API Popover
  3. 3Elemen selectlist
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
40

C14 pelajaranPRO

Urus HTML dalam projek besar dengan pengekstrakan komponen, templat sisi pelayan, sistem reka bentuk dan dokumentasi panduan gaya.

  1. 1Pengekstrakan Komponen dan Templat Separa
  2. 2Templat Sisi Pelayan Jinja2 Handlebars
  3. 3HTML dalam Sistem Reka Bentuk
  4. +1 lagi
Mula belajar secara percumaDapatkan akses dengan PRO
CoddyKit PRO

Dapatkan akses kepada kesemua 40 kursus dalam laluan ini dan semua laluan lain

Tutor AI, peperiksaan pensijilan dan sijil. Berfungsi di laman web, iOS dan Android.

Lihat semua pelan
Tahunan$29.90 / tahunKira-kira $2.49 sebulanBayar sekaliSeumur hidup$69.99 sekaliTiada pembaharuan. PRO selama-lamanya.
Gambaran Keseluruhan Kursus

HTML: Bahasa di Sebalik Setiap Halaman Web

HTML ialah asas struktur web — setiap tab pelayar, penghantaran borang dan video terbenam bermula dengan penanda. Laluan ini membina penguasaan sebenar HTML, daripada peraturan yang menentukan dokumen sah hingga API pelayar dan model komponen yang digunakan dalam laman pengeluaran moden. Matlamatnya bukan sekadar menulis tag, tetapi memahami sebab setiap elemen wujud dan perkara yang disampaikannya kepada pelayar, teknologi bantuan dan enjin carian.

Perkara yang Akan Anda Pelajari

Anda akan bermula dengan struktur dokumen, kandungan teks, pautan, imej dan senarai, kemudian beralih kepada jadual, borang dan atribut pengesahan borang. Laluan ini merangkumi elemen HTML5 semantik, <head> dan metadata, audio dan video, serta asas kebolehcapaian termasuk peranan dan atribut ARIA. Kursus-kursus seterusnya membincangkan atribut data tersuai, templat HTML, elemen Canvas dan SVG, Storan Web, API Seret dan Lepas, SEO dan tag meta sosial, serta templat e-mel HTML. Bahagian lanjutan merangkumi Shadow DOM, Komponen Web dan elemen tersuai, modul HTML dan peta import, peningkatan progresif, pengantarabangsaan, keselamatan, API Sejarah dan Navigasi, Pemerhati Persilangan, serta pembinaan HTML untuk Aplikasi Web Progresif.

Laluan Pembelajaran

Empat puluh kursus berkembang daripada A1 melalui A2 dan B1 hingga B2, dan berakhir dengan projek kemuncak C1 tentang HTML pada Skala Besar. Kursus A1 dan A2 membina asas penting — struktur dokumen, elemen semantik, borang dan metadata. B1 memperkenalkan kebolehcapaian, ARIA, Canvas, SVG dan storan pelayar. B2 ialah bahagian terbesar, yang merangkumi Komponen Web, Shadow DOM, prestasi, keselamatan, pengantarabangsaan dan Pemerhati Persilangan. Kursus C1 terakhir, HTML pada Skala Besar, membincangkan corak dan kekangan yang penting apabila HTML ditulis, diuji dan diselenggara merentas pangkalan kod yang besar.

Cara Ia Berfungsi

Setiap kursus dibahagikan kepada pelajaran pendek dan praktikal yang anda lengkapkan dalam penyunting kod terbina dalam dengan maklum balas masa nyata. Tutor AI tersedia apabila anda menghadapi kesukaran, dan anda maju mengikut rentak sendiri — setiap pelajaran berdiri sendiri supaya anda boleh kembali kepada mana-mana topik sebagai rujukan pada kemudian hari.

Alat

Berlatih dengan AI, bukan sekadar membaca

Tingkatkan pembelajaran anda dengan alat dan ciri berkuasa AI

Penjana Kod AIJana kod menggunakan AIPembetulan Pepijat AICari dan baiki ralat kodPROWawasan AIAnalisis kod mendalamPROSembang AIBerbual dengan tutor AITanya Soalan SuperDapatkan jawapan bertaraf pakarPROCipta PelajaranPembina pelajaran berkuasa AIPROMulakan Peperiksaan PensijilanDapatkan sijil andaPROPenyunting KodTulis dan jalankan kodMulakan CabaranUji kemahiran anda

Cara Anda Belajar

  1. 01

    Pelajaran Interaktif

    Latihan pengekodan amali dengan maklum balas masa nyata

  2. 02

    Tutor AI

    Dapatkan bantuan segera daripada AI kami apabila anda buntu

  3. 03

    Penyunting Terbina Dalam

    Tulis dan jalankan kod terus dalam pelayar anda

  4. 04

    Sijil

    Dapatkan sijil selepas melengkapkan kursus

Terus meneroka

Laluan pembelajaran berkaitan

HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.JavaScript Academy logoAkademi JavaScriptUnlock the potential of web interactivity by learning JavaScript at JavaScript Academy.
FAQ

Soalan Lazim

Adakah kursus HTML Academy percuma?

Ya. Anda boleh memulakan kursus HTML Academy secara percuma dan mengikuti pelajaran interaktifnya tanpa sebarang bayaran. Langganan PRO pilihan membuka akses kepada alat kecerdasan buatan lanjutan dan sijil yang boleh dikongsi.

Adakah saya memerlukan pengalaman terdahulu untuk mempelajari HTML?

Tidak. Kursus ini bermula dengan asas dan beralih secara beransur-ansur kepada topik yang lebih maju, jadi anda boleh bermula walaupun tanpa pengalaman terdahulu dalam HTML.

Bagaimanakah saya akan mempelajari HTML di CoddyKit?

Anda belajar melalui amali. Pelajaran interaktif yang ringkas menggabungkan penerangan yang jelas dengan latihan pengekodan praktikal yang berjalan dalam masa nyata, manakala tutor kecerdasan buatan 24/7 memberikan bantuan yang diperibadikan apabila anda menghadapi kesukaran.

Adakah saya mendapat sijil selepas menamatkan HTML Academy?

Ya. Pelajar PRO boleh menduduki peperiksaan dan memperoleh sijil tamat kursus yang boleh dikongsi, lengkap dengan kod yang boleh disahkan untuk kursus HTML Academy.

Bolehkah saya mempelajari HTML melalui telefon saya?

Ya. CoddyKit tersedia di web dan sebagai aplikasi asli iOS serta Android, jadi anda boleh mempelajari HTML pada mana-mana peranti dan kemajuan anda disegerakkan merentas semua peranti.

Berapakah kos CoddyKit PRO?

Kursus pertama dalam HTML Academy adalah percuma. CoddyKit PRO membuka akses kepada setiap kursus: $5.90 seminggu, $7.90 sebulan, $29.90 setahun atau $69.99 sekali untuk akses seumur hidup tanpa pembaharuan.

Berapa lama masa yang diperlukan untuk melengkapkan HTML Academy?

HTML Academy mempunyai 40 kursus dan 159 pelajaran. Kebanyakan pelajaran mengambil masa kira-kira 5–10 minit, jadi keseluruhan laluan ini memerlukan sekitar 19 jam latihan amali, mengikut rentak anda sendiri.

Mulakan HTML Academy Sekarang

Sertai ribuan pelajar yang menguasai pengaturcaraan melalui pelajaran berkuasa kecerdasan buatan.

Mula belajar secara percumaSemak Semua Kursus