คาบที่ 1: หน้าเว็บแรกในชีวิต 🌐

เป้าหมายคาบนี้: เข้าใจว่าโค้ดคืออะไร และสร้างหน้าเว็บของตัวเองได้ 1 หน้า — ใช่ คาบแรกก็ได้ของจริงเลย

1. โค้ดคืออะไรกันแน่?

โค้ดคือ ไฟล์ข้อความธรรมดา ที่เขียนตาม "กติกา" ที่คอมพิวเตอร์เข้าใจ แค่นั้นเอง ไม่มีเวทมนตร์อะไร

นึกภาพสูตรอาหาร: ถ้าเขียนขั้นตอนไว้ชัดๆ ใครก็ทำตามได้เป๊ะ คอมพิวเตอร์ก็คือ "คนครัวที่ทำตามเป๊ะมาก แต่คิดเองไม่เป็นเลย" — งานของเราคือเขียนสั่งให้ชัด

กติกาแรกที่เราจะเรียนชื่อ HTML — ภาษาสำหรับบอกเบราว์เซอร์ว่า "หน้าเว็บนี้มีอะไรอยู่ตรงไหนบ้าง"

2. สร้างไฟล์แรก (ลงมือเลย!)

สร้างไฟล์ใหม่ชื่อ hello.html
พิมพ์ตามนี้ — พิมพ์เองทีละตัวนะ ห้าม copy! ผิดตรงไหนเดี๋ยวได้เรียนรู้จากตรงนั้นแหละ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>เว็บแรกของฉัน</title>
</head>
<body>
  <h1>สวัสดีโลก!</h1>
  <p>นี่คือหน้าเว็บแรกที่ฉันเขียนเองกับมือ</p>
</body>
</html>

เซฟไฟล์ แล้วดับเบิลคลิกเปิดมัน — เบราว์เซอร์จะเด้งขึ้นมาพร้อมข้อความของคุณ 🎉

เห็นข้อความตัวเองบนหน้าเว็บเมื่อไหร่ = คุณเขียนโค้ดเป็นแล้ว 1 ภาษา (เบื้องต้น)

3. เมื่อกี้พิมพ์อะไรลงไปบ้าง?

สิ่งที่อยู่ใน < > เรียกว่า แท็ก (tag) — เหมือนป้ายกำกับว่า "ตรงนี้คืออะไร"

แท็กส่วนใหญ่มาเป็นคู่: เปิด <h1> ปิด </h1> (ตัวปิดมี /) — ของที่อยู่ระหว่างคู่คือเนื้อหาของมัน
<h1> = หัวข้อใหญ่สุด (heading 1)
<p> = ย่อหน้า (paragraph)
<head> = ข้อมูลกำกับหน้า (คนไม่เห็น) / <body> = ทุกอย่างที่โชว์บนจอ
<meta charset="utf-8"> = บอกเบราว์เซอร์ว่าใช้ตัวอักษรแบบสากล — ถ้าไม่มีบรรทัดนี้ ภาษาไทยจะกลายเป็นตัวประหลาด ลองลบดูก็ได้ แล้วใส่กลับ 😄

4. แท็กที่ใช้บ่อย — ลองเพิ่มทีละอัน

ลองเพิ่มเข้าไปใน <body> ทีละบรรทัด เซฟ แล้วกด refresh เบราว์เซอร์ (F5) ดูผลทุกครั้ง:

<h2>หัวข้อรอง</h2>
<ul>
  <li>ของในลิสต์ ชิ้นที่ 1</li>
  <li>ชิ้นที่ 2</li>
</ul>
<a href="https://www.youtube.com">ลิงก์ไป YouTube</a>
<img src="https://placehold.co/300x200" alt="รูปตัวอย่าง">

<ul> + <li> = ลิสต์แบบจุด
<a href="..."> = ลิงก์ (href คือปลายทาง)
<img src="..."> = รูปภาพ (src คือที่อยู่ของรูป — แท็กนี้ไม่มีตัวปิด)

เกมประจำคาบ — เดา-ลอง-เห็น: ก่อนกด F5 ทุกครั้ง ให้เดาก่อนว่าหน้าจอจะเปลี่ยนยังไง เดาถูกหรือผิดไม่สำคัญ สำคัญที่ได้เดา 🎲

5. ภารกิจประจำคาบ: หน้าแนะนำตัว

สร้างไฟล์ใหม่ about-me.html ให้มีครบทุกข้อ:

ชื่อ (หรือชื่อในเกม) เป็นหัวข้อใหญ่
ย่อหน้าแนะนำตัว 2-3 ประโยค
ลิสต์ "ของโปรด 3 อย่าง"
รูป 1 รูป
ลิงก์ไปเว็บที่ชอบ 1 ลิงก์

ติดตรงไหน ถามครูได้เลย — แต่ลองเดาก่อนนะ 😉

6. เช็คความเข้าใจ

ตอบเองก่อน แล้วค่อยกดดูเฉลย:

1. แท็กเปิดกับแท็กปิด ต่างกันตรงไหน?

ตัวปิดมีเครื่องหมาย / นำหน้าชื่อแท็ก เช่น <h1> เปิด และ </h1> ปิด

2. ถ้าตัวหนังสือไทยบนเว็บกลายเป็นตัวประหลาด ต้องเช็คบรรทัดไหน?

<meta charset="utf-8"> ใน <head> — มีครบมั้ย สะกดถูกมั้ย

3. อยากให้มีรูปหมาบนเว็บ ต้องใช้แท็กอะไร?

<img src="ที่อยู่ของรูป">

การบ้าน (ชิ้นเล็กๆ)

เพิ่มหมวดใหม่ในหน้า about-me อีก 1 หมวด เช่น "เกมที่เล่นอยู่ตอนนี้" หรือ "เพลงที่ฟังบ่อย" — ใช้ <h2> + ลิสต์ แล้วคาบหน้าเอามาโชว์ครู 🚀

← กลับหน้าแรก · คาบที่ 2 (CSS) เร็วๆ นี้