บทที่ 2 HTML5 และ CSS3 สำหรับ Responsive Web Design

สไลด์บทเรียน

วัตถุประสงค์

1. ใช้ Semantic HTML5 เพื่อสร้างโครงสร้างเว็บที่อ่านง่าย เข้าถึงได้ และเหมาะกับ search engine ได้
2. สร้าง Form, Multimedia และองค์ประกอบพื้นฐานของหน้าเว็บได้
3. ใช้ CSS3, Flexbox, CSS Grid และ Media Query เพื่อจัด layout ได้
4. อธิบายแนวคิด Responsive Web Design และ Mobile First ได้
5. สร้างหน้า landing page ที่ปรับตัวตามขนาดหน้าจอได้

ภาพรวมบทเรียน

บทนี้ต่อยอดจากพื้นฐานเว็บแอปพลิเคชันไปสู่การสร้างหน้าเว็บที่มีโครงสร้างดีและใช้งานได้หลายขนาดหน้าจอ ผู้เรียนจะใช้ HTML5 เพื่อกำหนดความหมายของเนื้อหา และใช้ CSS3 เพื่อจัดวางหน้าจอ สี ตัวอักษร ระยะห่าง และพฤติกรรม responsive

คำสำคัญของบทเรียน

• Semantic HTML: HTML ที่ใช้ tag ตามความหมายของเนื้อหา เช่น header, main, section, article, footer
• Responsive Web Design: การออกแบบเว็บให้ปรับตัวตามขนาดหน้าจอและอุปกรณ์
• Mobile First: การออกแบบจากหน้าจอเล็กก่อน แล้วค่อยเพิ่ม layout สำหรับจอใหญ่
• Flexbox: ระบบจัด layout หนึ่งมิติ เหมาะกับการจัดเรียงแนวแถวหรือคอลัมน์
• CSS Grid: ระบบจัด layout สองมิติ เหมาะกับโครงสร้างหน้าเว็บที่มีแถวและคอลัมน์
• Media Query: เงื่อนไข CSS ที่เปลี่ยน style ตามขนาดหน้าจอหรือคุณสมบัติของอุปกรณ์

1. Semantic HTML5

Semantic HTML5 คือการเลือกใช้ tag ที่สื่อความหมายของเนื้อหา แทนการใช้ div ทุกอย่างโดยไม่บอกโครงสร้าง เช่น ใช้ nav สำหรับเมนู, main สำหรับเนื้อหาหลัก, article สำหรับเนื้อหาที่อ่านแยกได้ และ footer สำหรับส่วนท้ายหน้า

การใช้ Semantic HTML มีประโยชน์ต่อ:

• ผู้ใช้ เพราะโครงสร้างหน้าเว็บชัดเจน
• Screen Reader เพราะอ่านลำดับเนื้อหาได้ดีขึ้น
• Search Engine เพราะเข้าใจเนื้อหาได้ง่ายขึ้น
• นักพัฒนา เพราะดูแลโค้ดและแบ่งส่วนหน้าเว็บได้เป็นระบบ

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#83a598',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart TD
  A[HTML Document
เอกสาร HTML] --> B[header
ส่วนหัว]
  A --> C[nav
เมนูนำทาง]
  A --> D[main
เนื้อหาหลัก]
  D --> E[section
หมวดเนื้อหา]
  D --> F[article
บทความ/รายการ]
  A --> G[footer
ส่วนท้าย]

ตารางเปรียบเทียบ Tag แบบไม่สื่อความหมายและแบบ Semantic

2. Forms และ Input Validation เบื้องต้น

Form คือส่วนที่รับข้อมูลจากผู้ใช้ เช่น ชื่อ อีเมล รหัสผ่าน รายละเอียดคำสั่งซื้อ หรือคำค้นหา HTML5 มี input type หลายแบบ เช่น email, number, date, password และ attribute ช่วยตรวจเบื้องต้น เช่น required, minlength, maxlength, min, max

<!-- ฟอร์มติดต่อกลับแบบพื้นฐาน -->
<form>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" minlength="10"></textarea>

  <button type="submit">Send</button>
</form>

3. Multimedia ใน HTML5

HTML5 รองรับ media โดยตรงผ่าน tag เช่น img, audio, video และ picture สำหรับ responsive image การใส่ media ควรคำนึงถึงขนาดไฟล์ ข้อความทดแทน และความเร็วในการโหลด

<!-- รูปภาพที่มี alt เพื่อ accessibility -->
<img src="course-cover.jpg" alt="ภาพหน้าปกรายวิชา Web Application Development">

<!-- วิดีโอพร้อม controls ให้ผู้ใช้ควบคุมได้ -->
<video controls width="640">
  <source src="intro.mp4" type="video/mp4">
  เบราว์เซอร์ของคุณไม่รองรับวิดีโอ
</video>

4. CSS3 และ Box Model

CSS3 ใช้กำหนดรูปลักษณ์ของ HTML เช่น สี ตัวอักษร ระยะห่าง ขนาด layout และ animation พื้นฐานที่สำคัญคือ Box Model ซึ่งมองทุก element เป็นกล่องที่มี content, padding, border และ margin

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#b8bb26',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart TD
  A[Margin
พื้นที่ภายนอก] --> B[Border
เส้นขอบ]
  B --> C[Padding
พื้นที่ด้านใน]
  C --> D[Content
เนื้อหา]

สมการความกว้างของกล่อง

คำอธิบายตัวแปร:

• W คือ ความกว้างรวมของพื้นที่ที่ element ใช้
• C คือ ความกว้างของ content
• P คือ padding ด้านซ้ายหรือขวา
• B คือ border ด้านซ้ายหรือขวา
• M คือ margin ด้านซ้ายหรือขวา

5. Flexbox

Flexbox เหมาะกับ layout หนึ่งมิติ เช่น เมนูแนวนอน การจัด card เป็นแถว หรือการจัดปุ่มให้อยู่กลางพื้นที่ จุดเด่นคือจัด alignment และ spacing ได้ง่าย

/* จัด card ให้อยู่เป็นแถวและเว้นระยะห่าง */
.card-list {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  justify-content: space-between;
}

6. CSS Grid

CSS Grid เหมาะกับ layout สองมิติ เช่น โครงหน้าเว็บที่มี header, sidebar, main และ footer หรือ gallery ที่ต้องจัดแถวและคอลัมน์พร้อมกัน

/* layout หน้าเว็บแบบมี sidebar และ content */
.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
}

7. Bootstrap

Bootstrap คือ CSS framework ที่เตรียมระบบ grid, component และ utility class ไว้ให้ ช่วยสร้างหน้า responsive ได้เร็วขึ้น เหมาะกับงาน prototype หรือระบบที่ต้องการ UI มาตรฐาน

ตัวอย่างแนวคิด Bootstrap Grid:

<!-- ตัวอย่าง Bootstrap grid: 1 คอลัมน์บนมือถือ และ 3 คอลัมน์บนจอใหญ่ -->
<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>

8. Responsive Design และ Mobile First

Responsive Web Design คือการออกแบบเว็บให้ปรับตัวตามขนาดหน้าจอ เช่น mobile, tablet และ desktop ส่วน Mobile First คือการเริ่มออกแบบจากหน้าจอเล็กก่อน แล้วใช้ media query เพิ่มความซับซ้อนเมื่อหน้าจอกว้างขึ้น

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#d3869b',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[Mobile
เริ่มจากจอเล็ก] --> B[Tablet
เพิ่มพื้นที่]
  B --> C[Desktop
จัดหลายคอลัมน์]
  C --> D[Large Screen
จำกัดความกว้างให้อ่านง่าย]

Breakpoint พื้นฐาน

9. ตัวอย่าง Landing Page แบบ Responsive

ตัวอย่างต่อไปนี้รวม Semantic HTML, Form, Flexbox/Grid และ Media Query ในไฟล์เดียว เพื่อทดลองใช้งานได้ทันที

<!doctype html>
<html lang="th">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Landing Page</title>
  <style>
    /* ตั้งค่า box model ให้คำนวณขนาดง่ายขึ้น */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    header, footer {
      padding: 1rem;
      background: #282828;
      color: #fbf1c7;
    }

    main {
      width: min(100% - 2rem, 1100px);
      margin: 0 auto;
      padding: 1rem 0;
    }

    .hero {
      display: grid;
      gap: 1rem;
      align-items: center;
    }

    .cards {
      display: grid;
      gap: 1rem;
      margin-top: 1rem;
    }

    .card {
      border: 1px solid #d5c4a1;
      padding: 1rem;
      border-radius: 8px;
    }

    form {
      display: grid;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    input, button {
      padding: 0.7rem;
      font: inherit;
    }

    /* จอใหญ่ขึ้น: เปลี่ยน hero และ card เป็นหลายคอลัมน์ */
    @media (min-width: 760px) {
      .hero {
        grid-template-columns: 1.3fr 1fr;
      }

      .cards {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  </style>
</head>
<body>
  <header>
    <strong>Web Application Course</strong>
  </header>

  <main>
    <section class="hero">
      <div>
        <h1>เรียนรู้การสร้างเว็บที่รองรับทุกหน้าจอ</h1>
        <p>เริ่มจาก HTML5, CSS3 และ Responsive Web Design</p>
      </div>

      <form>
        <label for="email">อีเมล</label>
        <input id="email" type="email" required placeholder="you@example.com">
        <button type="submit">ลงทะเบียน</button>
      </form>
    </section>

    <section class="cards" aria-label="หัวข้อที่เรียน">
      <article class="card">
        <h2>HTML5</h2>
        <p>สร้างโครงสร้าง semantic ที่อ่านง่าย</p>
      </article>
      <article class="card">
        <h2>CSS3</h2>
        <p>ตกแต่งและจัด layout ด้วย Flexbox/Grid</p>
      </article>
      <article class="card">
        <h2>Responsive</h2>
        <p>ปรับหน้าเว็บให้เหมาะกับทุกขนาดหน้าจอ</p>
      </article>
    </section>
  </main>

  <footer>
    <small>Responsive Landing Page Example</small>
  </footer>
</body>
</html>

Checklist ก่อนส่งงานบทที่ 2

กิจกรรม

สร้างหน้า responsive landing page ที่มีส่วนประกอบต่อไปนี้:

1. Header พร้อมชื่อเว็บไซต์หรือเมนู
2. Main content ที่มี hero section
3. Card หรือ feature อย่างน้อย 3 รายการ
4. Form รับอีเมลหรือข้อมูลติดต่อ
5. Footer
6. Media query อย่างน้อย 1 จุด

คำถามทบทวน

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

กลับรายวิชา