Giáo án NLS Tin học 12 THUD kết nối Bài 23: Chuẩn bị xây dựng trang web
Giáo án NLS Tin học 12 (ứng dụng) kết nối tri thức Bài 23: Chuẩn bị xây dựng trang web. Với năng lực số được tích hợp, tiết học sẽ giúp học sinh làm quen và ứng dụng công nghệ, tin học. KHBD này là file word, tải về dễ dàng. Là mẫu giáo án mới nhất năm 2026 để giáo viên dạy tốt môn Tin học 12.
Xem: => Giáo án tích hợp NLS Tin học 12 TH ứng dụng Kết nối tri thức
Ngày soạn:…/…/…
Ngày dạy:…/…/…
CHỦ ĐỀ 7: ỨNG DỤNG TIN HỌC
BÀI 23: CHUẨN BỊ XÂY DỰNG TRANG WEB
(3 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
- Có nhận thức ban đầu về các thành phần của trang web và các bước thiết kế trang web.
2. Năng lực
Năng lực chung:
- Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,…
- Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập.
- Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp.
Năng lực Tin học:
- Xác định được cấu trúc chung của trang web.
- Nhận diện được các thành phần chung của trang web thông qua các ví dụ cụ thể.
- Nắm được các bước xây dựng trang web.
- Thực hiện được bước chuẩn bị xây dựng trang web cho chủ đề được lựa chọn.
Năng lực số:
- 3.1.NC1a: Xây dựng kịch bản, cấu trúc phân cấp thông tin cho website.
- 3.2.NC1a: Áp dụng các nguyên tắc thẩm mỹ để thiết kế giao diện.
- 6.2.NC1b: Sử dụng công cụ AI để gợi ý bảng màu hoặc cấu trúc nội dung.
- 4.3.NC1a: Hiểu quy định về bản quyền hình ảnh, thông tin tác giả tại chân trang.
- 1.2.NC1a: Phân tích, đánh giá giao diện và trải nghiệm người dùng - UI/UX của các website mẫu.
3. Phẩm chất
- Có ý thức chủ động tìm hiểu và cập nhật các kiến thức mới.
- Cẩn thận, tỉ mỉ trong bước chuẩn bị xây dựng trang web, tạo điều kiện thuận lợi cho các bài học sau.
II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU
- GV: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức, bài trình chiếu (Slide), máy chiếu, phòng máy tính có kết nối Internet, video AI tạo bằng công cụ AI được dùng để khởi động bài học.
- HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
1. HOẠT ĐỘNG KHỞI ĐỘNG
…………………………………………..
…………………………………………..
…………………………………………..
2. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Thảo luận khám phá cấu trúc và đặc điểm chung của trang web
a) Mục tiêu: Giúp HS nhận biết được các thành phần chính của trang web.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1.NHỮNG ĐẶC ĐIỂM CHUNG CỦA TRANG WEB và thực hiện nhiệm vụ.
c) Sản phẩm: Cấu trúc và đặc điểm chung của trang web.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS làm việc cá nhân: Em hãy truy cập vào một số trang web, quan sát bố cục và thực hiện Hoạt động 1 – Thảo luận khám phá cấu trúc và đặc điểm chung của trang web SGK tr.126: + Có thể chia một trang web thành các phần chính như thế nào? + Mỗi phần có những đặc điểm nào chung (nhìn thấy ở nhiều trang web)? - GV yêu cầu HS: Quan sát hình ảnh sau, kết hợp sử dụng AI tìm hiểu thông tin và trả lời các câu hỏi:
Phần đầu trang web https://moet.gov.vn/ + Trong một trang web, phần đầu trang có vai trò như thế nào? + Phần đầu trang thường bao gồm những thông tin gì? - GV đưa ra ví dụ và chỉ rõ cho HS thấy được các thành phần có thể có trong phần đầu trang. Bước 2: HS thực hiện nhiệm vụ học tập: - HS sử dụng công cụ số/AI tìm hiểu kiến thức và trả lời các câu hỏi mà GV đưa ra. - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS lần lượt trả lời các câu hỏi. - HS đọc kết quả từ AI, đối chiếu với SGK và rút ra kết luận. - HS khác nhận xét, bổ sung. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ câu trả lời của HS, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung trả lời của HS. | 1. NHỮNG ĐẶC ĐIỂM CHUNG CỦA TRANG WEB Mỗi trang web đầy đủ nhất đều có cấu trúc gồm ba phần chính:
a) Phần đầu trang - Có vai trò như trang bìa thu gọn của một cuốn sách hay là phần trình bày đầu mỗi chương sách. - Có hình nền và những thông tin nổi bật trên đó như: + Logo. + Tên trang. + Thanh điều hướng (thanh này sẽ bao gồm bảng chọn các chức năng; chức năng tìm kiếm có thể được tách riêng ra khỏi bảng chọn). + Tiêu đề. + Thông tin tóm tắt của trang hay là thông tin mới cập nhật. Lưu ý:
Hình 23.1. Đầu trang của trang web HARVARD UNIVERSITY 1 – Logo, 2 – Tên trang, 4 – Biểu tượng của chức năng tìm kiếm, | - 1.2.NC1a: HS thực hiện phân tích giao diện người dùng của một website thực tế, đánh giá cách bố trí thông tin để hiểu tư duy tổ chức dữ liệu trên môi trường số. - 6.2.NC1a: Sử dụng AI để tìm kiếm thông tin phục vụ học tập. - 6.1.NC1a: HS phân biệt được sự khác nhau giữa “Logo trang web” và “Favicon”; hiểu rằng Favicon là một dạng dữ liệu meta đại diện cho toàn bộ website giúp người dùng nhận diện thương hiệu nhanh chóng khi mở nhiều tab cùng lúc. - 1.1.NC1a: HS nhận diện và phân biệt được chức năng của “Thanh điều hướng” và “Ô tìm kiếm” trên giao diện trang web; hiểu rằng thanh điều hướng giúp truy cập thông tin theo cấu trúc phân cấp, trong khi ô tìm kiếm dùng để truy xuất thông tin cụ thể bằng từ khóa, từ đó lựa chọn cách tiếp cận nội dung nhanh nhất. - 4.3.NC1a: HS xác định được vị trí và ý nghĩa của các thông tin bản quyền, giấy phép hoạt động trên trang web để đảm bảo tuân thủ pháp luật khi xây dựng và vận hành trang web. - 2.1.NC1a: HS nhận diện các biểu tượng liên kết mạng xã hội và thông tin liên hệ tại chân trang; hiểu rằng đây là các kênh giao tiếp chính thức để người dùng tương tác, phản hồi hoặc tìm kiếm sự hỗ trợ từ chủ sở hữu website. |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS quan sát Hình 23.2 và trả lời các câu hỏi: + Trong một trang web, phần thân trang thường có bố cục như thế nào? + Nội dung trong phần thân trang có thể chứa những dạng thông tin gì? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 1b SGK tr.127 – 128 và trả lời các câu hỏi mà GV đưa ra. - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS lần lượt trả lời các câu hỏi. - HS khác nhận xét, bổ sung. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ câu trả lời của HS, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung trả lời của HS. | b) Phần thân trang - Thân trang là phần chứa nội dung của trang web, thường được bố cục thành các khối hình chữ nhật, mỗi khối trình bày một nội dung với tiêu đề riêng.
Hình 23.2. Cấu trúc phần thân trang - Mỗi khối nội dung có thể chứa các thông tin dạng văn bản, hình ảnh, âm thanh, biểu mẫu nhập dữ liệu hay là các ứng dụng nhúng khác nhau (ví dụ ứng dụng bản đồ, ứng dụng dự báo thời tiết,…).
Hình 23.3. Ví dụ phần thân trang web Đại học Quốc gia TP. Hồ Chí Minh | |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS quan sát hình ảnh sau và trả lời các câu hỏi:
Phần chân trang web https://moet.gov.vn/ + Trong một trang web, phần chân trang có thể bao gồm những thông tin gì? - GV đưa ra ví dụ và chỉ rõ cho HS thấy được các thành phần có thể có trong phần chân trang. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, thực hiện hoạt động Củng cố kiến thức tr.128 SGK: Câu 1. Tên trang web và logo trang được đặt ở phần nào của trang web? Câu 2. Phần thân trang web thường có bố cục như thế nào? Câu 3. Thông tin liên hệ của chủ thể của trang web được đặt ở phần nào của trang web? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 1c SGK tr.128 và trả lời các câu hỏi mà GV đưa ra. - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS lần lượt trả lời các câu hỏi. - HS khác nhận xét, bổ sung. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ câu trả lời của HS, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung trả lời của HS. - GV chốt kiến thức theo Hộp kiến thức:
| c) Phần chân trang Phần này có thể bao gồm những thông tin về: - Thương hiệu, bản quyền. - Bảo mật. - Tóm tắt những thông tin cần nhấn mạnh thêm. - Thông tin liên hệ. - Những liên kết tới các trang mạng xã hội liên quan.
Hình 23.4. Phần chân trang web | |
Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.126: Có thể chia một trang web thành ba phần chính: - Phần đầu trang là nơi hiển thị logo, tên trang, thanh điều hướng bao gồm bảng chọn các chức năng, tiêu đề và thông tin tóm tắt của trang. - Phần thân trang được tổ chức theo cấu trúc nhiều khối hình chữ nhật, mỗi khối giới thiệu một nội dung. - Phần chân trang được dành để đưa những thông tin về thương hiệu, bản quyền, bảo mật, tóm tắt những thông tin cần nhấn mạnh thêm, thông tin liên hệ và những liên kết tới các trang mạng xã hội liên quan. Hướng dẫn thực hiện hoạt động Củng cố kiến thức tr.128 SGK: Câu 1. Tên trang web và logo trang được đặt ở phần đầu của trang web. Câu 2. Phần thân trang web thường có bố cục là các khối hình chữ nhật. Câu 3. Thông tin liên hệ của chủ thể của trang web được đặt ở phần chân của trang web. | ||
Hoạt động 2: Cần làm gì khi bắt đầu xây dựng một trang web?
a) Mục tiêu: Giúp HS biết việc xây dựng trang web được bắt đầu bằng việc xác lập định hướng về mục đích trang web, đối tượng người dùng và định hướng thiết kế trang web.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. CÁC BƯỚC CHUẨN BỊ ĐỂ XÂY DỰNG TRANG WEB, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Các bước chuẩn bị để xây dựng trang web.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
3. HOẠT ĐỘNG LUYỆN TẬP
a) Mục tiêu:
- HS nhận dạng các thông tin cho phần chân trang trong trang web ví dụ.
- HS có đánh giá khái quát về trang web của Tổng cục du lịch Việt Nam.
b) Nội dung: GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập và hoạt động Luyện tập SGK tr.133.
c) Sản phẩm học tập:
- Phiếu bài tập.
- Hoạt động Luyện tập.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV tổng hợp các kiến thức cần ghi nhớ cho HS.
- GV tổ chức trò chơi trắc nghiệm nhanh trên Quizizz hoặc Kahoot để củng cố toàn bài.
- GV cung cấp mã QR hoặc đường Links cho HS làm Phiếu bài tập, trả lời nhanh một số câu hỏi trắc nghiệm tổng kết bài học.
Trường THPT:…………………………………………. Lớp:……………………………………………………... Họ và tên:………………………………………………. PHIẾU BÀI TẬP TIN HỌC 12 ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG – KẾT NỐI TRI THỨC BÀI 23: CHUẨN BỊ XÂY DỰNG TRANG WEB A. PHẦN TRẮC NGHIỆM NHIỀU PHƯƠNG ÁN LỰA CHỌN Khoanh tròn vào chữ cái đứng trước câu trả lời đúng nhất: Câu 1. Phần chân trang của một website có thể chứa nội dung nào sau đây? A. Nội dung website. B. Thanh điều hướng. C. Thông tin về bản quyền của website. D. Thông tin mới cập nhật của website. Câu 2. Biểu tượng đại diện cho tất cả các trang web trong một website và hiển thị trước địa chỉ trang web trên tab của trình duyệt được gọi là gì? A. Favicon. B. Weblogo. C. Favlogo. D. Webicon. Câu 3. Khi xây dựng trang web, em cần làm gì để định hình ý tưởng? A. Xây dựng kiến trúc nội dung, thiết kế mĩ thuật, chọn bảng màu, phông chữ,… B. Làm logo, favicon, ảnh nền và đặt tên trang web. C. Lựa chọn phần mềm để xây dựng trang web. D. Xác định mục đích và đối tượng phục vụ của trang web. Câu 4. Em nên chọn các phông chữ loại nào cho các bảng chọn trên thanh điều hướng? A. Monospace. B. Serif. C. Fantasy. D. Sans Serif. Câu 5. Thông tin nào sau đây là không phù hợp để đưa vào trang web chủ đề “Việt Nam – Vẻ đẹp tiềm ẩn”? A. Đặc điểm ẩm thực địa phương. B. Xu hướng nghề nghiệp trong tương lai ở Việt Nam. C. Những làng nghề truyền thống nổi tiếng Việt Nam. D. Lịch sử dựng nước và giữ nước của dân tộc Việt Nam. B. PHẦN TRẮC NGHIỆM ĐÚNG – SAI Câu 1. Phải định hình được ý tưởng, từ đó xây dựng được thiết kế nội dung và thiết kế mĩ thuật trước khi bước vào thực hiện công việc làm tư liệu (văn bản, hình ảnh) cho trang web. a. Để có thể xác định được rõ mục đích cũng như các yêu cầu cần đặt ra với trang web, cần khảo sát, phân tích các nhu cầu cũng như những đặc điểm của người dùng một cách cẩn thận kĩ lưỡng. b. Kiểu chữ đậm có ý nghĩa phân biệt, thường dùng khi muốn phân biệt từ ngữ, câu chữ hay phần chú thích. c. Để gây cảm xúc tốt và thu hút người đọc cần phải chọn một số màu có độ tương phản cao. d. Việc chuẩn bị tư liệu cho trang web là việc kéo dài suốt thời gian thực hiện dự án. |
- GV yêu cầu HS làm việc cá nhân, đọc yêu cầu hoạt động Luyện tập SGK tr.133 và sử dụng các kiến thức đã biết để thực hiện.
Câu 1. Hãy phân tích phần đầu trang và chân trang của trang web 24 giờ ở Hình 23.8 và chỉ rõ các vị trí các phần tử mà em nhận dạng được: tên trang, logo, favicon, bảng chọn,… Tóm tắt những thông tin được trình bày ở phần chân trang.

Hình 23.8. Phần đầu trang và chân trang của trang web 24 giờ
Câu 2. Hãy vào website Tổng cục Du lịch Việt Nam (https://vietnamtourism.gov.vn/). Phân tích thiết kế nội dung, bố cục, phông chữ, màu sắc và phát biểu nhận xét của mình.
Bước 2: HS thực hiện nhiệm vụ học tập:
- HS suy nghĩ, hoàn thành các bài tập GV yêu cầu.
- GV quan sát và trợ giúp HS (nếu cần thiết).
Bước 3: Báo cáo kết quả hoạt động, thảo luận:
- HS trả lời nhanh câu hỏi trắc nghiệm.
- Với mỗi câu hỏi ở hoạt động Luyện tập, GV mời 1 đến 2 HS trình bày. Các HS khác chú ý chữa bài, theo dõi nhận xét bài làm của các bạn.
Gợi ý đáp án:
…………………………………………..
…………………………………………..
…………………………………………..
4. HOẠT ĐỘNG VẬN DỤNG
a) Mục tiêu:
- Cung cấp cho HS các thông tin về các trường Đại học hàng đầu, đồng thời cung cấp các tham khảo cho cách bố cục và thiết kế trang web.
- HS xây dựng được ý tưởng thực hiện đề tài và phác thảo thiết kế cho đề tài thiết kế trang web “Những bài ca đi cùng năm tháng”, là đề tài xuyên suốt trong các bài vận dụng ở các bài sau.
- HS tìm hiểu về phần mềm Google Sites để chuẩn bị cho tiết học tiếp theo.
b) Nội dung: HS thực hiện hoạt động Vận dụng SGK tr.133.
c) Sản phẩm: HS hoàn thành bài tập phần Vận dụng SGK tr.133.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
=> Giáo án Tin học ứng dụng 12 kết nối bài 23: Chuẩn bị xây dựng trang web




