reveal.js

# สัปดาห์ที่ 2

HTML5 พื้นฐานและโครงสร้างเว็บ

---

## เป้าหมายบทเรียน

- อธิบายโครงสร้างเอกสาร HTML ได้
- ใช้ element, tag และ attribute ได้ถูกต้อง
- จัดเนื้อหาด้วย heading, paragraph, link, image และ list
- ใช้ Semantic HTML เพื่อจัดโครงสร้างหน้าเว็บ
- สร้าง form เบื้องต้นและจัดไฟล์โปรเจกต์อย่างเป็นระบบ

---

## HTML คือโครงสร้าง

- เนื้อหา
- ลำดับข้อมูล
- ความหมายของส่วนต่าง ๆ
- จุดเชื่อมโยงไปหน้าอื่น

---

## 1. โครงสร้างเอกสาร HTML

เอกสาร HTML 1 หน้าเป็นโครงกระดูกของเว็บเพจ

- `doctype`
- `html`
- `head`
- `body`

---

## Document Structure

```html
<!doctype html>
<html lang="th">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>เว็บแนะนำตัว</title>
  </head>
  <body>
    <h1>สวัสดี</h1>
    <p>ฉันกำลังเรียน Front-end Development</p>
  </body>
</html>
```

---

## ทำไม `meta` สำคัญ

```html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
```

- `charset` ช่วยให้ภาษาไทยแสดงถูกต้อง
- `viewport` เป็นพื้นฐานของ responsive web

---

## 2. Elements, Tags และ Attributes

| คำ | ความหมาย |
|---|---|
| Tag | เครื่องหมายเปิด/ปิด เช่น `<p>` |
| Element | ชุด tag และเนื้อหา เช่น `<p>ข้อความ</p>` |
| Attribute | คุณสมบัติเพิ่มเติมใน tag เปิด |

---

## ตัวอย่าง Attribute

```html
<a href="https://example.com" target="_blank">
  เปิดเว็บไซต์ตัวอย่าง
</a>

<section id="about" class="profile-section">
  <h2>เกี่ยวกับฉัน</h2>
</section>
```

---

## แนวทางใช้ Attribute

- `id` ใช้ระบุ element ที่ไม่ซ้ำ
- `class` ใช้จัดกลุ่ม element
- `alt` อธิบายรูปภาพ
- `href` ระบุปลายทางของ link
- ข้อความ link ควรบอกว่ากดแล้วไปที่ใด

---

## 3. Heading และ Paragraph

Heading ใช้บอกลำดับความสำคัญของเนื้อหา

```html
<h1>Portfolio ของฉัน</h1>
<h2>ประวัติส่วนตัว</h2>
<h3>ทักษะด้าน Front-end</h3>
```

Paragraph ใช้สำหรับข้อความเนื้อหา

```html
<p>ฉันสนใจการพัฒนาเว็บและการออกแบบประสบการณ์ผู้ใช้</p>
```

---

## Link และ Image

```html
<a href="contact.html">ติดต่อฉัน</a>
<a href="#projects">ดูผลงาน</a>
```

```html
<img src="images/profile.jpg" alt="รูปโปรไฟล์ของเจ้าของเว็บไซต์">
```

รูปภาพควรมี `alt` เสมอ

---

## List

```html
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>JavaScript</li>
</ul>
```

```html
<ol>
  <li>วางโครงสร้าง HTML</li>
  <li>ตกแต่งด้วย CSS</li>
  <li>เพิ่มการโต้ตอบด้วย JavaScript</li>
</ol>
```

---

## 4. Semantic HTML

เลือก element ให้ตรงกับความหมายของเนื้อหา

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

---

## Semantic Layout

```mermaid
flowchart TB
  Header[header] --> Nav[nav]
  Nav --> Main[main]
  Main --> Section[section]
  Section --> Article[article]
  Main --> Aside[aside]
  Aside --> Footer[footer]
```

---

## ตัวอย่าง Semantic HTML

```html
<header>
  <h1>Portfolio</h1>
  <nav aria-label="เมนูหลัก">
    <a href="#about">เกี่ยวกับฉัน</a>
    <a href="#projects">ผลงาน</a>
  </nav>
</header>

<main>
  <section id="about">
    <h2>เกี่ยวกับฉัน</h2>
    <p>นักศึกษาที่สนใจ Front-end Development</p>
  </section>
</main>
```

---

## ทำไม Semantic HTML สำคัญ

- อ่านโค้ดง่าย
- ช่วย screen reader
- ช่วย search engine เข้าใจเนื้อหา
- ทำให้ทีมพัฒนาแก้ไขต่อได้ง่าย
- ลดการใช้ `div` แบบไม่มีความหมาย

---

## 5. Forms เบื้องต้น

- `form`
- `label`
- `input`
- `select`
- `textarea`
- `button`

---

## ตัวอย่าง Form

```html
<form action="/contact" method="post">
  <label for="fullname">ชื่อ-สกุล</label>
  <input id="fullname" name="fullname" type="text" required>

<label for="email">อีเมล</label>
  <input id="email" name="email" type="email" required>

<button type="submit">ส่งข้อความ</button>
</form>
```

---

## Form ที่ดี

- `label` เชื่อมกับ input ด้วย `for` และ `id`
- เลือก `type` ให้เหมาะ เช่น `email`, `number`, `date`
- ใช้ `required` เมื่อจำเป็น
- เตรียมข้อความ error ที่เข้าใจง่าย
- ระบบจริงต้องตรวจข้อมูลซ้ำที่ server

---

## 6. การตั้งชื่อไฟล์

แนวทางพื้นฐาน

- ใช้ตัวพิมพ์เล็ก
- ใช้ขีดกลางแทนช่องว่าง
- หลีกเลี่ยงชื่อไฟล์ที่มีช่องว่าง
- ตั้งชื่อสื่อความหมาย
- หน้าแรกใช้ `index.html`

---

## โครงสร้างโฟลเดอร์

```text
my-portfolio/
  index.html
  about.html
  contact.html
  css/
    style.css
  js/
    main.js
  images/
    profile.jpg
```

---

## การอ้างไฟล์

```html
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js" defer></script>
<img src="images/profile.jpg" alt="รูปโปรไฟล์">
```

Path แบบ relative ขึ้นกับตำแหน่งไฟล์ HTML ปัจจุบัน

---

## 7. HTML Validation

Validation คือการตรวจว่า HTML ถูกต้องตามมาตรฐานหรือไม่

ปัญหาที่พบบ่อย

- ลืมปิด tag
- ซ้อน element ผิด
- ใช้ `id` ซ้ำ
- รูปภาพไม่มี `alt`
- input ไม่มี `label`
- heading ข้ามลำดับ

---

## เขียนโค้ดให้อ่านง่าย

- เยื้องโค้ดให้เห็นลำดับชั้น
- ใช้ชื่อ `id` และ `class` ที่สื่อความหมาย
- แบ่งหน้าเป็นส่วนด้วย semantic element
- ไม่ปน HTML, CSS, JavaScript มากเกินจำเป็น
- ใช้ comment เฉพาะจุดที่ช่วยอธิบาย

---

## Checklist ก่อนส่งงาน

- มี `doctype`, `html lang`, `meta charset`, `meta viewport`
- ใช้ heading เรียงลำดับเหมาะสม
- ใช้ `header`, `nav`, `main`, `section`, `footer`
- Link และ image มี attribute ที่จำเป็น
- รูปภาพมี `alt`
- Form มี `label`
- ชื่อไฟล์เป็นระบบ
- ไม่มี tag ค้าง

---

## กิจกรรม

สร้างเว็บเพจส่วนตัวด้วย Semantic HTML

---

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

1. HTML ทำหน้าที่อะไรในเว็บเพจ
2. Semantic HTML มีประโยชน์ต่อ Accessibility อย่างไร
3. `id` และ `class` ต่างกันอย่างไร
4. ทำไม form input ควรมี label
5. การตั้งชื่อไฟล์ส่งผลต่อการดูแลเว็บอย่างไร