เรียน HTML สร้างเว็บ
เรียน HTML สร้างเว็บ — คอร์ส HTML พร้อมโปรแกรมแก้ไขที่มีการแสดงตัวอย่างแบบเรียลไทม์ในมือคุณ
เรียน HTML สร้างเว็บ คือ คอร์ส HTML สำหรับ iPhone และ Android ที่ทำให้ โปรแกรมแก้ไข HTML พร้อมการแสดงตัวอย่างแบบเรียลไทม์ อยู่ห่างจากทุกบทเรียนเพียงแตะเดียว พิมพ์แท็ก ดูหน้าเว็บแสดงผล แล้วค่อย ๆ เรียนตั้งแต่หัวข้อแรกไปจนถึงฟอร์ม ตาราง semantic HTML5 การช่วยเหลือการเข้าถึง และ web components ผ่าน 40 คอร์สสั้น ๆ
- ราคา
- ฟรี อัปเกรดเป็น Pro
- แพลตฟอร์ม
- iOS และ Android
- ภาษา
- 22
- การจัดระดับอายุ
- 4+
- ต้องใช้
- iOS 15.1 ขึ้นไป
- App Store
- 3.0 ★ (1)
แท็กจะมีความหมายมากขึ้นเมื่อคุณได้เห็นมันแสดงผลบางอย่าง
HTML เป็นภาษามาร์กอัป วิธีที่เร็วที่สุดในการทำความเข้าใจองค์ประกอบใหม่จึงคือการพิมพ์แล้วดูผลลัพธ์ บทเรียนแต่ละบทในแอปนี้จะจบลงพร้อมโปรแกรมแก้ไขที่เปิดอยู่แล้ว โดยมีการแสดงตัวอย่างอยู่ข้างมาร์กอัปของคุณ และคุณจะเพิ่มไฟล์ CSS หรือ JavaScript ก็ต่อเมื่อพร้อม
คืออะไร
เรียน HTML สร้างเว็บ คือคอร์ส HTML บน iOS และ Android ที่เริ่มต้นใช้งานได้ฟรี สอนมาร์กอัปหน้าเว็บผ่าน 40 คอร์สและบทเรียนสั้น ๆ 159 บท เรียงตั้งแต่ระดับเริ่มต้น (A1) ถึงระดับสูง (C1) ทุกหัวข้อมาพร้อมโปรแกรมแก้ไขโค้ด HTML ในตัวและการแสดงตัวอย่างทันที โปรเจกต์แนะนำทีละขั้นตอน 20 โปรเจกต์ เช่น แบบฟอร์มติดต่อและตารางราคาเพื่อการเข้าถึงที่ดี ภารกิจแก้ไขข้อผิดพลาด 20 ภารกิจ และผู้ช่วย AI เพื่อให้ผู้เริ่มต้นอย่างสมบูรณ์สามารถเริ่มจากเอกสารเปล่าและสร้างหน้าเว็บที่ใช้ semantic HTML เข้าถึงได้ และมีโครงสร้างอย่างดี
ภายในแอป
หน้าตาเป็นอย่างไร
คอร์ส
คอร์ส HTML ครอบคลุมเรื่องใดบ้าง
40 คอร์สและ 159 บทเรียนจากรายการคอร์สของแอปเอง เรียงตามลำดับที่เส้นทางการเรียนสอน
โครงสร้างเอกสาร ข้อความ ลิงก์ รูปภาพ และรายการ
โครงสร้างพื้นฐานของทุกหน้า: โครงสร้างเอกสาร หัวเรื่องและย่อหน้า ลิงก์และการนำทาง รูปภาพและภาพประกอบ รวมถึงรายการแบบเรียงลำดับและไม่เรียงลำดับ
ตาราง แอตทริบิวต์ และแอตทริบิวต์สากล
การจัดวางข้อมูลในตาราง จากนั้นเรียนรู้แอตทริบิวต์ที่ใช้ปรับแต่งองค์ประกอบ รวมถึงแอตทริบิวต์สากลที่ใช้ได้กับทุกแท็ก
ฟอร์ม: พื้นฐาน คอนโทรลขั้นสูง และการตรวจสอบความถูกต้อง
เริ่มจากอินพุตพื้นฐาน ต่อด้วยคอนโทรลที่มีความสามารถมากขึ้น แล้วจึงเรียนรู้แอตทริบิวต์สำหรับตรวจสอบความถูกต้อง ซึ่งช่วยให้เบราว์เซอร์ตรวจสอบช่องข้อมูลก่อนส่ง
Semantic HTML5, ส่วน Head และ Metadata, Audio และ Video
องค์ประกอบเชิงความหมาย ส่วน head ของเอกสารและ metadata รวมถึงองค์ประกอบ audio และ video
การเข้าถึงได้ บทบาท ARIA และรูปแบบ ARIA ขั้นสูง
พื้นฐานด้านการเข้าถึงได้ บทบาทและแอตทริบิวต์ ARIA รวมถึงรูปแบบขั้นสูงที่ใช้กับวิดเจ็ตแบบกำหนดเอง
Data Attributes, Templates, Canvas, SVG และ iframes
แอตทริบิวต์ข้อมูลแบบกำหนดเอง HTML templates องค์ประกอบ canvas, SVG ภายใน HTML และเนื้อหาที่ฝังอยู่ใน iframes
Web Storage, Drag and Drop, SEO และ Email Templates
Web storage และ drag and drop API, SEO และ social meta tags รวมถึงกฎเฉพาะของ HTML email templates
Web Components, Performance และ HTML ในระดับขนาดใหญ่
องค์ประกอบแบบกำหนดเอง shadow DOM, import maps และ progressive enhancement รวมถึงประสิทธิภาพ ความปลอดภัย PWAs และการทดสอบ ปิดท้ายด้วย HTML ในระดับขนาดใหญ่
ทำงานอย่างไร
คุณเรียนรู้แท็กหนึ่งแท็กได้อย่างไร ตั้งแต่การอ่านจนถึงการแสดงผล
บทเรียนสั้น และโปรแกรมแก้ไขอยู่ข้าง ๆ ดังนั้นการอ่านแนวคิดและลองทำจึงเกิดขึ้นได้ในการนั่งเรียนครั้งเดียวกัน
อ่านบทเรียนสั้น ๆ หนึ่งบท
เรียนต่อจากจุดที่คุณหยุดไว้ เส้นทางการเรียนรู้ แต่ละบทครอบคลุมแนวคิดเดียว เช่น รายการแบบไม่มีลำดับหรือรูปภาพพร้อมข้อความ alt และใช้เวลาเพียงไม่กี่นาที
พิมพ์ลงในโปรแกรมแก้ไขแล้วดูการแสดงตัวอย่าง
เปิดโปรแกรมแก้ไขและเขียนมาร์กอัป การแสดงตัวอย่างจะวาดหน้าเว็บของคุณใหม่ แท็บ CSS และ JavaScript ก็พร้อมให้ใช้เมื่อคุณต้องการตกแต่งหน้าเว็บหรือทำให้หน้าเว็บโต้ตอบได้
ตรวจสอบ แก้ไข และสร้างด้วยสิ่งที่เรียน
แต่ละหัวข้อจะปิดท้ายด้วยแบบทดสอบและโจทย์เขียนโค้ด เมื่อแท็กหรือข้อผิดพลาดไม่ชัดเจน ผู้ช่วย AI จะอธิบายให้ฟัง ภารกิจแก้ไขข้อผิดพลาดจะมอบหน้าเว็บที่มีปัญหาให้คุณซ่อมแซม และโปรเจกต์แนะนำทีละขั้นตอนจะช่วยสร้างสิ่งที่คุณนำไปแสดงได้
มีอะไรอยู่ข้างใน
ภายใน Learn HTML มีอะไรบ้าง
40
คอร์สตั้งแต่ A1 ถึง C1
บทเรียน 159 บทครอบคลุมตั้งแต่โครงสร้างเอกสาร ข้อความ ลิงก์ รูปภาพ และรายการ ไปจนถึงตาราง ฟอร์ม และ semantic HTML5 รวมถึงการช่วยเหลือการเข้าถึง web components ความปลอดภัย และ History and Navigation API
Live
โปรแกรมแก้ไข HTML พร้อมการแสดงตัวอย่าง
เขียนมาร์กอัปแล้วดูหน้าเว็บที่แสดงผลอัปเดต คุณสามารถเพิ่มไฟล์ CSS และ JavaScript ลงในโปรเจกต์เดียวกันได้ เปลี่ยนเอกสารธรรมดาให้กลายเป็นเว็บไซต์ขนาดเล็กที่ใช้งานได้
20
โปรเจกต์แนะนำทีละขั้นตอน
โปรเจกต์สร้างทีละขั้นตอน ซึ่งรวมถึงหน้าเว็บกล่องสูตรอาหาร แบบฟอร์มติดต่อ แกลเลอรีรูปภาพ แถบนำทาง และตารางราคาที่เข้าถึงได้
20
ภารกิจแก้ไขข้อผิดพลาด
ข้อผิดพลาดจริงที่ต้องตามหาและแก้ไข: ฟอร์มสมัครสมาชิกที่ส่งข้อมูลไม่ออก ป้ายกำกับที่ไม่มีใครแตะได้ และหน้าเว็บที่โหลดบนโทรศัพท์โดยถูกย่อจนเล็ก
80
สรุปแท็ก
รายการสำหรับค้นหาแท็ก องค์ประกอบ และแอตทริบิวต์ HTML จำนวน 80 รายการ สำหรับเวลาที่คุณรู้ว่าต้องการทำอะไรแต่ไม่รู้ว่าสิ่งนั้นเรียกว่าอะไร
50
คำถามสัมภาษณ์
คำถามสัมภาษณ์นักพัฒนาเว็บ 50 ข้อพร้อมคำตอบที่เข้าใจง่าย รวมถึงคลังโค้ดตัวอย่างสั้น ๆ ที่เปิดและแก้ไขได้ พร้อมพื้นที่สำหรับบันทึกโค้ดและโน้ตของคุณเอง
ข้อมูลพื้นฐาน
HTML คืออะไร และคุณเรียนรู้มันด้วยการพิมพ์บนโทรศัพท์ได้หรือไม่
HTML (HyperText Markup Language) คือภาษาที่ใช้อธิบายโครงสร้างของหน้าเว็บ เช่น ข้อความใดเป็นหัวข้อ ข้อความใดเป็นย่อหน้า ลิงก์ชี้ไปที่ใด และฟอร์มต้องการข้อมูลอะไร HTML ไม่ใช่ภาษาโปรแกรม จึงไม่มีลูปหรือตัวแปรให้ต้องรับมือ นี่จึงเป็นเหตุผลที่ HTML มักเป็นก้าวแรกสู่การพัฒนาเว็บ และเพราะผลลัพธ์มองเห็นได้ทันทีที่เขียน HTML จึงเหมาะกับการเรียนช่วงสั้น ๆ บนโทรศัพท์ แท็กมีขนาดเล็กพอให้พิมพ์ด้วยนิ้วโป้ง และการแสดงตัวอย่างจะแสดงทันทีว่าทำงานได้หรือไม่
องค์ประกอบ แท็ก และแอตทริบิวต์สามคำที่ใช้ในทุกบทเรียน
องค์ประกอบคือเนื้อหาส่วนหนึ่งที่มีความหมาย เขียนอยู่ระหว่างแท็กเปิดและแท็กปิด เช่น ย่อหน้าหรือรายการหนึ่งรายการ แอตทริบิวต์จะอยู่ภายในแท็กเปิดและใช้ปรับแต่งองค์ประกอบนั้น เช่น ที่อยู่ที่ลิงก์ชี้ไป หรือข้อความที่ใช้อธิบายรูปภาพ ความผิดพลาดของผู้เริ่มต้นเกือบทั้งหมดเกิดจากการลืมแท็กปิดหรือวางแอตทริบิวต์ผิดตำแหน่ง
Semantic HTMLหัวข้อ การนำทาง main และ footer
องค์ประกอบแบบ semantic บอกว่าบล็อกหนึ่งบนหน้าเว็บคืออะไร แทนที่จะบอกว่าหน้าตาเป็นอย่างไร แถบนำทาง บทความ และ footer ต่างก็มีองค์ประกอบของตัวเอง ซึ่งช่วยโปรแกรมอ่านหน้าจอ เครื่องมือค้นหา และทุกคนที่ต้องมาแก้ไขหน้าเว็บในภายหลัง นี่คือพฤติกรรมที่แยกหน้าเว็บที่เป็นระเบียบออกจากกองคอนเทนเนอร์ทั่วไป
HTML, CSS และ JavaScriptใครทำหน้าที่อะไร
HTML จัดเก็บโครงสร้างและเนื้อหา CSS ควบคุมรูปลักษณ์ของเนื้อหา และ JavaScript เพิ่มพฤติกรรม เช่น การตอบสนองเมื่อคลิก การเรียน HTML ก่อนจะทำให้อีกสองอย่างมีสิ่งให้เชื่อมต่อ โปรแกรมแก้ไขในแอปมีแท็บ HTML, CSS และ JavaScript แยกกัน เพื่อให้คุณแยกหน้าที่ทั้งสามออกจากกันได้ตั้งแต่เริ่มต้น
ฟอร์มและการช่วยเหลือการเข้าถึงจุดที่หน้าเว็บเรียบง่ายเริ่มจริงจัง
ฟอร์มคือวิธีที่หน้าเว็บใช้ขอข้อมูลจากผู้เข้าชม และยังเป็นจุดเริ่มต้นของปัญหาด้านการช่วยเหลือการเข้าถึงส่วนใหญ่ด้วย เช่น ป้ายกำกับที่ไม่มีใครแตะได้ หรือช่องกรอกข้อมูลที่โปรแกรมอ่านหน้าจอไม่สามารถระบุชื่อได้ ป้ายกำกับ แอตทริบิวต์ตรวจสอบความถูกต้อง และบทบาท ARIA เป็นส่วนเล็ก ๆ ของมาร์กอัปที่ตัดสินว่าหน้าเว็บจะใช้งานได้สำหรับทุกคนหรือไม่
เหมาะกับคุณไหม
เหมาะกับใคร — และไม่เหมาะกับใคร
เหมาะกับคุณหากคุณ
- กำลังเขียนหน้าเว็บแรกของคุณและอยากให้มีการอธิบายทุกแท็กก่อนนำไปใช้
- เรียนรู้ได้ดีที่สุดเมื่อเห็นผลลัพธ์ของแต่ละบรรทัดทันที
- ดูแลบล็อก หน้าร้านค้า หรือพอร์ตโฟลิโอ และอยากแก้ไขมาร์กอัปที่อยู่เบื้องหลัง
- วางแผนจะเรียนต่อด้าน CSS, JavaScript หรืองาน front-end และอยากวางพื้นฐานให้แน่นก่อน
- กำลังเตรียมตัวสัมภาษณ์งาน web developer และอยากฝึกซ้อมตอบคำถาม
ไม่ใช่เครื่องมือที่เหมาะ หากคุณ
- ต้องการเวิร์กโฟลว์บนเดสก์ท็อปแบบเต็มรูปแบบที่มีไฟล์ โฟลเดอร์ และเซิร์ฟเวอร์ภายในเครื่อง
- คาดหวังว่าทุกคอร์สจะเรียนฟรี โดยคอร์สแรก โปรเจกต์แนะนำโปรเจกต์แรก และภารกิจสองรายการเปิดให้เรียนฟรี ส่วนที่เหลือปลดล็อกด้วย Pro
- เขียน HTML สำหรับใช้งานจริงเป็นประจำอยู่แล้ว และต้องการแหล่งอ้างอิงมากกว่าคอร์ส
- อยากเรียนรู้เครื่องมือออกแบบ แอปนี้เน้นมาร์กอัปและโค้ดเบื้องหลังหน้าเว็บ
คำถาม
คำถามที่พบบ่อย
เรียน HTML สร้างเว็บ คืออะไร
เรียน HTML สร้างเว็บ คือแอปสำหรับ iPhone และ Android ที่สอน HTML ตั้งแต่แท็กแรกไปจนถึงหัวข้อขั้นสูง แอปรวม 40 คอร์สสั้นเข้ากับเครื่องมือแก้ไข HTML ในตัวและการแสดงตัวอย่างแบบสด โปรเจกต์แนะนำ 20 โปรเจกต์ ภารกิจแก้ไขข้อผิดพลาด 20 ภารกิจ และพี่เลี้ยง AI แอปเริ่มต้นใช้งานได้ฟรีและมีให้บริการใน 22 ภาษา
ฉันสามารถเขียนและดูตัวอย่าง HTML บนโทรศัพท์ได้จริงหรือ
ได้ เครื่องมือแก้ไขใน เรียน HTML สร้างเว็บ มีแท็บ HTML, CSS และ JavaScript และหน้าตัวอย่างจะแสดงหน้าเว็บที่มาร์กอัปของคุณสร้างขึ้น โทรศัพท์เหมาะกับการฝึกแบบมีสมาธิที่ HTML ต้องการ เพราะแท็กมีความสั้น หน้าจอที่ใหญ่กว่าจะมีประโยชน์ก็ต่อเมื่อคุณต้องจัดการไฟล์หลายไฟล์พร้อมกัน
ต้องมีประสบการณ์เขียนโค้ดมาก่อนหรือไม่
ไม่ต้อง เส้นทางการเรียนเริ่มจากการอธิบายว่าเอกสาร HTML ประกอบขึ้นอย่างไร และอธิบายแต่ละคำด้วยภาษาที่เข้าใจง่ายก่อนนำไปใช้ HTML ไม่มีลูปหรือตัวแปรที่ต้องเรียนรู้ก่อน ดังนั้น เรียน HTML สร้างเว็บ จึงออกแบบให้ผู้เริ่มต้นอย่างสมบูรณ์เป็นกรณีปกติ ไม่ใช่ข้อยกเว้น
HTML และ CSS แตกต่างกันอย่างไร
HTML กำหนดว่ามีอะไรอยู่บนหน้าเว็บและแต่ละส่วนมีความหมายอย่างไร เช่น หัวเรื่อง ลิงก์ หรือช่องกรอกข้อมูลในฟอร์ม ส่วน CSS กำหนดลักษณะที่แสดง รวมถึงสี ระยะห่าง และการจัดวาง แอปสอน HTML ก่อนและให้คุณเพิ่มไฟล์ CSS ในเครื่องมือแก้ไขได้ จึงเห็นการทำงานร่วมกันของทั้งสองอย่างโดยไม่สับสนหน้าที่
ต้องใช้เวลานานแค่ไหนจึงจะเรียนรู้พื้นฐาน HTML
คนส่วนใหญ่สามารถเขียนหน้าเว็บที่เรียบง่ายและถูกต้องได้หลังเรียนสั้น ๆ ไม่กี่ครั้ง เพราะองค์ประกอบหลักมีไม่มาก ได้แก่ หัวเรื่อง ย่อหน้า ลิงก์ รูปภาพ รายการ และฟอร์มพื้นฐาน เนื้อหาเชิงลึกอย่างการเข้าถึงได้ โครงสร้างเชิงความหมาย และ web components จะใช้เวลานานกว่า บทเรียนที่นี่ออกแบบให้เรียนจบได้ภายในไม่กี่นาที จึงสร้างเป็นกิจวัตรประจำวันได้จริง
ฉันจะสร้างโปรเจกต์ประเภทใดได้บ้างในแอป
โปรเจกต์แนะนำ 20 โปรเจกต์ประกอบด้วยหน้า recipe box ฟอร์มติดต่อ แกลเลอรีรูปภาพ แถบนำทาง และตารางราคาเข้าถึงได้ แต่ละโปรเจกต์สร้างขึ้นทีละขั้นโดยตั้งใจให้มีขนาดเล็ก เพื่อให้คุณทำเสร็จและเก็บโค้ดไว้ใน snippets ที่บันทึกไว้
Learn HTML สอนเรื่องการเข้าถึงได้และฟอร์มหรือไม่
สอน และสอนอย่างละเอียดพอสมควร ฟอร์มมี 3 คอร์ส ครอบคลุมพื้นฐาน คอนโทรลขั้นสูง และแอตทริบิวต์สำหรับตรวจสอบความถูกต้อง ส่วนการเข้าถึงได้มีคอร์สของตัวเองเกี่ยวกับพื้นฐาน บทบาท ARIA และรูปแบบ ARIA ขั้นสูง ภารกิจแก้ไขข้อผิดพลาดยังมีปัญหาอย่างป้ายกำกับที่ไม่มีใครแตะได้ ทำให้หัวข้อเหล่านี้นำไปใช้ได้จริงแทนที่จะเป็นเพียงแนวคิดนามธรรม
แอปนี้ฟรีหรือไม่ และ Pro เพิ่มอะไรให้บ้าง
คุณดาวน์โหลดแอปได้ฟรีและเริ่มใช้งานได้ทันที: คอร์สแรก โปรเจกต์แนะนำโปรเจกต์แรก ภารกิจสองรายการ และเครื่องมือแก้ไขแบบสดรวมอยู่แล้ว พร้อมโควต้ารายวันสำหรับพี่เลี้ยง AI ส่วน Pro จะปลดล็อกทุกคอร์ส โปรเจกต์และภารกิจทั้งหมด การสอบรับใบรับรอง และคำถามถึงพี่เลี้ยง AI แบบไม่จำกัด อีกทั้งนำโฆษณาออก
เริ่มต้นใช้งาน
พิมพ์แท็กแรกของคุณ แล้วดูผลลัพธ์ที่แสดงบนหน้าเว็บ
เริ่มต้นใช้งานฟรีบน iOS และ Android ใน 22 ภาษา
เพิ่มเติมจาก CoddyKit
ใช้งานได้บน iOS และ Android