Nội dung chính Khoa học máy tính 12 Chân trời Bài F6: Dự án tạo trang web

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH 

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

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

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.