Bài 1: Tìm hiểu về cấu trúc trang web, cài đặt công cụ và tạo dự án đầu tiên

Bài hướng dẫn thực hành — Từ đầu tới cuối (HTML5 + VS Code + Live Server)

Dưới đây là hướng dẫn thực hành step-by-step

Trước khi bắt đầu (yêu cầu)

1 — HTML5 là gì?

2 — VS Code: tính năng chính và cách tải/cài

  1. Tính năng nổi bật:

    • Trình soạn thảo nhẹ, hỗ trợ nhiều ngôn ngữ.
    • IntelliSense (gợi ý mã), Emmet (viết HTML nhanh), tích hợp Terminal, Git, Debugger.
    • Hệ sinh thái extension phong phú (ở đây ta dùng Live Server).

  2. Tải & cài:

    • Truy cập: https://code.visualstudio.com/ → tải bản phù hợp (Windows / macOS / Linux).
    • Chạy file cài đặt và làm theo hướng dẫn hệ điều hành.

  3. Mẹo: phím tắt hay dùng: Ctrl+Shift+P (Command Palette), Ctrl+P (mở file nhanh), Ctrl+Shift+X (mở Extensions).

3 — Cài extension Live Server

  1. Mở VS Code → Extensions (biểu tượng 4 ô vuông hoặc Ctrl+Shift+X).
  2. Tìm: Live Server (tác giả phổ biến: Ritwick Dey).
  3. Click Install.
  4. Sau cài, sẽ có nút Go Live ở góc phải dưới (status bar).

4 — Tạo & quản lý thư mục trong VS Code

  1. Tạo folder cho dự án ở đâu đó trong máy tính (ví dụ my-first-site):

Trong VS Code: File → Open Folder... → chọn my-first-site. 2. Trong Explorer (cột trái), click chuột phải → New File hoặc New Folder. 3. Tạo index.html bằng New File → nhập index.html.

5 — Tạo file index.html

  1. Trong file index.html, gõ ! hoặc html:5 → nhấn Tab để tạo boilerplate HTML nhanh.
  2. Hoặc copy-paste đoạn HTML sau

Đoạn mã gốc của bạn (nguyên văn):

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trang web của tôi - ví dụ ngắn gọn</title>
  <meta name="description" content="Mô tả ngắn trang web — không quá 160 ký tự để hiển thị tốt trên search engine.">
  <link rel="shortcut icon" href="https://hoanghamobile.com/tin-tuc/wp-content/uploads/2024/07/anh-mat-cuoi-3.jpg" type="image/x-icon">
</head>
<body>
  <h1 id="title" class="demo" title="Hello title">Tiêu đề h1</h1>

  <a href="https://dantri.vn" target="_blank" rel="noopener noreferrer">Go to dân trí</a>
  <a href="https://facebook.com" target="_blank" rel="noopener noreferrer">Go to facebook</a>
  <a href="about.html">Go to about</a>
  <a href="#bottom">Go to bottom</a>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, reiciendis!
  </p>

  <ul>
    <li>Danh sách không thứ tự</li>
    <li>Danh sách không thứ tự</li>
  </ul>

  <ol>
    <li>Danh sách có thứ tự</li>
    <li>Danh sách có thứ tự</li>
  </ol>

  <p>
    <img width="100" src="https://hoanghamobile.com/tin-tuc/wp-content/uploads/2024/07/anh-mat-cuoi-3.jpg" alt="Ảnh mặt cười">
  </p>

  <h2 id="bottom">Bottom</h2>
  <a href="#title">Go to top</a>
</body>
</html>

Giải thích chi tiết từng phần của đoạn mã (line-by-line / block)

Mình sẽ giải thích theo từng khối để dễ hiểu.

<!DOCTYPE html>

<html lang="vi"> ... </html>

<head> — thông tin metadata

<body> — phần hiển thị nội dung

Một vài ghi chú thực hành / best-practice (nên áp dụng)

Phiên bản chỉnh sửa gợi ý (sửa lỗi nhỏ + best practices)

Bạn có thể dùng phiên bản này để học tốt hơn:

6 — Cách chạy dự án bằng Live Server (thực tế)

  1. Mở folder dự án trong VS Code (File → Open Folder).

  2. Mở file index.html.

  3. Bấm Save (Ctrl+S) nếu mới tạo/paste.

  4. Chạy Live Server:

    • Cách 1: Click nút Go Live (góc phải dưới của VS Code).
    • Cách 2: Click phải vào index.html → chọn Open with Live Server.
    • Cách 3: Ctrl+Shift+P → gõ Live Server: Open with Live Server.

  5. Trình duyệt sẽ mở tab với địa chỉ dạng http://127.0.0.1:5500/index.html hoặc http://localhost:5500/index.html.

  6. Tự động reload: Khi bạn sửa file và lưu (Ctrl+S), Live Server sẽ tự reload trang trong trình duyệt — rất tiện để thực hành.

  7. Dừng Live Server: bấm Port/ Go Live để toggle hoặc click biểu tượng Stop.

Cấu hình thêm: vào File → Preferences → Settings → tìm liveServer để đổi port, mở ở trình duyệt mặc định, root folder, v.v.

Mẹo + lỗi thường gặp