📖 HTML คืออะไร?

HTML ย่อมาจาก HyperText Markup Language แปลเป็นไทยคือ "ภาษามาร์กอัปไฮเปอร์เท็กซ์"

ภาษาไทย

HTML ไม่ใช่ภาษาโปรแกรม แต่เป็น markup language ซึ่งเป็นภาษาที่ใช้จัดโครงสร้างเนื้อหาบนเว็บ คิดง่ายๆ ว่า HTML คือ "โครงกระดูก" ของทุกเว็บไซต์ที่เราเห็น

เหมือนกับร่างกายคน — HTML คือกระดูก, CSS คือผิวหนังและเสื้อผ้า, JavaScript คือกล้ามเนื้อที่ทำให้เคลื่อนไหวได้

English

HTML is not a programming language — it is a markup language used to structure content on the web. Think of HTML as the "skeleton" of every website you see.

Like the human body: HTML = bones, CSS = skin & clothes, JavaScript = muscles that make it move.

เว็บไซต์ประกอบด้วยอะไรบ้าง?

        🦴
        HTML
โครงสร้าง
      

+

🎨 CSS
ความสวยงาม

+

⚡ JavaScript
การเคลื่อนไหว

=

🌐 เว็บไซต์สมบูรณ์!

💡 รู้หรือไม่?

คำว่า Hypertext หมายถึง "ข้อความที่สามารถลิงก์ไปยังข้อความอื่นได้" นี่คือแนวคิดหลักของอินเทอร์เน็ต — ทุกหน้าเว็บเชื่อมต่อกันด้วยลิงก์!

📚 ประวัติของ HTML

HTML ถูกสร้างขึ้นโดย Tim Berners-Lee นักวิทยาศาสตร์ชาวอังกฤษที่ทำงานอยู่ที่ CERN ในประเทศสวิตเซอร์แลนด์

1989

Tim Berners-Lee เสนอแนวคิด World Wide Web เพื่อให้นักวิทยาศาสตร์แชร์ข้อมูลกันได้ง่ายขึ้น

1991

HTML เวอร์ชันแรกถูกเผยแพร่ มีแค่ 18 แท็ก (tags) เท่านั้น!

1995

HTML 2.0 — มาตรฐานอย่างเป็นทางการฉบับแรก

1999

HTML 4.01 — เป็นที่นิยมมากที่สุดเป็นเวลาหลายปี

2014

HTML5 — เวอร์ชันปัจจุบันที่เราใช้กันทุกวันนี้ รองรับวิดีโอ เสียง และกราฟิกได้

🚀 ทำไม Tim ถึงสร้าง HTML?

ตอนนั้นนักวิทยาศาสตร์ที่ CERN มีปัญหา — พวกเขามีข้อมูลเยอะมากแต่แชร์กันยากเพราะใช้คอมพิวเตอร์คนละระบบ Tim จึงสร้างระบบที่ทุกคนสามารถอ่านเอกสารร่วมกันได้ผ่าน browser นั่นคือจุดเริ่มต้นของเว็บ!

🔍 URL กับ Google Search ต่างกันอย่างไร?

หลายคนสับสนระหว่างการพิมพ์ URL กับการค้นหาใน search engine — มาดูความแตกต่างกัน!

ส่วนประกอบของ URL (ที่อยู่เว็บ)

https://Protocol
โปรโตคอล (วิธีเชื่อมต่อ)

www.youtube.comDomain
โดเมน (ชื่อเว็บไซต์)

/watchPath
เส้นทาง (ตำแหน่งในเว็บ)

?v=abc123Parameters
พารามิเตอร์ (ข้อมูลเพิ่มเติม)

🏠 พิมพ์ URL — ไปตรงถึงบ้าน

เหมือนกับคุณรู้ที่อยู่บ้านเพื่อน:

https://www.youtube.com

พิมพ์ใน address bar (ช่องด้านบนสุดของเบราว์เซอร์) แล้วกด Enter จะพาไปที่เว็บนั้นโดยตรง

🔎 ค้นหา Google — ถามคนอื่นหาบ้าน

เหมือนกับถามคนแถวนั้น "บ้านเพื่อนอยู่ไหน?":

วิดีโอแมวน่ารัก

พิมพ์ใน Google Search แล้ว Google จะหาเว็บที่เกี่ยวข้องมาให้เลือก

เมื่อคุณพิมพ์ URL ในเบราว์เซอร์ เกิดอะไรขึ้น?

⌨ คุณพิมพ์ URL

➔

📡 เบราว์เซอร์
ส่งคำขอ

➔

        💻
        Server
ส่งไฟล์ HTML กลับ
      

➔

🌐 เบราว์เซอร์
แสดงเว็บ!

💡 เคล็ดลับ!

ถ้ารู้ URL ที่แน่นอน — พิมพ์ URL ใน address bar จะเร็วกว่า! ถ้าไม่รู้ URL — ใช้ Google Search ค้นหาก่อน

ลองดู URL ของหน้า Olivia: https://krueng.ai/Olivia.html

🏷 Tags (แท็ก) คืออะไร?

Tags คือหัวใจของ HTML — เป็นคำสั่งที่บอกเบราว์เซอร์ว่าจะจัดการกับเนื้อหาอย่างไร แท็กจะอยู่ในเครื่องหมาย < > เสมอ

โครงสร้างของแท็ก HTML

<

เปิดวงเล็บ

h1

ชื่อแท็ก

>

ปิดวงเล็บ

สวัสดี!

เนื้อหา

<

เปิดวงเล็บ

/

h1

ชื่อแท็ก (ปิด)

>

ปิดวงเล็บ

แท็กเปิด <h1> + เนื้อหา + แท็กปิด </h1> = Element

แท็กซ้อนกัน (Nesting) — เหมือนกล่องซ้อนกล่อง

<html> กล่องใหญ่สุด — ครอบทั้งหน้า

<head> ข้อมูลที่ซ่อนอยู่ (ชื่อหน้า, ตั้งค่า)

<title> Olivia </title>

</head>

<body> ทุกอย่างที่ "เห็น" บนหน้าจอ

<h1> Olivia lives in... </h1>

</body>

</html>

แท็กที่สำคัญ

แท็ก	ชื่อภาษาอังกฤษ	ความหมาย	ตัวอย่าง
`<h1>` - `<h6>`	Heading	หัวข้อ (h1 ใหญ่สุด, h6 เล็กสุด)	`<h1>สวัสดี</h1>`
`<p>`	Paragraph	ย่อหน้า	`<p>นี่คือข้อความ</p>`
`<a>`	Anchor (Link)	ลิงก์ไปยังหน้าอื่น	`<a href="...">คลิก</a>`
`<img>`	Image	รูปภาพ (ไม่ต้องปิดแท็ก)	`<img src="cat.jpg">`
`<br>`	Line Break	ขึ้นบรรทัดใหม่	`บรรทัด 1<br>บรรทัด 2`
`<table>`	Table	ตาราง	`<table>...</table>`
`<ul> / <ol>`	List	รายการ (จุด / ตัวเลข)	`<ul><li>...</li></ul>`
`<div>`	Division	กล่องจัดกลุ่ม	`<div>...</div>`

📝 จำง่ายๆ!

แท็กส่วนใหญ่ต้องมี "เปิด" และ "ปิด" — เหมือนประตู ต้องเปิดแล้วก็ต้องปิด!
<p> = เปิดประตู </p> = ปิดประตู (มีเครื่องหมาย / ข้างหน้า)

📄 หน้า Olivia.html ตอนนี้

ก่อนจะแก้ไข มาดูก่อนว่าไฟล์ Olivia.html หน้าตาเป็นอย่างไร:

💻 โค้ด (Code) — สิ่งที่เราเขียน

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>Olivia</title>
</head>
<body>
  <h1>Olivia lives in Chiang Mai
  in Thailand ที่วัดดอนจั่น
  และมีเจ้าอาวาสคอยสนับสนุน
  การศึกษาและที่อยู่อาศัย</h1>
</body>
</html>

🌐 ผลลัพธ์ (Result) — สิ่งที่เห็นบนเว็บ

Olivia lives in Chiang Mai in Thailand ที่วัดดอนจั่นและมีเจ้าอาวาสคอยสนับสนุนการศึกษาและที่อยู่อาศัย

👀 สังเกตุ!

ตอนนี้หน้า Olivia มีแค่หัวข้อเดียว (<h1>) พื้นหลังขาว ไม่มีลิงก์ ไม่มีตาราง — เดี๋ยวเราจะเพิ่มให้สวยขึ้น!

🔗 บทเรียนที่ 1: เพิ่มลิงก์ (Link)

Link คือข้อความที่คลิกแล้วพาไปยังเว็บไซต์อื่น ใช้แท็ก <a> (ย่อจาก anchor)

โครงสร้างของแท็กลิงก์

<

a

href="https://youtube.com"

>

ไปดู YouTube

</

a

>

href = attribute ที่บอกว่าลิงก์จะพาไปที่ไหน

ทำตามทีละขั้น:

1 เปิดไฟล์ Olivia.html

ไปที่ GitHub: Olivia.html แล้วกดปุ่มดินสอ (Edit) เพื่อแก้ไขไฟล์

2 เพิ่มโค้ดลิงก์

หลังจากแท็ก </h1> ให้เพิ่มบรรทัดใหม่:

<p>
  <a href="https://www.youtube.com">ไปดู YouTube</a>
</p>

<p>
  <a href="https://www.google.com">ค้นหาด้วย Google</a>
</p>

3 ผลลัพธ์

ไปดู YouTube

ค้นหาด้วย Google

ข้อความจะกลายเป็นสีน้ำเงินและมีขีดเส้นใต้ — คลิกแล้วจะพาไปเว็บนั้น!

💡 เคล็ดลับ!

ถ้าอยากให้ลิงก์เปิดในแท็บใหม่ (ไม่ออกจากหน้าปัจจุบัน) ให้เพิ่ม target="_blank":

<a href="https://www.youtube.com" target="_blank">YouTube</a>

🎨 บทเรียนที่ 2: เปลี่ยนสีพื้นหลัง

เราสามารถเปลี่ยนสีพื้นหลังได้โดยเพิ่ม style ให้กับแท็ก <body>

1 เปลี่ยนแท็ก body

เปลี่ยนจาก <body> เป็น:

สีที่น่าใช้:

#ffe4b5
ส้มอ่อน

#e0f7fa
ฟ้าอ่อน

#f3e5f5
ม่วงอ่อน

#e8f5e9
เขียวอ่อน

#fff9c4
เหลืองอ่อน

#fce4ec
ชมพูอ่อน

#ffccbc
พีชอ่อน

#b2dfdb
เขียวมิ้นท์

🎨 รู้หรือไม่? สี HTML ทำงานอย่างไร

รหัสสี เช่น #ffe4b5 เรียกว่า hex code — ตัวเลข 6 หลักที่ผสมค่า แดง (RR) เขียว (GG) น้ำเงิน (BB)

หรือจะใช้ชื่อสีภาษาอังกฤษก็ได้ เช่น lightblue, pink, gold

🔎 วิธีหาสีที่ชอบ

ไปที่ Google แล้วพิมพ์ "color picker" จะมีเครื่องมือเลือกสีขึ้นมาให้ใช้ แล้วก็อปปี้ hex code มาใส่ได้เลย!

📊 บทเรียนที่ 3: สร้างตาราง

Table ใช้จัดข้อมูลเป็นแถวและคอลัมน์ เหมือนตารางใน Excel

แท็กที่ใช้สร้างตาราง

        <table>
ตารางทั้งหมด
      

<tr>
Table Row (แถว)

<th>
Table Header (หัวตาราง)

<td>
Table Data (ข้อมูล)

1 เพิ่มโค้ดตาราง

เพิ่มหลังจากลิงก์ที่เราเพิ่มไปก่อนหน้า:

<h2>ข้อมูลเกี่ยวกับ Olivia</h2>
<table border="1">
  <tr>
    <th>หัวข้อ</th>
    <th>รายละเอียด</th>
  </tr>
  <tr>
    <td>ชื่อ</td>
    <td>Olivia</td>
  </tr>
  <tr>
    <td>ที่อยู่</td>
    <td>เชียงใหม่ ประเทศไทย</td>
  </tr>
  <tr>
    <td>วัด</td>
    <td>วัดดอนจั่น</td>
  </tr>
</table>

2 ผลลัพธ์ของตาราง

ข้อมูลเกี่ยวกับ Olivia

หัวข้อ	รายละเอียด
ชื่อ	Olivia
ที่อยู่	เชียงใหม่ ประเทศไทย
วัด	วัดดอนจั่น

✍ อธิบายเพิ่มเติม

border="1" ทำให้ตารางมีเส้นขอบ — ถ้าไม่ใส่ จะไม่เห็นเส้นแบ่ง

<tr> = table row (แถว), <th> = table header (หัว, ตัวหนา), <td> = table data (ข้อมูลปกติ)

✨ ผลลัพธ์: ก่อน vs หลังแก้ไข

❌ ก่อนแก้ไข (Before)

Olivia lives in Chiang Mai in Thailand ที่วัดดอนจั่นและมีเจ้าอาวาสคอยสนับสนุนการศึกษาและที่อยู่อาศัย

✅ หลังแก้ไข (After)

Olivia lives in Chiang Mai in Thailand ที่วัดดอนจั่นและมีเจ้าอาวาสคอยสนับสนุนการศึกษาและที่อยู่อาศัย

ไปดู YouTube

ค้นหาด้วย Google

ข้อมูลเกี่ยวกับ Olivia

หัวข้อ	รายละเอียด
ชื่อ	Olivia
ที่อยู่	เชียงใหม่ ประเทศไทย
วัด	วัดดอนจั่น

💻 โค้ดฉบับสมบูรณ์ (Complete Code)

นี่คือโค้ดทั้งหมดที่ Olivia.html ควรจะเป็นหลังแก้ไข:

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>Olivia</title>
</head>
<body style="background-color: #ffe4b5;">
  <h1>Olivia lives in Chiang Mai in Thailand
  ที่วัดดอนจั่นและมีเจ้าอาวาสคอยสนับสนุน
  การศึกษาและที่อยู่อาศัย</h1>

  <p>
    <a href="https://www.youtube.com">ไปดู YouTube</a>
  </p>
  <p>
    <a href="https://www.google.com">ค้นหาด้วย Google</a>
  </p>

  <h2>ข้อมูลเกี่ยวกับ Olivia</h2>
  <table border="1">
    <tr>
      <th>หัวข้อ</th>
      <th>รายละเอียด</th>
    </tr>
    <tr>
      <td>ชื่อ</td>
      <td>Olivia</td>
    </tr>
    <tr>
      <td>ที่อยู่</td>
      <td>เชียงใหม่ ประเทศไทย</td>
    </tr>
    <tr>
      <td>วัด</td>
      <td>วัดดอนจั่น</td>
    </tr>
  </table>
</body>
</html>

📚 Glossary — คำศัพท์เทคนิค

คำศัพท์ภาษาอังกฤษที่ใช้ในบทเรียนนี้ พร้อมคำอธิบายภาษาไทย (คลิกคำศัพท์เพื่อฟังการออกเสียง):

HTML

HyperText Markup Language — ภาษามาร์กอัปไฮเปอร์เท็กซ์ ใช้สร้างโครงสร้างของเว็บไซต์

Tag

แท็ก — คำสั่ง HTML ที่อยู่ในเครื่องหมาย < > บอกเบราว์เซอร์ว่าจะแสดงเนื้อหาอย่างไร

Element

องค์ประกอบ — แท็กเปิด + เนื้อหา + แท็กปิด รวมกัน เช่น <p>ข้อความ</p>

Attribute

แอตทริบิวต์ — ข้อมูลเพิ่มเติมของแท็ก เช่น href, style, class

Browser

เบราว์เซอร์ — โปรแกรมสำหรับเปิดดูเว็บไซต์ เช่น Chrome, Firefox, Safari

URL

Uniform Resource Locator — ที่อยู่เว็บ เช่น https://krueng.ai

Search Engine

เครื่องมือค้นหา — เว็บที่ช่วยค้นหาข้อมูล เช่น Google, Bing

Address Bar

แถบที่อยู่ — ช่องด้านบนสุดของเบราว์เซอร์ ใช้พิมพ์ URL

Hypertext

ไฮเปอร์เท็กซ์ — ข้อความที่สามารถลิงก์ไปยังข้อความอื่นได้

Markup Language

ภาษามาร์กอัป — ภาษาที่ใช้กำหนดโครงสร้างและรูปแบบเอกสาร (ไม่ใช่ภาษาโปรแกรม)

Link

ลิงก์ — ข้อความหรือรูปที่คลิกแล้วไปยังหน้าอื่น ใช้แท็ก <a>

Anchor

จุดยึด — ชื่อเต็มของแท็ก <a> หมายถึงจุดเชื่อมต่อไปยังที่อื่น

Heading

หัวข้อ — ข้อความขนาดใหญ่สำหรับชื่อส่วน ใช้ <h1> ถึง <h6>

Paragraph

ย่อหน้า — กลุ่มข้อความหนึ่งย่อหน้า ใช้แท็ก <p>

Table

ตาราง — โครงสร้างแถวและคอลัมน์ ใช้แท็ก <table>, <tr>, <td>

Server

เซิร์ฟเวอร์ — คอมพิวเตอร์ที่เก็บไฟล์เว็บและส่งให้เบราว์เซอร์เมื่อมีคนขอ

Protocol

โปรโตคอล — กฎหรือวิธีการสื่อสารระหว่างคอมพิวเตอร์ เช่น https://

Domain

โดเมน — ชื่อเว็บไซต์ เช่น google.com, youtube.com

Style

สไตล์ — การตกแต่งหน้าตาของเว็บ เช่น สี ขนาดตัวอักษร พื้นหลัง

Background Color

สีพื้นหลัง — สีที่อยู่ด้านหลังเนื้อหา กำหนดด้วย background-color

Hex Code

รหัสเลขฐานสิบหก — ตัวเลข 6 หลักที่แทนค่าสี เช่น #ff0000 = สีแดง

Source Code

ซอร์สโค้ด — โค้ดต้นฉบับที่โปรแกรมเมอร์เขียน ก่อนที่เบราว์เซอร์จะแปลงเป็นหน้าเว็บ

World Wide Web

เวิลด์ไวด์เว็บ (WWW) — ระบบเอกสารที่เชื่อมต่อกันผ่านอินเทอร์เน็ต สร้างโดย Tim Berners-Lee

Nesting

การซ้อนกัน — การใส่แท็กหนึ่งไว้ข้างในแท็กอื่น เหมือนกล่องซ้อนกล่อง

🎓 สรุปบทเรียน

สิ่งที่เรียนรู้	โค้ดที่ใช้
HTML คืออะไร	ภาษาสำหรับสร้างโครงสร้างเว็บ ไม่ใช่ภาษาโปรแกรม
URL vs Google Search	URL = พิมพ์ที่อยู่ตรง / Google = ค้นหา
แท็ก (Tags)	`<tag>` เนื้อหา `</tag>`
เพิ่มลิงก์	`<a href="URL">ข้อความ</a>`
เปลี่ยนสีพื้นหลัง	`<body style="background-color: #ffe4b5;">`
สร้างตาราง	`<table> <tr> <th> <td>`

ยินดีด้วย! คุณเรียนรู้พื้นฐาน HTML แล้ว!

ตอนนี้คุณพร้อมที่จะแก้ไข Olivia.html ได้แล้ว — ลองทำตามบทเรียนและสร้างสิ่งใหม่ๆ เพิ่มเติม!

จำไว้: เว็บไซต์ทุกเว็บเริ่มต้นจากไฟล์ HTML ง่ายๆ แบบนี้แหละ

💪 ขั้นตอนต่อไป

1. ไปที่ GitHub: Olivia.html และลองแก้ไขด้วยตัวเอง

2. ลองเพิ่มสิ่งใหม่ — เช่น ย่อหน้าเกี่ยวกับตัวเอง หรือรายการสิ่งที่ชอบ

3. ลองเปลี่ยนสีพื้นหลังเป็นสีที่ชอบ!

📝 แบบทดสอบ HTML (Exam)

ทดสอบความรู้ HTML ที่เรียนมา! ระบบจะสุ่มคำถาม 5 ข้อจากคลัง 50 ข้อ

Test your HTML knowledge! 5 random questions from a pool of 50.