Giáo án Bài 18. Thực hành tổng hợp thiết kế trang web

Giúp HS xác định nhiệm vụ của dự án và phân biệt được kế hoạch, số liệu minh họa với quan sát thực tế trước khi viết mã.

GV đưa ra 5 phát biểu, HS giơ thẻ “Đúng” hoặc “Sai” và giải thích ngắn:

• Bảng “Lịch dự kiến” trên trang lich.html cho thấy nhóm đã đo chiều cao cây. (Sai)
• Trang lich.html ghi “Kế hoạch không phải kết quả đã quan sát”. (Đúng)
• Trang chủ chỉ cần có tiêu đề h1 là đủ. (Sai)
• Dự án không thu dữ liệu cá nhân của bạn trong lớp. (Đúng)
• Mục đích dự án là trình bày kết quả thí nghiệm đã hoàn thành. (Sai)
  Sau đó GV nêu nhiệm vụ: hoàn thiện website tĩnh “Vườn hạt của lớp” gồm hai trang, dùng chung CSS, ảnh tự vẽ, menu hai chiều và bảng kế hoạch.

Mỗi HS nêu đúng ít nhất 4/5 phát biểu và giải thích được: bảng lịch chỉ là kế hoạch; trang chủ cần có tiêu đề, menu và nội dung chính; dự án là website tĩnh với mục đích kế hoạch học tập và không thu dữ liệu riêng.

HS nêu được vai trò các vùng header, nav, main, footer; giải thích được liên kết trang bằng href, dùng chung CSS bằng thẻ link và lý do không dùng bảng để bố trí toàn trang.

Nhóm 4 HS được phân vai theo mảnh ghép: nhóm A nghiên cứu header và nav trong index.html; nhóm B nghiên cứu main (thẻ section class="khung", h2, img có alt) và ghi chú về nội dung gốc; nhóm C nghiên cứu footer và thẻ head (meta viewport, title, link style.css); nhóm D nghiên cứu bảng trong lich.html và quy tắc không dùng bảng bố trí toàn trang.
Các nhóm hoàn thành Phiếu học tập số 1 (phần A). Sau đó, mỗi HS sang nhóm mới và chia sẻ mảnh của mình.

Phiếu học tập số 1 hoàn chỉnh, gồm các nội dung chính:

• header chứa h1 và nav; nav có hai liên kết index.html và lich.html bằng thẻ a href.
• main chứa section class="khung" với h2, ảnh có thuộc tính alt mô tả đúng nội dung (“Cây đậu minh họa có hai lá”).
• footer ghi chú nguồn: “Hình tự vẽ” và “Không đăng dữ liệu cá nhân”.
• head: meta charset UTF-8, meta viewport, title, link rel="stylesheet" href="style.css" giúp dùng chung CSS cho cả hai trang.
• Bảng chỉ dùng cho dữ liệu dạng lưới (lịch dự kiến với th scope="col"), không dùng để bố trí toàn trang.
  Kết luận: cấu trúc ngữ nghĩa giúp trình duyệt và người đọc hiểu vai trò từng vùng.

HS tạo đủ bốn tệp trong cùng thư mục, viết hoặc sửa mã theo cấu trúc đã cho; giải thích được quy tắc khung border-box và cách co ảnh bằng CSS.

Nhóm lập thư mục “Vườn hạt của lớp” chứa index.html, lich.html, style.css, hat-dau.svg. Nhóm soạn mã HTML theo mẫu, kiểm tra menu hai chiều (từ index.html tới lich.html và ngược lại), kiểm tra ảnh có alt, kiểm tra CSS ngoài đã được liên kết ở cả hai trang.
Nhiệm vụ tính toán: một khung border-box rộng 300 px, padding 16 px mỗi bên và border 2 px mỗi bên thì nội dung rộng $300-2\cdot16-2\cdot2=264\,\text{px}$ (chưa tính margin bên ngoài).
Nhóm ghi kết quả vào Phiếu kiểm sản phẩm (cột “Dự kiến” và cột “Quan sát thực tế”).

Hai trang HTML hợp lệ, cùng thư mục, liên kết đúng:

• index.html có h1 “Vườn hạt của lớp”, ảnh hat-dau.svg với alt “Cây đậu minh họa có hai lá”, danh sách “Chậu sạch” và “Giá thể phù hợp”.
• lich.html có h1 “Lịch chăm hạt”, bảng “Lịch dự kiến” với hai dòng: Thứ hai – Gieo hạt; Thứ sáu – Đo chiều cao.
• Menu hai chiều hoạt động: từ mỗi trang bấm được tới trang còn lại và quay về.
• style.css được liên kết ở head của cả hai trang; ảnh co theo khung khi đã đặt CSS img{max-width:100%; height:auto}.
• Đáp số ví dụ: nội dung rộng 264 px.
  Phiếu kiểm sản phẩm được điền đủ, ghi rõ kết quả thật đã thao tác.

HS vận dụng kiến thức về kiểm thử liên kết, phân biệt kế hoạch với quan sát, quy trình tạo sản phẩm và tính kích thước khung border-box.

HS làm bài tập tương tác trên trang bài học NeoEdu, sau đó đối chiếu với các câu hỏi GV đã chuẩn bị:

1. Cấu trúc tệp phù hợp dự án hai trang dùng chung kiểu là gì? A. Hai trang với mọi tên tệp đều khác liên kết; B. index.html, lich.html và style.css được liên kết đúng; C. Đổi ảnh thành .html; D. Chỉ một tệp .txt không mã HTML.
2. Điều nào phải thử sau khi sửa menu? A. Chỉ màu tiêu đề; B. Chỉ số lượt thích; C. Đi từ mỗi trang tới các đích và quay lại; D. Chỉ tên người thiết kế.
3. Khung border-box rộng 300 px, padding 16 px và border 2 px mỗi bên. Nội dung rộng bao nhiêu pixel?
4. Có bảng “Lịch dự kiến” nghĩa là nhóm đã thực hiện mọi việc và có số đo thật. Đúng hay sai?
5. Sắp xếp quy trình tạo sản phẩm hoàn chỉnh: Viết HTML/CSS theo cấu trúc tệp; Kiểm liên kết, ảnh, chữ và màn hình hẹp; Chốt mục đích và người đọc; Vẽ cây hai trang và chuẩn bị tệp ảnh; Sửa lỗi, lưu hồ sơ và chia sẻ đúng phạm vi.
6. Ghép tiêu chí với phép kiểm: Liên kết đủ – thử menu trên cả hai trang; Ảnh có nghĩa thay thế – đọc alt và đối chiếu nội dung ảnh; Kiểu dùng chung – hai head cùng liên kết style.css.

Đáp án:

1. B (hai trang chia nội dung, cùng dùng CSS qua href đúng cấu trúc).
2. C (kiểm liên kết hai chiều và đích thật, không chỉ nhìn nhãn).
3. 264 px ($300-2\cdot16-2\cdot2=264$, chưa xét margin).
4. Sai (kế hoạch không là bằng chứng thực nghiệm; phải gắn nhãn đúng).
5. Chốt mục đích và người đọc → Vẽ cây hai trang và chuẩn bị tệp ảnh → Viết HTML/CSS theo cấu trúc tệp → Kiểm liên kết, ảnh, chữ và màn hình hẹp → Sửa lỗi, lưu hồ sơ và chia sẻ đúng phạm vi.
6. Liên kết đủ – thử menu trên cả hai trang; Ảnh có nghĩa thay thế – đọc alt và đối chiếu nội dung ảnh; Kiểu dùng chung – hai head cùng liên kết style.css.

HS thực hiện kiểm thử theo tiêu chí, phát hiện và sửa lỗi thực tế, lập báo cáo trung thực và chỉ chia sẻ sản phẩm sau khi được duyệt; áp dụng vào sản phẩm thật của nhóm.

Nhóm dùng Phiếu kiểm sản phẩm để kiểm thử: (1) menu hai chiều trên cả hai trang; (2) ảnh hat-dau.svg có alt và không bị méo (khi thu nhỏ màn hình); (3) style.css được tải đúng ở cả hai trang; (4) chữ đọc được; (5) bảng lịch có hai dòng đúng nội dung.
Nếu phát hiện lỗi, nhóm ghi mã lỗi (L1, L2…), nguyên nhân, cách sửa và kết quả kiểm lại. Ví dụ: L1 – menu trên lich.html dẫn tới href="home.html" không tồn tại, sửa thành <a href="index.html">Trang chủ</a>; L2 – ảnh 240×180 bị ép vuông, đặt width="240" height="180" và thêm CSS img{max-width:100%; height:auto}.
Nhiệm vụ về nhà: hoàn thiện sản phẩm, nộp thư mục và phiếu kiểm đã điền đủ cột “Dự kiến” và “Quan sát thực tế”.

Phiếu kiểm sản phẩm hoàn chỉnh gồm:

• Các mục kiểm có kết quả thật: menu đạt hai chiều; CSS dùng chung đạt; ảnh đạt sau khi sửa.
• Báo cáo lỗi có mã lỗi, nguyên nhân và mã sửa cụ thể (href="index.html"; width và height đúng; img{max-width:100%; height:auto}).
• Ghi rõ trạng thái: “Đã sửa và kiểm lại” chỉ khi đã thao tác; “Đề xuất” nếu chưa thực hiện.
• Ghi chú riêng tư: không có dữ liệu cá nhân trên trang; chỉ chia sẻ bản được giáo viên duyệt.
  Kết quả đánh giá tham khảo: liên kết sửa đúng 0,3; ảnh/tỉ lệ/CSS 0,3; thử lại có tiêu chí 0,25; trung thực minh chứng 0,15.