Giải Luyện tập 2 trang 45 SGK Tin học 12

Lời giải

Ý tưởng chung: Theo SGK, một trang web HTML tối thiểu gồm phần tử gốc `<html>` chứa hai phần: `<head>` (phần đầu, khai báo thông tin về trang, trong đó có `<title>` là tiêu đề hiển thị trên thanh tiêu đề của trình duyệt) và `<body>` (phần thân, chứa nội dung sẽ hiển thị trên trang). Ta chọn một văn bản đơn giản, đưa vào `<body>` dưới dạng một tiêu đề và các đoạn văn bản.

a) Chọn văn bản đơn giản

Văn bản được chọn (một đoạn giới thiệu ngắn):

> Giới thiệu về Vịnh Hạ Long
>
> Vịnh Hạ Long nằm ở tỉnh Quảng Ninh, miền Bắc Việt Nam.
>
> Nơi đây nổi tiếng với hàng nghìn hòn đảo đá vôi và đã được UNESCO công nhận là Di sản thiên nhiên thế giới.

b) Soạn thảo tệp HTML

Dùng phần mềm soạn thảo văn bản thô (ví dụ Notepad), gõ nội dung sau và lưu lại với tên `trangweb.html` (chú ý lưu với phần mở rộng `.html`):

```html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Giới thiệu về Vịnh Hạ Long</title>
</head>
<body>
<h1>Giới thiệu về Vịnh Hạ Long</h1>
<p>Vịnh Hạ Long nằm ở tỉnh Quảng Ninh, miền Bắc Việt Nam.</p>
<p>Nơi đây nổi tiếng với hàng nghìn hòn đảo đá vôi và đã được UNESCO công nhận là Di sản thiên nhiên thế giới.</p>
</body>
</html>
```

Giải thích các phần tử:
- `<!DOCTYPE html>`: khai báo trang được viết theo chuẩn HTML.
- `<html>`: phần tử gốc, bao toàn bộ nội dung trang; thuộc tính `lang="vi"` cho biết ngôn ngữ là tiếng Việt.
- `<head>`: phần đầu, chứa thông tin về trang.
- `<meta charset="UTF-8">`: khai báo bảng mã UTF-8 để hiển thị đúng tiếng Việt.
- `<title>`: tiêu đề hiển thị trên thanh tiêu đề (tab) của trình duyệt.
- `<body>`: phần thân, chứa nội dung hiển thị trên trang.
- `<h1>`: tiêu đề nội dung (đề mục lớn nhất).
- `<p>`: mỗi đoạn văn bản là một phần tử đoạn.

Mở tệp bằng trình duyệt: thanh tiêu đề hiện "Giới thiệu về Vịnh Hạ Long"; trên trang hiện một dòng tiêu đề lớn và hai đoạn văn bản.

c) Vẽ cây thông tin các phần tử HTML

Mỗi phần tử là một nút; phần tử nằm bên trong phần tử nào thì là nút con của phần tử đó. Cây có dạng:

```
html
/ \
head body
/ \ / | \
meta title h1 p p
```

Mô tả theo cấp:
- Nút gốc: `html`.
- `html` có 2 con: `head` và `body`.
- `head` có 2 con: `meta` và `title`.
- `body` có 3 con: `h1`, `p`, `p` (một tiêu đề và hai đoạn văn bản).

Kiểm tra lại: cấu trúc đúng quy tắc `html` → (`head`, `body`); `title` nằm trong `head`; mọi nội dung hiển thị (`h1`, các `p`) nằm trong `body`. Số phần tử trong cây khớp với số thẻ mở trong tệp HTML đã soạn.

Đáp số