Bài 20: Bố cục trang web trong HTML

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)

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

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

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, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.

Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.

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

	Thẻ <div> 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ẻ <div> để tạo bố cục nhiều cột:

Ví dụ 1

<body>

<div id=“header”>
<h1>Các thành phố lớn ở Việt Nam</h1>
</div>

<div id=“section”>
<h1>Hà Nội</h1>
<p>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ì.</p>
<p>Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.</p>
<p>Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.</p>
</div>

<div id=“footer”>
Copyright © timoday.edu.vn
</div>

</body>

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 cấp một số phần tử mới cho định nghã các phần khác nhau của một trang web:

<header> – Định nghĩa phần tiêu đề cho một tài liệu hoặc một phân đoạn nào đó
<nav> – Định nghĩa một container chứa đường dẫn của các liên kết
<section> – Định nghĩa một phân đoạn trong tài liệu
<article> – Định nghĩa một bài viết chứa độc lập
<aside> – Định nghĩa nội dụng nằm bên cạnh nội dung chính của trang (giống như slidebar)
<footer> – Định nghĩa phần cuối trang của một tài liệu hoặc một phân đoạn
<details> – Định nghĩa phần chi tiết
<summary> – Định nghĩa phần tiêu đề cho phần dữ liệu nằm trong thẻ <details>

Đây là ví dụ sử dụng <header>, <nav>, <section>, và <footer> để tạo một bố cục nhiều cột:

Ví dụ

<body>

<header>
<h1>Các thành phố lớn ở Việt Nam</h1>
</header>

<section>
<h1>Hà Nội</h1>
<p>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ì.</p>
<p>Hiện nay, Hà Nội là thành phố lớn nhất Việt Nam về diện tích, đồng thời cũng là địa phương đứng thứ nhì về dân số.</p>
<p>Hà Nội nằm giữa đồng bằng sông Hồng trù phú, nơi đây đã sớm trở thành một trung tâm chính trị, kinh tế và văn hóa ngay từ những buổi đầu của lịch sử Việt Nam.</p>
</section>

<footer>
Copyright © timoday.edu.vn
</footer>

</body>

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

CSS đi kèm:

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

	Thẻ <table> không được thiết kế để bố trí bố cục. Mục đích của thẻ <table> 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ẻ <table>, vì các thẻ <table> có thể được định kiểu với CSS:

Ví dụ

<body>

<table class=“lamp”>
<tr>
<th>
<img src=“/images/lamp.jpg” alt=“Note” style=“height:32px;width:32px”>
</th>
<td>
Phần tử table không được thiết kế để tạo bố cục cho trang web.
</td>
</tr>
</table>

</body>

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ẻ <table> không sai, nhưng nó không được khuyến khích! Vì vậy nên tránh thẻ <table> để tạo bố cục cho website.