หน้าแรก / HTML

🏗️HTML - โครงสร้างของเว็บเพจ

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

โครงสร้างพื้นฐานของเอกสาร HTML


<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>ชื่อของเพจ</title>
</head>
<body>
    <h1>สวัสดี!</h1>
    <p>นี่คือเว็บเพจแรกของฉัน</p>
</body>
</html>

ส่วนประกอบหลัก

<!DOCTYPE html>

บอกให้เบราว์เซอร์รู้ว่านี่คือเอกสาร HTML5 (เวอร์ชันล่าสุด)

<html> ... </html>

แท็กรูทที่ห่อหุ้มเนื้อหาทั้งหมดของเว็บเพจ

<head> ... </head>

ส่วนที่มีข้อมูลเมตา (metadata) เช่น ชื่อเพจ, การเข้ารหัส, ลิงก์ไปยัง CSS ฯลฯ (ไม่แสดงบนเพจ)

<body> ... </body>

ส่วนที่มีเนื้อหาที่แสดงบนเว็บเพจ (สิ่งที่ผู้ใช้เห็น)

แท็กที่ใช้บ่อย

แท็ก ความหมาย ตัวอย่าง
<h1> - <h6> หัวเรื่อง (h1 ใหญ่ที่สุด, h6 เล็กที่สุด) <h1>หัวเรื่องหลัก</h1>
<p> ย่อหน้า <p>นี่คือข้อความ</p>
<a> ลิงก์ <a href="url">คลิกที่นี่</a>
<img> รูปภาพ <img src="image.jpg" alt="รูป">
<ul> / <li> รายการไม่เรียงลำดับ <ul><li>รายการ 1</li></ul>
<div> ตัวแบ่งเนื้อหา <div>เนื้อหา</div>

ตัวอย่างการสร้างหน้าเว็บง่ายๆ


  <!DOCTYPE html>
  <html lang="th">
  <head>
  <meta charset="UTF-8">
  <title>เว็บเพจของฉัน</title>
  </head>
  <body>
  <h1>ยินดีต้อนรับ!</h1>
  <p>นี่คือเว็บเพจแรกของฉัน</p>

  <h2>เกี่ยวกับฉัน</h2>
  <p>ฉันกำลังเรียนรู้การเขียนเว็บ</p>

  <h2>สิ่งที่ฉันชอบ</h2>
  <ul>
  <li>การเขียนโปรแกรม</li>
  <li>การออกแบบ</li>
  <li>การสอน</li>
  </ul>

  <a href="https://example.com">ไปยังเว็บไซต์อื่น</a>
  </body>
  </html>
💡 เคล็ดลับ: ใช้ Indentation (เยื้องบรรทัด) เพื่อให้โค้ดอ่านง่ายขึ้น VS Code จะช่วยคุณทำสิ่งนี้โดยอัตโนมัติ

แบบทดสอบสั้นๆ (HTML)