Lý thuyết Tin học 12 Bài 11 (Cánh diều): Mô hình hộp, bố cục trang web

Lý thuyết Tin học 12 Bài 11: Mô hình hộp, bố cục trang web

1. Mô hình hộp trong trình bày phần tử HTML

Các phần tử trong HTML được trình bày trên trình duyệt web theo mô hình hộp (box model). Theo mô hình này, mỗi phần tử có cấu trúc logic gồm các hộp chữ nhật xác định các vùng nội dung và vùng đường viền. Giữa vùng nội dung và vùng đường viền là vùng đệm mặc định hiển thị trong suốt, giúp phân tách nội dung và đường viền khi hiển thị trên màn hình. Bên ngoài vùng đường viền là vùng lề, cũng hiển thị trong suốt, giúp phân tách các phần tử cạnh nhau.

Thông thường, các trình duyệt web tự động căn chỉnh để tất cả các phần tử trong văn bản HTML hiển thị đầy đủ. Tuy nhiên, có thể điều chỉnh kích cỡ các vùng hiển thị này bằng cách thiết lập giá trị phù hợp cho các thuộc tính CSS. Bảng 1 liệt kê một số thuộc tính định dạng CSS cho các vùng hiển thị này.

2. Hiển thị phần tử theo khối, theo dòng

Theo mặc định, mỗi phần tử HTML sẽ được xác định kiểu hiển thị theo khối hoặc theo dòng.

- Với cách hiển thị theo khối, mỗi phần tử được hiển thị trên một dòng mới. Ví dụ: phần tử h1, p hiển thị theo khối.

- Với cách hiển thị theo dòng, nhiều phần tử có thể được hiển thị trên cùng một dòng.

Ví dụ: phần tử img, a hiển thị theo dòng.

CSS cho phép thay đổi kiểu hiển thị mặc định của các phần tử HTML thông qua thuộc tính display.

- Thiết lập kiểu hiển thị của phần tử theo khối được khai báo như sau:

{display: block;}

- Thiết lập kiểu hiển thị của phần tử theo dòng được khai báo như sau:

{display: inline;}

3. Bố cục trang web

Bố cục trang web là cách sắp xếp, bố trí các đối tượng nội dung trên trang web vào các khu vực hiển thị khác nhau để tạo nên một giao diện web. Tùy thuộc vào mục đích chuyển tải thông tin, trang web có các bố cục khác nhau. Mỗi trang web thường gồm các thành phần cơ bản sau:

1.Phần đầu trang (header): Cung cấp thông tin như logo, tiêu đề trang web.

2.Thanh điều hướng (navigation menu): Tập hợp các siêu liên kết đến các trang web khác trong website.

3.Phần nội dung (content): Cung cấp thông tin chính của trang web.

4.Phần chân trang (footer): Cung cấp các thông tin bổ trợ như bản quyền, các liên kết nhanh.

Một cách phổ biến để phân chia trang web thành các vùng là sử dụng phần tử div kết hợp với các định dạng CSS như bộ chọn lớp và bộ chọn định danh. Nội dung của mỗi vùng được khai báo trong cặp thẻ <div></div>.

Trắc nghiệm: Mô hình hộp, bố cục trang web

PHẦN I. Câu trắc nghiệm nhiều phương án lựa chọn. Thí sinh trả lời từ câu 1 đến câu 10. Mỗi câu hỏi thí sinh chỉ lựa chọn một phương án.

Câu 1: Mô hình hộp trong CSS bao gồm các vùng nào?

A. Vùng nội dung, vùng đệm, vùng đường viền, vùng lề

B. Vùng đầu trang, vùng nội dung, vùng chân trang

C. Vùng tiêu đề, vùng nội dung, vùng footer, vùng menu

D. Vùng hiển thị, vùng cấu hình, vùng màu nền

Câu 2: Thuộc tính CSS nào được sử dụng để thay đổi kiểu hiển thị của phần tử thành hiển thị theo dòng?

A. display: block;

B. display: inline;

C. display: flex;

D. display: grid;

Câu 3: Cú pháp nào đúng để khai báo một phần tử hiển thị theo khối trong CSS?

A. display: inline;

B. display: block;

C. display: list-item;

D. display: none;

Câu 4: Đâu là phần tử HTML thường được hiển thị theo khối?

A. <img>

B. <a>

C. <p>

D. <span>

Câu 5: Phần nào trong bố cục trang web cung cấp thông tin như logo và tiêu đề trang web?

A. Phần đầu trang (header)

B. Thanh điều hướng (navigation menu)

C. Phần nội dung (content)

D. Phần chân trang (footer)

Câu 6: Khi sử dụng mô hình hộp trong CSS, đâu là khu vực nằm giữa vùng nội dung và vùng đường viền?

A. Vùng đệm (padding)

B. Vùng lề (margin)

C. Vùng tiêu đề (header)

D. Vùng chân trang (footer)

Câu 7: Phần tử nào thường được hiển thị theo dòng trong HTML?

A. <div>

B. <h1>

C. <a>

D. <p>

Câu 8: Để phân chia trang web thành các vùng sử dụng định dạng CSS, phần tử nào thường được sử dụng?

A. <header>

B. <div>

C. <footer>

D. <section>

Câu 9: Thuộc tính CSS nào có thể sử dụng để căn chỉnh các phần tử theo chiều ngang?

A. margin: auto;

B. padding: 10px;

C. border: 1px solid black;

D. display: flex;

Câu 10: Phần nào trong bố cục trang web thường chứa các thông tin bổ trợ như bản quyền và các liên kết nhanh?

A. Phần đầu trang (header)

B. Thanh điều hướng (navigation menu)

C. Phần nội dung (content)

D. Phần chân trang (footer)

PHẦN II. Câu trắc nghiệm đúng sai. Thí sinh trả lời từ câu 1 đến câu 2. Trong mỗi ý a), b), c), d) ở mỗi câu, thí sinh chọn đúng hoặc sai

Câu 1: Phát biểu sau đây đúng hay sai về mô hình hộp trong trình bày phần tử HTML

a) Mô hình hộp bao gồm các vùng nội dung, vùng đệm, vùng đường viền, và vùng lề.

b) Vùng đệm trong mô hình hộp hiển thị màu sắc theo giá trị thuộc tính background-color của phần tử.

c) Vùng lề trong mô hình hộp giúp phân tách các phần tử cạnh nhau.

d) Có thể điều chỉnh kích cỡ các vùng trong mô hình hộp bằng cách sử dụng các thuộc tính CSS.

Câu 2: Hiển thị phần tử theo khối, theo dòng và bố cục trang web sau đây đúng hay sai?

a) Các phần tử hiển thị theo khối, như h1 và p, sẽ bắt đầu từ một dòng mới.

b) Các phần tử hiển thị theo dòng, như img và a, có thể nằm trên cùng một dòng với các phần tử khác.

c) CSS không thể thay đổi kiểu hiển thị mặc định của các phần tử HTML.

d) Sử dụng phần tử div kết hợp với các định dạng CSS để tạo bố cục trang web.

PHẦN III. Câu trả lời ngắn. Thí sinh trả lời từ câu 1 đến câu 3

Câu 1: Mô hình hộp trong trình bày phần tử HTML bao gồm những thành phần nào?

Câu 2: Sự khác biệt chính giữa hiển thị phần tử theo khối và theo dòng là gì?

Câu 3: Các thành phần cơ bản của bố cục trang web bao gồm những gì?