Ở bài viết này tôi sẽ viết về Layout trong một trang web HTML. Vậy đầu tiên bạn cần biết là Layout là gì?
1. Layout là gì?
Layout có thể tạm hiểu là cách mà chúng ta bố trí các thành phần chính trên một trang web.
Một trang web thường gồm các thành phần chính như hình dưới
Trong đó:
+ <header> Tạo tiêu đề của trang hoặc tiêu đề một khu vực (section) trong trang
+ <nav> Tạo phần chứa liên kết điều hướng trang (thường là menu của trang)
+ <section> Tạo một khu vực trong trang
+ <article> Tạo một bài viết độc lập
+ <aside> Tạo một khung bên cạnh nội dung (chẳng hạn như sidebar)
+ <footer> Tạo chân trang hoặc phần cuối của một khu vực
Ngoài ra còn có các thẻ cũng thường dùng như <details> Tạo một nội dung và thông tin chi tiết về nội dung đó và <summary> Tạo tiêu đề cho nội dung trong thẻ <details>
Như hình trên là các thẻ mới trong HTML 5.
2. Xu hướng thiết kế layout website
Xu hướng hiện nay là thiết kế một layout theo chuẩn HTML5 và CSS3 (chẳng hạn như CSS Flexbox)
Còn nếu bạn muốn website của bạn có tốc độ tải trang nhanh thì dùng CSS Frameworks cũng là xu hướng hiện nay. Ví dụ website của tôi đang dùng một cái CSS Frameworks tên là thesis.
Ngoài ra để thiết kế một layout người ta có thể dùng CSS Floats, nó rất dễ học nhưng nó có nhược điểm lớn là làm website của bạn có tốc độ tải trang chậm vì vậy xu hướng hiện nay không dùng nó để thiết kế layout website.
Các bạn cần lưu ý rằng KHÔNG được dùng thẻ <table> để thiết kế layout website vì nó có nhược điểm rất lớn là sẽ rất khó khăn trong việc chỉnh sửa lại layout website. Mục đích chính của thẻ <table> là thể hiện các dữ liệu dạng bảng.
3. Cách thiết kế một Layout đơn giản
Trong việc thiết kế Layout, thẻ <div> thường được dùng để phân chia các thành phần chính của trang web.
Trong mỗi thành phần chính, ta có thể thêm các thẻ <div> khác cho thành phần nhỏ hơn.
Kết hợp với thuộc tính định dạng CSS, ta có thể thiết kế được Layout như ý.
Để các bạn dễ hiểu tôi sẽ ví dụ như hình dưới
Đây là code của ví dụ trên
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
border: 2px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: blue;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Blog Wordpres - Chia sẻ kiến thức</h1>
</header>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</ul>
</nav>
<article>
<h1>HTML</h1>
<p>– HTML là chữ viết tắt của Hyper Text Markup Language hay tiếng Việt gọi là Ngôn ngữ Đánh dấu Siêu văn bản.<br>
– Một file HTML chứa những thẻ (Tags) HTML<br>
– Những thẻ (Tags) HTML sẽ hướng dẫn trình duyệt web trình bày thành phần của một trang web<br>
– Một file HTML phải có đuôi mở rộng là .html hoặc .htm<br>
– Một file HTML có thể được tạo ra bởi trình soạn thảo văn bản đơn giản như Notepad.</p>
</article>
<footer>Copyright © 2017 Nguyen Huu The Binh. All Rights Reserved.</footer>
</div>
</body>
</html>
4. Lời cuối bài
Đến đây là chúng ta đã kết thúc về chủ đề layout cho trang web trong HTML. Ở bài kế tiếp tôi sẽ viết về giao diện Responsive trong HTML.
The post [HTML bài 27] Cách thiết kế Layout cho trang web trong HTML appeared first on Học online.
from WordPress http://ift.tt/2wgU9xS
via IFTTT
Không có nhận xét nào:
Đăng nhận xét