HTML พื้นฐาน

HTML คือกระดูกของเว็บ

ทุกหน้าเว็บที่คุณเคยเปิด เกิดจาก HTML (HyperText Markup Language) มันคือภาษาที่ใช้ สร้างโครงสร้าง ของเนื้อหา — ว่าส่วนไหนคือหัวข้อ ส่วนไหนคือย่อหน้า ส่วนไหนคือรูป

💡 HTML ไม่ใช่ภาษาโปรแกรม (ไม่มี if/loop) แต่เป็นภาษา "มาร์กอัป" สำหรับจัดโครงสร้าง

โครงสร้างแท็ก (Tag)

HTML ประกอบด้วย แท็ก ที่หุ้มด้วยวงเล็บมุม < >:

<p>นี่คือย่อหน้า</p>

<p> = แท็กเปิด
นี่คือย่อหน้า = เนื้อหา
</p> = แท็กปิด (มีเครื่องหมาย /)

หน้าเว็บแรกของคุณ

สร้างไฟล์ index.html แล้วพิมพ์:

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

เปิดดู: ดับเบิ้ลคลิกไฟล์ หรือลากเข้าเบราว์เซอร์ — เห็นผลทันที!

อธิบายแต่ละส่วน

แท็ก	หน้าที่
`<!DOCTYPE html>`	บอกเบราว์เซอร์ว่าเป็น HTML รุ่น 5
`<html>`	ครอบทั้งหน้า
`<head>`	ข้อมูลที่ ไม่โชว์ (ชื่อหน้า, ภาษา)
`<body>`	เนื้อหาที่ โชว์ บนหน้าจอ

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

หัวข้อ (Headings)

<h1>หัวข้อใหญ่สุด</h1>
<h2>รองลงมา</h2>
<h3>เล็กลง</h3>

มีตั้งแต่ <h1> ถึง <h6> (เลขน้อย = ใหญ่)

ย่อหน้าและข้อความ

<p>ย่อหน้าธรรมดา</p>
<strong>ตัวหนา</strong>
<em>ตัวเอียง</em>

ลิงก์ (Link)

<a href="https://google.com">ไป Google</a>

แอตทริบิวต์ href บอกปลายทาง

รูปภาพ

<img src="รูป.jpg" alt="คำอธิบายรูป" />

src = ที่อยู่รูป
alt = คำอธิบาย (สำคัญ เวลารูปโหลดไม่ได้/สำหรับคนตาบอด)

ลิสต์

<ul>
  <li>แอปเปิ้ล</li>
  <li>กล้วย</li>
</ul>

<ol>
  <li>ขั้นแรก</li>
  <li>ขั้นสอง</li>
</ol>

<ul> = จุดนำ, <ol> = มีเลข

แอตทริบิวต์ (Attribute)

แอตทริบิวต์คือ "รายละเอียดเสริม" ของแท็ก อยู่ในแท็กเปิด:

<a href="..." target="_blank">เปิดแท็บใหม่</a>
<p class="intro">...</p>
<img src="..." width="200" />

รูปแบบ: ชื่อ="ค่า"

กล่อง (div) สำหรับจัดกลุ่ม

<div class="card">
  <h2>ชื่อสินค้า</h2>
  <p>ราคา 100 บาท</p>
</div>

<div> = กล่องทั่วไป (block) <span> = กล่องเล็ก (inline) สำหรับตกแต่งบางส่วนของข้อความ

ฟอร์ม (รับข้อมูลจากผู้ใช้)

<form>
  <input type="text" placeholder="ชื่อ" />
  <input type="email" placeholder="อีเมล" />
  <button type="submit">ส่ง</button>
</form>

ลองทำจริง: หน้าแนะนำตัว

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <title>แนะนำตัว</title>
  </head>
  <body>
    <h1>สวัสดี ผมชื่อ ___</h1>
    <p>ผมกำลังเรียนเขียนเว็บ</p>

    <h2>งานอดิเรก</h2>
    <ul>
      <li>อ่านหนังสือ</li>
      <li>เล่นเกม</li>
      <li>เขียนโค้ด</li>
    </ul>

    <a href="https://github.com">ผลงานของผม</a>
  </body>
</html>

เครื่องมือช่วย: Live Server

ใน VS Code ติดตั้ง extension Live Server แล้วคลิกขวาไฟล์ HTML → "Open with Live Server" เวลาแก้โค้ดแล้วเซฟ เบราว์เซอร์จะ รีเฟรชอัตโนมัติ — สะดวกมาก

สรุป

แท็ก	ใช้ทำอะไร
`<h1>`–`<h6>`	หัวข้อ
`<p>`	ย่อหน้า
`<a>`	ลิงก์
`<img>`	รูป
`<ul>`/`<ol>`/`<li>`	ลิสต์
`<div>`/`<span>`	กลุ่ม/จัดรูป
`<input>`/`<form>`	รับข้อมูล

บทหน้า: ทำให้เว็บ สวย ด้วย CSS 🎨