Bố cục (Layout) trong HTML

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 framework dựa trên CSS và JavaScript để tạo ra các trang web đáp ứng (responsive) 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.

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

Đây là tiêu đề chính trang web

Main Menu
HTML
PHP
PERL...
Hướng dẫn công nghệ và kỹ năng
Copyright © 2020 LearnSkill.vn
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout sử dụng bảng</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>Đây là tiêu đề chính trang web</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">
               Hướng dẫn công nghệ và kỹ năng
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2020 LearnSkill.vn
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>


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 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 LearnSkill.vn.

Đây là một ví dụ để tạo bố cục ba cột.

Main Menu
HTML
PHP
PERL...
Hướng dẫn công nghệ và kỹ năng Right Menu
HTML
PHP
PERL...
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout ba cột</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%">
               Hướng dẫn công nghệ và kỹ năng
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>


Bố cục HTML - Sử dụng DIV, SPAN

Phần tử <div> là phần tử cấp khối được sử dụng để nhóm các phần tử HTML. 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ụ layout. Các bảng phù hợp hơn để trình bày dữ liệu dạng bảng.

Lưu ý: 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.

Ở đây, chúng ta 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.

Đây là tiêu đề chính trang web

Main Menu
HTML
PHP
PERL...

Hướng dẫn công nghệ và kỹ năng

Right Menu
HTML
PHP
PERL...
Copyright © 2020 LearnSkill.vn
<!DOCTYPE html>
    <html>

   <head>
      <title>HTML Layouts sử dụng DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>Đây là tiêu đề chính trang web</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:20%; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:60%; float:left;" >
            <p>Hướng dẫn công nghệ và kỹ năng</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:20%; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2020 LearnSkill.vn
            </center>
         </div>
			
      </div>
   </body>

</html> 
    

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 Khoá học CSS.