Nội dung chính tin học ứng dụng 12 cánh diều Bài 11 Mô hình hộp, bố cục trang web

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH TẠO TRANG WEB 

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 văn bản HTML được trình bày trên trình duyệt web theo mô hình hộp (box model). 

Hình 1. Cấu trúc logic của mô hình hộp trong trình bày phần tử HTML

Theo đó, mỗi phần tử khi được trình bày 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:

• Ngăn cách nhau giữa vùng nội dung và vùng đường viền là một 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 trình duyệt web. 
• Vùng lề là một vùng mặc định hiển thị trong suốt, bao ngoài vùng đường viền để phân tách các phần tử được hiển thị cạnh nhau.

- Thông thường, các trình duyệt web tự động căn chỉnh để toàn bộ các phần tử được khai báo trong văn bản HTML hiển thị đầy đủ trên màn hình trình duyệt web. Tuy vậy, hoàn toà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 định dạng CSS. 

Bảng 1. Một số thuộc tính định dạng CSS cho các vùng hiển thị của mô hình hộp

- Định dạng vùng lề và vùng đệm cho một phần tử HTML: Sử dụng thuộc tính margin và padding, chỉ định giá trị là các khoảng cách, thường theo đơn vị pixel.

• Để tường minh trong mã lệnh, em nên chỉ định đầy đủ 4 giá trị ứng với 4 khoảng cách trên, phải, dưới và trái.

• Cách chỉ định giá trị cho thuộc tính margin:

• Cách chỉ định giá trị cho thuộc tính padding:

Lưu ý: Khi cả 4 khoảng cách đều bằng nhau, em chỉ cần chỉ định 1 giá trị duy nhất.

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 trên trang web thông qua thuộc tính CSS display:

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

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

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. 

- Tuỳ 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 như mình hoạ ở Hình 5 thường gồm một số thành phần cơ bản:

Hình 5. Ví dụ về bố cục trang web

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

② 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.

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

④ 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, bộ chọn định danh:

• Mỗi vùng thường trình bày một thành phần chính của trang web. 

Nội dung của mỗi vùng được khai báo trong cặp thẻ <div></div>.