Font size
WorksheetsThiết kế Web Bài 1-3
Total questions: 74
Worksheet time: 3hrs 35mins
Thành phần nào sau đây là một phần của cấu trúc cây DOM?
Tên miền (Domain)
Web Hosting
Giao thức HTTP
Element Nodes
Trong quy trình hiển thị trang HTML, bước nào sau đây được thực hiện ngay sau khi phân tích cú pháp HTML?
Painting (Vẽ)
Tải tài nguyên như hình ảnh và font
Phân tích CSS để tạo CSSOM
Tính toán vị trí (Layout)
Công cụ nào sau đây được sử dụng để kiểm tra và chỉnh sửa cấu trúc DOM của một trang web?
Visual Studio Code
GitHub
Figma
Developer Tools (Inspect) của trình duyệt
Vai trò nào sau đây của trang web được đề cập trong bài học? (Chọn 2 đáp án)
Tạo mã nguồn tự động
Quảng bá thương hiệu
Cung cấp thông tin
Lưu trữ cơ sở dữ liệu
Kéo thả để ghép đúng các bước trong quy trình hiển thị trang HTML của trình duyệt web với mô tả tương ứng: (Chỉ điền một số vào câu trả lời VD:1)
Tải tài nguyên
Phân tích cú pháp HTML
Kết hợp DOM và CSSOM
Painting
Trình duyệt gửi yêu cầu HTTP để tải HTML, CSS, JavaScript:
(a)
Xây dựng DOM Tree từ tài liệu HTML:
(a)
Tạo Render Tree chứa các phần tử sẽ hiển thị trên màn hình:
(a)
Vẽ các phần tử lên màn hình với màu sắc, văn bản, bóng... :
(a)
Giai đoạn nào trong quy trình xây dựng website xác định mục tiêu, đối tượng người dùng và các chức năng cần thiết?
Triển khai
Kiểm thử
Thiết kế
Lập kế hoạch
Trong giai đoạn thiết kế website, yếu tố nào được ưu tiên để đảm bảo trải nghiệm người dùng tốt?
Tạo giao diện trực quan và dể sử dụng (UI/UX)
Viết mã nguồn back-end
Kiểm tra hiệu suất tải trang
Tối ưu hóa cơ sở dữ liệu
Trong giai đoạn xây dựng website, phần front-end chủ yếu liên quan đến việc gi?
Tich hợp hệ thống kiểm soát phiên bản
Xây dựng giao diện người dùng với HTML, CSS, JavaScript
Kiểm tra bảo mật của website
Quản lý cơ sở dữ liệu và server
Mục đích chính của giai đoạn kiếm thử trong quy trình xây dựng website là gì?
Cập nhật nội dung website
Ra mắt website trên môi trường thực tế
Thiết kế giao diện người dùng
Phát hiện lỗi và đảm bảo các tính năng hoạt động đúng trên mọi thiết bị
Những hoạt động nào sau đây thuộc về giai đoạn lập kế hoạch trong quy trình xây dụng website? (Chọn 2 đáp án)
Phân tích đối tượng người dùng
Xác định mục tiêu của website
Viết mã nguồn back-end
Kiếm tra khả năng tương thích trên các trình duyệt
Khi sử dụng Figma để thiết kế giao diện mẫu ,bạn muốn tạo một nút bấm có thể tái sử dụng trên nhiều trang.Tính năng nào của Figma bạn nên sử dụng?
Auto Layout
Grid
Inspect Panel
Components
Bạn cần chia sẻ thiết kế giao diện mẫu với nhóm lập trình viên để họ bắt đầu viết mã. Hành động nào sau đây là phù hợp nhất trong Figma?
Sử dụng Auto Layout để điều chỉnh bố cục
Thêm hiệu ứng hoạt hình bằng plugin Figmotion
Sử dụng Inspect Panel để cung cấp thông số kĩ thuật
Tạo một Frame mới với kích thước khác
Khi thiết kế giao diện mẫu,bạn muốn đảm bảo bố cục tự động điều chỉnh khi nội dung thay đổi.Tính năng nào của Figma nên được sử dụng?
Prototype
Layers
Auto Layout
Assets
Bạn đang thiết kế phần Header của một trang web trong Figma.Yếu tố nào sau đây nên được đặt ở góc trên bên trái để thu hút sự chú ý của người dung?
Thông tin liên hệ
Menu điều hướng
Logo thương hiệu
Nút kêu gọi hành động (CTA)
Hãy xác định các phát biểu sau là Đúng hay Sai về hành động nên thực hiện khi xuất và chia sẻ thiết kế giao diện mẫu từ Figma cho lập trình viên:
1) Tạo Frame mới cho thiết bị khác là việc bắt buộc để chia sẻ thiết kế với lập trình viên.
Đúng
Sai
2) Tạo hoạt hình bằng Figmotion là bước cần thiết trước khi bàn giao thiết kế cho lập trình viên.
Đúng
Sai
3) Xuất hình ảnh dưới định dạng SVG hoặc PNG giúp lập trình viên dễ dàng sử dụng trong quá trình phát triển giao diện.
Sai
Đúng
4) Sử dụng Inspect Panel trong Figma để cung cấp thông số kỹ thuật như màu sắc, kích thước, font chữ,... cho lập trình viên.
Đúng
Sai
Vai trò chính của trình duyệt web trong việc hiển thị trang web là gì?
Thiết kế giao diện người dùng (UI) cho trang web
Lưu trữ mã nguồn HTML và các tài nguyên của website
Quản lý tên miền và địa chỉ IP của website
Gửi yêu cầu đến máy chủ web, nhận và xử lý các tệp HTML, CSS, JavaScript để hiển thị nội dung
Kéo thả để ghép đúng các giai đoạn trong quy trình xây dựng website với công cụ hoặc công nghệ thường được sử dụng: (Chỉ điền một số vào câu trả lời VD:1)
Thiết kế
Xây dựng
Bảo trì
Kiểm thử
Sử dụng Figma để tạo giao diện mẫu:
(a)
Sử dụng HTML, CSS, JavaScript và các framework như React:
(a)
Cập nhật nội dung và xử lý lỗi phát sinh:
(a)
Sử dụng công cụ Developer Tools để tìm và sửa lỗi:
(a)
Khi thiết kế giao diện màu bằng Figma, những hành động nào sau đây giúp đảm bảo tính nhất quán trong thiết kế? (Chọn 2 đáp án)
Tạo Style Guide để định nghĩa màu sắc và kiểu chữ
Sử dụng Components để tái sử dụng các thành phần như nút bấm
Sử dụng plugin Figmotion để tạo hoạt hình
Xuất file dưới định dạng PDF
Hãy xác định các phát biểu sau là Đúng hay Sai về các hoạt động thuộc giai đoạn bảo trì website:
1) Xử lý lỗi phát sinh trong quá trình sử dụng là một phần quan trọng của bảo trì website.
Đúng
Sai
2) Cập nhật tính năng theo nhu cầu người dùng là một trong những nhiệm vụ của giai đoạn bảo trì website.
Sai
Đúng
3) Thiết kế lại giao diện người dùng từ đầu là nhiệm vụ chính của giai đoạn bảo trì.
Đúng
Sai
4) Xác định mục tiêu của website là hoạt động điển hình trong giai đoạn bảo trì.
Sai
Đúng
Kéo thả để ghép đúng các tính năng của Figma với mục đích sử dụng trong thiết kế giao diện mẫu: (Chỉ điền một số vào câu trả lời VD:1)
Components
Auto Layout
Style Guide
Inspect Panel
Tạo thành phần tái sử dụng như nút bấm:
(a)
Tạo bố cục tự động điều chỉnh khi nội dung thay đổi:
(a)
Định nghĩa màu sắc và kiểu chữ để đảm bảo tính nhất quán:
(a)
Cung cấp thông số kỹ thuật cho lập trình viên:
(a)
Document Object Model (DOM) là gì?
Một công cụ thiết kế giao diện web
Một hệ thống quản lý cơ sở dữ liệu cho website
Một giao thức truyền tải dữ liệu giữa máy chủ và trình duyệt
Một giao diện lập trình ứng dụng (API) biểu diễn cấu trúc HTML dưới dạng cây phân cấp các nút
Kéo thả để ghép đúng các loại nút trong cấu trúc cây DOM với định nghĩa của chúng: (Chỉ điền một số vào câu trả lời VD:1)
Attribute Nodes
Element Nodes
Text Nodes
Đại diện cho các thuộc tính của thẻ HTML (như id, class, href):
(a)
Đại diện cho các thẻ HTML (như div, span):
(a)
Đại diện cho nội dung văn bản trong các thẻ HTML:
(a)
Bạn đang thiết kế giao diện màu cho một trang web thương mại điện tử bằng Figma. Để đảm bảo tính nhất quán trong thiết kế, bước nào sau đây bạn nên thực hiện đầu tiên?
Thiết lập Prototype để kiểm tra tương tác
Tạo Style Guide với màu sắc và kiểu chữ
Sử dụng plugin Unsplash để thêm hình ảnh sản phẩm
Xuất tài nguyên dưới định dạng PNG
Hãy xác định các phát biểu sau là Đúng hay Sai về các thành phần nên có trong Hero section khi thiết kế giao diện mẫu trong Figma:
Hình ảnh lớn nổi bật là một thành phần quan trọng trong Hero section để thu hút sự chú ý người dùng.
Sai
Đúng
Logo thương hiệu luôn phải được đặt trong Hero section của trang web.
Sai
Đúng
Thông điệp chính của trang web nên được thể hiện rõ ràng trong Hero section.
Sai
Đúng
Thông tin liên hệ thường được đặt trong Hero section để người dùng dễ thấy nhất.
Đúng
Sai
Giai đoạn triển khai website bao gồm hoạt động nào sau đây?
Thiết kế giao diện bằng Figma
Phân tích hành vi người dùng để xác định mục tiêu
Đưa website lên máy chủ và kiểm tra lần cuối trước khi công khai
Sửa lỗi mã nguồn JavaScript
Kéo thả để ghép đúng các giai đoạn trong quy trình xây dựng website với mô tả tương ứng:
Xây dựng
Lập kế hoạch
Thiết kế
Kiểm thử
Sử dụng HTML, CSS, JavaScript để biến thiết kế thành sản phẩm thực tế:
(a)
Xác định mục tiêu, đối tượng người dùng và chức năng cần thiết:
(a)
Tạo giao diện người dùng (UI) và trải nghiệm người dùng (UX):
(a)
Đảm bảo các tính năng hoạt động đúng và website tương thích trên nhiều thiết bị:
(a)
Hãy xác định các phát biểu sau là Đúng hay Sai về các yếu tố được tập trung trong giai đoạn thiết kế website để cải thiện trải nghiệm người dùng:
Thiết kế trải nghiệm người dùng (UX) là yếu tố cốt lõi được chú trọng để nâng cao mức độ hài lòng của người dùng.
Đúng
Sai
Thiết kế giao diện người dùng (UI) là một phần quan trọng nhằm cải thiện trải nghiệm người dùng.
Đúng
Sai
Kiểm thử bảo mật là một bước quan trọng để tăng cường UX trong giai đoạn thiết kế.
Đúng
Sai
Tối ưu hóa tốc độ tải trang là yếu tố chính được ưu tiên trong giai đoạn thiết kế trải nghiệm người dùng.
Sai
Đúng
Trang web là gì?
Một giao diện thiết kế đồ họa cho ứng dụng di động
Một máy chủ lưu trữ dữ liệu của website
Một văn bản được viết bằng HTML, hoặc XHTML, hiển thị trên World Wide Web thông qua trình duyệt
Một chương trình phần mềm chạy trên trình duyệt web
Kéo thả để ghép đúng các bước thiết kế giao diện mẫu trong Figma với mô tả tương ứng:
Thiết lập kích thước khung làm việc
Tạo tài khoản và làm quen giao diện
Sử dụng Auto Layout và Prototype
Thêm và quản lý thành phần thiết kế
Sử dụng Frame để xác định kích thước và bố cục cho thiết bị:
(a)
Đăng ký tài khoản tại figma.com và khám phá giao diện
(a)
Tạo bố cục linh hoạt và mô phỏng tương tác người dùng
(a)
Tạo các nút bấm, văn bản, hình ảnh và sử dụng Components
(a)
Kéo thả các thẻ HTML vào các ô tương ứng với mô tả trong cấu trúc của một tài liệu HTML: (Chỉ điền một số vào câu trả lời VD:1)
<title>
<head>
<body>
<html>
Hiển thị tiêu đề để trang trên tab trình duyệt:
(a)
Chứa thông tin cấu hình như tiêu đề, charset, CSS,... :
(a)
Chứa nội dung chính sẽ hiển thị trên trình duyệt:
(a)
Bao toàn bộ nội dung trang web:
(a)
Để hiển thị một đoạn mã lập trình (code) trên trang web nhằm giúp người đọc nhận biết đó là mã nguồn, thẻ HTML nào nên được sử dụng?
<pre>
<source>
<text>
<code>
Trong HTML5, đâu là cách chính xác để tạo một trang web cần tích hợp phần tử video có thể phát trên nhiều trình duyệt bằng cách cung cấp nhiều định dạng nguồn, đồng thời hiển thị thông báo nếu trình duyệt không hỗ trợ thẻ video:
Một trang web cần hiển thị liên kết cho phép người dùng gửi email đến địa chỉ example@email.com bằng cách nhấp chuột. Cú pháp HTML nào sau đây phù hợp với yêu cầu này?
<a email="example@email.com">Send email</a>
<mail href="example@email.com">Send email</mail>
<email>example@email.com</email>
<a href="mailto:example@email.com">Send email</a>
Một trang web cần hiển thị danh sách không có thứ tự gồm ba mục: “Apple”, “Banana”, và “Orange”. Cú pháp HTML nào sau đây là phù hợp?
Cần xây dựng một danh sách định nghĩa trong trang web để trình bày các thuật ngữ cùng phần giải thích tương ứng. Cú pháp HTML nào dưới đây đáp ứng đúng chuẩn cấu trúc của một danh sách định nghĩa theo HTML5?
Một trang web cần hiển thị đoạn video có kích thước 320x240 pixel. Cú pháp HTML nào sau đây là phù hợp?
<video width="320" height="240"></video>
<video> <width="320" height="240"></video>
<video>
<width="320" height="240">
<source src="movie.mp4"></source>
</video>
<video width="320" height="240" /> /video>
Kéo thả các thẻ <table> trong HTML phù hợp vào mô tả chức năng tương ứng: (Chỉ điền một số vào câu trả lời VD:1)
rowspan
<tbody>
colspan
<br>
Gộp nhiều dòng:
(a)
Nhóm dữ liệu trong bảng:
(a)
Gộp nhiều cột:
(a)
Chèn khoảng trắng trong ô trống:
(a)
Chèn dòng trống:
(a)
Đâu là cú pháp đúng để tạo một tiêu đề cho bảng trong HTML?
Hoàn thành đoạn code HTML sau để thực hiện tạo một bảng sau bằng?
(Với cách điền theo ví dụ: html)
Đáp án tại vị trí (2) là:
(a)
Đáp án tại vị trí (1) là:
(a)
Hoàn thành đoạn code HTML sau để thực hiện hợp nhất 3 hàng của bảng:
1) Đáp án:
(a)
Hoàn thành đoạn code HTML sau để thực hiện hợp nhất 3 cột trong bảng:
1) Đáp án:
(a)
Kết quả hiển thị của đoạn mã HTML sau là gì?
Hiển thị bảng không có viền
Hiển thị bảng với 2 cột và 1 hàng
Hiển thị bảng với 2 cột và 2 hàng
Hiển thị bảng với 1 cột và 2 hàng
Hoàn thành đoạn mã HTML sau bằng cách kéo thả các thẻ HTML phù hợp vào các vị trí từ (1) đến (4) để thêm một hàng tiêu đề cho bảng. Hàng tiêu đề này hiển thị hai ô với nội dung "Name" và "Age"
<tr>
<th>Name</th>
<th>Age</th>
</tr>
Vị trí (1):
(a)
Vị trí (2):
(a)
Vị trí (3):
(a)
Vị trí (4):
(a)
Cho đoạn mã HTML sau, kết quả hiển thị trên trình duyệt sẽ như thế nào?
Không có khoảng cách giữa các ô và khoảng cách nội dung là 0px.
Bảng với khoảng cách giữa các ô là 5px và khoảng cách nội dung trong ô là 10px.
Cả hai khoảng cách là 5px.
Cả hai khoảng cách là 10px.
Kéo thả thuộc tính của các thẻ HTML dưới đây vào cột phù hợp với mô tả của chúng: ( Điền số vào câu trả lời VD:123.... hoặc điền đúng mô tả VD:align bgcolor .... )
align
color
bgcolor
text
link
href
src
1) Thuộc tính định dạng văn bản:
(a)
2) Thuộc tính của thẻ Body:
(a)
Hãy điền các thẻ HTML phù hợp vào chỗ trống hoặc điền số phù hợp trong đoạn mã sau:
(Với cách điền theo ví dụ: <b> Hoặc 1)
</h4>
</p>
</body>
</html>
Đáp án (1):
(a)
Đáp án (2):
(a)
Đáp án (3):
(a)
Đáp án (4):
(a)
Đâu là cú pháp đúng để gộp 4 dòng cho ô "Ghi chú" trong HTML
<td merge="4"> Ghi chú </td>
<td colspan="4"> Ghi chú </td>
<td span="4"> Ghi chú </td>
<td rowspan="4"> Ghi chú </td>
Hãy điền các thẻ HTML phù hợp vào chỗ trống để đoạn văn "W3School" trở thành một liên kết tới tài liệu "https://www.w3schools.com".
<body> ______(1)______> W3School <____(2)______> </body> (Với cách điền theo ví dụ: p style="color:red;")
1) Đáp án tại vị trí (1) là:
(a)
2) Đáp án tại vị trí (2) là:
(a)
Cho đoạn mã HTML sau, kết quả hiển thị trên trình duyệt sẽ như thế nào?
Lỗi do thuộc tính rowspan không hợp lệ.
Bảng có 2 hàng và 1 cột.
Bảng với 2 hàng và 2 cột, trong đó 'Cell 1' kéo dài qua 2 hàng.
Bảng có 3 hàng và 2 cột.
Cho đoạn mã HTML sau, kết quả hiển thị trên trình duyệt sẽ như thế nào?
Lỗi hiển thị do thẻ <caption> không hợp lệ.
Hiển thị bảng với tiêu đề "Table Caption" bên dưới bảng.
Hiển thị bảng với tiêu đề "Table Caption" bên trên bảng.
Không hiển thị tiêu đề của bảng.
Hoàn thành đoạn code HTML sau đây để tạo đường viền cho bảng:
(a)
Kéo thả thẻ HTML phù hợp vào mô tả chức năng tương ứng trong cấu trúc bảng: (Chỉ điền một số vào câu trả lời VD:1)
<td>
<tr>
<th>
<table>
Tạo một ô dữ liệu (cell):
(a)
Tạo một hàng trong bảng:
(a)
Tạo một ô tiêu đề (header cell):
(a)
Tạo bảng HTML:
(a)
Kéo thả các cấp độ tiêu đề HTML phù hợp vào các ô tương ứng với mô tả của chúng: (Chỉ điền một số vào câu trả lời VD:1)
<h2>
<h4>
<h6>
<h1>
Tiêu đề của một mục chính:
(a)
Tiêu đề phụ nhỏ trong một mục:
(a)
Ghi chú hoặc tiêu đề rất nhỏ cuối cùng:
(a)
Tên trang web (tiêu đề chính):
(a)
Điền tên thuộc tính HTML thích hợp vào vị trí trống để mô tả văn bản thay thế cho hình ảnh nếu không hiển thị được.
(Với cách điền theo ví dụ: html)
1) Đáp án ở vị trí (2) là:
(a)
2) Đáp án ở vị trí (1) là:
(a)
Kéo thả thuộc tính đúng vào mục đích sử dụng trong thẻ <form>: (Chỉ điền một số vào câu trả lời VD:1)
alt
src
action
method
name
Định nghĩa URL xử lý dữ liệu:
(a)
Đặt tên định danh cho form:
(a)
Chỉ định phương thức gửi dữ liệu:
(a)
Thành phần trong form được dùng để giao tiếp với người dùng gọi là gì?
Phần mềm dịch vụ
Khối định dạng
Script
Trình điều khiển (control)
Thẻ <input type="tel"> trong HTML được sử dụng trong trường hợp nào dưới đây?
Khi nhập mật khẩu
Khi nhập địa chỉ
Khi nhập email
Khi nhập số điện thoại
Cú pháp nào sau đây là đúng để tạo một textbox nhập dữ liệu?
<text type="input" name=""/>
<input type="text" name=""/>
<input name="text" value=""/>
<textbox type="text" name=""/>
Điều gì sẽ xảy ra khi thuộc tính checked được thêm vào thẻ <input type="checkbox"> trong HTML?
Checkbox sẽ bắt buộc phải chọn trước khi gửi biểu mẫu
Checkbox sẽ không thể bị bỏ chọn
Checkbox sẽ được đánh dấu sẵn khi trang được tải lần đầu tiên
Checkbox sẽ được hiển thị lớn hơn mặc định
Thẻ HTML nào sau đây đúng để nhập nội dung văn bản từ người dùng? (Chọn 2 đáp án)
<textarea>
<input type="submit">
<select>
<input type="text">
Thẻ <input type="url"> trong HTML được sử dụng trong trường hợp nào dưới đây?
Khi cần nhập số điện thoại
Khi cần nhập một liên kết web
Khi cần nhập email
Khi cần nhập tên
Hoàn thành đoạn mã HTML sau đây để tạo ra một trường nhập dữ liệu yêu cầu người dùng nhập địa chỉ website:
(a)
Điền thuộc tính thích hợp vào chỗ trống để đoạn mã HTML bên dưới hoạt động đúng, giúp form gửi dữ liệu đến trang "submit.php":
action
href
name
target
Hoàn thành đoạn mã HTML dưới đây để tạo các nhãn cho trường nhập liệu "First name" và "Last name":
input
span
type
label
Hoàn thành đoạn mã HTML dưới đây để gửi dữ liệu qua URL thay vì qua phần thân yêu cầu:
GET
SEND
FETCH
POST
Cho đoạn mã HTML sau:
Kết quả hiển thị của đoạn mã HTML trên là gì?
Cho đoạn mã HTML sau:
Kết quả hiển thị của đoạn mã HTML trên là gì?
Kéo thả vào chỗ trống để hoàn thiện đoạn mã HTML cho một biểu mẫu cơ bản thu thập tên và email người dùng, sau đó gửi dữ liệu đến submit.php bằng phương thức POST.
name
form
email
input
post
Vị trí (1):
(a)
Vị trí (2):
(a)
Vị trí (3):
(a)
Vị trí (4):
(a)
Vị trí (5):
(a)
Form thường được sử dụng trong tình huống nào sau đây?
Thực hiện chuyển hướng trang
Tạo menu điều hướng chính
Hiển thị ảnh nền động
Cho phép người dùng điền biểu mẫu, điều tra hoặc tìm kiếm thông tin
Hoàn thành đoạn mã HTML sau đây để thêm một nút bấm trong form:
(a)
Hoàn thành đoạn mã HTML sau đây để đặt số lượng tùy chọn hiển thị sẵn trong danh sách chọn ô tô:
(a)
Hoàn thành đoạn mã HTML sau đây để thêm một trường nhập ngày sinh trong form:
text
date
number
datetime
Kéo thả các thuộc tính của thẻ <form> và các thành phần điều khiển trong form dưới đây vào cột phù hợp với mô tả:
style
href
type
placeholder
name
action
method
2) Thuộc tính của các thành phần trong form:
(a)
1) Thuộc tính của thẻ:
(a)
Kéo thả tên các control tương ứng vào mô tả sau:
Radio
checkbox
Textbox
File
Trường chọn giới tính Nam / Nữ:
(a)
Chọn các sở thích Đọc sách, Nghe nhạc:
(a)
Trường nhập tên:
(a)
Trường chọn ảnh đại diện:
(a)
