Giáo án NLS Tin học 12 KHMT kết nối Bài 18: Thực hành tổng hợp thiết kế trang web
Giáo án NLS Tin học 12 (Khoa học máy tính) kết nối tri thức Bài 18: Thực hành tổng hợp thiết kế 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 Khoa học máy tính Kết nối tri thức
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI 18: THỰC HÀNH TỔNG HỢP THIẾT KẾ TRANG WEB
(3 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
- Tạo được trang web bằng HTML và định dạng bằng CSS.
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:
- Vận dụng tổng hợp các kiến thức đã học về các thẻ HTML và định dạng văn bản với CSS để xây dựng và hoàn thiện một trang web.
Năng lực số:
- 1.1.NC1a: Tổ chức cây thư mục dự án web khoa học (phân tách rõ ràng thư mục images, css, pages), đảm bảo đường dẫn tương đối hoạt động chính xác.
- 5.2.NC1a: Viết mã HTML/CSS để tạo ra sản phẩm số hoàn chỉnh (Website CLB) có tính thẩm mỹ và bố cục rõ ràng (Header, Nav, Content, Footer).
- 6.2.NC1a: Sử dụng Chatbot AI (như một Content Creator & Designer) để tạo nội dung văn bản (giới thiệu CLB), gợi ý bảng màu (Color Palette) và cấu trúc bố cục (Layout).
- 2.4.NC1a: Sử dụng thành thạo công cụ Developer Tools để kiểm tra tương thích giao diện (Responsive Design) trên các kích thước màn hình giả lập khác nhau.
3. Phẩm chất
- Tích cực tìm tòi và sáng tạo trong học tập.
- Hợp tác khi làm việc nhóm.
- Tổ chức, sắp xếp công việc một cách khoa học.
II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU
- GV: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – 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, một số gợi ý bố cục, nội dung trang web, 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 Khoa học máy tính – Kết nối tri thức, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
A. HOẠT ĐỘNG KHỞI ĐỘNG
a) Mục tiêu: Giúp HS ôn lại cách sử dụng định dạng CSS để định dạng cho nhiều phần tử và định hướng mục tiêu bài học.
b) Nội dung: HS thảo luận nhóm trả lời câu hỏi.
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 GV đưa ra.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV yêu cầu xem video AI được thiết kế để phục vụ bài dạy và trả lời câu hỏi xuất hiện trong video đó.
- GV chia lớp thành các nhóm 3 – 4 HS, sau đó nêu câu hỏi Khởi động SGK trang 102 cho các nhóm thảo luận:
Giả sử website của em có nhiều tệp HTML. Có thể hay không chỉ dùng một tệp CSS duy nhất để định dạng cho toàn bộ các trang web? Nếu có thể hãy nêu các bước cần thực hiện.
Bước 2: HS thực hiện nhiệm vụ học tập:
- HS xem video và suy nghĩ câu trả lời.
- Các nhóm HS thảo luận và trả lời câu hỏi.
- GV quan sát quá trình các nhóm thảo luận, giải đáp thắc mắc nếu HS chưa rõ.
Bước 3: Báo cáo kết quả hoạt động, thảo luận:
- GV mời một số nhóm báo cáo kết quả thảo luận.
Gợi ý trả lời:
Có thể chỉ dùng một tệp CSS duy nhất để định dạng cho toàn bộ các trang web theo các bước sau:
+ Bước 1: Xác định bố cục và viết các đoạn mã CSS cho từng loại đối tượng và lưu trong một tệp style.css.
+ Bước 2: Trong cặp thẻ <head>…</head> của mỗi tệp HTML trong website, ta thêm một dòng mã trỏ tới tệp style.css đã viết ở trên:
<link href="style.css" rel="stylesheet">
- Các nhóm khác lắng nghe và góp ý.
Bước 4: Đánh giá kết quả thực hiện:
- GV nhận xét, đánh giá và kết luận.
[6.1.NC1a: HS sử dụng công cụ AI hoặc sản phẩm số do GV cung cấp để tiếp nhận thông tin, trả lời câu hỏi đơn giản.
2.1.NC1a: HS thực hiện các tương tác cơ bản với học liệu số (xem video, trả lời câu hỏi trên môi trường số).
1.1.NC1a: HS tiếp cận, khai thác được thông tin từ nguồn học liệu số dưới sự hướng dẫn của GV.]
- GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Ở những bài học trước, các em đã biết cách thiết lập các mẫu định dạng cho các phần tử và hiểu được các mức ưu tiên của bộ chọn. Vậy để giúp các em ôn tập lại toàn bộ những kiến thức đã học cũng như luyện tập tạo trang web bằng HTML và định dạng bằng CSS, chúng ta sẽ cùng nhau đến với Bài 18: Thực hành tổng hợp thiết kế trang web.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Thảo luận theo nhóm
a) Mục tiêu: HS nắm được cách tạo một trang web bằng cách giải quyết từng bước như:
- Xác định mục tiêu, nội dung của trang.
- Thiết kế mẫu, bố cục trang.
- Xây dựng các trang liên quan.
- Tổng hợp, kiểm tra và tinh chỉnh cho phù hợp.
- Quản lí và cập nhật thông tin.
b) Nội dung: GV chọn một số ví dụ minh hoạ có thể có nội dung khác nhau làm gợi ý cho HS về bố cục của các trang. Từ đó có thể triển khai thiết lập bố cục khi đã có nội dung.
c) Sản phẩm: Cách tạo một trang web.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
Hoạt động 2: Thực hành
a) Mục tiêu: HS xây dựng website giới thiệu các câu lạc bộ ngoại khoá của trường.
b) Nội dung: GV hướng dẫn HS thực hiện theo hai nhiệm vụ trong SGK để hoàn thành dự án.
c) Sản phẩm: Website giới thiệu các câu lạc bộ ngoại khoá của trường.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV - HS | DỰ KIẾN SẢN PHẨM | NLS |
Nhiệm vụ 1: Tạo tệp CSS Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu các nhóm đọc kĩ và thực hành theo hướng dẫn của Nhiệm vụ 1 SGK tr.103. Yêu cầu: Tạo tệp CSS để trình bày website như Hình 18.2.
Hình 18.2. Bố cục của website Hướng dẫn: Với bố cục như Hình 18.2, mỗi thành phần được định nghĩa bằng một lớp riêng hoặc sử dụng chung lớp nếu cùng định dạng. + Phần đầu trang gồm hai phần nhỏ:
Ví dụ: CSS để trang web hiển thị như Hình 18.1 được thiết lập như sau:
Cách trình bày nhiều ô trong cùng một hàng được sử dụng phổ biến trong các trang web, tạo sự cân đối và hài hoà khi hiển thị. Trong phần nội dung, cách thiết lập hoàn toàn tương tự, áp dụng cho việc chia hai cột bằng nhau trên mỗi hàng. Do vậy, ta sẽ định nghĩa thêm lớp slogan (Hình 18.3) và lớp nội dung chính (content) để bao phía ngoài lớp Row. Mỗi lớp có thể có thêm các đặc tính trình bày riêng.
Hình 18.3. Bố cục của slogan Ví dụ: CSS cho slogan như Hình 18.3 được thiết lập như sau:
+ Với phần nội dung chính và cuối trang, ta thực hiện việc phân tích bố cục và thiết lập CSS hoàn toàn tương tự. + Sau khi hoàn thành, lưu tệp tin dưới tên style.css. Bước 2: HS thực hiện nhiệm vụ học tập: - HS tiếp nhận, phân công công việc (tìm kiếm dữ liệu, lưu trữ khoa học) và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ 1. - HS có thể nhờ AI gợi ý cách chọn màu chữ, kiểu chữ, màu nền,… phù hợp với chủ đề. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. - Nếu gặp lỗi trong quá trình thực hành, HS có thể sử dụng AI để tìm hiểu và gỡ lỗi. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - GV mời một nhóm chia sẻ nhanh kết quả thực hiện nhiệm vụ. Bước 4: Đánh giá kết quả thực hiện: - GV đánh giá về thái độ làm việc và kết quả thực hiện Nhiệm vụ 1 của HS. - Nhiệm vụ 1 được gọi là hoàn thành khi HS tạo được tệp CSS. | 2. THỰC HÀNH Nhiệm vụ 1: Tạo tệp CSS - Nhiệm vụ quan trọng trong việc tạo tệp css là xác định được các khối và cách sắp xếp các khối này trong cấu trúc chung; định dạng cho các thành phần chữ và màu chữ của các đề mục và nội dung trong trang. - Mỗi khối trong bố cục đều được tạo bởi cặp thẻ div trong tệp tin HTML (từ khối to chứa nhiều phần tử bên trong đến các khối nhỏ nhất không chứa khối con nào). Tức là tệp tin HTML sử dụng thẻ div để tạo các loại khối khác nhau trong khi cách trang trí của mỗi loại khối được định nghĩa trong tệp tin CSS. - Những khối có nội dung tương đồng (ví dụ như bốn khối màu vàng Hình 18.2) được khai báo bởi cùng một class (định nghĩa của class được viết trong tệp tin CSS). Nếu một trong các đối tượng tương đồng có thêm một số đặc điểm riêng so với các đối tượng còn lại thì ta có thể sử dụng mã định danh id cho từng phần tử riêng biệt (xem lại Bài 16). - Lưu ý: Mặc định, các thẻ div sẽ tạo thành các khối xếp lần lượt từ trên xuống dưới (theo phương thẳng đứng). Để xếp các khối theo hàng ngang, ta cần tạo thẻ div lớn bao quanh các khối nhỏ dự định xếp hàng ngang. Các khối này cần được xác định chiều rộng sao cho tổng chiều rộng không quá 100%. | - 5.2.NC1a: Sáng tạo nội dung số dưới dạng mã nguồn máy tính để định dạng hiển thị. - 6.2.NC1a: Sử dụng AI để hỗ trợ thiết kế thẩm mỹ (UI) và gỡ lỗi kĩ thuật (Debug) trong lập trình. |
Nhiệm vụ 2: Tạo các tệp HTML Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu các nhóm đọc kĩ và thực hành theo hướng dẫn của Nhiệm vụ 2 SGK tr.104. Yêu cầu: Tạo các tệp HTML index.html, thethao.html và nghethuat.html để tạo trang web theo phân tích ở Nhiệm vụ 1. Hướng dẫn: + Để sử dụng các thiết lập CSS từ Nhiệm vụ 1, ta cần tạo các khối bằng thẻ div với các lớp CSS đã tạo. Ví dụ: Để tạo khối Banner cho trang chủ, ta làm như sau:
Thực hiện tương tự cho cả ba tệp tin. + Chuẩn bị một số hình ảnh và video các hoạt động tại lớp/trường em để sử dụng trong mỗi trang web. + Tạo các liên kết từ trang chủ đến hai trang còn lại và đặt liên kết tới các trang khác ở phần cuối trang. Bước 2: HS thực hiện nhiệm vụ học tập: - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành Nhiệm vụ 2. - HS có thể sử dụng AI để tạo nội dung cho website. Ví dụ: “Viết một đoạn văn khoảng 100 từ giới thiệu về CLB Tin học trường THPT, giọng văn hào hứng, nhắc đến các hoạt động như Lập trình Web, Robot và AI.” - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. - Nếu gặp lỗi trong quá trình thực hành, HS có thể sử dụng AI để tìm hiểu và gỡ lỗi. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS nộp sản phẩm hoàn chỉnh. Bước 4: Đánh giá kết quả thực hiện: - GV tổ chức báo cáo và đánh giá sản phẩm. - Nhiệm vụ 2 được gọi là hoàn thành khi HS tạo được các tệp HTML và tạo được liên kết từ tệp HTML đến tệp CSS. | Nhiệm vụ 2: Tạo các tệp HTML - Các khối được biểu diễn bằng thẻ div trong tệp tin HTML. Khi viết mã, các thẻ div được viết lần lượt từ trên xuống dưới, trừ trái sang phải theo bố cục đã xác định (Hình 18.2). - HS có thể viết bố cục lớn trước (tương ứng với thẻ div định nghĩa đầu trang, phần nội dung chính và cuối trang) sau đó thêm vào chi tiết của mỗi phần (thêm banner, khẩu hiệu slogan trong cặp thẻ div đầu trang, thực hiện tương tự cho phần nội dung chính). - Khi chưa có tệp tin CSS, tệp tin html sẽ hiển thị theo thứ tự từ trên xuống dưới theo phương thẳng đứng, chưa có màu trang trí được định nghĩa trong tệp tin CSS. Khi bổ sung CSS, tệp tin html mới hiển thị đúng như ý tưởng thiết kế. | - 5.2.NC1a: Tạo lập và tích hợp đa phương tiện (văn bản, hình ảnh, mã lệnh) thành sản phẩm web hoàn chỉnh. - 6.2.NC1a: Sử dụng AI như một trợ lý sáng tạo nội dung để nâng cao chất lượng thông tin trên web và gỡ lỗi kĩ thuật (Debug) trong lập trình. |
C. HOẠT ĐỘNG LUYỆN TẬP
a) Mục tiêu: Giúp HS củng cố lại kiến thức được học trong bài.
b) Nội dung: GV giao nhiệm vụ cho HS, HS thảo luận, thực hiện hoạt động Luyện tập SGK tr.105.
c) Sản phẩm học tập: HS hoàn thành hoạt động Luyện tập SGK tr.105.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
D. HOẠT ĐỘNG VẬN DỤNG
a) Mục tiêu: Định hướng HS hiệu chỉnh trang web đã có theo thiết kế mới.
b) Nội dung: GV hướng dẫn HS thiết kế lại trang web theo ý tưởng cá nhân.
c) Sản phẩm: HS hoàn thành bài tập phần Vận dụng SGK tr.105.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ học tập
- GV yêu cầu HS hoàn thành bài tập phần Vận dụng SGK tr.105 ở nhà.
Hãy đưa ra một thiết kế khác cho website đã tạo ở phần Thực hành. Viết định dạng theo thiết kế mới và chuyển toàn bộ website sang định dạng mới.
Bước 2: HS thực hiện nhiệm vụ học tập
- HS tiếp nhận và thực hiện nhiệm vụ ở nhà.
Bước 3: Báo cáo kết quả hoạt động, thảo luận
- Đầu tiết học sau, HS kiểm tra chéo, nhận xét và góp ý cho nhau.
Gợi ý:
Để thay đổi thiết kế cho website ta có thể giữ nguyên bố cục như ban đầu và thay đổi cách trang trí trong từng khối (thay phông chữ, kiểu chữ, màu chữ, ảnh minh hoạ,...) hoặc thay cả bố cục cũng như cách trang trí.
+ Nếu giữ nguyên bố cục ta có thể thực hiện như sau:
- Sửa tệp style.css bằng cách thay đổi giá trị của các thuộc tính của từng đối tượng, từng lớp. Từ đó ta sẽ có màu chữ, phông chữ, ảnh minh hoạ mới và tạo ra diện mạo mới cho trang web.
- Giữ nguyên các tệp HTML.
Cách này làm nhanh và áp dụng tốt khi trang web không có thay đổi về bố cục (ví dụ chuyển màu vào lễ Giáng sinh hay Tết nguyên đán,... thay màu chữ và các kiểu trang trí thiên về màu đỏ hoặc dịp trung thu có thể sử dụng ảnh trang trí có đèn ông sao).
+ Nếu thay đổi hoàn toàn bố cục và trang trí:
- Cách làm tương tự như trong bài với các bước xác định bố cục, các đối tượng, phần tử, sau đó tạo tệp style.css để trang trí cho các đối tượng, phần tử này.
- Thay đổi tệp HTML theo bố cục mới (class mới) và điền nội dung tương ứng vào các khối cho phù hợp.
Bước 4: Đánh giá kết quả thực hiện
- Tiết học tiếp theo, GV nhận xét, kiểm tra kết quả thực hiện hoạt động Vận dụng.
- GV đánh giá kết quả thực hiện các nhiệm vụ học tập của HS và kết thúc tiết học.
[5.2.NC1a: Sáng tạo và xuất bản nội dung số (Lập trình và Phát triển Web).
6.1.NC1a: Xác định nhu cầu và giải quyết vấn đề kỹ thuật.
1.1.NC1a: Quản lý dữ liệu và thiết bị.]
E. THÔNG TIN BỔ SUNG
…………………………………………..
…………………………………………..
…………………………………………..
=> Giáo án Khoa học máy tính 12 Kết nối bài 18: Thực hành tổng hợp thiết kế trang web