Bố cục trang web trong HTML | Tìm ở đây

Bố cục (layout) của website rất quan trọng, nó quyết định việc bố trí các thành phần trên trang có hợp lý và chuyên nghiệp hay không. Các Website thường hiển thị nội dung theo nhiều cột (giống như một tạp trí hoặc một tờ báo)Một ví dụ về bố cục của một trang web

Hà Nội
Đà Nẵng
Hồ Chí Minh

Thành Phố Hà Nội

Hà Nội là thủ đô của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử Hà Nội gắn liền với sự thăng trầm của lịch sử Việt Nam qua các thời kì.

Hiện nay, TP.HN là thành phố lớn nhất Nước Ta về diện tích quy hoạnh, đồng thời cũng là địa phương đứng thứ nhì về dân số .
TP. Hà Nội nằm giữa đồng bằng sông Hồng phong phú, nơi đây đã sớm trở thành một TT chính trị, kinh tế tài chính và văn hóa truyền thống ngay từ những buổi đầu của lịch sử vẻ vang Nước Ta .
Copyright © timoday.edu.vn

Tạo bố cục với thẻ

mách giúp Thẻ

thường được sử dụng để tạo bố cục cho trang web vì nó có thể dễ dàng đặt vị trí với CSS.

Ví dụ dưới đây sử dụng bốn thẻ  

để tạo bố cục nhiều cột:

Ví dụ 1

Các thành phố lớn ở Việt Nam

Hà Nội

Đà Nẵng

Hồ Chí Minh

Hà Nội

TP.HN là thủ đô hà nội của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử TP.HN gắn liền với sự thăng trầm của lịch sử dân tộc Nước Ta qua những thời kì .
Hiện nay, TP. Hà Nội là thành phố lớn nhất Nước Ta về diện tích quy hoạnh, đồng thời cũng là địa phương đứng thứ nhì về dân số .
TP. Hà Nội nằm giữa đồng bằng sông Hồng phong phú, nơi đây đã sớm trở thành một TT chính trị, kinh tế tài chính và văn hóa truyền thống ngay từ những buổi đầu của lịch sử dân tộc Nước Ta .

Copyright © timoday.edu.vn

Ví dụ 1 tạo bố cục trang web

CSS đi kèm :

Thiết kết bố cục sử dụng HTML5

HTML5 cung ứng một số ít thành phần mới cho định nghã những phần khác nhau của một website :

HTML5 Semantic Elements
  • – Định nghĩa phần tiêu đề cho một tài liệu hoặc một phân đoạn nào đó
  • – Định nghĩa một phân đoạn trong tài liệu
  • – Định nghĩa một bài viết chứa độc lập
  • – Định nghĩa phần cuối trang của một tài liệu hoặc một phân đoạn
  • – Định nghĩa phần chi tiết
  • – Định nghĩa phần tiêu đề cho phần dữ liệu nằm trong thẻ

Đây là ví dụ sử dụng

,

Ví dụ

Các thành phố lớn ở Việt Nam

Hà Nội

TP. Hà Nội là thủ đô hà nội của nước và cũng là kinh đô của rất nhiều vương triều Việt cổ. Lịch sử TP.HN gắn liền với sự thăng trầm của lịch sử dân tộc Nước Ta qua những thời kì .
Hiện nay, Thành Phố Hà Nội là thành phố lớn nhất Nước Ta về diện tích quy hoạnh, đồng thời cũng là địa phương đứng thứ nhì về dân số .
TP. Hà Nội nằm giữa đồng bằng sông Hồng phong phú, nơi đây đã sớm trở thành một TT chính trị, kinh tế tài chính và văn hóa truyền thống ngay từ những buổi đầu của lịch sử dân tộc Nước Ta .

Copyright © timoday.edu.vn

Ví dụ 2 tạo bố cục trang web

CSS đi kèm :

Tạo bố cục sử dụng thẻ

Thẻ

không được thiết kế để bố trí bố cục.
Mục đích của thẻ

là hiển thị dữ liệu theo dạng bảng.

Bố cục trang web có thể đạt được kết quả với việc sử dụng thẻ

, vì các thẻ

có thể được định kiểu với CSS:

Ví dụ


Phần tử table không được thiết kế để tạo bố cục cho trang web.

Ví dụ 3 tạo bố cục với table
CSS đi kèm :

Cảnh báo: Tạo bố cục bằng thẻ

không sai, nhưng nó không được khuyến khích! Vì vậy nên tránh thẻ

để tạo bố cục cho website.