เรียน HTML ด้วยการสร้างเว็บไซต์ง่ายๆ

อยากรู้ทำเว็บไซต์แต่ไม่รู้ HTML เริ่มต้นที่ไหน? ติดตามบทช่วยสอนนี้สร้างเว็บไซต์ HTML แรกพร้อมโค้ดตัวอย่าง!

จะครอบคลุม 3 เรื่อง:

1. HTML คืออะไร
2. ไวยากรณ์ HTML พื้นฐาน
3. สร้างเว็บไซต์ local บนคอมพิวเตอร์

เนื้อหาสำหรับผู้เริ่มต้นจริงจัง ไม่มี CSS/JavaScript — เว็บจะไม่สวยงาม แต่เน้นทำความเข้าใจ HTML และการทำงานพื้นฐาน

HTML คืออะไร?

HTML = HyperText Markup Language วิธีแสดงข้อมูลบนหน้าเว็บในเบราว์เซอร์

สำคัญ: HTML ไม่ใช่ ภาษาโปรแกรมมิ่ง (Programming language) — เป็น Markup language ภาษาโปรแกรมเช่น PHP, Java ใช้ logic/conditions ควบคุมเนื้อหา HTML ไม่ทำได้ แต่สำคัญมาก เพราะทุกเว็บไซต์ประกอบด้วย HTML

เปิดไฟล์ HTML ในเบราว์เซอร์

สร้างไฟล์ HTML บนคอมพิวเตอร์ แล้วเปิดในเบราว์เซอร์ได้เลย (เป็น local ไม่ได้อยู่บนอินเทอร์เน็ต) เว็บจริงไฟล์เก็บบนเซิร์ฟเวอร์ แตกระบวนการพื้นฐานคล้ายกัน

ขั้นตอนสร้างไฟล์:

1. ไปที่ Desktop หรือที่ต้องการ คลิกขวา > New > Text Document
2. ตั้งชื่อ index.html (ไม่ใช่ .txt) — ถ้าไม่เห็น副檔名 ใช้แท็บ View > ติ๊ก File name extensions
3. เปิดไฟล์ในเบราว์เซอร์: ดับเบิลคลิกถ้ามีไอคอน Chrome หรือ คลิกขวา > Open with > เลือกเบราว์เซอร์
4. จะเห็นหน้าว่าง — ปกติ เพราะยังไม่มีโค้ด

แก้ไขไฟล์

ใช้ code editor: VS Code, Notepad++, Sublime, Atom, Brackets — เปิดไฟล์ใน editor และเบราว์เซอร์พร้อมกัน แล้วเริ่มเขียนโค้ด!

HTML Tags

HTML ประกอบด้วย Tags — ข้อความพิเศษที่ "mark up" ส่วนต่างๆ ของหน้าเว็บ บอกเบราว์เซอร์ให้แสดงเนื้อหาภายในตามรูปแบบที่กำหนด

ตัวอย่าง: <b>extremely excited!!!!!</b> — タグ <b> ทำให้ตัวหนา

โครงสร้าง HTML Tag

• Opening tag: <b>
• Closing tag: </b> (มี slash นำหน้า)

ทั้งคู่บอกเบราว์เซอร์: ทำให้ข้อความระหว่างทะกคตัวหนา — tags เองจะไม่แสดงบนหน้าจอ

โครงสร้างพื้นฐานของ HTML Document

Doctype และ HTML tags

Tag แรก: <!DOCTYPE html> — บอกเบราว์เซอร์ว่าเป็น HTML5 ไม่ต้องมี closing tag

ต่อด้วย <html>...</html> ครอบทุกอย่าง — ดูซ้ำซ้อนแต่จำเป็น เพื่อให้ทุกอย่าง繼承คุณสมบัติ HTML

Head และ Body sections

ภายใน <html> แบ่ง 2 ส่วน:

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

• <head>: ข้อมูลเกี่ยวกับเว็บ โหลด CSS/JS (วันนี้ไม่ครอบคลุม)
• <body>: เนื้อหาหลักที่เห็นบนหน้าเว็บ — ย้ายประโยคแรกเข้าไปใน body

Basic Head Tags

Meta Tags

<meta charset="utf-8"> — กำหนด character encoding UTF-8 มาตรฐานโลก แปลงตัวอักษร/สัญลักษณ์เป็น bytes ให้คอมพิวเตอร์เข้าใจ

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> — สำคัญสำหรับ responsive ให้ความกว้างเว็บเท่าอุปกรณ์ initial-scale=1 = ไซต์ไม่ซูมเข้า/ออก

Title Tag

<title>My First Website</title> — ตั้งชื่อหน้าเว็บ แสดงบนแท็บเบราว์เซอร์

Head 完成版:

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Website</title> </head>

Basic Body Tags

Body tags ควบคุมเนื้อหาที่เห็น — หลายตัวคล้ายฟีเจอร์ Word: หัวข้อ ตัวหนา リスト ตาราง

บางตัวใช้ไม่ค่อยแล้วเพราะ CSS ทำได้ดีกว่า แต่ควรรู้จักพื้นฐาน

Header Tags (H1-H6)

<h1> ถึง <h6> — <h1> สำคัญสุด ใช้กับหัวข้อหน้าเว็บ

เพิ่ม <h1>My First Website</h1> <h2>An HTML Playground</h2> ... จนถึง h6

ขนาดฟอนต์เล็กลงจาก h1 ถึง h6 — เว็บส่วนใหญ่ใช้ h1, h2, h3 เท่านั้น

Paragraph (<p>)

<p> แยกเนื้อหาเป็นบล็อก ใช้ lorem ipsum (ข้อความ Latin นิยมใน publishing) เป็น placeholder

<p>Lorem ipsum dolor sit amet...</p> <p>Maecenas feugiat iaculis...</p>

เบราว์เซอร์เพิ่มช่องว่างระหว่างย่อหน้าอัตโนมัติ

Line Break (<br>)

เวลาต้องการขึ้นบรรทัดใหม่แต่ไม่ต้องการช่องว่างของย่อหน้า ใช้ <br>

HTML ไม่ขึ้นบรรทัดใหม่อัตโนมัติ (Enter/Spacebar ในโค้ดไม่มีผล) ต้องใช้ <br> เขียนหลายตัวติดกันได้เพื่อเพิ่มระยะห่าง

Void Elements

<br> ไม่ต้องมี closing tag — เรียกว่า void elements (ว่าง ไม่มีเนื้อหา) HTML5 เขียน <br> ไม่ต้องมี slash (XHTML ต้องมี <br/>)

Style Tags

Tags จัดรูปแบบข้อความ:

• <b> — ตัวหนา
• <i> — ตัวเอียง
• <u> — ขีดเส้นใต้
• <em> (emphasized) — มักแสดงเป็น italic
• <strong> — มักแสดงเป็น bold

ใช้ CSS แทนได้ แต่วันนี้เรียน HTML แบบ vanilla

Horizontal Rule (<hr>)

สร้างเส้นแนวนอนข้ามหน้าเว็บ <hr> — void element ไม่ต้อง closing tag

Anchor Link (<a>)

ลิงก์ = วิธีหลักนำทางอินเทอร์เน็ต <a> = anchor (เหมือนจูงเรือ)

Attribute href (hypertext reference) = URL ปลายทาง

Attribute target = "_blank" เปิดแท็บใหม่ (default เปิดแท็บเดิม)

<a href="https://www.google.com/" target="_blank">Link Text</a>

Images (<img>)

<img> void element ใช้ attribute src (source) = URL รูป

<img src="https://via.placeholder.com/600x300.jpg">

หรือดาวน์โหลดไว้โฟลเดอร์เดียวกัน: <img src="600x300.jpg">

Attribute border = ความหนาขอบ (pixels)

Lists

• Unordered list (<ul>): ไบน่าร้อย (bullet points)
• Ordered list (<ol>): หมายเลข

รายการแต่ละรายการห่อใน <li>

<ul> <li>apples</li> <li>oranges</li> <li>pineapples</li> <li>mangoes</li> <li>dragonfruit</li> </ul>

Nested Lists

ย่อยรายการได้: ใน <li>apples</li> ใส่ <ul> ใหม่ พร้อม <li> ย่อย — จะเยื้องลึกกว่า

Nesting และ Indentation

Tag อยู่ใน Tag อีกตัว = Nesting — ภายใน = Child element ภายนอก = Parent element

Indentation (เยื้อง) สำคัญมาก: ทำให้โค้ดอ่านง่าย เข้าใจโครงสร้าง parent-child ได้ไว — แนวทางปฏิบัติที่ดีสำหรับ HTML, CSS, JS และทุกภาษาโปรแกรมมิ่ง

Table

Table จัดข้อมูลแถว/คอลัมน์ — ใช้ nesting มาก สร้างตารางงบประมาณรายเดือนตัวอย่าง

สร้างตาราง

<table> ครอบทั้งหมด <tr> = table row <th> = table header (ตัวหนา จัดกึ่งกลาง) <td> = table data

<table> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td>August</td> <td>$1500</td> <td>$150</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

จัดสไตล์ตาราง

Attribute border="1" = ขอบ 1px cellpadding="10" = ช่องว่างในเซลล์ cellspacing="0" = ไม่มีช่องว่างระหว่างเซลล์

Best Practices

ทุกแถวต้องมีจำนวนคอลัมน์เท่ากัน — ไม่งั้น layout จะเสีย

Colspan และ Rowspan

colspan="2" ทำให้ header ครอบ 2 คอลัมน์ (เช่น Utilities ครอบ Electricity + Water)

rowspan="3" ทำให้เซลล์ครอบ 3 แถว (เช่น "Fall" ครอบ June, July, August)

Table 曾用于 Layout

ก่อนมี CSS ใช้ table จัดเลย์เอาต์เว็บ (header, content, footer = 3 rows) — ตอนนี้ใช้น้อยมาก ยกเว้น HTML email ที่ระบบเก่าไม่รองรับ CSS

ปิดท้าย

สร้างเว็บไซต์ HTML พื้นฐานเสร็จแล้ว!

แนะนำแหล่งเรียนต่อ: freeCodeCamp (ฟรี), The Web Developer Bootcamp by Colt Steele (Udemy)