HTML Foundation

Day 1 - ชั่วโมงที่ 2: HTML Foundation for Web Application

เป้าหมายของชั่วโมงนี้

หลังจบชั่วโมงที่สอง ผู้เรียนควรสามารถ:

เข้าใจโครงสร้างพื้นฐานของเอกสาร HTML
ใช้ semantic HTML เพื่อจัดโครงสร้างหน้าเว็บได้
สร้าง form สำหรับรับข้อมูลจากผู้ใช้ได้
ใช้ label, input, textarea และ button ได้ถูกต้อง
เข้าใจว่า HTML form เป็นจุดเริ่มต้นของการส่งข้อมูลไปยัง backend
ตั้งชื่อ field ใน form ให้พร้อมต่อยอดเป็น TypeScript data model และ database field ได้
สร้างหน้าแจ้งปัญหา IT แบบ static ได้

ไฟล์ที่ใช้ในชั่วโมงนี้

โค้ด HTML ทั้งหมดในชั่วโมงนี้ใส่ใน:

index.html

ถ้า slide มี code block ของ document structure, header, form หรือ footer ให้ระบุว่า:

File: index.html

โครงสร้างเวลา 60 นาที

เวลา	หัวข้อ	รูปแบบ
0-5 นาที	Recap ชั่วโมงแรก	เชื่อมเข้าเนื้อหา
5-15 นาที	HTML คืออะไร และทำหน้าที่อะไร	Explain
15-25 นาที	HTML document structure	Live coding
25-35 นาที	Semantic HTML	Explain + examples
35-50 นาที	Form elements	Live coding
50-60 นาที	สร้างหน้าแจ้งปัญหา IT	ทำทีละขั้นตอน

Slide 1: จาก Flow สู่หน้าเว็บแรก

ชั่วโมงที่แล้วเราเห็นว่า Frontend เป็นส่วนที่ผู้ใช้มองเห็นและโต้ตอบด้วย

ชั่วโมงนี้เราจะเริ่มสร้าง Frontend ส่วนแรกของระบบแจ้งปัญหาด้วยไฟล์:

index.html

เมื่อจบชั่วโมง เราจะมีหน้าเว็บที่ประกอบด้วยส่วนหัว Form แจ้งปัญหา และส่วนท้าย โดยยังไม่เน้นความสวยงามหรือการบันทึกข้อมูล

Slide 2: HTML ทำหน้าที่อะไร

HTML ย่อมาจาก HyperText Markup Language ใช้กำหนดโครงสร้างและความหมายของเนื้อหาบนหน้าเว็บ

เทคโนโลยี	หน้าที่
HTML	สร้างโครงสร้างและบอกความหมายของเนื้อหา เช่น หัวข้อ Form, Input และ Button
CSS	ตกแต่งหน้าตาและจัดวาง Element เช่น สี ระยะห่าง ขนาด และ Responsive Layout
JavaScript / TypeScript	เพิ่มพฤติกรรมและ Logic เช่น ตรวจข้อมูล รับเหตุการณ์จากผู้ใช้ ส่ง Form และเปลี่ยนสิ่งที่แสดงบนหน้า

ทั้งสามส่วนทำงานร่วมกัน แต่ในชั่วโมงนี้เราจะเริ่มจาก HTML เพื่อสร้างโครงสร้างให้ถูกต้องก่อน แล้วจึงเพิ่ม CSS และ Logic ในชั่วโมงถัดไป

Slide 3: สร้างโครงเริ่มต้นของ `index.html`

สร้างไฟล์ใหม่ทั้งไฟล์: index.html

<!doctype html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ระบบแจ้งปัญหา IT</title>
  </head>
  <body>
    <h1>ระบบแจ้งปัญหา IT</h1>
  </body>
</html>

เปิดไฟล์นี้ด้วย Browser แล้วควรเห็นหัวข้อ “ระบบแจ้งปัญหา IT”

Slide 4: อ่านโครงสร้าง HTML ทีละส่วน

<!doctype html> บอก Browser ว่าเอกสารนี้ใช้ HTML เวอร์ชันปัจจุบัน
<html lang="th"> คือจุดเริ่มต้นของเอกสารและระบุว่าภาษาหลักคือภาษาไทย
<head> เก็บข้อมูลเกี่ยวกับหน้าเว็บ
<meta charset="UTF-8"> ทำให้แสดงภาษาไทยได้ถูกต้อง
<meta name="viewport"> ช่วยให้หน้าเว็บปรับตามขนาดหน้าจอ
<title> คือชื่อบน Browser tab
<body> คือเนื้อหาที่ผู้ใช้มองเห็น

HTML ส่วนใหญ่ใช้ Tag เปิดและ Tag ปิดเพื่อบอกขอบเขตของเนื้อหา

Slide 5: Element, Tag และ Attribute

คำ	ตัวอย่าง	ความหมาย
Element	`<h1>ระบบแจ้งปัญหา IT</h1>`	ส่วนประกอบ HTML หนึ่งชิ้น
Tag	`<h1>` และ `</h1>`	จุดเปิดและปิด Element
Attribute	`id="title"`	ข้อมูลเพิ่มเติมของ Element

<label for="title">หัวข้อปัญหา</label>
<input id="title" name="title" type="text" required />

input เป็น Element ที่ไม่มีเนื้อหาด้านใน ส่วน id, name, type และ required คือ Attributes ที่กำหนดพฤติกรรมของมัน

Slide 6: Semantic HTML ช่วยบอกหน้าที่ของเนื้อหา

Semantic HTML คือการเลือก Tag ให้ตรงกับความหมายของส่วนที่กำลังสร้าง

Tag	ใช้สำหรับ
`header`	ส่วนหัวของหน้า
`main`	เนื้อหาหลัก
`section`	กลุ่มเนื้อหาที่เกี่ยวข้องกัน
`footer`	ส่วนท้ายของหน้า

การใช้ Tag ที่สื่อความหมายช่วยให้คนอ่าน Code และเครื่องมือช่วยการเข้าถึงเข้าใจโครงสร้างของหน้าได้ง่ายขึ้น

Slide 7: สร้างโครงหน้าระบบแจ้งปัญหา

แก้บางส่วน: แทนเนื้อหาเดิมภายใน <body>...</body> ของ index.html

<body>
  <header>
    <h1>ระบบแจ้งปัญหา IT</h1>
    <p>แจ้งและติดตามปัญหาการใช้งานระบบภายใน</p>
  </header>
 
  <main>
    <section>
      <h2>แจ้งปัญหาใหม่</h2>
      <!-- เพิ่ม form ตรงนี้ -->
    </section>
  </main>
 
  <footer>
    <p>ฝ่ายเทคโนโลยีสารสนเทศ</p>
  </footer>
</body>

Slide 8: Form คือจุดรับข้อมูลจากผู้ใช้

Form รวบรวมข้อมูลที่ผู้ใช้กรอกและเตรียมส่งเข้าสู่ระบบ

<form>
  <label for="title">หัวข้อปัญหา</label>
  <input id="title" name="title" type="text" required />
 
  <button type="submit">ส่งข้อมูล</button>
</form>

ตอนนี้ Form ยังไม่บันทึกข้อมูล เพราะเรายังไม่มี Backend แต่ Browser สามารถตรวจ required และเริ่มกระบวนการ Submit ได้

Slide 9: `label`, `id` และ `name` ต้องเชื่อมกัน

<label for="reporterEmail">อีเมลผู้แจ้ง</label>
<input
  id="reporterEmail"
  name="reporterEmail"
  type="email"
  required
/>

for ของ Label ต้องตรงกับ id ของ Input
id ใช้ระบุ Element บนหน้าเว็บ
name คือชื่อข้อมูลที่จะถูกส่งจาก Form
type="email" ช่วยให้ Browser ตรวจรูปแบบอีเมลเบื้องต้น
required ป้องกันการส่ง Field ว่าง

Slide 10: เลือก Control ให้เหมาะกับข้อมูล

<!-- ข้อความสั้น -->
<input name="title" type="text" />
 
<!-- อีเมล -->
<input name="reporterEmail" type="email" />
 
<!-- ข้อความยาว -->
<textarea name="description" rows="5"></textarea>
 
<!-- ส่ง Form -->
<button type="submit">ส่งข้อมูล</button>

Project นี้ใช้เฉพาะ Control ที่จำเป็นต่อ Form แจ้งปัญหา ส่วน Input Type อื่นสามารถเรียนเพิ่มเมื่อ Project ต้องใช้จริง

Slide 11: HTML ที่ดีต้องใช้งานได้กับคนหลากหลาย

พื้นฐาน Accessibility ที่ใช้กับหน้านี้:

เรียง Heading จาก h1 ไป h2
Input ทุกช่องมี Label ที่เชื่อมด้วย for และ id
ปุ่มมีข้อความที่บอกการทำงานชัดเจน
ใช้ Semantic Tag เพื่อบอกโครงสร้าง
ไม่ใช้ Placeholder แทน Label

โครงสร้างที่ชัดช่วยทั้งผู้ใช้ Keyboard, Screen Reader และผู้พัฒนาที่ต้องอ่าน Code ต่อจากเรา

Slide 12: เพิ่มข้อมูลผู้แจ้งใน Form

แก้บางส่วน: วาง Code นี้แทน  ใน index.html

<form>
  <fieldset>
    <legend>ข้อมูลปัญหา</legend>
 
    <div class="form-group">
      <label for="reporterName">ชื่อผู้แจ้ง</label>
      <input id="reporterName" name="reporterName" type="text" required />
    </div>
 
    <div class="form-group">
      <label for="reporterEmail">อีเมลผู้แจ้ง</label>
      <input id="reporterEmail" name="reporterEmail" type="email" required />
    </div>
 
    <!-- เพิ่มข้อมูลปัญหาต่อจากนี้ -->
  </fieldset>
</form>

fieldset ใช้รวม Field ที่เกี่ยวข้องกันเป็นกลุ่ม ส่วน legend คือชื่อที่อธิบายว่ากลุ่มนี้เก็บข้อมูลอะไร

form-group เตรียมไว้ให้ CSS จัด Label และ Input ในชั่วโมงถัดไป

Slide 13: เพิ่มข้อมูลปัญหาและปุ่ม Submit

แก้บางส่วน: แทน Comment 

<div class="form-group">
  <label for="title">หัวข้อปัญหา</label>
  <input id="title" name="title" type="text" required />
</div>
 
<div class="form-group">
  <label for="description">รายละเอียดปัญหา</label>
  <textarea id="description" name="description" rows="5" required></textarea>
</div>
 
<button type="submit">ส่งข้อมูล</button>

ลองกด Submit โดยไม่กรอกข้อมูล Browser ควรแจ้งให้กรอก Field ที่มี required

Slide 14: ตรวจผลลัพธ์ก่อนเริ่ม CSS

ชื่อ Field ทั้ง 4 ต้องตรงกันตั้งแต่ HTML จนถึง TypeScript ในวันถัดไป:

HTML `name`	ข้อมูล
`reporterName`	ชื่อผู้แจ้ง
`reporterEmail`	อีเมลผู้แจ้ง
`title`	หัวข้อปัญหา
`description`	รายละเอียดปัญหา

เปิด index.html แล้วตรวจว่าเห็นส่วนหัว Form ทั้ง 4 Field ปุ่ม Submit และส่วนท้ายครบ

ชั่วโมงถัดไปเราจะสร้าง style.css และใช้ form-group จัดหน้า Form ให้อ่านง่ายขึ้น