Layout trong HTML

Nhật Minh

Chia layout trong HTML không khó. Về cơ bản, bạn chỉ cần biết những kiến thức cần thiết về layout trong HTML dưới đây.

Bố cục trang web rất quan trọng trong việc mang tới hình ảnh tốt hơn. Để thiết kế được giao diện như ý, bạn phải dành khá nhiều thời gian.

Hiện tại, hầu như mọi trang web đều dùng CSS và JavaScript dựa trên framework để thiết kế web đáp ứng và linh động nhưng bạn có thể tạo bố cục tốt bằng các bảng HTML đơn giản hoặc thẻ chia theo từng phần kết hợp với thẻ định dạng khác. Phần này sẽ cho bạn một số ví dụ về cách tạo bố cục đơn giản nhưng hiệu quả cho trang web bằng HTML thuần túy và các thuộc tính của nó. Từ đó, giúp bạn hiểu rõ hơn về code layout HTML.

Trang web thường hiển thị nội dung dưới dạng các cột (như trên báo hoặc tạp chí). HTML5 mang tới các phần tử ngữ pháp mới để định nghĩa và phần khác nhau trong trang web:

<head> định nghĩa tiêu đề tài liệu hoặc một phần (section)
<nav> định nghĩa bộ chứa các đường dẫn điều hướng
<section> định nghĩa một phần trong tài liệu
<article> định nghĩa một bài viết độc lập, tự chứa trong chính nó
<aside> định nghĩa nội dung bên cạnh một nội dung khác (giống sidebar)
<footer> định nghĩa chân trang cho văn bản hoặc một phần
<details> định nghĩa chi tiết bổ sung thêm
<summary> định nghĩa tiêu đề cho phần tử <details>

Cách hiển thị trên trang của các phần tử nói trên

Kỹ thuật dàn trang HTML

Có 4 cách để tạo dàn trang nhiều cột trong HTML, mỗi cách đều có những điểm mạnh và yếu riêng.

Bảng HTML
Đặc tính nổi của CSS
Framework CSS
Flexbox CSS

Nên chọn cách nào để tạo layout nhiều cột trong HTML?

Dùng bảng trong HTML

Phần tử <table> vốn không phải được dùng để dàn trang. Mục đích của nó là hiển thị dữ liệu dưới dạng bảng. Vì vậy đừng dùng bảng để tạo layout cho trang vì sẽ khiến code rất lộn xộn. Hãy tưởng tượng vài tháng sau quay lại sửa thiết kế trang bạn sẽ thấy khó khăn thế nào.

Framework CSS

Nếu muốn tạo dàn trang nhanh, bạn có thể dùng các framework như Bootstrap…

Đặc tính nổi (float) của CSS

Việc thiết kế toàn bộ layout của trang web bằng đặc tính nổi (float) trong CSS là rất phổ biến. Float rất dễ học - chỉ cần nhớ các đặc tính hoạt động như thế nào là được. Nhưng cách này cũng có bất lợi là nó gắn với luồng tài liệu, có thể ảnh hưởng tới độ linh hoạt của trang. Dưới đây là ví dụ về đặc tính nổi trong CSS.

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}

header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}

nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul a {
text-decoration: none;
}

article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}

</style>
</head>
<body>

<div class="container">

<header>
<h1>Quantrimang.com</h1>
</header>

<nav>
<ul>
<li><a href="#">Công nghệ</a></li>
<li><a href="#">Lập trình</a></li>
<li><a href="#">Video</a></li>
</ul>
</nav>

<article>
<h1>Công nghệ</h1>
<p>Chuyên mục Công nghệ của Quantrimang.com sẽ bao gồm thủ thuật, hướng dẫn sử dụng phần mềm, phần cứng, sửa lỗi mạng, sửa lỗi máy tính trên nhiều hệ điều hành như Windows, macOS, Linux, Android, iOS,....</p>
<p>Liên tục cập nhật những thủ thuật, hướng dẫn mới nhất để gỡ rối cho bạn đọc.</p>
</article>

<footer>Copyright &copy; Quantrimang.com</footer>

</div>

</body>
</html>

Kết quả hiển thị trang bằng đặc tính nổi của CSS

Flexbox CSS

Flexbox là chế độ dàn trang mới trong CSS3.

Dùng flexbox đảm bảo các phần tử hoạt động đúng như dự đoán khi layout của trang phải thích ứng với nhiều kích thước màn hình và thiết bị khác nhau. Nhưng cách này có một điểm bất lợi là không hoạt động trên các bản IE10 và các bản trở về trước.

Đây là ví dụ tạo dàn trang bằng flexbox.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}

.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}

.article {
text-align: left;
}

header {background: black;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}

.nav ul {
list-style-type: none;
padding: 0;
}

.nav ul a {
text-decoration: none;
}

@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-container">
<header>
<h1>Quantrimang.com</h1>
</header>

<nav class="nav">
<ul>
<li><a href="#">Công nghệ</a></li>
<li><a href="#">Lập trình</a></li>
<li><a href="#">Video</a></li>
</ul>
</nav>

<article class="article">
<h1>Công nghệ</h1>
<p>Chuyên mục Công nghệ của Quantrimang.com sẽ bao gồm thủ thuật, hướng dẫn sử dụng phần mềm, phần cứng, sửa lỗi mạng, sửa lỗi máy tính trên nhiều hệ điều hành như Windows, macOS, Linux, Android, iOS,....</p>
<p>Liên tục cập nhật những thủ thuật, hướng dẫn mới nhất để gỡ rối cho bạn đọc.</p>
</article>
<footer>Copyright &copy; Quantrimang.com</footer>
</div>
</body>
</html>

Khi thay đổi kích thước cửa sổ đang mở trang HTML, bạn sẽ thấy bố cục trang thay đổi:

Bố cục trang bằng flexbox