Giáo án Bài F1: HTML và trang web Tin học 12 Chân trời sáng tạo

Ngày soạn:…/…/… Ngày dạy:…/…/…
CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
BÀI F1: HTML VÀ TRANG WEB (2 tiết) I. MỤC TIÊU 1. Kiến thức
Sau bài học này, HS sẽ:
- Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML. 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):
Biết về siêu liên kết, siêu văn bản, ngôn ngữ HTML. Hiểu và giải thích được
cấu trúc web dưới dạng HTML. 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. 1
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 Tin học ứng dụng – 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.
2. Đối với học sinh
 SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – 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ấu trúc của trang web.
b) Nội dung: HS nghiên cứu nội dung hoạt động Khởi động SGK trang 100, suy nghĩ
trả lời câu hỏi theo kiến thức của mình.
c) Sản phẩm: HS nêu được các thành phần chính của trang web trong Hình 1 SGK trang 100.
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.100 SGK:
Em hãy chỉ ra những thành phần chính của trang web trong Hình 1.
Hình 1. Trang web https://www.w3schools.com/html/html_intro.asp
Bước 2: HS thực hiện nhiệm vụ học tập:
- HS quan sát hình ảnh và trả lời câu hỏi. 2
- 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.100 SGK.
Gợi ý trả lời:
Những thành phần chính của trang web trong Hình 1: thanh điều hướng, logo trang
web, thanh trình đơn ngang, đề mục, thanh trình đơn dọc, nút nhấn,…
- 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: HTML đóng vai trò là
bước đệm không thể thiếu trong hành trình khám phá thế giới lập trình dành cho
người mới. Đơn giản nhưng mạnh mẽ, HTML là ngôn ngữ đánh dấu siêu văn bản,
mở cánh cửa đầu tiên để bắt đầu sáng tạo trên không gian web. Vậy để giúp các
em hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML, chúng ta sẽ
cùng nhau đến với Bài F1: HTML và trang web.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Giới thiệu ngôn ngữ HTML
a) Mục tiêu: HS tìm hiểu về các khái niệm cơ bản như: siêu văn bản (Hypertext),
ngôn ngữ HTML, các thành phần cơ bản của một trang web, các thẻ (tag), thuộc tính
(attribute) và các thuộc tính giúp bổ sung định dạng cho thẻ HTML.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Giới thiệu ngôn ngữ
HTML, thảo luận nhóm và thực hiện nhiệm vụ.
c) Sản phẩm: Các khái niệm cơ bản như: siêu văn bản (Hypertext), ngôn ngữ HTML,
các thành phần cơ bản của một trang web, các thẻ (tag), thuộc tính (attribute) và các
thuộc tính giúp bổ sung định dạng cho thẻ HTML.
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ụ:
1. Giới thiệu ngôn ngữ HTML
- GV yêu cầu HS thảo luận theo nhóm 3 – - Siêu văn bản (Hypertext) là tài liệu điện 3
4 HS và trả lời các câu hỏi:
tử đa phương tiện chứa văn bản, hình ảnh,
+ Siêu văn bản (Hypertext) là gì?
âm thanh, video và siêu liên kết. Trong
+ Trang web có phải là siêu văn bản đó, siêu liên kết giúp người đọc dễ dàng
không? Ngôn ngữ nào được sử dụng để truy cập đến nội dung khác hoặc siêu văn tạo ra trang web? bản khác. + HTML là gì?
- Mỗi trang web là một siêu văn bản được
+ Hiện nay, phiên bản HTML nào đang tạo ra bằng ngôn ngữ HTML (HyperText
được sử dụng phổ biến nhất? Markup Language).
+ Một trang web bao gồm những thành - HTML là ngôn ngữ đánh dấu được phát phần nào?
triển bởi Tim Berners-Lee, Robert
+ Mỗi phần tử HTML được thể hiện như Cailliau và các cộng sự vào năm 1989, thế nào?
dùng để trình bày cấu trúc, nội dung và
- GV trình bày về cách kết xuất trang web hình thức của trang web.
của các trình duyệt phổ biến hiện nay.
- Hiện nay, HTML5 là phiên bản thông
- GV yêu cầu HS vận dụng kiến thức vừa dụng, giúp tạo ra trang web có tính tương
tìm hiểu, trả lời câu hỏi hoạt động Làm tác cao và giúp hiển thị trang web trên các tr.101 SGK: thiết bị thông minh.
Câu 1. Em hãy kể tên một ngôn ngữ đánh - Thành phần của một trang web bao
dấu dùng để tạo ra trang web và cho biết gồm văn bản, hình ảnh, âm thanh, video
phiên bản hiện nay của ngôn ngữ này.
và các nội dung khác đều được định dạng
Câu 2. Các trình duyệt khác nhau có thể bằng các phần tử HTML tương ứng.
kết xuất một trang web tương tự nhau - Mỗi phần tử HTML được thể hiện bằng không?
một thẻ (tag) và có thể đính kèm các
Bước 2: HS thực hiện nhiệm vụ học thuộc tính (attribute). tập:
- Khi người dùng truy cập trang web, trình
- HS tìm hiểu nội dung mục 1 SGK tr.101 duyệt sẽ tải xuống mã HTML tương ứng
và thảo luận theo nhóm thực hiện nhiệm và sử dụng mã này để kết xuất nội dung, vụ. 4