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,…
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)
Header
Navigation Menu
Content
footer
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:
This is my branding
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ả:
Home
News
About
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:
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
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
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
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> Chaomungban </p>
</footer>
kết quả:
Chaomungban
Hãy đến với chúng tôi Công ty TNHH Dịch vụ Công nghệ Web Hội An để sở hữu một website với layout cơ bản thu hút được người dùng.
