Layout trong HTML
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 © 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 © 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:
Dàn trang bằng flexbox
Bài trước: Phần tử Head trong HTML
Bài sau: Thiết kế trang web chạy trên nhiều thiết bị (responsive web) bằng HTML
Bạn nên đọc
-
Các thuộc tính của phần tử input trong HTML
-
Các phần tử của Form trong HTML
-
5 code trái tim đập của thủ khoa Lý có tên, chèn ảnh
-
Cách tạo hiệu ứng đánh máy bằng CSS
-
Thẻ br trong HTML
-
Sử dụng bố cục trang Flexbox trong CSS
-
Form trong HTML
-
35 công cụ, tập lệnh và plugin để xây dựng HTML Table
-
Symbol - Biểu tượng trong HTML
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách chặn từ khóa và Hashtag trên Twitter
Hôm qua -
Hàm COUNTIFS, cách dùng hàm đếm ô theo nhiều điều kiện trong Excel
Hôm qua -
Cách sao chép hoặc tạo bản sao toàn bộ trang tính trong Google Sheets
Hôm qua -
Cách dùng Terabox lưu trữ với 1TB miễn phí
Hôm qua 5 -
PING là gì? Test PING như thế nào?
Hôm qua -
Sạc không dây là gì? Nó nhanh hơn hay chậm hơn sạc dây? Danh sách smartphone Android hỗ trợ sạc không dây
Hôm qua -
Dynamic System Updates là gì?
Hôm qua -
Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"
Hôm qua 6 -
4 cách kiểm tra lịch sử giao dịch BIDV trên điện thoại, máy tính
Hôm qua -
Điểm ưu tiên, điểm khuyến khích, khu vực ưu tiên khi xét tuyển năm 2022
Hôm qua