Đây là bài 2 của chương 6: Responsive và ảnh, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.
Mục tiêu cụ thể
Thiết kế từ màn hình nhỏ bắt đầu bằng bố cục cơ bản dễ đọc, sau đó mở rộng khi có đủ chỗ. Ảnh cần kích thước hợp lý, alt phù hợp và tránh làm dịch chuyển bố cục khi tải.
Đọc ví dụ theo luồng dữ liệu
Đọc từ đầu vào tới đầu ra. Xác định từng tên, điều kiện và quan hệ phụ thuộc trước khi chạy. Nếu có tên model, bảng hoặc endpoint chưa tồn tại, coi đó là thành phần minh họa cần dựng trong dự án thử nghiệm; đoạn trích không đại diện một ứng dụng hoàn chỉnh.
<img src="course.jpg" alt="Bìa khóa học HTML và CSS" width="800" height="450" style="max-width:100%;height:auto">
<style>
.container { width: min(100% - 32px, 1120px); margin-inline: auto; }
@media (min-width: 768px) { .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } }
</style>Cách phân tích
- Đánh dấu phần khai báo và phần thực hiện thao tác.
- Dự đoán kết quả với dữ liệu thông thường trước khi chạy.
- Thay đúng một giá trị đầu vào để kiểm tra dự đoán.
- Ghi lại kết quả thực tế, không chỉ thông báo thành công.
Tình huống đối chiếu
Ẩn nội dung quan trọng ở mobile để dễ dàn trang làm mất chức năng. Không dùng ảnh gốc rất lớn chỉ để hiển thị một thumbnail nhỏ.
Hãy liên hệ ví dụ với yêu cầu của chương: Tối ưu hero của trang giới thiệu cho 320px, 768px và 1280px; ghi lại điều gì thay đổi ở mỗi kích thước. Chỗ nào có thể dùng lại trực tiếp, chỗ nào phải đổi vì dữ liệu hoặc môi trường khác? Giải thích sự khác biệt đó giúp tránh việc sao chép một mẫu đúng trong bối cảnh này nhưng sai trong bối cảnh khác.
Bài tập đọc hiểu
- Chỉ ra phần nào của ví dụ giúp bảo đảm: ảnh giữ tỷ lệ gốc.
- Chỉ ra phần nào của ví dụ giúp bảo đảm: nội dung không cần zoom để đọc.
- Chỉ ra phần nào của ví dụ giúp bảo đảm: không có thanh cuộn ngang.
Nộp lại bản chú thích ngắn, kết quả quan sát và một biến thể đã thử. Nếu ví dụ chưa đủ để đạt một tiêu chí, liệt kê phần cần bổ sung thay vì coi tiêu chí đã tự động được thỏa mãn.