1. Tạo cấu trúc folder cho layout

Trước tiên bạn hãy tạo cho mình một folder, bạn có thể đặt nó ở bất kì đâu nhé. Tiếp theo tạo thêm một folder images, một file index.html, một file style.css.

Về cấu trúc file thì mình giải thích một chút như sau:

  • Folder images dùng để chứa toàn bộ hình ảnh cho giao diện.
  • File index.html chính là file chạy chính cho trang web.
  • File styles.css dùng để chứa mã CSS



2. Bổ cục HTML đơn giản sẽ tạo trong bài này

Trước tiên bạn cần phải hiểu các vị trí cơ bản trên một trang web đã nhé. Hãy xem hình ảnh dưới đây.



Chúng ta có 7 vị trí cơ bản mà website nào cũng có, đó là:

  1. Logo => Chứa logo chính
  2. Header => Chứa nội dung phần trên cùng.
  3. Menu => Phần menu chính điều hướng trang web
  4. Left sidebar => Phần chứa dữ liệu bên trái trang web
  5. Content => Phần chứa nội dung chính của trang web
  6. Right sidebar => Phần chứa dữ liệu bên phải trang web
  7. Footer => Phần nằm dưới cùng của trang web.

3. Xây dựng bổ cục HTML cho layout

Trước tiên, ở trang index.html chúng ta cần tạo một thẻ div bao quanh toàn bộ 7 vị trí đó lại. Với mỗi vị trí chúng ta lại tạo thêm một thẻ div để bao quanh nó lại.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="main_wrapper">
    <div id="header">
        Header
    </div>
    <div id="menu">
        Menu
    </div>
    <div id="main_content">
        <div id="left_sidebar">
            Left sidebar
        </div>
        <div id="right_sidebar">
            Right sidebar
        </div>
        <div id="content">
            Main Content
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>


Bây giờ mình sẽ viết file CSS styles.css  để thiết lập background cho các vị trí, ta sẽ dễ nhìn hơn khi chạy ứng dụng này.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#header{
    background: yellow;
    height: 100px;
}
#menu{
    background: grey;
    height: 30px;
}
#main_content{
    background: pink;
}
#footer{
    background: red;
    height: 150px;
}


Tiếp theo hãy import file style.css này vào file index.html bằng cách đặt đoạn code sau vào phần head.

1
<link href="./style.css" rel="stylesheet"/>

Làm đủ các bước trên thì trang web của bạn sẽ có giao diện như sau