โครงสร้าง HTML: องค์ประกอบพื้นฐาน
ทำความเข้าใจโครงสร้างพื้นฐานของเอกสาร HTML
โครงสร้าง HTML: องค์ประกอบพื้นฐาน เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
โครงสร้าง HTML: ส่วนประกอบพื้นฐาน
ยินดีต้อนรับสู่บทเรียนที่สอง วันนี้เราจะเรียนรู้โครงสร้างของเอกสาร HTML และดูว่าส่วนต่าง ๆ ทำงานร่วมกันอย่างไร ลองนึกภาพว่านี่คือการเรียนรู้โครงกระดูกของหน้าเว็บ
โครงสร้างเอกสาร HTML
เอกสาร HTML มีโครงสร้างเฉพาะที่เบราว์เซอร์เข้าใจได้ เปรียบเสมือนสูตรอาหารที่บอกเบราว์เซอร์ว่าต้องทำอะไร
ส่วนพื้นฐานของเอกสาร HTML ได้แก่:
- การประกาศ DOCTYPE: บอกเบราว์เซอร์ว่านี่คือเอกสาร HTML
- แท็ก HTML: ครอบคลุมเนื้อหาทั้งหมดของหน้า
- ส่วนหัว: เก็บข้อมูลเกี่ยวกับหน้า เช่น ชื่อเรื่อง
- ส่วนเนื้อหา: เก็บเนื้อหาที่ผู้ใช้มองเห็น
โครงสร้างมีลักษณะอย่างไร
โครงสร้างพื้นฐานของเอกสาร HTML มีลักษณะดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
การประกาศ DOCTYPE
การประกาศ <!DOCTYPE html> จะอยู่ด้านบนสุดของเอกสาร HTML ทุกฉบับ เพื่อบอกเบราว์เซอร์ให้เตรียมรองรับ HTML5 ซึ่งเป็น HTML รุ่นล่าสุด
ลองนึกภาพว่านี่คือจุดเริ่มต้นของสูตร HTML ของคุณ
แท็ก HTML
แท็ก <html> เป็นภาชนะหลักสำหรับโค้ดทั้งหมดในเอกสารของคุณ โดยบอกเบราว์เซอร์ว่า “ทุกอย่างภายในนี้คือ HTML”
มีลักษณะดังนี้:
<html>
<!-- All other HTML tags go here -->
</html>
ส่วนหัว
ส่วน <head> เก็บข้อมูลเกี่ยวกับหน้าเว็บที่ไม่ได้แสดงบนหน้าโดยตรง ตัวอย่างเช่น:
- ชื่อเรื่อง: ข้อความที่แสดงบนแท็บเบราว์เซอร์
- ข้อมูลเมตา: รายละเอียดเพิ่มเติม เช่น คำอธิบายหน้า
ตัวอย่าง:
<head>
<title>My Cool Web Page</title>
</head>
ส่วนเนื้อหา
ส่วน <body> ประกอบด้วยทุกสิ่งที่ผู้ใช้มองเห็น เช่น ข้อความ รูปภาพ และลิงก์ นี่คือพื้นที่เนื้อหาหลัก
ตัวอย่าง:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
การนำทุกส่วนมารวมกัน
ต่อไปนี้คือตัวอย่างเอกสาร HTML ฉบับสมบูรณ์ที่มีทุกส่วนที่เราเพิ่งเรียนรู้:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
ทำได้ดีมาก
ขอแสดงความยินดี คุณได้เรียนรู้โครงสร้างของเอกสาร HTML แล้ว ตอนนี้คุณเข้าใจแล้วว่าส่วนต่าง ๆ ทำงานร่วมกันเพื่อสร้างหน้าเว็บอย่างไร ในบทเรียนถัดไป เราจะเริ่มเพิ่มเนื้อหาจริงลงในหน้าเว็บของเรา เตรียมพร้อมสร้างผลงานเว็บชิ้นแรกของคุณ
คำถามที่พบบ่อย
บทเรียน “โครงสร้าง HTML: องค์ประกอบพื้นฐาน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “โครงสร้าง HTML: องค์ประกอบพื้นฐาน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “โครงสร้าง HTML: องค์ประกอบพื้นฐาน”
ทำความเข้าใจโครงสร้างพื้นฐานของเอกสาร HTML คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “โครงสร้าง HTML: องค์ประกอบพื้นฐาน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- HTML คืออะไร
- โครงสร้าง HTML: องค์ประกอบพื้นฐาน
- แท็กและองค์ประกอบ HTML
- การตั้งค่าหน้า HTML แรกของคุณ