Bài 7: HTML và cấu trúc trang web

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản dùng để tạo ra các trang web. Khi mở một trang web, trình duyệt đọc mã HTML và hiển thị nội dung gồm tiêu đề, đoạn văn, hình ảnh, liên kết và bảng biểu. Học HTML là bước đầu tiên để tự tay xây dựng trang web.

1. Kiến thức trọng tâm

• Khái niệm HTML: HTML dùng các thẻ (tag) để đánh dấu và cấu trúc nội dung trang web. Mỗi thẻ thường có thẻ mở và thẻ đóng, ví dụ <p>...</p> tạo một đoạn văn.
• Cấu trúc cơ bản của trang web: một tài liệu HTML thường gồm:
  • <!DOCTYPE html>: khai báo đây là tài liệu HTML.
  • <html>: thẻ bao toàn bộ nội dung trang web.
  • <head>: chứa thông tin về trang như tiêu đề hiển thị trên tab trình duyệt (<title>).
  • <body>: chứa nội dung hiển thị trên trang như tiêu đề, đoạn văn, hình ảnh, liên kết.
• Một số thẻ thường dùng: <h1> đến <h6> tạo tiêu đề các cấp; <p> tạo đoạn văn; <a> tạo liên kết; <img> chèn hình ảnh; <ul>, <ol>, <li> tạo danh sách; <table> tạo bảng.
• Thuộc tính của thẻ: thuộc tính cung cấp thêm thông tin cho thẻ, ví dụ <a href="..."> chỉ địa chỉ liên kết, <img src="..."> chỉ đường dẫn hình ảnh.
• Xem kết quả: lưu tệp với đuôi .html rồi mở bằng trình duyệt để xem trang web hiển thị như thế nào.

2. Ví dụ minh họa

Ví dụ: Tạo trang web giới thiệu bản thân với tiêu đề "Giới thiệu bản thân", một đoạn văn chào mừng và một liên kết tới trang web của trường.

Lời giải:

<!DOCTYPE html>
<html>
<head>
  <title>Giới thiệu bản thân</title>
</head>
<body>
  <h1>Xin chào!</h1>
  <p>Em là học sinh lớp 12, yêu thích tin học và thiết kế web.</p>
  <a href="https://example.edu.vn">Trang web của trường</a>
</body>
</html>

Thẻ <h1> tạo tiêu đề lớn, thẻ <p> tạo đoạn văn, thẻ <a> tạo liên kết tới trang web của trường.

3. Ghi nhớ

• HTML dùng thẻ để cấu trúc nội dung trang web.
• Trang HTML gồm phần <head> và phần <body>.
• Lưu tệp với đuôi .html và mở bằng trình duyệt để xem kết quả.