reveal.js

# บทที่ 2

HTML5 และ CSS3 สำหรับ Responsive Web Design

---

## เป้าหมาย

- ใช้ **Semantic HTML5** ได้
- สร้าง **Form** และใส่ validation เบื้องต้นได้
- ใช้ **CSS3**, **Flexbox** และ **Grid** ได้
- เข้าใจ **Responsive Design** และ **Mobile First**
- สร้าง landing page ที่รองรับหลายหน้าจอได้

---

## Semantic HTML

HTML ที่ tag สื่อความหมายของเนื้อหา

- `header`
- `nav`
- `main`
- `section`
- `article`
- `footer`

---

## โครงสร้างเอกสาร

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
flowchart TD
  A[HTML Document<br/>เอกสาร] --> B[header<br/>ส่วนหัว]
  A --> C[nav<br/>เมนู]
  A --> D[main<br/>เนื้อหาหลัก]
  D --> E[section<br/>หมวด]
  A --> F[footer<br/>ส่วนท้าย]
</pre>

---

## Forms

```html
<form>
  <label for="email">Email</label>
  <input id="email" type="email" required>
  <button type="submit">Send</button>
</form>
```

- ใช้ `label`
- เลือก `input type` ให้เหมาะสม
- ใช้ `required`, `min`, `maxlength`

---

## Multimedia

| Media | Tag | ข้อควรระวัง |
|---|---|---|
| รูปภาพ | `img`, `picture` | alt และขนาดไฟล์ |
| เสียง | `audio` | controls |
| วิดีโอ | `video` | controls/subtitle |

---

## CSS Box Model

---

## Box Model Formula

- **W**: ความกว้างรวม
- **C**: content
- **P**: padding
- **B**: border
- **M**: margin

---

## Flexbox

เหมาะกับ layout หนึ่งมิติ

```css
.card-list {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
```

---

## CSS Grid

เหมาะกับ layout สองมิติ

```css
.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
}
```

---

## Flexbox vs Grid

| Flexbox | CSS Grid |
|---|---|
| หนึ่งมิติ | สองมิติ |
| แถวหรือคอลัมน์ | แถวและคอลัมน์ |
| navbar/card row | page layout/gallery |

---

## Bootstrap Grid

```html
<div class="row">
  <div class="col-12 col-md-4">Card 1</div>
  <div class="col-12 col-md-4">Card 2</div>
  <div class="col-12 col-md-4">Card 3</div>
</div>
```

---

## Responsive / Mobile First

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
flowchart LR
  A[Mobile<br/>จอเล็ก] --> B[Tablet<br/>แท็บเล็ต]
  B --> C[Desktop<br/>จอใหญ่]
  C --> D[Large Screen<br/>จอกว้าง]
</pre>

---

## Breakpoints

| ขนาดหน้าจอ | แนวทาง layout |
|---|---|
| `< 600px` | 1 คอลัมน์ |
| `600-900px` | 2 คอลัมน์ |
| `> 900px` | หลายคอลัมน์ |

---

## Landing Page Example

```html
<main>
  <section class="hero">
    <h1>Responsive Web Design</h1>
    <form>
      <input type="email" required>
      <button>ลงทะเบียน</button>
    </form>
  </section>
</main>
```

---

## Media Query

```css
.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
```

---

## Checklist

- ใช้ semantic tag เหมาะสม
- Form มี label และ validation
- ใช้ Flexbox/Grid อย่างเหมาะสม
- มี media query
- ทดสอบ mobile/tablet/desktop
- รูปภาพมี alt

---

## กิจกรรม

สร้าง responsive landing page:

1. Header
2. Hero section
3. Card อย่างน้อย 3 รายการ
4. Form รับอีเมล
5. Footer
6. Media query อย่างน้อย 1 จุด

---

## คำถามท้ายบท

1. Semantic HTML ช่วยอะไร
2. Flexbox และ Grid ต่างกันอย่างไร
3. Mobile First มีข้อดีอย่างไร
4. Media Query ทำงานอย่างไร
5. หากหน้าเว็บอ่านยากบนมือถือ ควรตรวจอะไร