[Tự Học HTML] Bài 4: List (Danh Sách)

Chào các bạn trở lại với chuỗi bài viết Tự Học HTML với GiaLinhIT's Blog.  Bài này chúng ta sẽ tìm hiểu về cách tạo danh sách trong HTML.

Một vài hình ảnh của danh sách mà bạn thường thấy.

Hình 1:  Một phần của trang chủ 24h.com.vn

Hình 2:Một phần trang chủ website giá rẻ

 

Hình 3: Thực đơn của một ngày

Qua hình ảnh trực quan về danh sách ta có một vài nhận xét sau:

Danh sách có hai loại:

Danh sách có thứ tự

- Trong danh sách có thứ tự có thể đánh theo kiểu số, alphabet, hình ảnh....

Danh sách không có thứ tự

Vậy làm sao để có một danh sách như ý muốn từ mã HTML.

Mỗi danh sách có thể có một hoặc nhiều phần tử, chẳng hạn như hình 3 có các phần tử được đánh thứ tự là 

1. Bữa sáng

2. Bữa trưa

3. Bữa tối

và có các phần tử con hơn nữa trong mỗi bữa..

1. Tạo danh sách có thứ tự (Ordered)

 Để tạo một danh sách có thứ tự ta dùng thẻ <ol>

Cú pháp:

Ví dụ 1:

- Mã HTML

Hiển thị trình duyệt:

Khi trình duyệt hiển thị các phần tử sẽ được đánh thứ tự mặc định là số nguyên 1-> n.

Tới đây có bạn sẽ hỏi muốn đánh thứ tự theo alphabet thì làm thế nào? Để làm được điều này ta sử dụng các thuộc tính của thẻ <ol>.

- Thuộc tính của thẻ ol:

+ Type: 

Nếu type="1" thì đánh số thứ tự từ 1 -> n ( như mặc định)

Nếu type="a" thì đánh số thứ tự từ a,b,c ->z

Nếu type="I" thì đánh số thứ tự la mã là I, II, III...

Ví dụ:

Tạo danh sách dánh thứ tự la mã

Hiển thị trình duyệt.

Ta thấy sử dụng type="I" thì các phần tử đã được đánh thứ tự chẳng hạn như Thiet Ke Web Bat Dong San được đánh dấu III.

2. Tạo danh sách không có thứ tự (UnOrdered):

Để tạo danh sách dạng này ta dùng thẻ <ul>

 Cú pháp: 

Ví dụ: 

Mã HTML

Hiển thị:

Ta thấy các phần tử được đánh mặc định la dấu chấm tròn đen ( không phân biệt thứ tự).

Thuộc tính của thẻ <ul>:

Tương tự <ol> thì <ul> cũng có thuộc tính type:
Nếu type="disc" thì danh sách được đánh dấu như mặc định.
Nếu type="square" thì danh sách được đánh dấu chấm vuông đen.
Nếu type="circle" thì danh sách được đánh dấu chấm tròn trắng viền đen.
Trường hợp bạn thấy thực tế có một vài danh sách ký tự đánh dấu bị ẩn đi, khi đó ta sử dụng thuộc tính style="list-style:none;"

Bài tập thực hành:

Tạo danh sách có tiêu đề danh sách là: Các Dịch Vụ Của Công Ty OSVN
Các phần tử là:

1. Thiet Ke Giao Dien Web.
2. SEO từ khóa chỉ từ 500K.
3. Thiet Ke Web Bat Dong San.

 Yêu cầu:

• Danh sách có đánh tứ tự là A, B, C....
• Danh sách không đánh thứ tự, các phần tử đánh bằng dấu chấm tròn trắng viền đen.
• Danh sách không đánh tứ tự các phần tử, các dấu ký tự bị ẩn.

Mời các bạn đón xem bài tiếp theo: Bài 5: From Tag.