Giáo án Tin học ứng dụng 12 chân trời Bài F6: Dự án tạo trang web

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ SGK tr.132 và thực hành theo nhóm 3 – 5 HS theo hướng dẫn.

Yêu cầu: Em hãy tạo trang web kỉ yếu lớp 12A (Hình 1) với các yêu cầu sau:

Hình 1. Giao diện trang web thanhvienlop.html của lớp 12A

a) Kỉ yếu gồm ít nhất 3 trang: 

+ Trang chủ (index.html).

+ Hoạt động (hoatdong.html).

+ Thành viên lớp (thanhvienlop.html).

b) Thực hiện theo nhóm, mỗi nhóm từ 3 – 5 học sinh.

c) Thời gian thực hiện: 2 tuần, trong đó có 2 tiết học trên lớp để trình bày kết quả dự án. Các nhóm học sinh chủ động thực hiện dự án ngoài giờ học trên lớp.

Đánh giá:

+ Nội dung: Đảm bảo đầy đủ thông tin về các thành viên lớp và những hoạt động mà lớp đã tham gia, bao gồm cả văn bản lẫn hình ảnh.

+ Hình thức: Bố cục trang web rõ ràng, đảm bảo đủ các thành phần cơ bản như tiêu đề, thanh điều hướng, nội dung trang.... trong đó có áp dụng những phần tử HTML đã học.

Hướng dẫn:

Các nhóm thực hiện dự án theo ba giai đoạn như sau:

1. Giai đoạn chuẩn bị:

+ Thu thập thông tin cho kỉ yếu.

+ Tổ chức lưu trữ các tệp cần thiết cho các trang web.

+ Phác thảo bố cục, chức năng và yêu cầu của mỗi trang web.

+ Lập danh sách công việc và phân công cho từng thành viên.

+ Thảo luận phương pháp và thời gian thực hiện của mỗi công việc.

2. Giai đoạn thực hiện: 

+ Các thành viên thực hiện nhiệm vụ theo phân công.

+ Thường xuyên thảo luận và đóng góp ý kiến về kết quả thực hiện công việc.

+ Kiểm tra, sửa lỗi và hoàn thiện sản phẩm.

3. Giai đoạn báo cáo kết quả:

………………

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.