Giáo án Khoa học máy tính 12 chân trời Bài F2: Tạo và định dạng trang web với các thẻ HTML

BÀI F2: TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THẺ HTML

(2 tiết)

I. YÊU CẦU CẦN ĐẠT

1. Kiến thức 

Sau bài học này, HS sẽ:

• Sử dụng được các thẻ HTML để trình bày trang web.

• Định dạng văn bản, phông chữ, tạo liên kết, danh sách.

2. Năng lực

Năng lực chung: 

• 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 trang web bằng thẻ HTML và định dạng văn bản, phông chữ, tạo liên kết, danh sách.

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 trong hoạt động Thực hành.

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: Tạo động lực để HS muốn tìm hiểu về các thẻ HTML để trình bày và định dạng văn bản.

b) Nội dung: HS nghiên cứu nội dung hoạt động Khởi động SGK trang 73, suy nghĩ trả lời câu hỏi theo kiến thức của mình.

c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi Khởi động SGK trang 73.

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

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

- GV yêu cầu HS hoạt động cá nhân, suy nghĩ trả lời câu hỏi Khởi động tr.73SGK: Trong Hình 1, mỗi dòng trên trang web được định nghĩa bằng thẻ nào trong số các thẻ sau: <h1>, <h2>, <p>, <hr>?

Hình 1. Kết xuất trang web khi sử dụng các thẻ <h1>, <h2>, <p>, <hr>

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

- HS quan sát hình ảnh, vận dụng sự hiểu biết để trả lời câu hỏi.

- 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ả lời câu hỏi Khởi động tr.73 SGK.

Gợi ý trả lời: 

+ Dòng “Danh sách tài liệu tham khảo” được tạo bằng thẻ <h1>.

+ Dòng “Tài liệu thiết kế trang web”, “Tài liệu tin học văn phòng” được tạo bằng thẻ <h2>.

+ Hai đường ngăn cách nằm ngang được tạo bằng thẻ <hr>.

+ Các dòng còn lại được tạo bằng thẻ <p>.

- 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: Trong ví dụ ở phần Khởi động, dòng “Danh sách tài liệu tham khảo” được tô màu đỏ. Điều này là do sử dụng thêm thẻ HTML để định dạng màu sắc cho dòng chữ đó. Vậy để giúp các em tìm hiểu các thẻ định dạng được nội dung trên trang web tương tự như vậy, chúng ta sẽ cùng nhau đến với Bài F2: Tạo và định dạng trang web với các thẻ HTML.
-------------

……Còn tiếp……