01: Introduction to Web & HTML

โครงสร้างพื้นฐานของเว็บ และ Tag ที่ต้องรู้

1. เว็บไซต์ทำงานอย่างไร?

Client-Server Model

  • Client: โปรแกรมที่รันบนเครื่องผู้ใช้ (เช่น Web Browser: Chrome, Firefox, Edge)
  • Server: โปรแกรมที่รันบนเครื่องให้บริการ (เช่น เว็บโฮสติ้ง, VPS, Cloud)

สิ่งที่เกิดขึ้นเมื่อต้องการเข้าสู่เว็บไซต์

Web Process
  • ผู้ใช้พิมพ์ URL (เช่น www.google.com) ใน address bar ของ Web Browser
  • Web Browser ส่งคำขอ (Request) ไปยัง Web Server ที่เก็บเว็บไซต์นั้น ๆ
  • Web Server ประมวลผลคำขอ และส่งโค้ด HTML/CSS/JS กลับมาให้ Web Browser ในลักษณะของ Response
  • Browser แปลผลโค้ดเหล่านั้น และแสดงหน้าเว็บให้ผู้ใช้เห็น

2. โครงสร้าง HTML5

ลองเปรียบเทียบ HTML ว่าเป็นร่างกายมนุษย์ ก็จะประกอบด้วยส่วนหัว (Head) และส่วนตัว (Body)

index.html 
<!DOCTYPE html> <!-- บอก Browser ว่านี่คือ HTML5 -->
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- รองรับภาษาไทย -->
    <title>ชื่อเว็บที่แสดงบน Tab</title>
</head>
<body>

    <!-- สิ่งที่ผู้ใช้จะมองเห็น อยู่ในนี้ทั้งหมด -->
    <h1>Hello World</h1>

</body>
</html>
VS Code Tip: พิมพ์ ! แล้วกด Enter เพื่อสร้างโครงสร้างนี้อัตโนมัติ

3. รู้จักกับ Attributes

Attributes คือ "ข้อมูลเพิ่มเติม" ที่เราใส่ให้ Tag เพื่อบอกรายละเอียดเพิ่ม โดยจะเขียนไว้ใน Tag เปิด เสมอ

<tagname name="value">เนื้อหา</tagname>
ตัวอย่างที่ 1: กำหนดภาษา
html 
<html lang="th">
attribute lang บอกว่าเว็บนี้เป็นภาษาไทย
ตัวอย่างที่ 2: tooltip
html 
<p title="ข้อความลับ">เอาเมาส์มาวางสิ</p>
attribute title จะโชว์ข้อความเมื่อเอาเมาส์ชี้

เอาเมาส์มาวางสิ

4. Block vs Inline Elements

Tag ใน HTML แบ่งพฤติกรรมเป็น 2 แบบหลัก ๆ คือ "พวกชอบกินที่" (Block Elements) และ "พวกเจียมเนื้อเจียมตัว" (Inline Elements)

Block Elements

คุณสมบัติ: ความกว้างเต็มจอ (100%) ขึ้นบรรทัดใหม่เสมอ

<h1> - <h6> หัวข้อ
<p> ย่อหน้า
<div> กล่องแบ่งส่วน
<hr> เส้นคั่น
<pre> ข้อความตามจริง
<ol>, <ul> รายการลำดับ, รายการไม่เรียงลำดับ
Inline Level Elements

คุณสมบัติ: กว้างเท่าข้อความ, อยู่ต่อกันในบรรทัดเดิมได้

<span> ใช้จัดกลุ่มคำ (ไม่เปลี่ยนหน้าตา)
<b>, <strong> ตัวหนา (Strong เน้นความสำคัญ)
<i>, <em> ตัวเอียง (Emphasize เน้นเสียง)
<small> ตัวเล็กกว่าปกติ
<mark> ไฮไลท์สีเหลือง
<sub>, <sup> ตัวห้อย2, ตัวยก2

5. อักขระพิเศษ (HTML Entities)

บางตัวอักษรเป็น "คำสงวน" (Reserve Words) ใน HTML (เช่น < >) หรือไม่มีบนคีย์บอร์ด จะต้องใช้รหัสแทน

ตัวอักษร รหัส (Entity Code) คำอธิบาย
เว้นวรรค &nbsp; Non-breaking Space (เคาะ Spacebar 10 ที ก็ได้แค่ 1 ถ้าไม่ใช้ตัวนี้)
< &lt; Less Than (เครื่องหมายน้อยกว่า)
> &gt; Greater Than (เครื่องหมายมากกว่า)
© &copy; Copyright Symbol
& &amp; Ampersand (ตัวและ)
🔍 ค้นหารหัสอื่นๆ ได้ที่ HTML Entity Cheat Sheet

Workshop: นักข่าวไอที

ให้สร้างไฟล์ news.html เพื่อเขียนข่าวสั้น ๆ 1 เรื่อง โดยต้องใช้ Tag ต่อไปนี้ให้ครบ:

หัวข้อ h1
ย่อหน้า p
ตัวหนา strong
ตัวเอียง em
ไฮไลท์ mark
เส้นคั่น hr
โจทย์พิเศษ: ท้ายข่าวให้ใส่ Copyright ด้วยสัญลักษณ์ ©2026 โดย ชื่อคุณ
กลับหน้าหลัก บทต่อไป