BÀI 1: TỔNG QUAN VỀ WEBSITE VÀ CÔNG CỤ HIỆN ĐẠI

Tháng mười hai 29, 2025
 |  Không có bình luận

1.1. Các khái niệm cơ bản về Website

1.1.1. Internet và WWW

  • Giải thích:

    • Internet: Là hạ tầng, mạng lưới dây cáp và sóng kết nối các máy tính trên toàn thế giới (Giống như hệ thống đường giao thông).

    • WWW (World Wide Web): Là các trang web, nội dung chạy trên nền tảng Internet (Giống như các tòa nhà, cửa hàng nằm trên hệ thống đường đó).

  • Ví dụ: Bạn bật Wifi (kết nối Internet) nhưng chưa mở trình duyệt thì chưa vào WWW. Khi bạn mở Chrome gõ youtube.com để xem video, đó là bạn đang dùng WWW.

1.1.2. Web Browser (Trình duyệt) & Web Server (Máy chủ)

  • Giải thích:

    • Web Browser (Client): Là người đi mua hàng. Nó gửi yêu cầu xem nội dung.

    • Web Server: Là người bán hàng (kho hàng). Nó chứa các file web và gửi dữ liệu khi trình duyệt yêu cầu.

  • Ví dụ:

    • Browser: Chrome, Firefox, Safari trên điện thoại của bạn.

    • Server: Một máy tính siêu mạnh của Google đặt tại Singapore chứa dữ liệu Youtube.

1.1.3. Domain (Tên miền) & Hosting (Lưu trữ)

  • Giải thích:

    • Domain: Là địa chỉ nhà (dễ nhớ thay vì nhớ tọa độ GPS/IP).

    • Hosting: Là mảnh đất hoặc ngôi nhà chứa đồ đạc bên trong (chứa mã nguồn, hình ảnh).

  • Ví dụ:

    • vnexpress.net là Domain (Địa chỉ).

    • Dung lượng 5GB trên máy chủ chứa hàng nghìn bài báo, video của VnExpress là Hosting.

    • Chức năng: Nếu có Hosting (nhà) mà không có Domain (địa chỉ), khách không biết đường đến. Nếu có Domain mà không có Hosting, khách đến nơi chỉ thấy bãi đất trống (web lỗi).

1.2. Nguyên lý hoạt động (Mô hình Client – Server)

Để dễ hiểu, hãy sử dụng Ví dụ đi ăn nhà hàng:

  1. Request (Yêu cầu):

    • Hành động: Khách hàng (Client/Browser) xem Menu và gọi món “Cơm gà”.

    • Kỹ thuật: Trình duyệt gửi HTTP Request GET /com-ga đến Server.

  2. Processing (Xử lý):

    • Hành động: Nhà bếp (Server) nhận đơn, đầu bếp nấu ăn, lấy nguyên liệu từ tủ lạnh (Database).

    • Kỹ thuật: Server (Apache/PHP) nhận yêu cầu, truy vấn dữ liệu từ MySQL (nếu cần).

  3. Response (Phản hồi):

    • Hành động: Phục vụ mang đĩa “Cơm gà” ra bàn.

    • Kỹ thuật: Server gửi gói tin HTTP Response chứa mã HTML/CSS/Ảnh về cho trình duyệt.

  4. Rendering (Hiển thị):

    • Hành động: Khách hàng nhìn thấy món ăn đẹp mắt và thưởng thức.

    • Kỹ thuật: Trình duyệt đọc mã HTML/CSS và vẽ lên màn hình giao diện web cho người dùng xem.

1.3. Cấu trúc chuẩn của một trang HTML5

Dưới đây là mã lệnh và giải thích chức năng từng dòng:

HTML

 
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Trang web của An</title>
</head>
<body>
    <h1>Xin chào thế giới</h1>
    <p>Tôi đang học thiết kế web.</p>
</body>
</html>

  • <!DOCTYPE html>

    • Chức năng: Tuyên bố với trình duyệt: “Đây là HTML5 hiện đại, không phải HTML4 cũ kỹ”.

    • Ví dụ: Nếu thiếu dòng này, một số trình duyệt cũ sẽ hiển thị sai giao diện (chế độ Quirks mode).

  • <html lang="vi">

    • Chức năng: Thẻ gốc chứa toàn bộ trang web. lang="vi" báo cho Google biết trang này viết bằng tiếng Việt.

    • Ví dụ: Khi bạn vào trang tiếng Anh, trình duyệt hiện thông báo “Bạn có muốn dịch trang này không?” là nhờ thuộc tính lang.

  • <head> ... </head>

    • Chức năng: Chứa thông tin cấu hình (Metadata) dành cho máy, người dùng không nhìn thấy trực tiếp nội dung này trên trang trắng.

    • Ví dụ: Chứa tiêu đề tab trình duyệt, từ khóa cho Google tìm kiếm (SEO), file CSS.

  • <meta charset="UTF-8">

    • Chức năng: Bảng mã ký tự quốc tế. Giúp hiển thị đúng tiếng Việt có dấu.

    • Ví dụ: Nếu thiếu dòng này hoặc dùng sai (như ASCII), chữ “Xin chào” sẽ bị lỗi thành “Xin chà o”.

  • <body> ... </body>

    • Chức năng: Chứa mọi thứ người dùng nhìn thấy trên màn hình.

    • Ví dụ: Văn bản, hình ảnh, video, nút bấm đều phải nằm trong thẻ này.

1.4. Công cụ thiết kế: Visual Studio Code (VS Code)

  • Tại sao dùng VS Code?

    • Chức năng: Tô màu mã lệnh (Syntax highlighting), gợi ý code (IntelliSense).

    • Ví dụ: Khi gõ thẻ <img>, VS Code tự động gợi ý các thuộc tính src, alt và tô màu khác nhau giúp mắt dễ phân biệt đâu là thẻ, đâu là nội dung.

  • Giải thích các Extension (Tiện ích mở rộng) bắt buộc:

    1. Live Server:

      • Chức năng: Tạo một máy chủ ảo ngay trên máy cá nhân, tự động tải lại trang (Auto-reload).

      • Ví dụ: Bình thường sửa code xong phải bấm Ctrl+S rồi qua Chrome bấm F5 (làm 100 lần rất mỏi tay). Với Live Server, vừa sửa code xong, trình duyệt bên cạnh tự đổi ngay lập tức.

    2. Auto Rename Tag:

      • Chức năng: Đổi tên thẻ mở, thẻ đóng tự đổi theo.

      • Ví dụ: Muốn đổi thẻ <h1>Tiêu đề</h1> thành <h2>. Bạn chỉ cần sửa số 1 ở thẻ mở, thẻ đóng tự động sửa theo. Tránh việc quên sửa thẻ đóng gây lỗi.

1.5. Cấu trúc thư mục dự án Web

  • Quy tắc đặt tên:

    • Quy tắc: khong-dau, khong cach, chu-thuong.

    • Chức năng: Đảm bảo tương thích tuyệt đối khi đẩy lên Server Linux (Server phân biệt hoa thường và ghét dấu cách).

    • Ví dụ:

      • ❌ Sai: Hình Ảnh.jpg (Có dấu, có cách), BaiTap1.HTML (Đuôi hoa).

      • ✅ Đúng: hinh-anh.jpg, bai-tap-1.html.

  • Cây thư mục chuẩn:

    Plaintext

     
    Du-An-Web/
├── index.html       (File chính chạy đầu tiên)
├── about.html       (Trang giới thiệu)
└── assets/          (Thư mục tài sản/tài nguyên)
    ├── images/      (Chứa toàn bộ ảnh - Giúp gọn gàng)
    │   ├── logo.png
    │   └── banner.jpg
    ├── css/         (Chứa file trang trí)
    │   └── style.css
    └── js/          (Chứa file lập trình)
        └── script.js

    • Giải thích: Giống như ngăn nắp tủ quần áo. Nếu vứt tất cả file ảnh, file nhạc, file code vào chung 1 thư mục, sau này tìm rất khó. Phân chia thư mục assets giúp quản lý chuyên nghiệp.

Bài tập 1.1: Tạo cấu trúc thư mục và File

  1. Tạo một thư mục trên ổ D: tên là BaiTapThietKeWeb.

  2. Bên trong, tạo thư mục con Bai1_Hello.

  3. Mở thư mục Bai1_Hello.

  4. Khởi động Sublime Text

  5. Tạo file mới đặt tên là index.html.

  6. Lưu ý: Quy tắc đặt tên file: Chữ thường, không dấu, không khoảng trắng (dùng gạch nối - hoặc gạch dưới _).

Bài tập 1.2: Tạo trang giới thiệu cá nhân. Phiếu hướng dẫn

Yêu cầu:

  1. Tạo một trang HTML với nội dung giới thiệu bản thân.
  2. Trang phải có:
    • Tiêu đề (sử dụng thẻ <h1>).
    • Đoạn văn ngắn giới thiệu (sử dụng thẻ <p>).
    • Một danh sách không thứ tự (unordered list) về sở thích cá nhân (sử dụng <ul> và <li>).
    • Một danh sách có thứ tự (ordered list) về các công việc hàng ngày của bạn (sử dụng <ol> và <li>).
    • Thêm một hình ảnh minh họa (sử dụng thẻ <img>).
  3. Trang cần có một đường dẫn liên kết đến một website yêu thích của bạn (sử dụng thẻ <a>).

Bài tập 1.3: Thiết kế menu nhà hàng đơn giản. Phiếu hướng dẫn

Yêu cầu:

  1. Tạo một trang HTML để giới thiệu menu của một nhà hàng.
  2. Trang phải có:
    • Tiêu đề trang là “Menu Nhà Hàng” (sử dụng thẻ <title>).
    • Một tiêu đề lớn giới thiệu tên nhà hàng (sử dụng <h1>).
    • Một đoạn văn mô tả ngắn về nhà hàng (sử dụng <p>).
    • Một danh sách các món ăn trong menu (sử dụng <ul> và <li>).
    • Định nghĩa một danh sách từ vựng (definition list) để giải thích nghĩa của một số thuật ngữ đặc biệt trong thực đơn (sử dụng <dl>, <dt>, <dd>).

Bài tập 1.4: Tạo đoạn văn bản định dạng cơ bản. Phiếu hướng dẫn

Yêu cầu:

  1. Tạo một file HTML với nội dung là một đoạn văn bản.
  2. Sử dụng các thẻ HTML để định dạng đoạn văn bản:
    • Thẻ <b> hoặc <strong> để làm chữ đậm.
    • Thẻ <i> hoặc <em> để làm chữ nghiêng.
    • Thẻ <u> để gạch dưới văn bản.
    • Sử dụng <small> để làm chữ nhỏ.
    • Sử dụng <mark> để làm nổi bật một phần văn bản.

Bài tập 1.5: Tạo danh sách định dạng. Phiếu hướng dẫn

Yêu cầu:

  1. Tạo một danh sách không thứ tự sử dụng <ul>:
    • Các mục danh sách cần có ít nhất một từ làm đậm và một từ làm nghiêng.
  2. Tạo một danh sách có thứ tự sử dụng <ol>.

Bài tập 1.6: Thiết kế đoạn văn bản phức tạp. Phiếu hướng dẫn

Yêu cầu:

  1. Tạo một đoạn văn bản dài gồm 3 đoạn nhỏ.
  2. Áp dụng các thẻ định dạng sau cho từng đoạn:
    • Đoạn 1: Sử dụng <b>, <i>, <u>, <mark>.
    • Đoạn 2: Sử dụng <sup>, <sub>, <small>, <del>, <ins>.
    • Đoạn 3: Sử dụng kết hợp các thẻ để tạo định dạng phù hợp.1.

Bài tập 1.7: Thiết kế TRANG WEB giới thiệu về cửa hàng Máy tính.

  • Giới thiệu về cửa hàng
  • Danh sách các mặt hàng
  • Giá các mặt hàng

4. Câu hỏi ôn tập

  1. Sự khác biệt giữa Internet và WWW là gì?

  2. Tại sao phải dùng thẻ <!DOCTYPE html> ở đầu mỗi file?

  3. Vai trò của thẻ <head> và <body> khác nhau như thế nào?

  4. Tại sao không nên đặt tên file web là “Trang Chủ.html” (có dấu và khoảng trắng)?

  5. Extension “Live Server” giúp ích gì cho lập trình viên?