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)
Nội dung
Các thành phố lớn ở Việt Nam
Đà 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=“nav”>
Hà Nội<br>
Đà Nẵng<br>
Hồ Chí Minh
</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>
CSS đi kèm:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
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:
 |
|
Đâ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>
<nav>
Hà Nội<br>
Đà Nẵng<br>
Hồ Chí Minh
</nav>
<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>
CSS đi kèm:
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
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>
CSS đi kèm:
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>
|
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. |
|---|
2 phản hồi
[…] Tìm hiểu về bố cục trang web […]
[…] <div> […]