Slide bài giảng Khoa học máy tính 12 Chân trời bài F6: Dự án tạo trang web

Tóm lược nội dung

BÀI F6: DỰ ÁN TẠO TRANG WEB

A. KHỞI ĐỘNG

HS ôn tập lại kiến thức về thẻ HTML dùng để thêm ảnh vào trang web.

B. HOẠT ĐỘNG: BÁO CÁO KẾT QUẢ THỰC HIỆN DỰ ÁN

1. Tạo trang web kỉ yếu lớp 12A với các thẻ HTML đã học

Các bước tạo trang web kỉ yếu lớp 12A với các thẻ HTML đã học

Nội dung ghi nhớ:

1. Trang chủ index.html

a) Bố cục chung

- Trang chủ index.html chứa bố cục dùng chung của các trang web liên quan và có thể có thêm phần nội dung giới thiệu về lớp.

- Tạo bảng bằng thẻ <table> để làm bố cục chung.

- Bảng gồm hai hàng:

+ Hàng 1: Tiêu đề kỉ yếu lớp.

+ Hàng 2: Chia thành hai cột, cột trái là thanh trình đơn và cột phải là nội dung ứng với lựa chọn từ thanh trình đơn.

- Đoạn mã HTML tạo bảng:

b) Cột trái của hàng 2

- Tạo bảng gồm ba hàng bằng thẻ <table> để tạo thanh trình đơn cho cột bên trái:

c) Cột phải của hàng 2

- Là nơi hiển thị nội dung của các trang web mỗi khi người dùng nhấp vào đường liên kết của thanh trình đơn ở cột trái.

- Tạo khung bằng thẻ <iframe> để hiển thị nội dung:

Trong đó, thuộc tính name của thẻ <iframe> phải trùng với thuộc tính target của các liên kết ở cột trái, cụ thể đều là iframe_noidung.

2. Các trang web gioithieu.html, hoatdong.html và thanhvienlop.html

- Trong trang web thanhvienlop.html:

+ Tạo danh sách lớp bằng thẻ <table>.

+ Thông tin chi tiết của mỗi thành viên được liên kết đến trang portfolio.html của thành viên đó.

- Ngoài cách dùng <iframe> như đề cập trên, còn có những cách làm khác:

+ Đầu tiên, tạo trang index.html, trong đó, cột phải hiển thị nội dung giới thiệu về lớp.

Không cần tạo thêm trang gioithieu.html.

+ Sau đó, sao chép trang index.html thành hoatdong.html và thanhvienlop.html nhằm giữ nguyên được bố cục chung, chỉ thay đổi nội dung ở cột phải.