0Pricing
HTML Academy icon

HTML Academy

HTMLWebFrontendBeginner

สร้างพื้นฐานที่มั่นคงในการพัฒนาเว็บโดยการเรียนรู้ HTML ที่ HTML Academy

🤖 ขับเคลื่อนด้วย AI📚 คอร์ส 40👥 ผู้เรียน 100,000+ คน⭐ คะแนน 4.9
ภาพรวมคอร์ส

HTML: ภาษาเบื้องหลังทุกหน้าเว็บ

HTML คือรากฐานโครงสร้างของเว็บ — ทุกแท็บเบราว์เซอร์ การส่งแบบฟอร์ม และวิดีโอที่ฝังเข้ามาเริ่มต้นด้วย markup HTML track นี้สร้างความเข้าใจอย่างแท้จริงใน HTML ตั้งแต่กฎที่ควบคุมเอกสารที่ถูกต้องไปจนถึง browser API และ component model ที่ใช้ในไซต์การผลิตสมัยใหม่ เป้าหมายไม่ใช่แค่การเขียน tag แต่การเข้าใจว่าทำไมแต่ละ element จึงมีอยู่และมันส่งสัญญาณอะไรไปยัง browser ประเทศต่างๆ เทคโนโลยีช่วยเหลือ และ search engine

สิ่งที่คุณจะเรียนรู้

คุณจะเริ่มต้นด้วยโครงสร้างเอกสาร เนื้อหาข้อความ ลิงก์ ภาพ และรายการ จากนั้นจึงไปยัง table form และ form validation attribute HTML5 semantic element <head> และ metadata audio video และ accessibility fundamental รวมถึง ARIA role และ attribute คอร์สต่อมาครอบคลุม custom data attribute HTML template Canvas และ SVG element Web Storage Drag and Drop API SEO และ social meta tag และ HTML email template ส่วนขั้นสูงกล่าวถึง Shadow DOM Web Component และ custom element HTML module และ import map progressive enhancement internationalization security History API Navigation API Intersection Observer และการสร้าง HTML สำหรับ Progressive Web App

เส้นทางการเรียนรู้

สี่สิบคอร์สมีความคืบหน้าจาก A1 ผ่าน A2 และ B1 ไปจนถึง B2 สิ้นสุดด้วย C1 capstone เรื่อง HTML at Scale คอร์ส A1 และ A2 สร้างสิ่งจำเป็น — โครงสร้างเอกสาร semantic element form และ metadata B1 แนะนำ accessibility ARIA Canvas SVG และ browser storage B2 เป็นบล็อกที่ใหญ่ที่สุด ครอบคลุม Web Component Shadow DOM performance security internationalization และ Intersection Observer คอร์ส C1 สุดท้าย HTML at Scale กล่าวถึง pattern และ constraint ที่สำคัญเมื่อ HTML ถูกเขียน ทดสอบ และบำรุงรักษาใน codebase ขนาดใหญ่

วิธีการทำงาน

แต่ละคอร์สแบ่งออกเป็น lesson สั้นๆ ที่ใช้ hands-on ซึ่งคุณสมบูรณ์ใน built-in code editor โดยมี real-time feedback AI tutor มีให้บริการเมื่อใดก็ตามที่คุณติดขัด และคุณอาจเรียนรู้ในอัตราของคุณเอง — แต่ละ lesson เป็นการ self-contained เพื่อว่าคุณจะกลับมาที่หัวข้อใดๆ เป็นข้อมูลอ้างอิงในภายหลัง

เริ่มเรียนรู้ →

วิธีการเรียนรู้ของคุณ

🎯
บทเรียนแบบโต้ตอบ
แบบฝึกหัดการเขียนโค้ดโดยตรงพร้อมข้อเสนอแนะแบบเรียลไทม์
🤖
ติวเตอร์ AI
ได้รับความช่วยเหลือแบบทันทีจาก AI ของเราเมื่อคุณติดขัด
💻
ตัวแก้ไขในตัว
เขียนและรันโค้ดโดยตรงในเบราว์เซอร์ของคุณ
🏆
ใบรับรอง
ได้รับใบรับรองเมื่อคุณเสร็จสิ้นหลักสูตร
หลักสูตร

40 หลักสูตร

ทุกหลักสูตรในเส้นทางการเรียนรู้ HTML Academy

01

โครงสร้างเอกสาร HTML

A13 บทเรียน

เรียนรู้วิธีที่เบราว์เซอร์แยกวิเคราะห์ HTML หน้าที่ของ DOCTYPE และวิธีที่องค์ประกอบ html, head และ body จัดระเบียบหน้าเว็บทุกหน้า

02

องค์ประกอบเนื้อหาข้อความ

A14 บทเรียนPRO

เชี่ยวชาญหัวเรื่อง ย่อหน้า การเน้น องค์ประกอบในบรรทัด และการควบคุมช่องว่างด้วยแท็กข้อความ HTML

03

ลิงก์และการนำทาง

A14 บทเรียนPRO

สร้างการนำทางด้วยองค์ประกอบจุดยึด URL แบบสัมบูรณ์และแบบสัมพันธ์ ลิงก์ที่เปิดแท็บใหม่ และตัวระบุส่วนย่อย

04

รูปภาพและภาพประกอบ

A14 บทเรียนPRO

แสดงรูปภาพแบบปรับตามหน้าจอด้วย img, srcset องค์ประกอบ picture และคำบรรยายภาพเชิงความหมายด้วย figure

05

รายการ

A14 บทเรียนPRO

สร้างรายการไม่เรียงลำดับ รายการเรียงลำดับ และรายการคำอธิบายด้วยการซ้อนที่ถูกต้องและความหมายเชิงความหมาย

06

ตาราง

A24 บทเรียนPRO

สร้างตารางข้อมูลที่เข้าถึงได้ด้วยโครงสร้างที่ถูกต้อง การรวมเซลล์ และส่วนต่าง ๆ ของตาราง

07

แอตทริบิวต์ HTML และแอตทริบิวต์ส่วนกลาง

A24 บทเรียนPRO

ทำความเข้าใจแอตทริบิวต์ id, class, style, hidden, tabindex และแอตทริบิวต์ข้อมูลกำหนดเอง data-* ที่ใช้กับองค์ประกอบ HTML ทั้งหมด

08

พื้นฐานฟอร์ม HTML

A24 บทเรียนPRO

สร้างฟอร์มเว็บที่เข้าถึงได้ด้วยชนิดอินพุต ป้ายกำกับ ปุ่ม และแอตทริบิวต์ action กับ method ขององค์ประกอบ form

09

ตัวควบคุมฟอร์มขั้นสูง

A24 บทเรียนPRO

เพิ่มความสามารถให้ฟอร์มด้วยเมนูแบบดรอปดาวน์ พื้นที่ข้อความ กลุ่มช่องทำเครื่องหมาย ปุ่มตัวเลือก และการเติมข้อความอัตโนมัติด้วย datalist

10

แอตทริบิวต์ตรวจสอบฟอร์ม

A24 บทเรียนPRO

ใช้แอตทริบิวต์ตรวจสอบของ HTML5 เช่น required, pattern, min และ max เพื่อตรวจสอบอินพุตของผู้ใช้ก่อนส่งข้อมูล

11

HTML5 เชิงความหมาย

A24 บทเรียนPRO

แทนที่ div ทั่วไปด้วยองค์ประกอบ HTML5 ที่มีความหมาย เช่น header, nav, main, footer, article และ section

12

องค์ประกอบเชิงความหมายเพิ่มเติม

A24 บทเรียนPRO

สำรวจ aside, details, summary, progress และ meter เพื่อเพิ่มความหมายและการโต้ตอบที่สมบูรณ์ยิ่งขึ้นให้หน้าเว็บ

13

ส่วนหัว HTML และข้อมูลเมตา

A24 บทเรียนPRO

เชี่ยวชาญส่วน head ได้แก่ title แท็ก meta, viewport, URL หลัก คำสั่ง robots และไอคอนเว็บไซต์

14

องค์ประกอบเสียงและวิดีโอ

A24 บทเรียนPRO

ฝังเสียงและวิดีโอในตัวด้วย HTML5 รองรับหลายรูปแบบ และเพิ่มคำบรรยายด้วย track และ WebVTT

15

พื้นฐานการเข้าถึง HTML

B14 บทเรียนPRO

ทำความเข้าใจระดับ WCAG ลำดับชั้นของหัวเรื่อง แนวทางใช้ข้อความ alt และการนำทางด้วยแป้นพิมพ์สำหรับหน้าเว็บที่ทุกคนใช้ได้

16

บทบาทและแอตทริบิวต์ ARIA

B14 บทเรียนPRO

เพิ่มความสามารถในการเข้าถึงด้วยบทบาท ป้ายกำกับ และคำอธิบาย ARIA พร้อมเรียนรู้หลักการให้ใช้ HTML ในตัวก่อน

17

แอตทริบิวต์ข้อมูลกำหนดเอง

B14 บทเรียนPRO

จัดเก็บและเข้าถึงข้อมูลเมตากำหนดเองบนองค์ประกอบ HTML ด้วยแอตทริบิวต์ data-* เอพีไอ dataset และตัวเลือก CSS

18

แม่แบบ HTML

B14 บทเรียนPRO

ใช้องค์ประกอบ template เพื่อกำหนดมาร์กอัปที่ยังไม่ทำงาน โคลนอย่างมีประสิทธิภาพ และเปรียบเทียบกับการเรนเดอร์ด้วย innerHTML

19

องค์ประกอบ Canvas

B14 บทเรียนPRO

วาดรูปร่าง ข้อความ และรูปภาพบน Canvas สองมิติ และทำให้เคลื่อนไหวด้วย requestAnimationFrame

20

SVG ใน HTML

B14 บทเรียนPRO

ฝังกราฟิกเวกเตอร์ที่ปรับขนาดได้แบบอินไลน์ ใช้รูปร่างพื้นฐาน ควบคุม viewBox และทำให้ SVG เคลื่อนไหวด้วย CSS

21

iframe และเนื้อหาที่ฝัง

B14 บทเรียนPRO

ฝังเนื้อหาภายนอกด้วย iframe ทำความเข้าใจการจำกัดขอบเขตเพื่อความปลอดภัย และใช้การโหลดเมื่อจำเป็นเพื่อเพิ่มประสิทธิภาพ

22

พื้นที่จัดเก็บเว็บของ HTML

B14 บทเรียนPRO

จัดเก็บข้อมูลฝั่งไคลเอนต์ด้วย localStorage และ sessionStorage รับฟังเหตุการณ์การจัดเก็บ และปฏิบัติตามแนวทางความปลอดภัย

23

เอพีไอลากและวาง

B14 บทเรียนPRO

ใช้การโต้ตอบแบบลากและวางด้วยเอพีไอ Drag and Drop ของ HTML5 และออบเจกต์ dataTransfer

24

SEO และเมตาโซเชียล

B14 บทเรียนPRO

ปรับหน้าเว็บให้เหมาะกับเครื่องมือค้นหาและการแชร์บนโซเชียลด้วย OpenGraph, Twitter Cards, JSON-LD และ hreflang

25

แม่แบบอีเมล HTML

B14 บทเรียนPRO

สร้าง HTML ที่ปลอดภัยสำหรับอีเมลด้วยโครงร่างแบบตาราง สไตล์แบบอินไลน์ และเทคนิคจัดการรูปภาพที่ใช้ได้กับไคลเอนต์หลากหลาย

26

รูปแบบ ARIA ขั้นสูง

B24 บทเรียนPRO

ใช้รูปแบบสวิตช์ อินเทอร์เฟซแท็บ พื้นที่ถ่ายทอดสด และทดสอบด้วยโปรแกรมอ่านหน้าจอจริง

27

ประสิทธิภาพ HTML

B24 บทเรียนPRO

เร่งการโหลดหน้าเว็บด้วยสคริปต์ async และ defer คำแนะนำ preload รูปภาพที่โหลดเมื่อจำเป็น และคำแนะนำทรัพยากร

28

องค์ประกอบกำหนดเองของ Web Components

B24 บทเรียนPRO

กำหนดองค์ประกอบ HTML กำหนดเองที่นำกลับมาใช้ซ้ำได้ด้วยเอพีไอ Custom Elements, คอลแบ็กตามช่วงอายุการใช้งาน และแอตทริบิวต์ที่เฝ้าสังเกต

29

DOM เงา

B24 บทเรียนPRO

ห่อหุ้มมาร์กอัปและสไตล์ไว้ภายใน DOM เงา กระจายเนื้อหาด้วยช่อง และเปิดเผยเอพีไอจัดรูปแบบด้วย part

30

โมดูล HTML และแผนที่การนำเข้า

B24 บทเรียนPRO

ใช้สคริปต์โมดูล ES แผนที่การนำเข้าสำหรับตัวระบุแบบไม่ระบุเส้นทาง การนำเข้าแบบไดนามิก และแนวคิดการรวมโมดูล

31

การเพิ่มความสามารถแบบก้าวหน้า

B24 บทเรียนPRO

พัฒนาด้วยการเพิ่มความสามารถแบบก้าวหน้า เริ่มจาก HTML ที่มั่นคง เติม CSS และ JavaScript เป็นชั้น ๆ และตรวจสอบฟีเจอร์อย่างถูกต้อง

32

การทำให้เป็นสากล

B24 บทเรียนPRO

เตรียม HTML สำหรับผู้ใช้ทั่วโลกด้วย lang, dir, bdi, bdo, charset และการรองรับข้อความจากขวาไปซ้าย

33

ความปลอดภัยของ HTML

B24 บทเรียนPRO

ปกป้องหน้าเว็บจาก XSS, clickjacking และการโจมตีแบบฉีดโค้ดด้วย CSP, sandboxing, SRI และแนวทางจัดการ HTML อย่างปลอดภัย

34

API ขั้นสูงของแบบฟอร์ม HTML

B24 บทเรียนPRO

ใช้ FormData, Constraint Validation API, ข้อความตรวจสอบความถูกต้องแบบกำหนดเอง และการจัดการสถานะของแบบฟอร์ม

35

API ประวัติและการนำทางของ HTML

B24 บทเรียนPRO

จัดการประวัติเบราว์เซอร์ด้วย pushState, เหตุการณ์ popstate และ Navigation API สมัยใหม่สำหรับการกำหนดเส้นทางของ SPA

36

Intersection Observer

B24 บทเรียนPRO

ใช้ IntersectionObserver เพื่อสร้างการโหลดเมื่อจำเป็น การเลื่อนแบบไม่สิ้นสุด และตัวกระตุ้นแอนิเมชันที่เชื่อมโยงกับการเลื่อน

37

HTML สำหรับ PWA

B24 บทเรียนPRO

กำหนดค่าเว็บแอปแบบก้าวหน้าด้วยเว็บแอปแมนนิเฟสต์ การลงทะเบียน service worker และหน้าสำรองเมื่อออฟไลน์

38

การตรวจสอบและทดสอบ HTML

B24 บทเรียนPRO

ตรวจสอบมาร์กอัปด้วย W3C Validator ตรวจประเมิน HTML ด้วย Lighthouse และทดสอบการเข้าถึงด้วย pa11y และ axe

39

อนาคตของ HTML

B24 บทเรียนPRO

สำรวจฟีเจอร์ HTML ที่กำลังเกิดขึ้น ได้แก่ Declarative Shadow DOM, Popover API, selectlist และแอตทริบิวต์ command

40

HTML ในโครงการขนาดใหญ่

C14 บทเรียนPRO

จัดการ HTML ในโครงการขนาดใหญ่ด้วยการแยกคอมโพเนนต์ การสร้างแม่แบบฝั่งเซิร์ฟเวอร์ ระบบการออกแบบ และเอกสารคู่มือรูปแบบ

คำถามที่พบบ่อย

คำถามที่พบบ่อย

หลักสูตร HTML Academy ฟรีหรือไม่

ใช่ คุณสามารถเริ่มหลักสูตร HTML Academy ได้ฟรีและเสร็จสิ้นบทเรียนแบบโต้ตอบโดยไม่มีค่าใช้จ่าย การสมัครสมาชิก PRO ที่เป็นทางเลือกจะปลดล็อกเครื่องมือ AI ขั้นสูงและใบรับรองที่แชร์ได้

ฉันต้องมีประสบการณ์มาก่อนหรือไม่ในการเรียนรู้ HTML

ไม่ หลักสูตรเริ่มต้นด้วยพื้นฐานและค่อยๆ ไปสู่หัวข้อที่ซับซ้อนมากขึ้น ดังนั้นคุณสามารถเริ่มได้แม้ว่าจะไม่มีประสบการณ์ HTML มาก่อน

ฉันจะเรียนรู้ HTML บน CoddyKit ได้อย่างไร

คุณเรียนรู้โดยการลงมือทำ บทเรียนสั้น ๆ แบบโต้ตอบจับคู่คำอธิบายที่ชัดเจนกับแบบฝึกหัดการเขียนโค้ดที่ทำงานในเวลาจริง และติวเตอร์ AI ที่ทำงาน 24/7 ให้ความช่วยเหลือแบบบุคคลเมื่อคุณติดขัด

ฉันได้รับใบรับรองสำหรับการเสร็จสิ้น HTML Academy หรือไม่

ใช่ ผู้เรียน PRO สามารถสอบและได้รับใบรับรองการเสร็จสิ้นที่แชร์ได้พร้อมรหัสที่สามารถตรวจสอบได้สำหรับหลักสูตร HTML Academy

ฉันสามารถเรียนรู้ HTML บนโทรศัพท์ของฉันได้หรือไม่

ใช่ CoddyKit พร้อมใช้งานบนเว็บและเป็นแอปพลิเคชันแบบเนทีฟ iOS และ Android ดังนั้นคุณสามารถเรียนรู้ HTML บนอุปกรณ์ใดก็ได้และความคืบหน้าของคุณจะซิงค์ในทุกอุปกรณ์

เริ่มเรียน HTML Academy ตอนนี้

เข้าร่วมกับผู้เรียนนับพันคนที่กำลังเรียนรู้การเขียนโปรแกรมผ่านบทเรียนที่ขับเคลื่อนด้วย AI

เริ่มฟรี →ดูคอร์สทั้งหมด