Sách giáo khoa Tin học 12

Giải Hoạt động 2 trang 42 SGK Tin học 12

Bài 7. HTML và cấu trúc trang web Đã kiểm chéo

Đề bài

Tìm hiểu cấu trúc cơ bản của một tệp HTML

Quan sát tệp HTML sau, em có nhận xét gì về cấu trúc chung của một trang web?

Bài có hình vẽ / bảng trong sách — xem ở trang 42 · mở sách.

Mô tả hình bằng lời

Hình 7.2. Cấu trúc tệp HTML — tệp newpage.html gồm 16 dòng:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>Tên trang Web</title>
6 </head>
7 <body>
8 <div>
9 <h1>Trang Web và HTML </h1>
10 <p>Đây là dòng đầu tiên</p>
11 <hr>
12 <p>Đây là dòng cuối cùng </p>
13 </div>
14 <p> Trang này được lập bởi<em> nhóm bạn bè</em> </p>
15 </body>
16 </html>

Lời giải

Nhận xét về cấu trúc chung của một trang web (tệp HTML):

Quan sát tệp *newpage.html* ở Hình 7.2, ta thấy một trang web được mô tả bằng một tệp HTML có cấu trúc chung gồm các phần sau:

1. Dòng khai báo kiểu tài liệu

Dòng đầu tiên `<!DOCTYPE html>` (dòng 1) khai báo tài liệu được viết theo chuẩn HTML (HTML5). Dòng này đặt ở ngoài cùng, trước toàn bộ nội dung.

2. Phần tử gốc `<html> ... </html>`

Toàn bộ nội dung của trang web được đặt trong cặp thẻ `<html>` (dòng 2) và `</html>` (dòng 16). Đây là phần tử gốc, bao chứa tất cả các phần tử còn lại. Bên trong nó gồm hai phần chính đặt kế tiếp nhau là `head` và `body`.

3. Phần đầu `<head> ... </head>`

Cặp thẻ `<head>` (dòng 3) và `</head>` (dòng 6) chứa các thông tin khai báo chung cho trang web, không hiển thị trực tiếp trong vùng nội dung của trang:
- `<meta charset="utf-8">` (dòng 4): khai báo bảng mã kí tự là UTF-8 để hiển thị đúng tiếng Việt.
- `<title>Tên trang Web</title>` (dòng 5): đặt tiêu đề của trang, dòng chữ này hiện trên thanh tiêu đề (tab) của trình duyệt.

4. Phần thân `<body> ... </body>`

Cặp thẻ `<body>` (dòng 7) và `</body>` (dòng 15) chứa toàn bộ nội dung sẽ hiển thị trên trang web (các tiêu đề, đoạn văn bản, đường kẻ ngang...). Trong ví dụ gồm: thẻ `<div>` nhóm một khối nội dung (các dòng 8–13) với tiêu đề `<h1>`, các đoạn văn `<p>`, đường kẻ ngang `<hr>`; và một đoạn `<p>` khác (dòng 14) có chứa chữ in nghiêng `<em>`.

5. Về cách dùng các thẻ

- Các thẻ HTML thường đi thành cặp: thẻ mở `<tên>` và thẻ đóng `</tên>` (ví dụ `<p>...</p>`, `<h1>...</h1>`).
- Một số thẻ là thẻ đơn, không có thẻ đóng, như `<meta>` (dòng 4) và `<hr>` (dòng 11).
- Các phần tử được lồng nhau theo thứ bậc (ví dụ `<h1>`, `<p>`, `<hr>` nằm trong `<div>`, `<div>` nằm trong `<body>`).

Kết luận: Một trang web (tệp HTML) nói chung có cấu trúc: dòng khai báo `<!DOCTYPE html>`, rồi phần tử gốc `<html>` bao gồm hai phần là phần đầu `<head>` (chứa thông tin khai báo, không hiển thị) và phần thân `<body>` (chứa nội dung hiển thị của trang).

Đáp số

Tệp HTML gồm: dòng khai báo <!DOCTYPE html>; phần tử gốc <html> chứa hai phần — <head> (thông tin khai báo, không hiển thị như meta, title) và <body> (nội dung hiển thị của trang). Các thẻ thường đi theo cặp mở/đóng và lồng nhau, một số là thẻ đơn (<meta>, <hr>).

Lời giải do Thư viện nhà trường biên soạn, giải và kiểm chéo độc lập theo SGK 2026-2027.