/* เพิ่มใน

บทความหลัก

บล็อกนี้เป็นคอลัมน์หลักของหน้า ใช้ class col-main เพื่อให้กว้างกว่าแถบข้าง

Tip: class ใช้ซ้ำได้หลายจุด ส่วน id ใช้เฉพาะจุดที่จำเป็นและไม่ซ้ำ

วันนี้เราฝึกจัดเลย์เอาต์ 2 คอลัมน์ด้วย div + class และ Flexbox ให้รองรับมือถือ (ปรับเป็นคอลัมน์เดี่ยวอัตโนมัติเมื่อหน้าจอแคบ)

การตั้งชื่อ class ที่อ่านง่าย

สื่อความหมาย: .col-main, .col-side, .card, .nav
หลีกเลี่ยงชื่อกำกวม เช่น .box1, .left2
ใช้ขีดกลาง (kebab-case) ให้สม่ำเสมอ เช่น .site-header, .page-footer

แถบข้าง

ลิงก์ด่วน
ข่าวล่าสุด
ติดต่อเรา

กล่องโปรโมชัน

ซื้อ 1 แถม 1 (เฉพาะวันพุธ)

แบบฝึกหัดวันนี้

ปรับเป็น 3 คอลัมน์: เพิ่มคอลัมน์ใหม่ชื่อ .col-extra (กว้างเท่า .col-side) แล้วจัดเรียงใน .row
ทำส่วน Hero: สร้างบล็อก .hero ด้านบนสุด กว้างเต็ม โดยใช้ภาพพื้นหลังและข้อความทับ (ใช้ padding และ border-radius)
โหมดมือถือ: ปรับ @media ให้ระยะห่างและขนาดตัวอักษรอ่านง่ายเมื่อกว้างน้อยกว่า 480px

เสร็จแล้วลองเปิดหน้าในมือถือหรือย่อหน้าต่างดูว่าเลย์เอาต์ปรับตามไหม

/* หลักการวางเลย์เอาต์ */ .row { display:flex; gap:16px; margin-top:16px; } .col-main { flex:2; } /* กว้างกว่า */ .col-side { flex:1; } /* แคบกว่า */ @media (max-width:800px){ .row{ flex-direction:column; } } /* มือถือเป็นคอลัมน์เดี่ยว */

เนื้อหาหลัก

แถบข้าง

หัวข้อใหญ่

นี่คือย่อหน้าแรกที่ถูกตกแต่งด้วย CSS

หัวข้อใหญ่

นี่คือย่อหน้าแรกที่ถูกตกแต่งด้วย CSS

บทเรียนที่ 3

หัวข้อใหญ่

นี่คือย่อหน้าแรกที่ถูกตกแต่งด้วย CSS

หัวข้อใหญ่

นี่คือย่อหน้าแรกที่ถูกตกแต่งด้วย CSS

หัวข้อใหญ่

นี่คือย่อหน้าแรกที่ถูกตกแต่งด้วย CSS

หัวข้อใหญ่

นี่คือย่อหน้าแรกที่ถูกตกแต่งด้วย CSS

นี่คือรูปภาพ

นี่คือลิงก์

ไปที่ เว็บไซต์ตัวอย่าง

สงบ

แมวลายกระดองเต่าชื่อสงบ — 08/09/68 อยู่ข้างใจ — วันนี้ให้ใจสบายขึ้นหน่อย

แมวในชุดไทยท่ามกลางผ้าทอมือ — สงบ — ผืนอุ่นข้างใจ

วิธีใส่รูปลงหน้า HTML

สร้างไฟล์ index.html และโครงร่างพื้นฐาน:

<!doctype html>
<html lang="th">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>สวัสดี HTML</title>
</head>
<body>
  
</body>
</html>

ในส่วน <body> วางการ์ดรูปดังนี้:
```
<section id="sangob-card">
  <figure>
    <img src="URL-ของรูป.jpg"
         alt="คำบรรยายรูปสั้นๆ"
         loading="lazy" decoding="async">
    <figcaption>อยู่ข้างใจ — วันนี้ให้ใจสบายขึ้นหน่อย</figcaption>
  </figure>
</section>
```
หมายเหตุแท็ก: <section> = กล่องเนื้อหา / <figure> = กรอบรูป+คำบรรยาย / <img> = รูปจริง
src = ที่อยู่ไฟล์รูป, alt = อธิบายรูปเพื่อการเข้าถึง, loading="lazy" = โหลดเมื่อใกล้เห็น
จัดขนาด–จัดวางให้พอดีตา (เพิ่มใน <style> ด้านบนของหน้า):
```
#sangob-card{max-width:560px;margin:16px auto;padding:12px 16px}
#sangob-card img{width:min(100%,520px);height:auto;display:block;margin:0 auto}
#sangob-card figcaption{text-align:center;color:#555}
```
ปรับรูปให้ใหญ่/เล็กขึ้นได้โดยเปลี่ยนเลข 520px
บันทึกไฟล์ → เปิดในเบราว์เซอร์ (หรือวางทั้งก้อนนี้ใน WordPress → Custom HTML)

แมวในชุดไทยท่ามกลางผ้าทอมือ — อยู่ข้างใจ — วันนี้ให้ใจสบายขึ้นหน่อย

แมวสงบในชุดไทย — อยู่ข้างใจ — วันนี้ให้ใจสบายขึ้นหน่อย

สงบ — ผืนอุ่นข้างใจ (ตัวอย่าง + วิธีทำ)

สงบ

แมวในชุดไทยท่ามกลางผ้าทอมือ — สงบ — ผืนอุ่นข้างใจ

วิธีทำ (SML): ใส่รูป + คำบรรยายแบบเดียวกันนี้

สร้างไฟล์ index.html (หรือใช้หน้าเดิม) แล้วเปิดแก้ไข

ในส่วน <body> วางบล็อกต่อไปนี้ และแทนที่ src="…" ด้วย URL รูปของคุณ:

<section id="sangob-card" style="max-width:560px;margin:16px auto;padding:12px 16px">
  <figure style="margin:0;text-align:center">
    <img src="URL-รูป.jpg"
         alt="คำบรรยายรูปสั้น ๆ"
         loading="lazy" decoding="async"
         style="width:min(100%,560px);height:auto;display:inline-block">
    <figcaption style="max-width:560px;margin:8px auto 0;color:#666">
      อยู่ข้างใจ — วันนี้ให้ใจสบายขึ้นหน่อย
    </figcaption>
  </figure>
</section>

ถ้าจะใช้ใน WordPress ให้คัดลอกเฉพาะส่วน <section>…</section> ไปวางในบล็อก Custom HTML
บันทึก/พรีวิว → ปรับความกว้างคำบรรยาย/รูปได้โดยแก้ตัวเลข max-width (เช่น 560 → 520/480)

หน้าทดลอง HTML แรก

08/09/68 สวัสดีครับ!

นี่คือหน้าเว็บ HTML แรกของฉัน

เรียนรู้หัวข้อ (Headings)
เรียนรู้ย่อหน้า

อธิบายแบบตรง ๆ เลยครับ 🙂
`!doctype html` → เหมือน “ธงเริ่มเกม” บอกเบราว์เซอร์ว่า นี่คือ HTML5 ถ้าไม่มี บางเบราว์เซอร์จะสับสน กลับไปใช้โหมดเก่า ๆ (quirks mode) ทำให้แสดงผลเพี้ยน
`meta charset="utf-8"` → บอกว่า ตัวอักษรในหน้านี้เก็บแบบ UTF-8 → รองรับไทย จีน ญี่ปุ่น อังกฤษ ครบ

สองอันนี้ทำงาน **คนละหน้าที่** → เลยต้องใช้คู่กัน

* `doctype` = มาตรฐานของหน้าเว็บ
* `meta charset="utf-8"` = วิธีเข้ารหัสตัวอักษร
ถ้ามีแค่ `utf-8` อย่างเดียว → หน้าเว็บอาจอ่านภาษาไทยถูก แต่ layout เพี้ยน
ถ้ามีแค่ `doctype` อย่างเดียว → layout ถูก แต่ภาษาไทยกลายเป็นภาษาต่างดาว

เพราะงั้นใช้ทั้งคู่ = เว็บทั้ง “อ่านออก” และ “วางโครงถูก” ✔️
(Paragraphs)
เรียนรู้รายการ (Lists)

My First HTML

สวัสดี HTML

นี่คือไฟล์แรกของฉัน