TRANG CHỦ

Bài 7: HTML Và Cấu Trúc Trang Web

Tổng hợp khái niệm HTML, thẻ và phần tử, cấu trúc tối thiểu của tệp HTML, công cụ soạn thảo, luyện tập và lược sử HTML.

1. Mục tiêu bài học

  • Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.

2. Khái niệm cơ bản

  • HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản dùng để thiết lập cấu trúc và cách hiển thị nội dung trang web.
  • Trang web thực chất được tạo từ tệp văn bản có phần mở rộng .html/.htm; nội dung gồm văn bản và các ký tự đánh dấu (thẻ HTML) như <head>, <title>, <body>, <h1>, <p>, <div>.

2.1. Thẻ HTML (tag)

  • Thẻ là thành phần chính của HTML, thường có thẻ mở và thẻ đóng để xác định phạm vi tác dụng, ví dụ: <p> ... </p>.
  • Quy tắc/ghi nhớ: tên thẻ không phân biệt hoa–thường; có thể lồng nhau; thẻ có thể kèm thuộc tính (ví dụ: style="color:red"); có thẻ đơn như <hr />, <br />; trình duyệt không nhận nhiều dấu cách/Enter như văn bản thường.

2.2. Phần tử HTML (element)

  • Phần tử HTML = thẻ mở + nội dung + thẻ đóng; cũng có thể là thẻ đơn.
  • Mỗi tệp HTML là tập hợp phần tử, có thể độc lập, rời nhau hoặc lồng nhau.

3. Cấu trúc cơ bản của tệp HTML

Mẫu tối thiểu thường gồm:

  • <!DOCTYPE html>: khai báo kiểu tài liệu (không phải phần tử HTML).
  • <html>: gốc (root) chứa toàn bộ phần tử còn lại; thường gồm <head> và <body>.
  • <head>: thông tin chung của trang; thường có <title>, và có thể có <meta>, <style>, <script>.
  • <meta charset="UTF-8">: mô tả bộ mã hóa văn bản.
  • <title>: tiêu đề trang (hiện trong kết quả tìm kiếm, không chứa phần tử con).
  • <body>: nội dung hiển thị của trang.
  • Nhóm thẻ định dạng văn bản thường dùng: <h1>…<h6>, <p>.
Cấu trúc trang có thể hình dung như cây thông tin với quan hệ cha–con, gốc là <html>. 
<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <title>Tiêu đề trang</title>
  </head>
  <body>
    <h1>Xin chào HTML</h1>
    <p>Đoạn văn đầu tiên.</p>
  </body>
</html>

4. Công cụ soạn thảo HTML

  • Notepad/TextEdit: soạn thảo văn bản thuần, chức năng cơ bản.
  • Notepad++, Sublime Text: trình soạn thảo chuyên nghiệp, hỗ trợ nhiều ngôn ngữ, có đánh dấu cú pháp HTML.
  • Công cụ trực tuyến: soạn và xem kết quả ngay trên trình duyệt; ví dụ w3schools.com, tutorialspoint.com.

5. Luyện tập – Vận dụng (gợi ý từ SGK)

  • Bài tập phân loại phần mềm soạn thảo và trình duyệt; soạn tệp HTML đơn giản; vẽ cây phần tử; thực hành thẻ <img src="..."> khi chèn ảnh.

6. Lược sử HTML

  • Tim Berners-Lee đề xuất chuẩn đầu tiên đầu những năm 1990 tại CERN; bản đầu tiên “Các thẻ HTML” (1991); bản chuẩn hiện đại HTML5 (2014).

Từ khóa ghi nhớ

HTML Thẻ Phần tử DOCTYPE Head Title Body Meta UTF-8 HTML5