kipalog.com-Tạo website layout cơ bản TIL 739 HTML5 25 CSS3 49 Tấn Huy viết ngày 04082018

Tạo website layout cơ bản TIL 739 HTML5 25 CSS3 49 Tấn
Huy viết ngày 04/08/2018
kipalog.com/posts/Tao-website-layout-co-ban

1. Website layouts
Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần
chính đáng chú ý nhất là:
Header: Tiêu đề của trang web, thường thì đây là chỗ của logo website
Navigation Menu: Đây là phần menu điều hướng, giúp cho người đọc có thể truy
cập vào các phần khác nhau của trang web
Content: Đây là phần chứa nội dung chính của trang web, cũng có thể là nơi hiển
thị quảng cáo của website (thường thì nằm ở hai bên website và ở giữa là nội dung
bài viết)
Footer: Đây là phần cuối của website, thường là nơi chứa tên của cá nhân hoặc tổ
chức sở hữu website và cũng là nơi chứa thơng tin bản quyền. Một số website có
thể cho vào navigation link ví dụ như About, Contact, Help vân vân mây mây
Chúng ta có thể xem hình ảnh dưới đây để hiểu rõ hơn về cấu trúc cơ bản của một trang
web (nó có thể có nhiều biến thể khác không tuân theo trật tự sắp xếp này, tuy nhiên đây
là layout cơ bản nhất và có khá nhiều website dùng)

2. Tạo layouts cơ bản
a. Định hình website
Trước khi muốn tạo ra được một website với các phần nội dung chia 3 xẻ 7, phân trái bổ

1/8


phải thì chúng ta cần xác định trước cấu cúc của website mà mình cần tạo, cần phải vẽ ra
và xác định rõ vị trí cần bố trí các nội dung thế nào, dài rộng là bao nhiêu (tốt nhất là vẽ
ra giấy, xấu cũng được nhưng nó giúp ta nhìn theo và code dễ dàng hơn). Ở đây chúng ta
thiết kế theo bố cục của hình trên.

b. Tạo "xương sống" cho trang web
Con người cần phải có bộ xương thì web cũng vậy nó cũng cần có một "bộ xương" HTML
trước khi muốn tô điểm thêm màu mè cho nó. Chúng ta bắt đầu viết HTML cho web nào.

Header
Như ở trên Header là "Tiêu đề của trang web, thường thì đây là chỗ của logo website", ở đây
chúng ta có thể chọn hình ảnh hay chữ làm tiêu đề tùy thích, mình chọn chữ cho đơn
giản
<header>

This is my branding

Say something about website

</header>

Và đây là kết quả thu được:

trông cũng ổn phết . Tiếp tục tới phần tiếp
theo nào

Navigation Menu
Tiếp theo là tạo một thanh menu điều hướng cho người dùng dễ dàng thao tác hơn. Ở
đây chúng ta dùng nav là một thẻ chuẩn HTML5 để tạo navigation menu
<nav>
<ul>
<li><a href="#link">Home</a></li>
<li><a href="#link">News</a></li>
<li><a href="#link">About</a></li>
</ul>
</nav>

Ta dùng combo ul và li để tạo ra các mục có trong thanh menu, nếu muốn thêm mục
thì chỉ cần thêm một dịng li vào là được.
Kết quả:

2/8


Cũng có thể xem như là một menu rồi đấy chứ

Content
Sau khi có được phần "biển hiệu" và thanh menu, tiếp theo chúng ta tiếp tục tạo nội
dung cho trang web. Ở đây ta dùng section để xác định phần này là nội dung chính của
trang web và dùng article để chứa các phần nội dung nhỏ bên trong bao gồm nội dung
bài viết, quảng cáo, etc. Giả sử ở đây chúng ta có 3 phần nội dung như hình trên. Vì đây
là tạo layouts cơ bản nên chúng ta sẽ tạo 3 cột bằng nhau chứ không chia nhỏ lớn như
hình trên (làm vậy cho nhanh đấy :v)
<section>
<article>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus
eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque
tortor sed accumsan convallis.

</article>
<article>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus
eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque
tortor sed accumsan convallis.

</article>
<article>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus
eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque
tortor sed accumsan convallis.

</article>
</section>

Đây là kết quả của đống code trên

3/8


Ơ tại sao nó lại khơng chia ra nhỉ? Đây chỉ mới là khung xương cho nó thơi chúng ta sẽ
chỉnh hình nó bằng CSS sau

Footer
Cuối cùng là phần cuối của một trang web cơ bản " thường là nơi chứa tên của cá nhân
hoặc tổ chức sở hữu website và cũng là nơi chứa thông tin bản quyền"
<footer>

HyHy © 2018

</footer>

kết quả:

Hãy cùng xem lại sau tất cả đống code ngoằn ngo trên kia chúng ta
đã có được gì

4/8


Nhìn khá là thơ đúng khơng, bởi vì nó là "xương" mà. Chúng ta tiến hành gắn da thịt cho
nó đỡ thô hơn thôi nào!

c. Làm đẹp bằng CSS
Header
Đây là phần biển hiệu, chúng ta sẽ làm nó trở nên màu mè và to lớn hơn một tí để dễ
quản bá tên tuổi hơn
header{
background-color:lightgrey;
padding:1.5em;
text-align:center;
}

Và:

Bằng việt thêm background-color và đưa text ra giữa "biển hiệu" đã nhìn trơng ổn hơn :3

Navigation Menu
Đây là một phần khá là lằng nhằng (chủ yếu do nó dài ). Để làm một thanh menu đơn
giản từ 3 cái list xí xấu hồi nãy chúng ta cần bỏ đi phần bullet phía trước nó và đưa nó về
một hàng ngang và cộng thêm tí màu mè nửa.

5/8


nav{
background-color:#1abc9c;

}
nav ul{
margin:0;
padding:0;
list-style-type:none;
}
nav li{
display:inline-block;
}
nav li a{
display:inline-block;
text-decoration:none;
color:white;
padding:14px 16px;
}

và hãy xem cái list xí xấu lúc nãy như thế nào rồi

Tada! Đúng như ta mong muốn, nó đã 1 hàng, đã bỏ được đống bullet phía trước và cịn
có thêm màu mè. Ta cần thêm một tí hiệu ứng lúc rê chuột vào (để cịn biết mình đang
chọn cái nào nửa ==!)
nav li:hover{
background-color:orange;
}

Content
Như đã nói ở trên, chúng ta sẽ chia 3 cột này thành 3 cột bằng nhau và nằm trên cùng
một hàng

6/8

*{
box-sizing:border-box;
}
section{
background-color:lightgrey;
}
article{
width:33.33%;
float:left;
background-color:#f0f0f0;
padding:1em;
}
section:after{
content:"";
clear:both;
display:table;
}

Kết quả:

Footer
Phần này thì việc trang trí cũng khá giống với phần Header ở trên
footer{
background-color:black;
padding:0.8em;
color:white;
text-align:center;
}

Kết quả:

Và tổng quan lại sau khi đã trang điểm bằng CSS thì website của chúng ta đã có chút thay
đổi (khơng hẳn là đẹp, chắc tại thẩm mĩ mình kém quá)
Trước

7/8


Và sau

Chưa được đẹp lắm, nhưng có vẻ cũng đúng được u cầu đề ra :v. Chí ít nó cũng là một
kiến thức cơ bản để có thể làm nền cộng với sự sáng tạo làm ra nhiều layouts khác đẹp
hơn

3. Link tham khảo
Vì mình đang học HTML + CSS ở W3School nên link vẫn là ở đây nha

8/8