HTML - Bố cục
Bố cục trang web là rất quan trọng để mang lại giao diện tốt hơn cho trang web của bạn. Phải mất đáng kể thời gian để thiết kế bố cục trang web với giao diện tuyệt vời.
Ngày nay, tất cả các trang web hiện đại đang sử dụng khung dựa trên CSS và JavaScript để tạo ra các trang web đáp ứng và động nhưng bạn có thể tạo bố cục tốt bằng cách sử dụng các bảng HTML đơn giản hoặc thẻ phân chia kết hợp với các thẻ định dạng khác. Chương này sẽ cung cấp cho bạn một số ví dụ về cách tạo một bố cục đơn giản nhưng hiệu quả cho trang web của bạn bằng cách sử dụng HTML thuần túy và các thuộc tính của nó.
Bố cục HTML - Sử dụng Bảng
Cách đơn giản và phổ biến nhất để tạo bố cục là sử dụng thẻ HTML <table>. Các bảng này được sắp xếp theo cột và hàng, vì vậy bạn có thể sử dụng các hàng và cột này theo bất kỳ cách nào bạn muốn.
Thí dụ
Ví dụ: ví dụ về bố cục HTML sau đây đạt được bằng cách sử dụng bảng có 3 hàng và 2 cột nhưng cột đầu trang và chân trang kéo dài cả hai cột bằng cách sử dụng thuộc tính colspan -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bố cục Nhiều Cột - Sử dụng Bảng
Bạn có thể thiết kế trang web của mình để đưa nội dung web của bạn vào nhiều trang. Bạn có thể giữ nội dung của mình ở cột giữa và bạn có thể sử dụng cột bên trái để sử dụng menu và cột bên phải có thể được sử dụng để đặt quảng cáo hoặc một số nội dung khác. Bố cục này sẽ rất giống với những gì chúng ta có trên trang web tutorialspoint.com.
Thí dụ
Đây là một ví dụ để tạo bố cục ba cột -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bố cục HTML - Sử dụng DIV, SPAN
Phần tử <div> là phần tử mức khối được sử dụng để nhóm các phần tử HTML. Trong khi thẻ <div> là phần tử cấp khối, thì phần tử <span> HTML được sử dụng để nhóm các phần tử ở cấp nội tuyến.
Mặc dù chúng ta có thể có được những bố cục khá đẹp với các bảng HTML, nhưng các bảng không thực sự được thiết kế như một công cụ bố cục. Các bảng phù hợp hơn để trình bày dữ liệu dạng bảng.
Note - Ví dụ này sử dụng Cascading Style Sheet (CSS), vì vậy trước khi hiểu ví dụ này, bạn cần hiểu rõ hơn về cách hoạt động của CSS.
Thí dụ
Ở đây chúng tôi sẽ cố gắng đạt được kết quả tương tự bằng cách sử dụng thẻ <div> cùng với CSS, bất cứ điều gì bạn đã đạt được bằng cách sử dụng thẻ <table> trong ví dụ trước.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bạn có thể tạo bố cục tốt hơn bằng cách sử dụng DIV, SPAN cùng với CSS. Để biết thêm thông tin về CSS, vui lòng tham khảo Hướng dẫn CSS.