Trắc nghiệm Tin học 12 Chân trời sáng tạo Bài F13: Dự án tạo trang web (tiếp theo) - Đề 07
Trắc nghiệm Tin học 12 Chân trời sáng tạo Bài F13: Dự án tạo trang web (tiếp theo) - Đề 07 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.
Câu 1: Trong giai đoạn Chuẩn bị của dự án tạo trang web, khi phân tích yêu cầu đối với một trang blog đơn giản, việc xác định loại nội dung nào là chủ yếu trên trang chủ (ví dụ: bài viết, thông tin liên hệ, lịch sử blog) có ảnh hưởng quan trọng nhất đến khía cạnh nào của việc lập kế hoạch cấu trúc ban đầu?
- A. Phân bổ không gian và bố cục hiển thị chính trên trang chủ.
- B. Số lượng thành viên cần thiết cho nhóm phát triển.
- C. Màu sắc chủ đạo sẽ sử dụng cho trang web.
- D. Tên miền (domain name) phù hợp cho blog.
Câu 2: Khách hàng yêu cầu trang web phải hiển thị tốt trên cả máy tính để bàn và điện thoại di động (responsive design). Trong giai đoạn Chuẩn bị, loại tài liệu hoặc phân tích yêu cầu nào sau đây là quan trọng nhất để đảm bảo tính responsive được tích hợp ngay từ đầu?
- A. Hợp đồng pháp lý với khách hàng.
- B. Kế hoạch kiểm thử bảo mật chi tiết.
- C. Tài liệu yêu cầu kỹ thuật mô tả rõ các điểm dừng (breakpoints) và hành vi hiển thị trên các kích thước màn hình khác nhau.
- D. Báo cáo phân tích chiến lược marketing của đối thủ cạnh tranh.
Câu 3: Nhóm của bạn đang ở giai đoạn Chuẩn bị cho một dự án web. Bản mô tả yêu cầu từ khách hàng rất mơ hồ về trình độ sử dụng công nghệ của người dùng mục tiêu. Sự không chắc chắn này trong giai đoạn chuẩn bị nhiều khả năng sẽ ảnh hưởng như thế nào đến các quyết định thiết kế và thực hiện sau này?
- A. Dẫn đến việc giảm đáng kể chi phí thuê máy chủ.
- B. Buộc phải ưu tiên thiết kế giao diện người dùng (UI) thật đơn giản, trực quan và dễ hiểu cho mọi đối tượng.
- C. Khuyến khích sử dụng nhiều hiệu ứng động phức tạp để gây ấn tượng.
- D. Cho phép bỏ qua việc kiểm thử trên các trình duyệt web cũ.
Câu 4: Cho cấu trúc HTML đơn giản sau: `
...
`. Bạn muốn áp dụng mã CSS để định dạng chỉ nội dung bên trong thẻ `div` có `id="main-content"` với màu nền xám nhạt. Selector CSS nào sau đây là phù hợp nhất?
Câu 5: Bạn áp dụng thuộc tính `margin-top: 30px;` cho một tiêu đề (`
`), nhưng khoảng cách phía trên tiêu đề lại lớn hơn hoặc nhỏ hơn 30px một cách bất ngờ, đồng thời ảnh hưởng đến khoảng cách với phần tử ngay phía trên nó. Khái niệm hoặc vấn đề CSS nào sau đây nhiều khả năng là nguyên nhân gây ra hành vi không mong muốn này?
- A. Lỗi cú pháp trong file CSS.
- B. Thuộc tính `display: none;` trên phần tử tiêu đề.
- C. Hiện tượng sụp đổ margin (margin collapsing) giữa tiêu đề và phần tử phía trên.
- D. Sử dụng đơn vị `px` thay vì `em` cho margin.
Câu 6: Bạn cần căn giữa theo chiều ngang một khối `div` có chiều rộng cố định bên trong phần tử cha của nó bằng CSS. Sự kết hợp các thuộc tính CSS nào sau đây là một phương pháp phổ biến và hiệu quả để đạt được điều này?
- A. `float: left;` và `clear: both;`
- B. `position: absolute;` và `left: 50%;`
- C. `margin: 0 auto;`
- D. `display: inline-block;` và `text-align: center;`
Câu 7: So sánh mục đích sử dụng chính của `display: flex;` và `display: grid;` trong bố cục CSS. Khi nào bạn nên chọn Grid thay vì Flexbox cho một bố cục trang phức tạp?
- A. Flexbox tốt cho bố cục hai chiều (hàng và cột), còn Grid tốt cho bố cục một chiều (hàng hoặc cột).
- B. Flexbox tối ưu cho việc phân bổ không gian dọc theo một trục duy nhất (ngang hoặc dọc), trong khi Grid được thiết kế để tạo bố cục hai chiều phức tạp theo cả hàng và cột cùng lúc.
- C. Flexbox chỉ có thể áp dụng cho các phần tử hiển thị kiểu inline, còn Grid chỉ áp dụng cho các phần tử block.
- D. Grid là công nghệ cũ hơn và ít được hỗ trợ trên các trình duyệt hiện đại hơn Flexbox.
Câu 8: Trong giai đoạn Thực hiện, một thành viên trong nhóm của bạn đã triển khai một tính năng, nhưng các style CSS của họ lại gây xung đột với style bạn đã viết cho một phần khác của trang. Cách tiếp cận nào sau đây là hiệu quả nhất để xác định và giải quyết xung đột CSS này?
- A. Xóa toàn bộ mã CSS của thành viên đó và viết lại từ đầu.
- B. Sử dụng `!important` trên tất cả các quy tắc CSS của bạn để đảm bảo chúng được áp dụng.
- C. Sử dụng công cụ phát triển của trình duyệt (Developer Tools) để kiểm tra các quy tắc CSS nào đang được áp dụng cho phần tử bị ảnh hưởng và phân tích tính đặc hiệu (specificity) của chúng.
- D. Yêu cầu thành viên đó tự tìm và sửa toàn bộ lỗi trong mã CSS của họ mà không cần hỗ trợ.
Câu 9: Sau khi hoàn thành dự án, kết quả kiểm thử người dùng cho thấy 25% người dùng trên thiết bị di động gặp khó khăn khi sử dụng menu chính. Trong giai đoạn Báo cáo, bạn sẽ phân tích phản hồi này như thế nào và loại khuyến nghị nào là phù hợp để đưa vào báo cáo cuối cùng?
- A. Chỉ đơn giản ghi nhận rằng "người dùng gặp khó khăn với menu" mà không giải thích thêm.
- B. Phân tích các yếu tố có thể gây khó khăn (ví dụ: kích thước nút quá nhỏ, vị trí đặt menu không thuận tiện, độ nhạy cảm ứng kém) và đề xuất các cải tiến cụ thể về thiết kế hoặc mã nguồn cho phiên bản cập nhật.
- C. Đề xuất loại bỏ hoàn toàn menu trên thiết bị di động để tránh vấn đề.
- D. Kết luận rằng người dùng không có kỹ năng sử dụng điện thoại thông minh.
Câu 10: Bạn cần trình bày kết quả dự án web cho các bên liên quan không có kiến thức kỹ thuật sâu (ví dụ: quản lý, bộ phận kinh doanh). Loại thông tin nào sau đây sẽ là phù hợp nhất và dễ hiểu nhất cho đối tượng này trong báo cáo cuối cùng của bạn?
- A. Chi tiết về cấu trúc file và số lượng dòng mã CSS đã viết.
- B. Các chỉ số về hiệu suất trang web (ví dụ: tốc độ tải trang trung bình) và dữ liệu người dùng (ví dụ: số lượt truy cập, thời gian trung bình trên trang).
- C. Danh sách đầy đủ các thư viện JavaScript và framework CSS đã sử dụng.
- D. Mô tả kỹ thuật chi tiết về cách triển khai cơ sở dữ liệu.
Câu 11: Tại sao việc xác định rõ ràng phạm vi (scope) của dự án ngay trong giai đoạn Chuẩn bị lại cực kỳ quan trọng để ngăn ngừa các vấn đề phát sinh trong giai đoạn Thực hiện?
- A. Nó đảm bảo rằng tất cả thành viên trong nhóm đều có cùng trình độ kỹ năng lập trình.
- B. Nó giúp kiểm soát "sự bành trướng phạm vi" (scope creep) – việc bổ sung các yêu cầu mới không nằm trong kế hoạch ban đầu, gây chậm trễ và vượt ngân sách trong quá trình thực hiện.
- C. Nó cho phép tự động hóa toàn bộ quá trình viết mã CSS và HTML.
- D. Nó quyết định số lượng máy chủ cần thuê để lưu trữ trang web.
Câu 12: Đánh giá những rủi ro tiềm ẩn khi bỏ qua hoặc thực hiện vội vàng giai đoạn Chuẩn bị của một dự án phát triển trang web.
- A. Trang web cuối cùng chắc chắn sẽ có tốc độ tải nhanh hơn.
- B. Tăng khả năng hiểu sai hoặc thiếu sót các yêu cầu quan trọng, dẫn đến việc phải làm lại nhiều phần trong giai đoạn thực hiện, tốn kém thời gian và nguồn lực.
- C. Giảm bớt nhu cầu làm việc nhóm và giao tiếp giữa các thành viên.
- D. Giúp dễ dàng thay đổi công nghệ hoặc nền tảng sử dụng giữa chừng dự án.
Câu 13: Bạn muốn tất cả các đoạn văn bản (`
`) nằm bên trong một phần tử `div` có class là `article-content` được hiển thị với màu chữ là màu xanh đậm (`darkblue`). Viết quy tắc CSS phù hợp để đạt được điều này.
Câu 14: Giải thích tại sao việc sử dụng các style CSS nội dòng (inline styles, ví dụ: `
`) lại thường không được khuyến khích cho việc định dạng một trang web lớn, phức tạp so với việc sử dụng các file CSS bên ngoài (`.css`)?
- A. Inline styles không được hỗ trợ bởi các trình duyệt hiện đại.
- B. Inline styles khó quản lý, tái sử dụng và cập nhật trên nhiều trang, làm cho việc thay đổi giao diện toàn bộ trang web trở nên phức tạp và tốn thời gian.
- C. Inline styles làm tăng đáng kể tốc độ tải trang web.
- D. Chỉ có thể áp dụng một thuộc tính CSS duy nhất cho mỗi phần tử bằng inline styles.
Câu 15: Dựa trên yêu cầu xây dựng một trang web thương mại điện tử (e-commerce), hãy liệt kê ba loại nội dung cụ thể (ngoài văn bản và hình ảnh cơ bản) mà bạn cần lập kế hoạch thu thập và chuẩn bị kỹ lưỡng trong giai đoạn Chuẩn bị.
- A. Mã nguồn backend, cấu hình máy chủ, nhật ký truy cập.
- B. Thông số kỹ thuật sản phẩm, đánh giá/nhận xét của khách hàng, chính sách hoàn trả/đổi hàng.
- C. Lịch sử hình thành công ty, sơ yếu lý lịch của các thành viên sáng lập, báo cáo tài chính.
- D. Biểu đồ lưu lượng truy cập, danh sách lỗi phát sinh, phản hồi từ bản thử nghiệm beta.
Câu 16: Bạn có một hình ảnh trên trang web và muốn nó luôn chiếm 75% chiều rộng của phần tử chứa nó, bất kể kích thước màn hình là bao nhiêu (trong giới hạn của phần tử cha). Viết quy tắc CSS phù hợp để đạt được điều này.
Câu 17: Một nút bấm trên trang web có nội dung văn bản quá dài, gây tràn ra ngoài khu vực nền của nút. Bạn muốn văn bản đó không bị ngắt dòng mà thay vào đó hiển thị dấu ba chấm (...) ở cuối nếu quá dài. Bạn cần sử dụng kết hợp các thuộc tính CSS nào để đạt được hiệu quả này?
- A. `overflow: scroll;`
- B. `white-space: nowrap;`, `overflow: hidden;`, và `text-overflow: ellipsis;`
- C. `word-wrap: break-word;`
- D. `line-height: normal;`
Câu 18: Khi trình bày báo cáo dự án, bạn nhận thấy tốc độ tải trang web còn chậm, đặc biệt là trên các thiết bị di động. Dựa trên các công việc thường được thực hiện trong giai đoạn Thực hiện, bạn sẽ phân tích những nguyên nhân tiềm ẩn nào có thể gây ra vấn đề này?
- A. Thiếu tài liệu yêu cầu chi tiết từ giai đoạn Chuẩn bị.
- B. Hình ảnh chưa được tối ưu hóa kích thước/định dạng, sử dụng quá nhiều font chữ tùy chỉnh, hoặc mã JavaScript/CSS chặn hiển thị ban đầu.
- C. Báo cáo cuối cùng không được trình bày một cách chuyên nghiệp.
- D. Mâu thuẫn cá nhân giữa các thành viên trong nhóm.
Câu 19: Một yêu cầu quan trọng của dự án là đảm bảo trang web có khả năng tiếp cận (accessibility) tốt cho người dùng khuyết tật (ví dụ: người khiếm thị). Trong giai đoạn Chuẩn bị, yêu cầu này sẽ ảnh hưởng cụ thể như thế nào đến việc lập kế hoạch các nguyên tắc thiết kế và phương pháp mã hóa cho giai đoạn Thực hiện?
- A. Cần lập kế hoạch sử dụng cấu trúc HTML ngữ nghĩa (semantic HTML), đảm bảo độ tương phản màu sắc đủ cao, và lên kế hoạch kiểm thử trang web bằng trình đọc màn hình (screen reader).
- B. Chỉ cần tập trung vào việc tạo ra một giao diện hấp dẫn về mặt hình ảnh.
- C. Yêu cầu giảm thiểu tối đa nội dung văn bản trên trang.
- D. Ưu tiên sử dụng các font chữ độc đáo và phức tạp để tạo điểm nhấn.
Câu 20: Bạn muốn tạo một thanh điều hướng (navigation bar) trong đó các mục menu (`
`) được sắp xếp theo chiều ngang. Thuộc tính CSS `display` nào sau đây, khi áp dụng cho phần tử chứa các mục menu (`
`) hoặc chính các mục menu (`
- `), thường được sử dụng để đạt được bố cục ngang này một cách hiệu quả trong các thiết kế hiện đại?
- A. `display: block;`
- B. `display: inline;`
- C. `display: flex;`
- D. `display: none;`
Câu 21: Giải thích sự khác biệt cơ bản giữa `padding` và `margin` trong CSS và cách thay đổi giá trị của chúng ảnh hưởng đến khoảng trắng xung quanh một phần tử trên trang web.
- A. Padding tạo khoảng trắng bên ngoài đường viền, còn Margin tạo khoảng trắng bên trong đường viền.
- B. Padding tạo khoảng trắng bên trong đường viền của phần tử (giữa nội dung và đường viền), còn Margin tạo khoảng trắng bên ngoài đường viền (tạo khoảng cách giữa phần tử đó với các phần tử lân cận).
- C. Padding chỉ áp dụng cho văn bản, còn Margin chỉ áp dụng cho hình ảnh.
- D. Padding và Margin đều có chức năng giống nhau là tạo khoảng trắng bên trong phần tử.
Câu 22: Nhóm của bạn sử dụng hệ thống quản lý phiên bản (version control) như Git. Trước khi bắt đầu làm việc trên một tính năng mới trong giai đoạn Thực hiện, bước khởi đầu chuẩn mà bạn nên thực hiện là gì để đảm bảo bạn đang làm việc trên phiên bản mã nguồn mới nhất và tránh xung đột không cần thiết?
- A. Xóa toàn bộ thư mục dự án cục bộ và tải lại từ kho chứa chung.
- B. Tạo một nhánh (branch) mới cho tính năng đó và đảm bảo nhánh này được cập nhật từ nhánh chính (main/master).
- C. Ngay lập tức bắt đầu viết mã trên nhánh chính.
- D. Gửi (push) tất cả các thay đổi cục bộ hiện có lên kho chứa chung.
Câu 23: Dự án của bạn có triển khai một biểu mẫu thu thập phản hồi từ người dùng. Trong báo cáo cuối cùng, bạn cần tóm tắt các phản hồi dạng văn bản không có cấu trúc đã nhận được. Phương pháp nào sau đây là hiệu quả nhất để trình bày các chủ đề lặp lại và những vấn đề phổ biến nhất từ dữ liệu phản hồi này?
- A. Liệt kê tất cả các bình luận riêng lẻ mà không phân loại.
- B. Thực hiện phân tích chủ đề (thematic analysis) để nhóm các bình luận có nội dung tương đồng và trình bày các chủ đề chính cùng với số lượng hoặc tỷ lệ bình luận liên quan đến từng chủ đề.
- C. Chỉ chọn lọc và trình bày những bình luận mang tính tích cực nhất.
- D. Tạo biểu đồ thể hiện độ dài trung bình của các bình luận.
Câu 24: Xem xét tính chất lặp (iterative) của quy trình phát triển web. Phản hồi thu thập được và phân tích trong giai đoạn Báo cáo của một vòng lặp phát triển có thể ảnh hưởng trực tiếp như thế nào đến giai đoạn Chuẩn bị của vòng lặp phát triển tiếp theo?
- A. Giai đoạn Báo cáo hoàn toàn độc lập và không có tác động đến các giai đoạn sau.
- B. Phản hồi giúp xác định các lỗi cần sửa, các tính năng cần cải thiện hoặc bổ sung, từ đó làm cơ sở để định hình lại các yêu cầu và mục tiêu cho giai đoạn Chuẩn bị tiếp theo.
- C. Báo cáo chỉ dùng để đánh giá hiệu suất làm việc của từng cá nhân trong nhóm.
- D. Giai đoạn Chuẩn bị tiếp theo sẽ lặp lại y hệt các bước của giai đoạn Chuẩn bị trước đó.
Câu 25: Bạn muốn thay đổi màu nền của một nút bấm khi người dùng di chuột qua nó. Viết một quy tắc CSS đơn giản sử dụng một bộ chọn giả lớp (pseudo-class) để đổi màu nền của nút thành màu xanh lá cây (`green`) khi di chuột.
Câu 26: Một rủi ro tiềm ẩn được xác định trong giai đoạn Chuẩn bị là việc thiếu ảnh chất lượng cao cho sản phẩm. Rủi ro này có thể ảnh hưởng như thế nào đến tiến độ thực hiện và thiết kế trực quan cuối cùng của trang web?
- A. Giúp đẩy nhanh tiến độ thực hiện vì không cần phải xử lý ảnh.
- B. Có thể gây chậm trễ tiến độ do phải chờ đợi ảnh, hoặc buộc phải sử dụng ảnh có chất lượng thấp làm giảm tính chuyên nghiệp và thẩm mỹ của trang web.
- C. Chỉ ảnh hưởng duy nhất đến nội dung của báo cáo cuối dự án.
- D. Không liên quan gì đến thiết kế hay tiến độ của dự án web.
Câu 27: Một hình ảnh trên trang web quá lớn và gây ra thanh cuộn ngang trên các thiết bị có màn hình nhỏ. Thuộc tính CSS nào, khi áp dụng cho hình ảnh hoặc phần tử chứa nó, có thể giúp hình ảnh tự động thu nhỏ lại để vừa với chiều rộng của phần tử chứa, khắc phục vấn đề tràn màn hình?
- A. `height: 100%;`
- B. `width: 100%;` (kết hợp với `height: auto;` hoặc không đặt height)
- C. `position: fixed;`
- D. `display: none;`
Câu 28: Ngoài chức năng và giao diện, khía cạnh quan trọng nào khác về hiệu suất hoặc trải nghiệm người dùng của trang web cuối cùng cần được đánh giá và báo cáo, đặc biệt đối với một trang web công khai?
- A. Tổng số dòng mã code HTML và CSS đã viết.
- B. Khả năng tương thích trên các trình duyệt web phổ biến khác nhau (Chrome, Firefox, Safari, Edge) và các thiết bị khác nhau (máy tính, tablet, điện thoại).
- C. Số giờ làm việc cụ thể của từng thành viên trong nhóm.
- D. Tên gọi của các tệp tin mã nguồn dự án.
Câu 29: Giả sử bạn là trưởng nhóm dự án web. Trong giai đoạn Thực hiện, một thành viên gặp khó khăn với một vấn đề bố cục CSS phức tạp. Là người lãnh đạo, cách tiếp cận nào sau đây là hiệu quả nhất để giúp thành viên đó vượt qua trở ngại này?
- A. Làm hoàn toàn phần việc đó thay cho thành viên để tiết kiệm thời gian.
- B. Yêu cầu thành viên tự nghiên cứu và giải quyết vấn đề một mình mà không có bất kỳ sự hỗ trợ nào.
- C. Cùng xem xét mã nguồn, thảo luận để xác định nguyên nhân gốc rễ của vấn đề, giải thích các khái niệm liên quan và gợi ý hướng giải quyết hoặc tài nguyên học tập phù hợp.
- D. Chuyển ngay công việc đó cho một thành viên khác có kinh nghiệm hơn.
Câu 30: Giải thích khái niệm Tính đặc hiệu (Specificity) trong CSS và tại sao việc hiểu rõ nó lại quan trọng khi bạn gặp khó khăn trong việc gỡ lỗi (troubleshooting) và hiểu tại sao một số quy tắc style lại không được áp dụng như mong đợi.
- A. Tính đặc hiệu là tốc độ mà trình duyệt tải và xử lý file CSS.
- B. Tính đặc hiệu là cách trình duyệt xếp hạng và quyết định quy tắc CSS nào có "quyền lực" cao hơn để áp dụng cho một phần tử khi có nhiều quy tắc nhắm mục tiêu đến cùng phần tử đó, giúp giải thích thứ tự ưu tiên của các style.
- C. Tính đặc hiệu chỉ áp dụng cho các style được viết trong thẻ `
Xem kết quả
