1.Phần tử bố cục trong HTML

Để xây dựng giao diện bố cục cho một trang HTML, trước hết bạn phải xem xét bố cục trang web như thế nào là hợp lý, tiếp đến là trang web chứa những thành phần gì, nội dung gì, phong cách ra sao,…v.v.

Như vậy, ta thấy bố cục của một trang web rất đa dạng, tùy theo con mắt thẩm mỹ của người thiết kế và yêu cầu của khách hàng cũng như sự phù hợp với nội dung, chủ đề của web và sự đánh giá của người dùng

Dưới đây là các thẻ thường được dùng để xây dựng bố cục trong HTML

Trong đó

<header> – Là phần đầu tiên của trang web, chứa tiêu đề của trang web, logo trang web, banner chính, menu phụ như thông tin, ô tìm kiếm, …v.v.

<nav> – Xác định tập hợp các lệnh điều hướng

<article> – Xác định nội dung độc lập

<aside> – Xác định nội dung bên cạnh nội dung chính (như một thanh bên)

<footer> – Xác định chân trang (đáy của trang)

<details> – Xác định các chi tiết bổ xung mà người dùng có thể mở và đóng theo yêu cầu

<summary> – Xác định tiêu đề cho thẻ <details>

Ví dụ:

2.Kỹ thuật bố cục trong HTML

Để xây dựng bố cục cho một trang web, chúng ta thường sử dụng các kỹ thuật sau:

  • Dùng bảng bảng biểu của HTML (kỹ thuật cũ)
  • Dùng CSS framework
  • Dùng thuộc tính float của CSS
  • Dùng CSS flexbox

2.1 Dùng bảng biểu

Cách thiết kế bảng biểu trước đây được sử dụng nhiều, nhưng hiện nay khi dùng bảng thiết kế giao diện để tương thích với nhiều kích thước màn hình khác nhau (thiết kế responsive) như: máy tính , điện thoại, máy tính bảng sẽ gặp khó khăn rất nhiều. Vì khi dùng bảng biểu sẽ coi cả trang web là một bảng biểu lớn, sau đó ta thêm vào đó các dòng và cột để định nghĩa các vùng trên trang web

2.2 Dùng CSS framework

Hiện nay có nhiều CSS framework hô trợ thiết kế nhanh cho trang web và có hỗ trợ việc phân trang rất nhanh chóng và tiện lợi, hỗ trợ tốt vấn đề responsive

2.3 Dùng thuộc tính float của CSS

Theo cách này chúng ta sẽ thiết kế một trang băng cách chia phần của trang web ra thành từng vùng. Với mỗi vùng này chúng ta sử dụng thuộc tính float để hiển thị vị trí của từng vùng trong trang web

Nhược điểm của phương pháp này là các phần tử nối bị ràng buộc với dòng tài liệu, điều này kiến nó kém linh hoạt

Ví dụ:

 

2.4 Dùng CSS flexbox

Khi sử dụng flexbox đảm bảo rằng các phần tử hoạt dộng có thể đoán trước được khi bố cuch trang phải phù hợp với các kích thước màn hình khác nhau và các thiết bị khác nhau

Ví dụ: