Tự chủ và tự học: Tự lực (Chủ động, tích cực thực hiện công việc của bản thân).
Giao tiếp và hợp tác: Xác định trách nhiệm và hoạt động của bản thân (Phân tích được các công việc cần thực hiện để hoàn thành nhiệm vụ của nhóm trong các hoạt động nhóm).
Giải quyết vấn đề và sáng tạo: Hình thành và triển khai ý tưởng mới (Nêu được nhiều ý tưởng mới trong học tập, suy nghĩ không theo lối mòn, tạo ra yếu tố mới dựa trên những ý tưởng khác nhau).

Năng lực Tin học:

NLc (Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông): Trình bày được trang web bằng các thẻ HTML và CSS.

3. Phẩm chất

Chăm chỉ: Tích cực tìm tòi và sáng tạo trong việc học tập.
Trách nhiệm: Tích cực, tự giác và nghiêm túc rèn luyện sử dụng thành thạo các mã lệnh.

II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU

1. Đối với giáo viên

SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, bài trình chiếu (Slide), máy chiếu, phiếu học tập.
Máy tính có cài sẵn phần mềm Visual Studio Code và có kết nối Internet, các tệp HTML dùng để minh hoạ.

2. Đối với học sinh

SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, vở ghi,…

III. TIẾN TRÌNH DẠY HỌC

A. HOẠT ĐỘNG KHỞI ĐỘNG

a) Mục tiêu: Ôn tập lại kiến thức về trình bày trang web bằng các thẻ HTML và CSS.

b) Nội dung: HS ôn tập lại kiến thức về định dạng bảng.

c) Sản phẩm: Một số thuộc tính định dạng bảng.

d) Tổ chức thực hiện:

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

- GV cho HS nối tên một số thuộc tính định dạng bảng với ý nghĩa của nó.

Bước 2: HS thực hiện nhiệm vụ học tập:

- HS vận dụng những kiến thức đã học để hoàn thành hoạt động.

- GV quan sát và hỗ trợ HS khi cần thiết.

Bước 3: Báo cáo kết quả hoạt động, thảo luận:

- GV mời một số HS xung phong trình bày đáp án.

Gợi ý trả lời:

- HS khác lắng nghe, nhận xét và bổ sung.

Bước 4: Đánh giá kết quả thực hiện:

GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Ở bài F6, các em đã được luyện tập sử dụng các thẻ HTML để trình bày trang web. Và để các em tiếp tục hoàn thiện dự án tạo trang web bằng việc sử dụng CSS để làm trang web đẹp, đa dạng và sinh động hơn, chúng ta sẽ cùng nhau đến với Bài F13: Dự án tạo trang web (tiếp theo).

B. HOẠT ĐỘNG THỰC HÀNH

a) Mục tiêu: HS định kiểu CSS cho trang web kỉ yếu lớp 12A.

b) Nội dung: GV hướng dẫn HS thực hiện Nhiệm vụ SGK tr.142 để tạo trang web kỉ yếu theo yêu cầu.

c) Sản phẩm: HS hoàn thành trang web kỉ yếu lớp 12A.

d) Tổ chức thực hiện:

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

SẢN PHẨM DỰ KIẾN

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.142 và tiếp tục thực hành theo nhóm như Bài F6 theo hướng dẫn.

Yêu cầu: Em hãy sử dụng mã lệnh CSS để định dạng trang web kỉ yếu lớp 12A với các yêu cầu sau:

a) Sử dụng lại các tệp trong dự án trang web kỉ yếu lớp 12A trong Bài F6; thêm mã lệnh CSS để làm trang web đẹp, đa dạng và sinh động hơn.

b) Thực hiện bài thực hành 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: Bổ sung và hoàn thiện các nội dung được góp ý trong Bài F6.

+ Hình thức: Bổ sung và hoàn thiện theo các góp ý trong Bài F6. Bên cạnh đó, áp dụng mã lệnh CSS (bao gồm vận dụng phối hợp những cách thức định kiểu CSS đã học hoặc tìm hiểu thêm) để tuỳ biến trang web theo ý tưởng riêng của nhóm, đồng thời nâng cao tính thẩm mĩ của trang web.

Hướng dẫn:

Các giai đoạn công việc gồm ba giai đoạn: chuẩn bị, thực hiện và báo cáo kết quả. Tuy nhiên, dự án đã được thực hiện trong Bài F6 nên công việc chính của mỗi giai đoạn có thay đổi.

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

+ Các nhóm thảo luận để thống nhất bố cục, hình thức của trang web, cách thức viết mã lệnh CSS (chèn trực tiếp mã lệnh CSS cho từng trang hay chèn từ tệp mã lệnh CSS riêng).

+ Xác định cách định dạng qua thẻ HTML hoặc thuộc tính id, class.

+ Thống nhất cách đặt tên cho vùng chọn, id, lớp.

+ Tìm hiểu thêm những mã lệnh CSS mới.

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

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ả:

+ Phân công thành viên viết báo cáo kết quả thực hiện dự án.

+ Trình bày báo cáo trước lớp và lắng nghe nhận xét của các bạn và giáo viên.

Bước 2: HS thực hiện nhiệm vụ học tập:

- Các nhóm HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ.

Bước 3: Báo cáo kết quả hoạt động, thảo luận:

...........................................

Nhiệm vụ. Định kiểu CSS cho trang web kỉ yếu lớp 12A

1. Trang chủ index.html

- Nếu trong Bài F6, bố cục trang web được tạo bằng bảng với phần tử <table> thì trong bài này, HS bố cục lại trang web theo hướng ứng dụng thực tế là sử dụng phần tử <div>.

- Trang chủ index.html được chia thành ba phần như sau:

Phần đầu trang: là trình đơn nằm ngang.

Phần thân trang: hiển thị nội dung của trang web ứng với lựa chọn từ trình đơn. Cụ thể, đặt ở phần này một <iframe> để hiển thị những thông tin phụ.

Phần chân trang: hiển thị những thông tin phụ.

* Bố cục này đã được thực hiện tại phần Vận dụng của Bài F11.

2. Trang web thanhvienlop.html

- Thay vì hiển thị danh sách thành viên lớp dưới dạng bảng, HS có thể thực hiện sáng tạo bằng cách tạo trình đơn nằm dọc với mỗi mục của trình đơn là tên của một thành viên. Khi người dùng nháy chọn tên thành viên trên trình đơn, trang web portfolio của thành viên này sẽ hiển thị ở phần bên phải.

- Tương tự Bài F6, còn cách khác là sao chép nhằm giữ được bố cục chung. Cụ thể:

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

+ Sau đó, sao chép trang index.html thành hoatdong.html và thanhvienlop.html, rồi thay đổi nội dung ở phần giữa.

--------------- Còn tiếp ---------------

Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II