Trắc nghiệm Cánh diều Tin học ứng dụng 12 bài 3: Tạo thanh điều hướng cho trang web
1. Trong trường hợp thanh điều hướng quá dài và không vừa với chiều rộng màn hình thiết bị di động, giải pháp nào sau đây là phù hợp nhất?
A. Sử dụng thanh cuộn ngang (horizontal scroll) cho menu hoặc chuyển sang menu dạng hamburger.
B. Giảm kích thước font chữ của tất cả các mục.
C. Cắt bớt các mục không quan trọng.
D. Tăng chiều rộng của thanh điều hướng.
2. Trong thiết kế web, yếu tố nào sau đây đóng vai trò là bản đồ giúp người dùng di chuyển giữa các trang và hiểu cấu trúc của một trang web?
A. Thanh điều hướng (Navigation bar)
B. Footer
C. Header
D. Nội dung chính (Main content)
3. Thanh điều hướng có thể được đặt ở những vị trí nào trên trang web?
A. Phần đầu trang (header), thanh bên (sidebar), hoặc thanh chân trang (footer).
B. Chỉ ở phần đầu trang (header).
C. Chỉ ở thanh bên (sidebar).
D. Chỉ ở nội dung chính.
4. Thẻ HTML nav được sử dụng để làm gì trong cấu trúc trang web, đặc biệt liên quan đến thanh điều hướng?
A. Định nghĩa một khối chứa các liên kết điều hướng chính.
B. Tạo một tiêu đề cho trang web.
C. Định dạng văn bản in nghiêng.
D. Tạo một bảng dữ liệu.
5. Thuộc tính CSS nào được sử dụng để thay đổi màu sắc của văn bản trong các liên kết của thanh điều hướng?
A. color
B. background-color
C. text-color
D. font-color
6. Đâu là một ví dụ về anchor link trong thanh điều hướng, cho phép người dùng nhảy đến một phần cụ thể của cùng một trang?
7. Khi tạo một thanh điều hướng cố định ở đầu trang, để đảm bảo nội dung không bị che khuất bởi thanh điều hướng, chúng ta cần điều chỉnh margin-top hoặc padding-top cho phần tử nào?
A. Phần tử chứa nội dung chính của trang.
B. Chính thanh điều hướng.
C. Thẻ body.
D. Thẻ html.
8. Để 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, chúng ta thường áp dụng thuộc tính CSS nào cho các mục danh sách (li)?
A. display: inline-block hoặc float: left
B. display: block
C. text-align: center
D. margin: auto
9. Yếu tố nào quan trọng nhất để đảm bảo thanh điều hướng hoạt động tốt trên cả máy tính và thiết bị di động?
A. Thiết kế đáp ứng (Responsive Design) và tối ưu hóa trải nghiệm người dùng (UX).
B. Chỉ sử dụng HTML cơ bản.
C. Tập trung vào màu sắc và font chữ.
D. Sử dụng nhiều hiệu ứng JavaScript phức tạp.
10. Trong thiết kế thanh điều hướng, việc làm cho các mục liên kết thay đổi màu sắc hoặc kiểu hiển thị khi người dùng di chuột qua (hover) thường được thực hiện bằng cách nào?
A. Sử dụng bộ chọn CSS :hover
B. Sử dụng thuộc tính JavaScript onmouseover
C. Sử dụng thuộc tính HTML hover-effect
D. Tất cả các phương án trên
11. Khi người dùng nhấp vào một liên kết trong thanh điều hướng, trang web sẽ chuyển đến một phần khác. Điều này được thực hiện bằng cách nào?
A. Thẻ a có thuộc tính href trỏ đến URL hoặc anchor của trang đích.
B. Sử dụng JavaScript để thay đổi nội dung trang.
C. Sử dụng CSS để làm ẩn các trang khác.
D. Dùng thẻ button để chuyển trang.
12. Khi tạo một menu thả xuống (dropdown menu) trong thanh điều hướng, phần tử nào thường được sử dụng để chứa các mục con?
A. Một danh sách lồng nhau (nested unordered list - ul bên trong li).
B. Một thẻ div riêng biệt.
C. Một thẻ span cho mỗi mục con.
D. Một thẻ button cho mỗi mục con.
13. Trong ngữ cảnh tạo thanh điều hướng, li là viết tắt của từ gì trong HTML?
A. List item (mục danh sách)
B. Link item (mục liên kết)
C. Layout item (mục bố cục)
D. Logo item (mục logo)
14. Thuộc tính CSS nào giúp loại bỏ các dấu chấm mặc định (bullets) xuất hiện trước các mục danh sách trong menu điều hướng?
A. list-style-type: none
B. text-decoration: none
C. padding: 0
D. margin: 0
15. Để tạo khoảng cách giữa các mục trong thanh điều hướng, chúng ta nên áp dụng thuộc tính padding hoặc margin cho các phần tử nào?
A. Các mục danh sách (li) hoặc các thẻ liên kết (a)
B. Thẻ ul bao ngoài
C. Thẻ body
D. Thẻ html
16. Khi tạo thanh điều hướng, các liên kết (thường là thẻ a) bên trong menu có thể có các dấu gạch chân mặc định. Để loại bỏ chúng, chúng ta sử dụng thuộc tính CSS nào?
A. text-decoration: none
B. border-bottom: none
C. underline: none
D. style: none
17. Thuộc tính CSS nào giúp kiểm soát việc hiển thị của menu thả xuống (ví dụ: ẩn khi không hover, hiển thị khi hover)?
A. display: none và display: block (hoặc flex, inline-block) kết hợp với bộ chọn :hover.
B. visibility: hidden và visibility: visible.
C. opacity: 0 và opacity: 1.
D. position: absolute và position: relative.
18. Nếu bạn muốn các mục của thanh điều hướng có khoảng cách tối thiểu là 20px từ mọi phía, bạn sẽ áp dụng thuộc tính CSS nào cho các mục li?
A. padding: 20px;
B. margin: 20px;
C. border: 20px solid black;
D. outline: 20px;
19. Thuộc tính CSS background-color được áp dụng cho phần tử nào để tạo màu nền cho thanh điều hướng?
A. Thẻ nav hoặc thẻ ul bao ngoài menu.
B. Các thẻ li trong menu.
C. Các thẻ a (liên kết).
D. Cả ba phương án trên.
20. Khi thanh điều hướng được thiết kế cho các thiết bị di động (responsive design), cách nào sau đây thường được sử dụng để thu gọn menu thành một biểu tượng (ví dụ: icon hamburger)?
A. Sử dụng Media Queries để ẩn menu chính và hiển thị biểu tượng, sau đó dùng JavaScript để hiển thị menu khi click vào biểu tượng.
B. Chỉ sử dụng CSS để thay đổi kích thước font chữ.
C. Sử dụng thuộc tính display: none cho tất cả các mục menu.
D. Tạo một menu mới hoàn toàn bằng CSS.
21. Trong ngữ cảnh JavaScript, hàm nào thường được sử dụng để thay đổi thuộc tính CSS của một phần tử, ví dụ như hiển thị/ẩn menu?
A. style.display, style.visibility, classList.add(), classList.remove()
B. innerHTML
C. setAttribute
D. createElement
22. Thành phần HTML nào thường được sử dụng để tạo danh sách các liên kết trong thanh điều hướng?
A. Danh sách không có thứ tự (unordered list - ul và li)
B. Bảng (table)
C. Đoạn văn (paragraph - p)
D. Khối chia (div)
23. Trong CSS, để tạo hiệu ứng chuyển đổi mượt mà (transition) khi thay đổi màu sắc của liên kết trong thanh điều hướng khi hover, chúng ta sử dụng thuộc tính nào?
A. transition
B. animation
C. transform
D. transition-delay
24. Nếu muốn thanh điều hướng luôn hiển thị ở đầu trang web ngay cả khi người dùng cuộn trang, thuộc tính CSS nào cần được áp dụng cho phần tử chứa thanh điều hướng?
A. position: fixed
B. position: absolute
C. position: relative
D. position: static
25. Để các mục trong thanh điều hướng có khoảng cách đều nhau và căn giữa theo chiều ngang trong container của nó, cách tiếp cận CSS nào là hiệu quả nhất?
A. Sử dụng Flexbox với justify-content: space-around hoặc justify-content: space-between.
B. Sử dụng margin: auto cho từng mục li.
C. Đặt text-align: center cho thẻ ul.
D. Sử dụng float: left và tính toán margin thủ công.
