Chủ đề nổi bật

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>
Trong này phần header và nav, aside và footer vẫn y như bài trước, riêng phần section mình có thêm một số thẻ bên trong, đó là:
<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>
Trong phần section này mình muốn hiển thị một mẫu tin tức nên mình đã tạo một article và trong article có header chứa tiêu đề, một thẻ p chứa nội dung và một thẻ footer chứa thông tin tác giả và ngày đăng của tin tức. Trong header mình có 2 thẻ h1 và h2 nên mình có dùng một thẻ hgroup để bao quanh lại, nếu bạn chỉ sử dụng một thẻ h1 thôi thì không cần dùng thêm thẻ hgroup.

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>
Vậy là đã có 2 mẫu tin rồi đúng không nào :D. Chạy lên và kết quả là đây:

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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

HTML5 căn bản | HTML5 là gì?

Trong bài này chúng ta sẽ cùng tìm hiểu một số thẻ HTML được bổ sung vào trong phiên bản HTML5, các thẻ này sinh ra nhằm mục đích giúp ta chia khối cho trang web rõ ràng hơn. Nhưng trước tiên chúng ta cần tìm hiểu khái niệm HTML5 là gì đã nhé. HTML5 là gì? Trong 4 năm gần đây bạn ...

HTML căn bản

Trước khi bắt đầu học làm web thì ban phải học HTML và CSS vì hai ngôn ngữ này giúp bạn xây dựng giao diện của website, đẹp hay xấu là phụ thuộc vào cách sử dụng và trình bày bổ cục hợp lý. Nhằm giúp bạn cũng cố lại các thẻ html thì trong phần này mình sẽ giới thiệu các thành phần thường được dùng ...

HTML5 Canvas

Trong bài này chúng ta sẽ tìm hiểu một đối tượng rất hay trong HTML5 đó là thẻ canvas, thẻ này thường được dùng để vẽ đồ họa, làm web game. Canvas là một thẻ mới trong HTML5 và nhiệm vụ của nó là giống như màn hình Tivi vậy, nó sẽ hiển thị kết quả đồ họa của một chường trình Javascript. Như ...

Bài 04: HTML5 Canvas - Nối nhiều đường

Chúng ta đã được học cách vẽ một số đường thẳng trong Canvas rồi nhỉ, vậy thì trong bài này mình sẽ hướng dẫn bạn cách nối các đường đó với nhau ...

Bài 03: HTML5 Canvas - Vẽ đường cong

Ngoài vẽ đường thẳng ra thì Canvas còn có thể vẽ các đường cong như hình cung, đường cong bậc hai, đường cong Benzier. Đối với cách vẽ đường thẳng ...

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 02: HTML5 Canvas - Vẽ đường thẳng

Trong bài này chúng ta sẽ tìm hiểu cách vẽ một đường thẳng trong Canvas. 1. Vẽ đường thẳng trong Canvas Một đường thẳng sẽ có những tính ...

Bài 01: Tạo Template HTML5 Đầu Tiên

Nếu bạn mới bắt đầu học HTML5 thì điều bạn quan tâm đầu tiên chính là cấu trúc một website xây dựng bằng html5 sẽ như thế nào? Chờ gì nữa ta bắt ...

Bài 01: HTML5 Canvas là gì?

Trong bài này chúng ta sẽ tìm hiểu một thẻ HTML5 dùng để xây dựng Graphic đồ họa đó là thẻ Canvas. Ví dụ bạn muốn vẽ một sơ đồ hình học thì ...