Giáo án điện tử Tin học ứng dụng 12 kết nối Bài 7: HTML và cấu trúc trang web

BÀI 7

KHỞI ĐỘNG

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.

1. TRANG WEB VÀ HTML

Hoạt động 1: Tìm hiểu ngôn ngữ HTML và trang WEB

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ốcC, FireFox, Chrome). 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?

Tệp văn bản trong Hình 7.1 có bao nhiêu phần tử HTML?

Nêu sự giống và khác nhau giữa thẻ HTML và phần từ HTML.

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

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

Vẽ sơ đồ cây của đoạn văn bản HTML sau:

Cây HTML có bao nhiêu phần tử gốc?

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

Hoạt động 3: Tìm hiểu cách soạn thảo các tệp HTML

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.

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) Chrome.

e) Cốc Cốc.

f) Notepad++.

g) FireFox.

h) Microsoft Edge.

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)?

LUYỆN TẬP

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.

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.

VẬN DỤNG

Em hãy tìm trên mạng các trang web hỗ trợ soạn thảo HTML trực tuyến.

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 nă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.