ใบความรู้ที่ 1 เรื่อง ปฐมนิเทศ

รายวิชาการออกแบบเทคโนโลยี สำหรับนักเรียนระดับมัธยมศึกษาตอนต้น

techno ม.2 ใบความรู้
ใบความรู้ที่ 1 เรื่อง ปฐมนิเทศ
หมวดวิชา: techno ระดับชั้น: ม.2 ประเภท: ใบความรู้ อัปเดต: 17/03/2026
จุดประสงค์การเรียนรู้: นักเรียนเข้าใจความหมายของ HTML รู้จักโครงสร้างพื้นฐานของเอกสารเว็บ และสามารถเริ่มต้นเขียนหน้าเว็บอย่างง่ายได้ด้วยตนเอง

1) HTML คืออะไร

HTML ย่อมาจาก HyperText Markup Language เป็นภาษามาตรฐานที่ใช้ในการสร้างโครงสร้างของหน้าเว็บ โดยใช้แท็กต่าง ๆ เพื่อกำหนดหัวข้อ ย่อหน้า รูปภาพ ลิงก์ ตาราง และองค์ประกอบอื่น ๆ ที่แสดงผลบนหน้าเว็บไซต์

คำแนะนำ: ให้นักเรียนมอง HTML เป็น “โครงสร้าง” ของเว็บก่อน ส่วนความสวยงามจะเป็นหน้าที่ของ CSS และความโต้ตอบจะเป็นหน้าที่ของ JavaScript

2) โครงสร้างพื้นฐานของ HTML

เอกสาร HTML จะเริ่มจากการประกาศชนิดเอกสาร แล้วตามด้วยแท็ก <html>, <head> และ <body> โดยส่วนที่ผู้ใช้เห็นบนหน้าเว็บจริงจะอยู่ภายในแท็ก <body>

ตัวอย่างโค้ด HTML พื้นฐาน
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>หน้าเว็บของฉัน</title>
</head>
<body>
  <h1>สวัสดี HTML</h1>
  <p>ยินดีต้อนรับสู่การเรียนรู้เว็บไซต์</p>
</body>
</html>

3) แท็กพื้นฐานที่ควรรู้

แท็กที่ควรรู้ในช่วงเริ่มต้นมีหลายตัว เช่น

  • h1 - h6 สำหรับหัวข้อ
  • p สำหรับย่อหน้า
  • a สำหรับลิงก์
  • img สำหรับรูปภาพ
  • ul / ol / li สำหรับรายการ

4) การนำไปใช้งาน

เมื่อนักเรียนเข้าใจ HTML แล้ว จะสามารถต่อยอดไปสู่การจัดรูปแบบด้วย CSS และการสร้างหน้าเว็บที่มีความสามารถมากขึ้น เช่น เมนู แบนเนอร์ ฟอร์ม และหน้าเนื้อหาต่าง ๆ

สรุปสำคัญ: HTML เป็นพื้นฐานสำคัญของการสร้างเว็บไซต์ นักเรียนควรฝึกใช้แท็กพื้นฐานให้คล่อง ก่อนเรียน CSS และ JavaScript เพื่อให้สามารถสร้างเว็บได้อย่างมีโครงสร้างที่ถูกต้อง