Bài 14 HTML - Tạo HTML danh sách bài viết đơn giản

Trong bài này mình sẽ hướng dẫn cách tạo danh sách bài viết bằng HTML, qua bài này bạn sẽ hiểu và áp dụng được một số thẻ heading, thẻ p, thẻ div, và nhiều thuộc tính CSS liên quan khác.

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách xây dựng giao diện HTML dạng danh sách. Mình sẽ không hướng dẫn làm một giao diện cute, mà chỉ làm theo một mô hình chuẩn để các bạn thực hành thôi nhé. Sau này muốn style kiểu gì thì tùy các bạn.

1. Giao diện HTML danh sách bài viết sẽ làm

Mình sẽ không hướng dẫn xây dựng bổ cục trang web nữa. Nếu bạn chưa biết cách thì quay lại bài học tạo bổ cục layout HTML nhé.

Trong bài này mình sẽ làm một giao diện có dạng như sau:

Đây là cách hiển thị chuẩn mà các bạn sẽ gặp trên hầu hết các trang web hiện nay.

Chúng ta sẽ cần một thẻ div#list_post để bao quanh toàn bộ bài viết lại. Với mỗi bài viết thì chúng ta cũng cần tạo thêm một thẻ div.post. Mình sử dụng class thì vì chúng ta có nhiều bài viết và chúng có chung một kiểu style CSS. Lúc này cấu trúc cơ bản của phần này sẽ như sau:

<div id="list_post">
    <div class="post">
        POST 1
    </div>
    <div class="post">
        POST 2
    </div>
    <div class="post">
        POST ..
    </div>
</div>

Mỗi bài viết chúng ta lại chia thành 2 phần. Thứ nhất là hình ảnh đại diện cho bài viết, nó sẽ nằm phía bên trái. Thứ 2 là nội dung sẽ nằm phía bên phải. Mình sẽ tạo 2 thẻ div như sau: