1) Mục tiêu bài học
- Tạo trang web bằng HTML và định dạng bằng CSS; tổ chức bố cục hợp lý, thống nhất phong cách giữa các trang.
- Biết khai thác ảnh/video sẵn có để minh hoạ nội dung trang.
HTML
CSS
bố cục web
trang chủ
2) Dự án: Website giới thiệu các câu lạc bộ của trường
- Cấu trúc: trang chủ + các trang thành viên (VD: Thể thao, Nghệ thuật) + (tuỳ chọn) trang đăng kí.
- Trang chủ: thông tin chung, liên kết tới trang thành viên; dùng ảnh/video sẵn có.
- Thống nhất giao diện bằng một tệp CSS chung cho toàn site (theo sơ đồ bố cục Hình 18.2).
Gợi ý: Đặt tên tệp rõ ràng:
index.html, thethao.html, nghethuat.html.
3) Nhiệm vụ 1 – Tạo tệp CSS (style.css)
- Phân tích bố cục mỗi trang: Đầu trang (Header) → Banner + Slogan; Nội dung chính (chia cột đều); Cuối trang (Footer).
- Quy ước lớp CSS cơ bản:
Quy ước lớp:
.banner: nền ảnh, chữ nổi bật, căn giữa, đệm trên/dưới lớn..slogan: nền sáng, căn giữa, đủ đệm; bọc bởi.row..row: dùng flex để xếp các khối ngang, tự quấn dòng khi hẹp..block_3: mỗi khối chiếm ~1/3 chiều rộng (3 khối/hàng).
Hình minh hoạ: Bố cục slogan – Hình 18.3 (trang 3).
4) Nhiệm vụ 2 – Tạo các tệp HTML
- Tạo
index.html,thethao.html,nghethuat.html; chia khối bằng<div>gán lớp đã định nghĩa. - Mẫu khối:
Mẫu cấu trúc:
- Banner:
<div class="banner"><h2>...</h2></div> - Slogan:
<div class="slogan"><div class="row"><div class="block_3">...</div>×3</div></div>
- Chuẩn bị ảnh/video hoạt động để chèn vào các trang.
- Tạo liên kết điều hướng: từ trang chủ tới trang thành viên; ở footer đặt liên kết tới các trang khác.
5) Luyện tập & Vận dụng
- Luyện tập:
- Tạo
dang_ki.html(biểu mẫu đăng kí CLB) và thêm liên kết ở footer của mọi trang. - Thêm hiệu ứng hover đổi màu/định dạng chữ khi rê chuột.
- Vận dụng: Đề xuất thiết kế mới, viết lại CSS theo thiết kế đó và chuyển toàn bộ website sang phong cách mới.
banner
slogan
flexbox
điều hướng