HTML CĂN BẢN
HTML5
CANVAS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT

Tạo bổ cục layout HTML đơn giản

Trong bài này mình sẽ hướng dẫn các bạn cách tạo bổ cục layout cho một trang web đơn giản, bằng cách sử dụng thẻ div và kết hợp với các thuộc tính CSS.

Qua bài học này bạn sẽ biết cách tạo một file style riêng để gắn vào trang HTML, tạo folder hình ảnh riêng để lưu trữ dữ liệu media ... đây là cách phân chia cơ bản nhất mà bạn cần phải nắm.

Lưu ý: Vì các bạn chưa học đến các thẻ như header, footer, article trong HTML5 nên mình sẽ dùng thẻ div toàn bộ nhé.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

layout html 1 JPG

Bây giờ bạn hãy sử dụng một trình editor bất kì để mở file index.htmlstyle.css lên nhé. Hiện tại mình đang sử dụng Netbeans.

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.

layout html 0 png

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.

Bạn hãy xem cấu trúc của chính trang web freetuts.net nhé, giao diện luôn có những vị trí như vậy.

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

Trước tiên 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.

Như vậy chúng ta sẽ có cấu trúc cơ bản như sau:

Demo RUN
<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 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.

Demo RUN
#header{
    background: yellow;
    height: 100px;
}
#menu{
    background: grey;
    height: 30px;
}
#main_content{
    background: pink;
}
#footer{
    background: red;
    height: 150px;
}

Chạy lên kết quả như sau:

html laout 1 JPG

Các vị trí header, menu và footer đã ok rồi. Riêng phần content thì chúng ta chưa xử lý xong, bởi phần left_sidebar, right_sidebar content cần phải tách biệt rõ ràng.

Chúng ta sẽ sử dụng thuộc tính float:left để đưa phần left_sidebar về bên trái, float:right đưa right_sidebar về bên phải, đồng thời thiết lập chiều dài cho chúng khoảng 300px. Riêng phần content ta sẽ cho margin-leftmargin-right300px, bởi độ dài của hai sidebar này là 300px.

Demo RUN
#left_sidebar{
    float:left;
    width: 300px;
    height: 400px;
    background: blue;
}

#right_sidebar{
    float:right;
    width: 300px;
    height: 400px;
    background: orange;
}

#content{
    margin-left: 300px;
    margin-right: 300px;
    height: 300px;
    background: #fff
}

Bạn hãy quan sát kết quả như sau:

html layout 2 JPG

Phần Left sidebarRight sidebar đã đè luôn phần footer. Lý do là chúng ta đã thiết lập float:leftfloat:right cho 2 vị trí này, khiến chúng đang hiển thị dạng treo, nên phần footer bị đẩy xuống bao nhiêu pixcel là do phần Main Content quyết định. Mà phần này mình đã thiết lập chiều cao là 300px, thấp hơn hai bên sidebar là 400px. Vì vậy nó đè luôn phần footer.

Để giải quyết thì chúng ta sẽ đặt một thẻ div kế tiếp phía dưới phần content, sau đó thiết lập CSS clear:both.

Demo RUN
<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 style="clear: both"></div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>

Vậy là xong, xem kết quả:

html layout 3 JPG

Phía dưới content có phần màu hồng là do mình đã thiết lập thẻ #main_contentbackground:pink.

4. Đưa hình ảnh vào layout

Trước tiên bạn hãy chọn một hình ảnh bất kì để làm logo nhé. Sau đó copy nó vào thư mục images.

dua hinh vao JPG

Bạn hãy để ý nhé, file index.html sẽ nằm ngoài một cấp so với file hình logo.png.

Bây giờ bạn hãy đưa nó vào bằng cách sử dụng thẻ img. Các bạn hãy thay đổi phần header thành như sau:

Demo RUN
<div id="header">
    <img src="./images/logo.png"/>
</div>

Kết quả:

html layout 4 JPG

5. Đưa CSS ra một file riêng

Chúng ta nên đưa CSS ra một file riêng để sau này dễ quản lý hơn. Bạn hãy mở file style.css lên và copy toàn bộ mã CSS qua đó nhé.

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.

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

Bây giờ chúng ta sẽ có toàn bộ code như sau:

Style.css
#header{
    background: yellow;
    height: 100px;
}
#menu{
    background: grey;
    height: 30px;
}
#main_content{
    background: pink;
}
#footer{
    background: red;
    height: 150px;
}

#left_sidebar{
    float:left;
    width: 300px;
    height: 400px;
    background: blue;
}

#right_sidebar{
    float:right;
    width: 300px;
    height: 400px;
    background: orange;
}

#content{
    margin-left: 300px;
    margin-right: 300px;
    height: 300px;
    background: #fff
}
Index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Layout HTML Basic</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="./style.css" rel="stylesheet"/>
    </head>
    <body>
        <div id="main_wrapper">
            <div id="header">
                <img src="./images/logo.png"/>
            </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 style="clear: both"></div>
            </div>
            <div id="footer">
                Footer
            </div>
        </div>
    </body>
</html>

Như vậy là bạn đã biết được cách chia bổ cục layout cho một trang web rồi đấy. Mặc dù đây là phần khá cơ bản, nhưng với những bạn mới học HTML thì rất hữu ích. Bài này mình xin dừng tại đây, hẹn gặp lại các bạn ở bài tiếp theo nhé.

Bình luận

Cùng chuyên mục:

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ html ...

Thẻ select trong HTML

Thẻ select trong HTML

Cách sử dụng thẻ html ...

Thẻ input trong HTML

Thẻ input trong HTML

Cách sử dụng thẻ html ...

Thẻ textarea trong HTML

Thẻ textarea trong HTML

Cách sử dụng thẻ html ...

Thẻ button trong HTML

Thẻ button trong HTML

Cách sử dụng thẻ html ...

Thẻ option trong HTML

Thẻ option trong HTML

Cách sử dụng thẻ html ...

Thẻ optgroup trong HTML

Thẻ optgroup trong HTML

Cách sử dụng thẻ html ...

Thẻ fieldset trong HTML

Thẻ fieldset trong HTML

Cách sử dụng thẻ html ...

Top