Tạo website layout cơ bản
TIL
635
HTML5
27
CSS3
53
White

Tấn Huy viết ngày 04/08/2018

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)
alt text

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ổ 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>
    <h1>This is my branding</h1>
    <p>Say something about website</p>
</header>

Và đây là kết quả thu được:
alt text
trông cũng ổn phết :laughing::laughing:. 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 ulliđể 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ả:
alt text
Cũng có thể xem như là một menu rồi đấy chứ :laughing:

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>
        <h1>Column</h1>
        <p>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.</p>
    </article>
    <article>
        <h1>Column</h1>
        <p>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.</p>
    </article>
    <article>
        <h1>Column</h1>
        <p>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.</p>
    </article>
</section>

Đây là kết quả của đống code trên
alt text
Ơ tại sao nó lại không chia ra nhỉ? Đây chỉ mới là khung xương cho nó thôi :laughing: 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>
    <p>HyHy &copy; 2018</p>
</footer>

kết quả:
alt text
Hãy cùng xem lại sau tất cả đống code ngoằn ngoèo trên kia chúng ta đã có được gì
alt text
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à:
alt text
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 :laughing:). Để 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.

/*màu cho thanh menu */
nav{
    background-color:#1abc9c;
}
/*chỉnh đốn vị trí và loại bỏ đống bullet phía trước các mục trong li*/
nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
/*đưa các mục về hàng ngang*/
nav li{
    display:inline-block;
}
/*trang điểm*/
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
alt text
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;
}

alt text

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

*{
    box-sizing:border-box;
}
/*tạo tí màu mè cho phần content*/
section{
    background-color:lightgrey;

}
/*chia cột thành 3 phần và làm nó trên cùng một hàng*/
article{
    width:33.33%;
    float:left;
    background-color:#f0f0f0;
    padding:1em;
}
section:after{
    content:"";
    clear:both;
    display:table;
}

Kết quả:
alt text

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ả:
alt text

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
alt text

Và sau
alt text

Chưa được đẹp lắm, nhưng có vẻ cũng đúng được yê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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
11 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
12 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 5 tháng trước
12 2
White
7 0
Sau khi đã tìm hiể về Grid ở hai phần trước về các property thông dụng của grid ((Link), (Link)) thì chúng ta cũng đã thấy grid rất hữu dụng vì tha...
Tấn Huy viết 3 tháng trước
7 0
White
6 1
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 4 tháng trước
6 1
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 5 tháng trước
0 2
White
33 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết 3 năm trước
33 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
11 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!