BÀI 7 - HTML VÀ CẤU TRÚC TRANG WEB

Bài 7 - HTML và cấu trúc trang web (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.7)	Hoạt động 2
Câu hỏi(t.8)	Luyện tập	Vận dụng

Khởi động (trang 39): Các em đã được làm quen với khái niệm website và trang web, cũng có thể em đã biết cách sử dụng phần mềm để tạo ra các trang web với nội dung đa dạng và phong phú, hình thức trình bày đẹp.
Tuy nhiên, có thể các em vẫn muốn biết:
- Các trang web thực chất có cấu trúc như thế nào?
- Có thể “lập trình” để tạo ra được các trang web hay không? Nếu lập trình được thì “mã nguồn” của trang web là gì?
- Các trang web có quan hệ như thế nào với ngôn ngữ HTML.
- Trang web và trình duyệt web có quan hệ như thế nào?
Em hãy tìm câu trả lời

Gợi ý trả lời:

- Một trang web thường được cấu thành từ các tệp HTML, CSS và JavaScript.
- Có thể lập trình để tạo ra được các trang web.
- Mã nguồn của một trang web được lập trình bằng các ngôn ngữ: HTML (cho cấu trúc), CSS (cho trình bày), và JavaScript (cho hành vi và tương tác).
- Ngôn ngữ HTML là mã nguồn của các trang web.
- Trình duyệt web là phần mềm được sử dụng để hiển thị và tương tác với các trang web.

1. TRANG WEB VÀ HTML

Hoạt động 1 (trang 39): Các trang web mà em vẫn thường xem được hiển thị bởi trình duyệt web (ví dụ Cốc Cốc, Firefox, Chorme). Thực chất chúng được tạo ra từ các tệp văn bản. Các tệp văn bản này được gọi là trang nguồn (hay mã nguồn) của trang web tương ứng. Quan sát hình 7.1 và nhận xét về mã nguồn. Em thấy gì từ tệp nguồn của trang web?

Gợi ý trả lời:

Trang web được thiết lập theo một ngôn ngữ có cấu trúc đặc biệt được gọi là ngôn ngữ đánh dấu siêu văn bản HTML. Các tệp HTML là tệp văn bản được cấu tạo từ các phần tử HTML, mỗi phần tử HTML gồm nội dung được đánh dấu bởi các thẻ HTML (tag) có tính năng điều khiển hoặc định dạng nội dung.

CÂU HỎI

Câu hỏi 1 (trang 41): Tệp văn bản trong Hình 7.1 có bao nhiêu phần tử HTML?

Gợi ý trả lời:

Hình 7.1 có 9 phần tử HTML.
Câu hỏi 2 (trang 41): Nêu sự giống và khác nhau giữa thẻ HTML và phần tử HTML

Gợi ý trả lời:

* Giống nhau:
- Đều là các khái niệm cơ bản liên quan đến trang web.
- Đều là các thành phần cơ bản liên quan đến các trang web.
- Đều có tác dụng định dạng nội của của văn bản của trang web.
* Khác nhau:
- Thẻ HTML bản thân là các từ khóa đặc biệt đóng vai trò cốt lõi của ngôn ngữ HTML Phần tử HTML bao gồm cả thẻ HTML + nội dung tác dụng của thẻ này.
- Thẻ HTML có tác dụng xác định một nội dung cụ thể. Phần tử HTML đóng vai trò các đơn vị định dạng của toàn bộ trang web.

2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML

Hoạt động 2 (trang 41): 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?

Gợi ý trả lời:

Cấu trúc chung của một trang web thường gồm các thành phần cơ bản sau:
- Thẻ HTML gốc (<html>): Là phần tử gốc của trang web, chứa toàn bộ nội dung của trang.
- Phần đầu (<head>): Chứa các thông tin meta, tiêu đề trang, các liên kết tới các tệp CSS và JavaScript, và các thông tin khác mà trình duyệt web có thể sử dụng.
- Thân trang (<body>): Chứa nội dung hiển thị của trang web, bao gồm văn bản, hình ảnh, liên kết, biểu mẫu, video, và bất kỳ phần tử nào khác mà người dùng có thể thấy và tương tác.
- Các phần tử HTML khác: Bên cạnh các phần tử cơ bản như văn bản, hình ảnh, và liên kết, một trang web cũng có thể chứa các phần tử phức tạp hơn như biểu mẫu, bảng, video, hộp thoại, v.v.
- Thẻ kết thúc (</html>): Đánh dấu kết thúc của trang web và bao gồm toàn bộ nội dung HTML của trang.
Tóm lại: Cấu trúc cơ bản của trang web đủ các phần, nhưng trong mỗi phần có thể có một hoặc nhiều phần tử tùy vào mục đích thiết kế.

CÂU HỎI

Câu hỏi 1 (trang 43): Vẽ sơ đồ cây của đoạn văn bản HTML sau:

Gợi ý trả lời:

Câu hỏi 2 (trang 43): Cây HTML có bao nhiêu phần tử gốc?

Gợi ý trả lời:

Cây HTML chỉ có một phần tử gốc duy nhất.

3. PHẦN MỀM SOẠN THẢO HTML

Hoạt động 3 (trang 41): Hãy tìm hiểu những phần mềm có thể dùng để soạn thảo tệp HTML. Thảo luận để tìm ra cách soạn thảo tệp HTML hợp lí nhất.

Gợi ý trả lời:

- Các phần mềm có thể dùng để soạn thảo tệp HTML: Notepad, Notepad++, Sublime Text,…
- Có thể dùng phần mềm nguồn mở Notepad++ để soạn thảo tệp HTML là hợp lí nhất.

CÂU HỎI

Câu hỏi 1 (trang 44): Xếp các tên sau vào hai nhóm phần mềm soạn thảo HTML và trình duyệt web:
a) Notepad. b) Opera    c) Sublime Text
d) Chorme   e) Cốc Cốc f) Notepad ++
g) FireFox    h) Microsoft Edge

Gợi ý trả lời:

- Nhóm phần mềm soạn thảo HTML:
a) Notepad
c) Sublime Text
f) Notepad++
- Nhóm trình duyệt web:
b) Opera
d) Chrome
e) Cốc Cốc
g) Firefox
h) Microsoft Edge
Câu hỏi 2 (trang 44): Em có nhận xét gì về sự khác biệt khi soạn thảo HTML giữa các phần mềm chuyên nghiệp (ví dụ Notepad ++, Sublime Text) và phần mềm soạn thảo văn bản thông thường (ví dụ Notepad)?

Gợi ý trả lời:

- Phần mềm soạn thảo thông thường (Notepad): Soạn thảo tệp, không định dạng, có sẵn trên Windows.
- Phần mềm soạn thảo chuyên nghiệp (Notepad ++, Sublime Text): Miễn phí, mã nguồn mở, có màu sắc phân biệt đối tượng, tự động thêm thẻ đóng khi viết thẻ mở.

LUYỆN TẬP

Luyện tập 1 (trang 44): Tìm ví dụ về phần tử HTML không thể lồng, tức là không thể có quan hệ cha con trong cây thông tin của trang web.

Gợi ý trả lời:

Ví dụ các phần tử HTML không thể lồng:

Luyện tập 2 (trang 44): Chọn một văn bản đơn giản soạn thảo tệp HTML để hiển thị nội dung văn bản đó vẽ cây thông tin các phần tử HTML của trang web vừa soạn thảo.

Gợi ý trả lời:

Cây thông tin:

VẬN DỤNG

Vận dụng 1 (trang 44): Em hãy tìm trên mạng các trang web hỗ trợ soạn thảo HTML trực tuyến.

Gợi ý trả lời:

Các trang web hỗ trợ soạn thảo HTML trực tuyến:
https://w3schools.com
https://tutorialspoint.com
https://jsbin.com
Vận dụng 2 (trang 44): Sử dụng phần mềm soạn thảo HTML và soạn thảo trang web có nội dung như Hình 7.7. Lưu ý rằng thẻ <img> với tính tăng thể hiện ảnh trên trang web có cú pháp: <img src="Tên tệp ảnh">, trong đó “tên tệp ảnh” chính là đường dẫn của tệp hình ảnh cần đưa lên trang.

Gợi ý trả lời: