1. Kiến thức trọng tâm
Thực hành tổng hợp là bước vận dụng toàn bộ kiến thức HTML và CSS để tạo một trang web hoàn chỉnh. Quy trình gồm bốn bước: xác định mục đích và đối tượng của trang web, phác thảo bố cục trên giấy (đầu trang, menu điều hướng, nội dung chính, chân trang), viết mã HTML theo cấu trúc đã phác thảo, rồi dùng CSS để định dạng màu sắc, phông chữ, khoảng cách và bố cục. Khi làm việc, cần đặt tên tệp và thư mục rõ ràng, viết mã có thụt lề, thêm ghi chú ngắn để dễ đọc. Sau khi viết xong, phải kiểm tra trang trên nhiều trình duyệt và nhiều cỡ màn hình khác nhau, sửa các lỗi hiển thị, kiểm tra liên kết, hình ảnh và biểu mẫu. Một trang web tốt không chỉ đẹp mà còn phải có nội dung đúng chính tả, điều hướng rõ ràng, tải nhanh và hiển thị tốt trên điện thoại cũng như máy tính.
2. Ví dụ minh họa
Yêu cầu: lập kế hoạch thiết kế trang web giới thiệu câu lạc bộ Tin học của trường.
Lời giải: Bước 1 — mục đích: giới thiệu câu lạc bộ, thu hút thành viên mới; đối tượng: học sinh trong trường. Bước 2 — bố cục: đầu trang có tên câu lạc bộ và menu (Giới thiệu, Hoạt động, Đăng kí); nội dung chính gồm đoạn giới thiệu, danh sách hoạt động, bảng lịch sinh hoạt; chân trang có thông tin liên hệ. Bước 3 — viết HTML: dùng <header>, <nav>, <main>, <footer>, chèn ảnh sinh hoạt, tạo biểu mẫu đăng kí. Bước 4 — viết CSS: màu chủ đạo xanh dương, phông chữ rõ ràng, menu nổi bật, hộp nội dung có padding và viền nhẹ. Cuối cùng kiểm tra liên kết, ảnh và biểu mẫu trước khi công bố.
3. Ghi nhớ
- Quy trình: xác định mục đích → phác thảo bố cục → viết HTML → định dạng CSS → kiểm tra.
- Bố cục thường gồm: đầu trang, menu điều hướng, nội dung chính, chân trang.
- Viết mã có thụt lề, đặt tên tệp rõ ràng, thêm ghi chú ngắn.
- Kiểm tra trên nhiều trình duyệt và cỡ màn hình; kiểm tra liên kết, ảnh, biểu mẫu.