Bài 02: Thêm Article Trong HTML5
Bài trước chúng ta đã được tìm hiểu cấu trúc một template chuẩn HTML5 nhưng chỉ mới học cách sử dụng đơn giản, nên trong bài này ta sẽ đi sâu vào ...
Bài trước chúng ta đã được tìm hiểu cấu trúc một template chuẩn HTML5 nhưng chỉ mới học cách sử dụng đơn giản, nên trong bài này ta sẽ đi sâu vào hơn xíu đó là khai báo một article trong html5. Mỗi article chính là một mẫu tin, và ta sẽ coi nó như là một phần gồm có header và footer.
Trước tiên các bạn xem lại code ở bài trước đã nhé. Ở bài trước ta đã tạo được một template đơn giản theo chuẩn HTML5, và trong bài này ta sẽ tiến hành xây dựng phần section.
Thêm Article Trong HTML5
Các bạn xem đoạn code HTML5 dưới đây:
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Chương Trình HTML Đầu Tiên</title>
</head>
<body>
<header>
<h1>HTML5 Cho Người Mới Bắt Đầu Tại Freetuts.net</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serie</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Ebook</a></li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
<h2>Bản Tin 24/7</h2>
</hgroup>
</header>
<p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
<footer>
<p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
</footer>
</article>
</section>
<aside>
<h3>Tuts HTML</h3>
Học Lập Trình HTML5
</aside>
<footer>
Copyright 2014 By Freetuts.net
</footer>
</body>
</html><section>
<article>
<header>
<hgroup>
<h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
<h2>Bản Tin 24/7</h2>
</hgroup>
</header>
<p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
<footer>
<p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
</footer>
</article>
</section>Tất cả những thẻ article, hgroup, header, footer, section, aside là những thẻ HTMl5, những thẻ còn lại là thẻ HTML thông thường.
Giả sử bạn có danh sách 2 mẫu tin thì làm thế nào? Đơn giản bạn chỉ cần copy thẻ article thành 2 là được:
<section>
<article>
<header>
<hgroup>
<h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
<h2>Bản Tin 24/7</h2>
</hgroup>
</header>
<p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
<footer>
<p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Trung Quốc vi phảm chủ quyền biển Việt Nam</h1>
<h2>Bản Tin 24/7</h2>
</hgroup>
</header>
<p>Trung quốc xâm phạm vùng biển thuộc chủ quyền việt nam một cách trắng trợn</p>
<footer>
<p>Tác giả: thehalfheart - Đăng ngày: 08-05-2014</p>
</footer>
</article>
</section>
Lời Kết
Qua bài này ta thấy thẻ header và footer không phải chỉ để dùng cho phần layout chính mà bạn có thể dùng cho bên trong thẻ article. Trong header ta có thẻ html5 hgroup để gop phần header lại, và đương nhiên việc sử dụng thẻ này là không bắt buộc, tức là thay vì dùng thẻ header trong article thì bạn có thể dùng thẻ div hay thẻ thông thường khác.
Nguồn: code24h.com
