HTML và cấu trúc trang web

Từ văn bản nguồn đến trang hiển thị

Trình duyệt đọc mã HTML để dựng nội dung trang. Bạn có thể viết một tệp nhỏ, lưu với đuôi .html rồi mở bằng trình duyệt; chưa cần đưa lên Internet để quan sát kết quả.

Thẻ và phần tử

Quan sát sơ đồ để nối các khái niệm với nhau.

Cây cấu trúc HTML: html có head và body; title trong head, h1 và p trong body.

HTML là ngôn ngữ đánh dấu siêu văn bản. Phần tử thường gồm thẻ mở, nội dung và thẻ đóng, chẳng hạn `<p>Chào bạn</p>`. Thuộc tính đặt trong thẻ mở để bổ sung thông tin. Một số phần tử rỗng như `br`, `img`, `meta` không có thẻ đóng. `html` bao phần tài liệu, `head` chứa thông tin như tên trang và bộ mã kí tự, còn `body` chứa nội dung chính được hiển thị. `<!DOCTYPE html>` là khai báo loại tài liệu, không phải thẻ chứa nội dung.

Một trang giới thiệu ngắn

```html <!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <title>Góc học tập</title> </head> <body> <h1>Chào bạn</h1> <p>Cùng ôn Tin học.</p> </body> </html> ``` Tên trên tab trình duyệt là “Góc học tập”; tiêu đề trong nội dung là “Chào bạn”. Hai phần nằm ở các phần tử khác nhau nên không bắt buộc giống nhau.

Thử vận dụng

Phần tử nào đặt tên trang trên tab trình duyệt?

ApBh1CtitleDbody

Đọc quan hệ lồng nhau

Trong `<p>Học <strong>đều đặn</strong>.</p>`, phần tử `strong` nằm trong `p`. Đóng `strong` trước rồi đóng `p`. Khi trình duyệt cố sửa mã sai để hiển thị, việc nhìn thấy chữ vẫn chưa chứng minh mã đã đúng cấu trúc.

Ví dụ xem cách làm

Viết một đoạn HTML có tiêu đề cấp 1 “Tủ sách” và đoạn văn “Mỗi tuần một cuốn sách”.

Ví dụ xem cách làm

Trong `<img src="bia.png" alt="Bìa sách">`, chỉ ra tên phần tử và hai thuộc tính.

Những điều cần nhớ

Đọc HTML từ cấu trúc bên ngoài vào phần tử bên trong. Phân biệt thẻ, thuộc tính và nội dung; tên tab thuộc title, nội dung chính thuộc body.