Trắc nghiệm Tin học ứng dụng 12 Cánh diều bài 3: Tạo thanh điều hướng cho trang web
1. Khi tạo liên kết trong thanh điều hướng, thẻ HTML nào được sử dụng bên trong mỗi mục danh sách "li"?
A. Thẻ "span" để chứa văn bản liên kết.
B. Thẻ "a" (anchor tag) với thuộc tính "href" để chỉ định URL đích.
C. Thẻ "button" để tạo nút có thể nhấp.
D. Thẻ "img" để chèn biểu tượng cho mục liên kết.
2. Để các mục trong thanh điều hướng có khoảng cách đều nhau hoặc được căn giữa trong một container, kỹ thuật CSS nào là hiệu quả nhất?
A. Sử dụng thuộc tính "margin" cho từng mục.
B. Sử dụng Flexbox với các thuộc tính như "justify-content: space-around;" hoặc "justify-content: center;".
C. Sử dụng thuộc tính "padding" cho container.
D. Sử dụng "float: left;" và tính toán "margin" thủ công.
3. Để tạo hiệu ứng khi di chuột qua một mục trong thanh điều hướng (ví dụ: thay đổi màu nền), chúng ta sử dụng bộ chọn CSS nào?
A. Bộ chọn lớp ".hover".
B. Bộ chọn pseudo-class ":hover".
C. Bộ chọn ID "#hover".
D. Bộ chọn thuộc tính "[hover]".
4. Việc thêm thuộc tính "aria-label" cho các liên kết trong thanh điều hướng có ý nghĩa gì đối với người dùng sử dụng trình đọc màn hình?
A. Thay đổi màu sắc của liên kết.
B. Cung cấp mô tả ngữ nghĩa rõ ràng hơn cho liên kết, giúp người dùng trình đọc màn hình hiểu mục đích của liên kết ngay cả khi văn bản liên kết không đầy đủ.
C. Tăng tốc độ tải trang.
D. Ngăn chặn công cụ tìm kiếm lập chỉ mục liên kết.
5. Để tạo khoảng trống bên trong mỗi mục của thanh điều hướng (giữa văn bản và viền của mục đó), thuộc tính CSS nào là phù hợp nhất?
A. margin;
B. padding;
C. border;
D. outline;
6. Trong các phương pháp tạo thanh điều hướng, việc sử dụng JavaScript chủ yếu nhằm mục đích gì?
A. Thay đổi cấu trúc HTML của thanh điều hướng.
B. Tạo các hiệu ứng động, tương tác phức tạp như menu thả xuống (dropdowns), hoặc xử lý logic khi người dùng nhấp vào các mục.
C. Định dạng màu sắc và phông chữ cho thanh điều hướng.
D. Tăng cường khả năng hiển thị trên các trình duyệt cũ.
7. Thuộc tính CSS nào được dùng để xác định màu nền cho thanh điều hướng?
A. color;
B. background-color;
C. text-color;
D. fill;
8. Thuộc tính CSS nào được sử dụng để điều chỉnh khoảng cách giữa các ký tự trong văn bản của các mục thanh điều hướng?
A. word-spacing;
B. line-height;
C. letter-spacing;
D. text-indent;
9. Để tạo một thanh điều hướng có thể tùy chỉnh cao về giao diện, bạn nên ưu tiên sử dụng công nghệ nào?
A. Chỉ HTML.
B. HTML và CSS, kết hợp với các thư viện CSS hoặc frameworks (như Bootstrap, Tailwind CSS) nếu cần.
C. Chỉ JavaScript.
D. Ngôn ngữ lập trình backend như PHP hoặc Python.
10. Tại sao việc sử dụng thẻ "nav" lại được khuyến khích hơn thẻ "div" thông thường khi tạo thanh điều hướng chính?
A. Thẻ "nav" làm cho trang web tải nhanh hơn.
B. Thẻ "nav" mang ý nghĩa ngữ nghĩa rõ ràng, giúp trình duyệt, công cụ tìm kiếm và các thiết bị hỗ trợ tiếp cận (assistive technologies) hiểu rằng đây là khối liên kết điều hướng chính.
C. Thẻ "nav" tự động tạo hiệu ứng hover.
D. Thẻ "nav" yêu cầu ít CSS hơn để hoạt động.
11. Thẻ HTML nào thường được sử dụng để tạo các menu thả xuống (dropdowns) bên trong thanh điều hướng?
A. Thẻ "div" lồng nhau.
B. Danh sách không thứ tự "ul" lồng nhau bên trong một mục "li", thường đi kèm với JavaScript để hiển thị/ẩn.
C. Thẻ "span" có thuộc tính "display: dropdown;".
D. Thẻ "table" để tổ chức các mục con.
12. Thuộc tính CSS nào thường được áp dụng cho thẻ "a" bên trong thanh điều hướng để loại bỏ gạch chân mặc định của liên kết?
A. text-decoration: underline;
B. text-decoration: none;
C. font-weight: bold;
D. color: blue;
13. Nếu bạn muốn các mục trong thanh điều hướng tự động xuống dòng khi không còn đủ chỗ trên một dòng (ví dụ: trên màn hình nhỏ), bạn nên thiết lập thuộc tính CSS nào cho container của thanh điều hướng?
A. flex-wrap: nowrap;
B. flex-wrap: wrap;
C. white-space: nowrap;
D. overflow: hidden;
14. Khi một mục trong thanh điều hướng đại diện cho trang hiện tại, cách tốt nhất để làm nổi bật mục đó là gì?
A. Xóa liên kết của mục đó.
B. Thêm một lớp CSS đặc biệt (ví dụ: ".active" hoặc ".current") vào mục đó và định dạng nó khác biệt (ví dụ: đậm hơn, màu khác, gạch chân).
C. Thay đổi kích thước phông chữ của mục đó nhỏ hơn các mục khác.
D. Di chuyển mục đó ra khỏi thanh điều hướng.
15. Trong trường hợp thanh điều hướng có nhiều cấp độ (ví dụ: menu chính và menu con), cấu trúc HTML nào là phổ biến và hiệu quả nhất?
A. Sử dụng nhiều thẻ "div" lồng nhau với các class khác nhau.
B. Sử dụng danh sách không thứ tự "ul" lồng nhau (nested ul) cho các cấp độ menu con.
C. Sử dụng bảng (table) để tạo cấu trúc phân cấp.
D. Sử dụng các thẻ "p" và "span" để tạo liên kết.
16. Để đảm bảo thanh điều hướng luôn hiển thị ở đầu trang ngay cả khi người dùng cuộn trang, chúng ta cần áp dụng thuộc tính CSS nào cho phần tử chứa thanh điều hướng?
A. position: relative;
B. position: absolute;
C. position: fixed;
D. position: static;
17. Trong ngữ cảnh của thanh điều hướng, việc sử dụng các lớp CSS (class) có lợi ích gì?
A. Chỉ cho phép áp dụng một kiểu CSS duy nhất cho toàn bộ trang.
B. Cho phép nhóm các phần tử có cùng kiểu dáng hoặc chức năng và áp dụng CSS một cách có tổ chức, dễ quản lý.
C. Tăng cường bảo mật cho trang web.
D. Buộc người dùng phải sử dụng JavaScript để tương tác.
18. Trong thiết kế web hiện đại, mục đích chính của việc tạo thanh điều hướng (navigation bar) là gì?
A. Tăng tốc độ tải trang web.
B. Giúp người dùng dễ dàng tìm kiếm và truy cập các nội dung khác nhau trên trang web.
C. Cung cấp thông tin liên hệ của quản trị viên.
D. Tạo hiệu ứng đồ họa bắt mắt cho trang web.
19. Khi sử dụng Flexbox để sắp xếp các mục thanh điều hướng, thuộc tính nào giúp căn chỉnh các mục theo chiều dọc trong trường hợp chiều cao của chúng không bằng nhau?
A. justify-content;
B. align-items;
C. flex-direction;
D. flex-wrap;
20. Để các mục trong thanh điều hướng hiển thị theo chiều ngang, thay vì chiều dọc mặc định của danh sách "ul", chúng ta thường sử dụng thuộc tính CSS nào?
A. display: block;
B. float: left;
C. display: inline-block; hoặc display: flex;
D. text-align: center;
21. Khi cần tạo các liên kết có biểu tượng (icon) bên cạnh văn bản trong thanh điều hướng, bạn sẽ kết hợp những công nghệ nào?
A. Chỉ HTML.
B. HTML (cho cấu trúc liên kết) và CSS (để chèn icon bằng font icon hoặc background-image).
C. Chỉ CSS với thuộc tính "icon-link".
D. Chỉ JavaScript để hiển thị icon.
22. Thành phần nào của HTML thường được sử dụng để tạo cấu trúc cơ bản cho thanh điều hướng?
A. Thẻ "div" với thuộc tính "id" là "navbar".
B. Thẻ "header" hoặc thẻ "nav" kết hợp với danh sách không thứ tự "ul" và các mục danh sách "li".
C. Thẻ "footer" chứa các liên kết.
D. Thẻ "section" chia nội dung thành các phần nhỏ.
23. Khi thiết kế thanh điều hướng cho các thiết bị có màn hình nhỏ (ví dụ: điện thoại di động), phương pháp nào thường được áp dụng để tiết kiệm không gian?
A. Hiển thị tất cả các mục điều hướng theo chiều ngang.
B. Sử dụng menu dạng "hamburger" (biểu tượng ba gạch ngang) ẩn các mục điều hướng.
C. Tăng kích thước font chữ của các mục.
D. Giảm số lượng mục điều hướng trên trang.
24. Thuộc tính CSS "box-sizing" có vai trò gì khi định dạng các phần tử trong thanh điều hướng?
A. Chỉ ảnh hưởng đến màu sắc của văn bản.
B. Quyết định cách tính toán tổng chiều rộng và chiều cao của phần tử, bao gồm cả padding và border, giúp dự đoán bố cục chính xác hơn.
C. Chỉ áp dụng cho các phần tử hình ảnh.
D. Kiểm soát khoảng cách giữa các dòng.
25. Thuộc tính CSS nào được sử dụng để loại bỏ các dấu chấm (bullet points) mặc định của danh sách "ul"?
A. list-style-type: none;
B. text-decoration: none;
C. margin: 0;
D. padding: 0;
