HTML: โครงสร้างของหน้าเว็บ

HTML (HyperText Markup Language) บอกเบราว์เซอร์ว่าหน้าเว็บมีอะไรบ้าง: หัวข้อ ย่อหน้า รูป ลิงก์ ปุ่ม เปรียบเหมือนโครงบ้าน ส่วนสีและการจัดวางเป็นหน้าที่ของ CSS

At a glance

Item	Details
ไฟล์	`index.html`
หน่วยพื้นฐาน	แท็ก (tag) เช่น `<h1>`, `<p>`, `<img>`
ติดตั้ง	ไม่ต้อง เบราว์เซอร์อ่านได้เลย (แนะนำ Live Server)
ดูโครงจริง	คลิกขวาที่หน้าเว็บ → Inspect → แท็บ Elements

Installation

ลง Live Server
ติดตั้ง Extension Live Server (ดูวิธี)
สร้างไฟล์
สร้างโฟลเดอร์ใหม่ เปิดด้วย code . แล้วสร้างไฟล์ index.html
ได้โครงในพริบตา
พิมพ์ ! แล้วกด Tab VS Code จะเติมโครงหน้าเว็บให้
Go Live
คลิกขวาที่ index.html → Open with Live Server หน้าเว็บรีเฟรชเองทุกครั้งที่เซฟ

Structure

แท็กเปิด <p> ต้องมีแท็กปิด </p> และแท็กซ้อนกันเป็นชั้น ๆ ข้อมูลเสริมใส่เป็น attribute ในแท็กเปิด เช่น href, src, class

<!DOCTYPE html>
<html lang="th">
  <head>
    <!-- ข้อมูลของหน้า: ไม่แสดงบนจอ -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- สิ่งที่แสดงบนจอ -->
    <header>
      <img src="me.jpg" alt="รูปของฉัน" class="avatar" />
      <h1 id="name">Natch Soros</h1>
      <p>นักศึกษาที่อยากเป็น Software Engineer</p>
      <button id="follow-btn">Follow</button>
    </header>

    <section>
      <h2>Projects</h2>
      <ul>
        <li><a href="https://github.com/you">โปรเจกต์แรก</a></li>
      </ul>
    </section>

    <script src="script.js"></script>
  </body>
</html>

แท็กที่ใช้บ่อย

แท็ก	ใช้ทำอะไร
`<h1>` … `<h6>`	หัวข้อ ใหญ่ไปเล็ก (h1 มีหน้าละ 1 ตัว)
`<p>`	ย่อหน้า
`<a href="…">`	ลิงก์
`<img src="…" alt="…">`	รูปภาพ (ไม่มีแท็กปิด)
`<ul>` / `<ol>` + `<li>`	รายการแบบจุด / แบบตัวเลข
`<div>` / `<span>`	กล่องเปล่าสำหรับจัดกลุ่ม (block / inline)
`<header>` `<main>` `<section>` `<footer>`	กล่องที่บอกความหมาย ช่วย SEO และ accessibility
`<button>`	ปุ่ม
`<form>` `<input>` `<label>`	ฟอร์มรับข้อมูล

ฟอร์ม

<form>
  <label for="email">อีเมล</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button type="submit">ส่ง</button>
</form>