แท็กและองค์ประกอบ HTML
เรียนรู้ว่าแท็กและองค์ประกอบคืออะไรและทำงานอย่างไร
แท็กและองค์ประกอบ HTML เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
แท็กและองค์ประกอบ HTML
ยินดีต้อนรับสู่บทเรียนถัดไป วันนี้เราจะเรียนรู้เกี่ยวกับแท็กและองค์ประกอบ HTML ซึ่งเป็นส่วนประกอบพื้นฐานของหน้าเว็บทุกหน้าที่คุณจะสร้าง
แท็ก HTML คืออะไร
แท็ก HTML คือคำสำคัญพิเศษที่อยู่ภายในวงเล็บมุม <> แท็กเหล่านี้บอกเบราว์เซอร์ว่าต้องจัดการกับเนื้อหาภายในอย่างไร
ตัวอย่างแท็ก:<h1>
โดยทั่วไปแท็กจะมาเป็นคู่ ได้แก่ แท็กเปิด และ แท็กปิด
ตัวอย่าง:
<h1>Hello</h1>องค์ประกอบ HTML คืออะไร
องค์ประกอบ HTML คือการรวมกันของแท็กเปิด เนื้อหา และแท็กปิด
ตัวอย่างเช่น:
<h1>Welcome to My Page</h1>ประเภทของแท็ก
แท็กมีสองประเภทหลัก:
- แท็กคู่: มีทั้งแท็กเปิดและแท็กปิด ตัวอย่าง:
<p>Paragraph</p> - แท็กปิดตัวเอง: ไม่จำเป็นต้องมีแท็กปิด ตัวอย่าง:
<img />
แท็กที่ใช้บ่อย
ต่อไปนี้คือแท็ก HTML พื้นฐานที่คุณจะใช้บ่อย:
<h1> ถึง <h6>: หัวเรื่อง (จากใหญ่ที่สุดไปเล็กที่สุด)<p>: ย่อหน้า<a>: ลิงก์<img>: รูปภาพ<br>: การขึ้นบรรทัดใหม่
มาดูตัวอย่างกัน:
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />แอตทริบิวต์ในแท็ก
แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ โดยจะอยู่ภายในแท็กเปิด
ตัวอย่าง:
<a href="https://example.com"
target="_blank">Visit Example</a>
การซ้อนแท็ก
คุณสามารถวางแท็กหนึ่งไว้ภายในอีกแท็กหนึ่งได้ ซึ่งเรียกว่าการซ้อนแท็ก
ตัวอย่าง:
<p>This is a <strong>bold</strong> word.</p>
ลำดับการปิดแท็กที่ซ้อนกัน
โปรดจำไว้: ปิดแท็กด้านในก่อนปิดแท็กด้านนอกเสมอ
ตัวอย่าง: การนำทุกส่วนมารวมกัน
นี่คือตัวอย่างที่รวมทุกสิ่งที่เราเรียนรู้มา:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a <strong>simple</strong> paragraph of text.</p>
<a href="https://example.com" target="_blank">Click here to learn more</a>
<br />
<img src="image.jpg" alt="A beautiful view" />
</body>
</html>ทำได้ดีมาก
ขอแสดงความยินดี คุณได้เรียนรู้เกี่ยวกับแท็ก องค์ประกอบ แอตทริบิวต์ และการซ้อนแท็กใน HTML แล้ว สิ่งเหล่านี้คือส่วนประกอบพื้นฐานของหน้าเว็บทุกหน้าที่คุณจะสร้าง ในบทเรียนถัดไป เราจะเขียนหน้า HTML หน้าแรกของคุณพร้อมเนื้อหาจริง
คำถามที่พบบ่อย
บทเรียน “แท็กและองค์ประกอบ HTML” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แท็กและองค์ประกอบ HTML” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แท็กและองค์ประกอบ HTML”
เรียนรู้ว่าแท็กและองค์ประกอบคืออะไรและทำงานอย่างไร คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “แท็กและองค์ประกอบ HTML” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- HTML คืออะไร
- โครงสร้าง HTML: องค์ประกอบพื้นฐาน
- แท็กและองค์ประกอบ HTML
- การตั้งค่าหน้า HTML แรกของคุณ