English 
ภาษาไทย 
Phát triển
Phát hành 02-12-2023
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.
Trong bài viết trước, chúng ta đã cùng nhau tìm hiểu về một số thẻ trong HTML, từ đó chúng ta sẽ có một số hiểu biết nhất định về việc sử dụng các thẻ như thế nào trong việc xây dựng một trang web.
1. Layout của một website
Để làm header của website chúng ta sử dụng thẻ <header>
Thẻ <nav> được sử dụng để tạo các menu ngang trên header
Thẻ định nghĩa các khu vực trong website. Website mình có thể chia ra nhiều khu vực
Thẻ <article> nó cũng giống như session nhưng nội dung nó là độc lập. Thường các website về tin tức họ sẽ sử dụng thẻ article này còn website bán hàng hoặc thương mại điện tử thì dùng session
Thẻ <aside> dùng để làm chứa các liên kết của website. Nó thường đặt bên trái của website
Thẻ <footer> dùng để làm footer của một website nơi ta để thông tin website
2. Các kỹ thuật xây dựng layout
2.1. Tạo layout với table
Cách đơn giản nhất để tạo ra các layout là sử dụng thẻ <table> trong HTML. Những bảng này sắp xếp các dữ liệu vào các cột và hàng, vì thế bạn có thể lợi dụng hay sử dụng những hàng và cột này theo cách bạn muốn mà không cần sử dụng quá nhiều css. Bạn có thể thiết kế trang của bạn thành nhiều cột với các phần nội dung khác nhau. Bạn có thể giữ nội dung chính trong cột giữa và cột trái làm cột chứa menu, và cột phải dùng để đặt các quảng cáo. Loại layout này tương tự như cách chúng tôi bố trí trang web hiện tại. Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Vi du Layout table</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="900" style="border-collapse: collapse;">
<tr>
<td bgcolor="#70bbd9">
<table border="1" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td>
<table border="1" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td width="25%" valign="top" align="center" style="padding: 30px;">
LOGO
</td>
<td width="75%" valign="top" align="center" style="padding: 30px">
BANNER
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px;">
HEAD-LINK
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table border="1" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td width="20%" valign="top" align="left" style="padding: 150px 30px; text-align: center;">
Left
</td>
<td width="60%" valign="top" align="center" style="padding: 150px 30px">
Content
</td>
<td width="20%" valign="top" align="right" style="padding: 150px 30px; text-align: center;">
Right
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ee4c50" style="padding: 30px; text-align: center;" >
Footer
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Từ đây chúng ta sẽ có một layout đơn giản như sau:
>>> Xem thêm bài viết:
- Hướng dẫn cài đặt unix linux
- Hướng dẫn cài đặt k8s Kubenertes Cluster
- Scheduling - Lập lịch trên K8s
2.2. Sử dụng div và css
Việc chia cột trong CSS là việc bạn thiết lập những phần tử con trong một phần tử mẹ nằm trên cùng một hàng.
Ví dụ, mình muốn phần nội dung website của mình có hai cột thì mình sẽ tạo ra 3 cái
, một cái <div> mình gọi nó là container hoặc phần tử mẹ, hai cái <div> còn lại mình gọi là column (cột). Vậy bây giờ nhiệm vụ của chúng ta là làm thế nào để các phần tử con có thể được chia thành 2 cột như vậy.
Các bước chia cột:
- Các cột phải luôn có một container, tức là phần tử mẹ bao bọc nó.
- Thiết lập chiều rộng cho container.
- Thiết lập chiều rộng cho hai cột, tổng chiều rộng trong hai cột phải luôn bằng hoặc ít hơn chiều rộng của container.
- Nên sử dụng box-sizing: border-box để tính toán kích thước chính xác.
- Sử dụng thuộc tính float với giá trị left và right để đẩy phần tử về sang trái hoặc phải.
- Tiến hành clear float.
Ví dụ:
<header>
<div id="head">
<div class="logo">logo</div>
<div class="banner">banner</div>
</div>
<div id="head-link">head-link</div>
</header>
<section class="content">
<div id="left">left</div>
<div id="content">content</div>
<div id="right">right</div>
</section>
<footer>footer</footer>Còn đây là CSS:
#head {
width: 100%;
overflow: auto;
}
.logo {
width: 20%;
background-color: aquamarine;
float: left;
box-sizing: border-box;
padding: 30px;
}
.banner {
width: 80%;
background-color: aqua;
float: right;
box-sizing: border-box;
padding: 30px;
}
#head-link {
background-color: blue;
padding: 10px;
}
.content::after {
content: '';
clear: both;
display: table;
}
#left, #content, #right {
width: 15%;
float: left;
box-sizing: border-box;
padding: 150px 30px;
background-color: antiquewhite;
}
#content {
width: 70%;
background-color: aliceblue;
}
#right {
background-color: wheat;
}
footer {
padding: 30px;
background-color: brown;
}Nguyên lý hoạt động của thuộc tính float:
- Khi một phần tử được thiết lập thuộc tính float:
Nó sẽ được bắt đầu ở hàng phía trên , nếu hàng phía trên còn đủ chỗ trống để chứa nó.
Nó sẽ được bắt đầu ở hàng mới, nếu hàng phía trên không đủ chỗ trống để chứa nó.
Lưu ý: Nếu một phần tử được thiết lập thuộc tính float mà trong khi phần tử đứng trước nó không được thiết lập thuộc tính float, thì mặc định nó được bắt đầu ở hàng mới.
- Khi hàng không đủ chỗ chứa phần tử thì phần tử phải bắt đầu ở hàng mới. Tuy nhiên, cách bắt đầu như thế nào mới là quan trọng. Khi trên một hàng có nhiều phần tử được thiết lập thuộc tính float và mỗi phần tử có chiều cao khác nhau, nếu hàng không đủ chỗ chứa phần tử thì phần tử sẽ bắt đầu bên cạnh phần tử có chiều cao thấp nhất và còn đủ khoảng trống để chứa nó.
2.3. Sử dụng Grid
Grid là một module tạo bố cục website trong CSS bằng cách hỗ trợ hệ thống bố cục theo dạng lưới 2 chiều, gồm hàng và cột. Trước khi có Grid, bạn có thể tạo giao diện website theo nhiều kiểu khác nhau như sử dụng thẻ div, sử dụng bảng biểu (table).
Grid ra đời nhằm đơn giản hóa việc xây dựng giao diện website và hoạt động rất tốt với Flexbox. Flexbox cũng là 1 module hỗ trợ xây dựng bố cục nhưng áp dụng với các bố cục một chiều đơn giản. Khi Grid và Flexbox kết hợp với nhau, lập trình viên có thể tạo ra nhiều bố cục website phức tạp và đa dạng hơn.
Grid cho phép bạn tạo một ma trận bố cục 2 chiều gồm các dòng và các cột. Ở mỗi dòng, cột và mỗi phần tử trong Grid bạn có thể chỉnh sửa style vì vậy Grid cũng rất thích hợp để tạo bố cục trang Web. Ngoài ra, các bảng biểu, các trò chơi có dạng bàn cờ như ca rô, cờ vua,… rất thích hợp dùng Grid để xây dựng giao diện.
Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.
Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…
Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:
Chia sẻ bài viết
