Đề bài
Để tăng cường quảng bá về an toàn giao thông cho học sinh, nhà trường đã y cầu câu lạc bộ truyền thông thiết kế website có định dạng và nội dung như sau:
Mặc định, biển có màu xám (#999999). Khi di chuột vào biển báo nào, thì biên có khối thông tin tương ứng sẽ là màu đỏ (#FF0000) và có độ dày 2px. Chữ có màu trắng, nền màu đỏ. Dựa vào thiết kế này, các học sinh đã có những phát biểu về mã lệnh HTML nh
sau đây.
1. Sử dụng thẻ <div> để xác định các khối thông tin.
2. Đoạn lệnh HTML sau đây sẽ hiển thị thông tin của một khối đầu tiên theo đúng định dạng yêu cầu.<div><img src="camnguocchieu.jpg" alt="Cấm đi ngược chiều"><p>Cấm đi ngược chiều</p></div>
3. Để định dạng biên của khối, màu nền đỏ và màu chữ trắng của văn bản trong khối, cần bổ sung thêm mã lệnh CSS sau đây.div {border-radius: 8px;border: 1px solid #999999;text-align:center;}p {background-color: #FF0000;color: #FFFFFF;
4. Để tạo hiệu ứng khi di chuột vào, thì biên màu đỏ và độ dày gấp đôi, sử dụng đoạnmã lệnh CSS như sau:div:hover { border: 2px solid #FF0000;}
Đáp án đúng: 1Đ, 2S, 3Đ, 4Đ
Xem lời giải
Lời giải chi tiết
Phân tích các phát biểu:
- Phát biểu 1: Sử dụng thẻ <div> để xác định các khối thông tin.
Phát biểu này đúng vì thẻ <div> thường được sử dụng để chứa và định nghĩa một khối nội dung trong HTML. - Phát biểu 2: Đoạn lệnh HTML sau đây sẽ hiển thị thông tin của một khối đầu tiên theo đúng định dạng yêu cầu:
<div><img src="camnguocchieu.jpg" alt="Cấm đi ngược chiều"><p>Cấm đi ngược chiều</p></div>
Phát biểu này đúng về cách cấu trúc cơ bản của HTML, nhưng chưa hoàn toàn đúng về định dạng theo yêu cầu vì chưa có phần CSS để thay đổi màu sắc khi hover. - Phát biểu 3: Để định dạng biên của khối, màu nền đỏ và màu chữ trắng của văn bản trong khối, cần bổ sung thêm mã lệnh CSS như sau:
div {border-radius: 8px; border: 1px solid #999999; text-align: center;} p {background-color: #FF0000; color: #FFFFFF; }
Đúng với việc thiết lập biên và màu sắc cơ bản, nhưng phát biểu này không đề cập đến việc thay đổi khi di chuột vào (không có phần hover). - Phát biểu 4: Để tạo hiệu ứng khi di chuột vào, thì biên màu đỏ và độ dày gấp đôi, sử dụng đoạn mã lệnh CSS như sau:
div:hover {border: 2px solid #FF0000;}
Phát biểu này là đúng vì đoạn mã CSS này thay đổi độ dày và màu sắc của biên khi di chuột vào.
Chú ý khi giải
- Lưu ý về việc đặt hình ảnh và văn bản trong cùng một thẻ <div> để dễ dàng định dạng bằng CSS.
- Cần đảm bảo CSS được viết đúng để áp dụng chính xác các hiệu ứng mong muốn.
- Cẩn thận với các như việc định dạng khi hover để tránh sai sót.