Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
526 lượt xem

Học HTML – Bài 7: Thẻ danh sách trong HTML

học html cơ bản

Chào mừng các bạn quay trở lại với loạt bài học HTML cơ bản của Giuseart.com. Trong bài học này, chúng ta sẽ tìm hiểu cách dùng thẻ danh sách trong HTML nhé!

Vai trò của thẻ danh sách

Thẻ danh sách thường dùng nhất để tạo Menu cho trang web. Và để tạo một Menu ngang hoặc Menu dọc đẹp cho website, bạn không chỉ cần biết cách sử dụng thẻ danh sách, mà bạn còn phải biết dùng cả CSS để kết hợp nữa.

Việc tạo nên một Menu đẹp và ấn tượng không phải ai cũng làm được, quan trọng là bạn phải có chút năng khiếu về thẩm mỹ, cộng thêm kỹ năng sử dụng HTML và CSS thật khéo nữa.

Một số ví dụ về Menu của trang web dùng thẻ danh sách kết hợp CSS để tạo:

Thẻ danh sách tạo menu cho website
Thẻ danh sách kết hợp với CSS tạo nhiều kiểu Menu đẹp cho các website Thương mại điện tử

Các dạng thẻ danh sách

Có tất cả 3 dạng thẻ danh sách mà các bạn cần phải học: Danh sách có thứ tự, danh sách không có thứ tự và danh sách chồng nhau.

Danh sách có thứ tự: Là loại danh sách mà các tùy chọn trong menu được sắp xếp theo một thứ tự nào đó như thứ tự chữ số, chữ cái, chữ cái in hoa và chữ số La Mã.

Danh sách không có thứ tự: Là loại danh sách mà các tùy chọn trong menu không được sắp xếp theo một thứ tự nào. Phía trước các đầu mục chỉ là các dấu chấm tròn hoặc các dấu chấm vuông.

Danh sách chồng nhau: Là dạng danh sách thường dùng tạo các Menu dọc hoặc Mega menu. Qua đó, chúng ta có một danh sách lớn và nhiều danh sách nhỏ và danh sách nhỏ thì nằm trong danh sách lớn.

Cách tạo thẻ danh sách

Để tạo một thẻ danh sách, chúng ta phải làm 2 bước sau: (1). Khai báo loại thẻ danh sách cần tạo và (2). Khai báo các thành phần nội dung của thẻ danh sách.

Tạo danh sách có thứ tự

Chúng ta muốn viết một danh sách có thứ tự, chúng ta phải khai báo bằng cách sử dụng cặp thẻ <ol>…</ol> và sau đó cùng các cặp thẻ <li>nội dung</li> để khai báo các thành phần của thẻ theo cấu trúc sau:

thẻ danh sách có thứ tự

Ví dụ về thẻ chèn danh sách có thứ tự:

và kết quả là:

Ví dụ chèn thẻ danh sách có thứ tự trong html
Ví dụ chèn thẻ danh sách có thứ tự trong html

Chúng ta có thể thay đổi các số thứ tự 1,2,3 bằng các ký tự khác như chữ cái, chữ cái IN HOA hoặc số La Mã I, II, III bằng cách sử dụng thuộc tính type với các giá trị là 1, a, A, i, I với cấu trúc: <ol type=”giá_trị”>…</ol>.

Tạo danh sách không có thứ tự

Danh sách không có thứ tự được sử dụng phổ biến hơn, cách viết cũng gần tương tự như danh sách có thứ tự, chỉ khác là thay cặp thẻ <ol>…</ol> bằng cặp thẻ <ul>…</ul>.

Ví dụ:

và kết quả là:

thẻ danh sách không có thứ tự trong html
Thẻ danh sách không có thứ tự trong html

Nếu bạn không thích đầu mục là các dấu chấm tròn đen, mà muốn thay đổi sang dấu chấm vuông hoặc chấm tròn rỗng, các bạn có thể thay đổi bằng cách sử dụng thuộc tính type cho thẻ <ul> với các giá trị: circle (chấm tròn rỗng), disc (chấm tròn đen) và square (chấm vuông) với cấu trúc: <ul type=”giá_trị”>…</ul>.

Tạo danh sách chồng nhau

Việc kết hợp danh sách có thứ tự với danh sách không có thứ tự, hoặc kết hợp các kiểu hiển thị trong mỗi loại danh sách để tạo nên một danh sách chồng nhau sẽ khiến cho Menu của bạn trông khoa học và dễ nhìn hơn. Điều này đặc biệt cần thiết để tạo các Menu con hoặc cây danh mục cho Menu của bạn.

Thẻ tạo danh sách chồng nhau
Thẻ tạo danh sách chồng nhau

Nhìn hình trên, chúng ta nhận thấy rằng, chúng ta phải tạo ra một danh sách gồm 3 mục nội dung là “Học thiết kế web tại Giuseart.com”; “Mua đồ dùng cá nhân sắp Tết” và “Mua đồ dùng cho Gia đình”. Trong mỗi mục nội dung đó, chúng ta tạo tiếp các danh sách con nữa, vẫn sử dụng cặp thẻ <ul>…</ul>.

Lời kết

Như vậy, chúng ta đã tìm hiểu xong cách sử dụng thẻ danh sách trong HTML. Tổng kết bài học chúng ta đã biết cách tạo và sử dụng thẻ danh sách có thứ tự, danh sách không có thứ tự và danh sách chồng nhau. Các bạn nhớ thực hành nhiều để tập tạo Menu cho website nhé!

Bài trước: Bài 6: Thẻ chèn liên kết trong HTML

Bài tiếp: Bài 8: Thẻ tạo bảng trong HTML

Học HTML – Bài 7: Thẻ danh sách trong HTML
5 (1) vote

Thông báo: GiuseArt đang xây dựng một website chia sẻ tài nguyên thiết kế đồ họa hoàn toàn miễn phí cho người Công Giáo, dự kiến ra mắt vào đầu năm 2019. Nếu bạn muốn, hãy tham gia cùng chúng tôi nhé! Tham gia ngay

Bài viết mới cập nhật:

Bình luận Facebook

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Facebook