Một vài ví dụ sử dụng thẻ HTML để trình bày Danh mục.
I-Danh sách không theo thứ tự: <ul></ul> (Unordered List)
<ul></ul> tags dùng để tạo danh sách không theo thứ tự, tag này gồm có thuộc tính và thành phần tạo danh sách.

1-Cú pháp:


<ul thuộc tính="giá trị">
<li>Mục trong danh sách</li>
<li>Mục trong danh sách</li>
<li>............................</li>
</ul>



Trong đó:

• <ul> :khai báo một danh sách sẽ được dùng.
  
• Thuộc tính: type=
  
• <li> :Thành phần khai báo mục của danh sách. Giá trị: type="ký tự"
  
• </li> :Tag đóng mục. (Tag này là tùy chọn, không cần đóng cũng được.)
  
• </ul> :Tag đóng.
  

Ví dụ:

Viết:	Hiển thị trên trình duyệt:
<ul type="1"> <li>Mục 1 <li>Mục 2 <li>Mục 3 </ul>	Mục 1 Mục 2 Mục 3
<ul type="1"> <li>Mục 1 <li >Mục 2 <li value="5">Mục 5 <li>Mục 6 <li>Mục 7 </ul>	Mục 1 Mục 2 Mục 5 Mục 6 Mục 7

Mặc nhiên, khi một danh sách được khai báo thì mục đầu tiên sẽ tự động xuống 1 hàng vào thụt lề.


2-Giá trị thuộc tính của Tag: <ul></ul>

• <ul type="1"> : Bắt đầu danh sách theo thứ tự 1,2,3.(mặc nhiên)
  
• <ul type="square"> : Danh sách bắt đầu là các chấm vuông đen.
  
• <ul type="circle"> : Danh sách bắt đầu là vòng tròn rỗng.
  
• <ul type="square"> : Danh sách bắt đầu là 1 vòng tròn đen.
  
• <ul type="I"> :Danh sách bắt đầu số La Mã hoa.
  
• <ul type="i"> : Danh sách bắt đầu số La Mã thường.
  
• <ul type="A"> : Danh sách bắt đầu chữ cái Hoa.
  
• <ul type="A"> : Danh sách bắt đầu chữ thường.
  

Xem ví dụ:

Viết:	Hiển thị trên trình duyệt:
<ul type="1"> <li>Mục thứ tự 1 <li>Mục thứ tự 2 <li>Mục thứ tự 3 </ul>	Mục thứ tự 1 Mục thứ tự 2 Mục thứ tự 3
<ul type="square"> <li>Mục với ô vuông đen. </ul>	Mục với ô vuông đen.
<ul type="circle"> <li>Mục với ô tròn rỗng. </ul>	Mục với ô tròn rỗng
<ul type="disc"> <li>Mục với ô tròn đen. </ul>	Mục với ô tròn đen

3-Tạo danh sách nhiều tầng:

Để tạo danh sách nhiều tầng, bạn có thể lồng một danh sách vào trong một danh sách.

Xem ví dụ:

Viết:	Hiển thị trên trình duyệt:
<ul type="1"> <li><b>Chương 1:</b> <ul type="disc"> <li>Bài Lý thuyết 1. <li>Bài Lý thuyết 2. <li>Bài Lý thuyết 3. </ul> <li><b>Chương 2:</b> <ul type="square"> <li>Bài Thực Hành 1. <li>Bài Thực Hành 2. <li>Bài Thực Hành 3. </ul> </ul>	Chương 1: Bài Lý thuyết 1. Bài Lý thuyết 2. Bài Lý thuyết 3. </li> Chương 2: Bài Thực Hành 1. Bài Thực Hành 2. Bài Thực Hành 3. </li>

II-Danh sách thứ tự: <ol></ol>(Ordered List)
Dùng <ol></ol> Ordered List để tạo danh sách theo thứ tự số hoặc chữ. Cũng giống như khai báo của <ul></ul>, nhưng cặp tags này còn có thêm thuộc tính Start và giá trị.


Ví dụ:

Viết:	Hiển thị trên trình duyệt:
<ol type="1"> <li>Order List hiễn thị mục với số thứ tự. <li>HTML không xếp thứ tự các mục. <li>Nó chỉ thêm số thứ tự vào mỗi mục <li>Bạn phải tự xếp thứ tự. </ol>	Order List hiển thị mục với số thứ tự. HTML không xếp thứ tự các mục. Nó chỉ thêm số thứ tự vào mỗi mục Bạn phải tự xếp thứ tự.
<ol type="I" start="10"> <li>Order List có thể dùng số La Mã. <li>Order List có thể dùng chữ cái. <li>Bạn bắt đầu bằng 10. <li>Mục kế tiếp sẽ là XI. </ol>	Order List có thể dùng số La Mã. Order List có thể dùng chữ cái. Bạn bắt đầu bằng 10. Mục kế tiếp sẽ là XI, XII, XIII.
<ol type="A" start="24"> <li>Order List có thể dùng chữ cái. <li>Dùng chữ A để khai báo. <li>Bắt đầu bằng chữ thứ 24. <li>Chữ kế tiếp nó là X,Y,Z, AA. </ol>	Order List có thể dùng chữ cái. Dùng chữ A để khai báo. Bắt đầu bằng chữ thứ 24. Chữ kế tiếp nó là X,Y,Z, AA.

Các giá trị thuộc tính của type=:

• <ol type="1" start="10"> :Bắt đầu bằng 10, kế tiếp là 11, 12, 13...
  
• <ol type="square"> : Danh sách bắt đầu là các chấm vuông đen.
  
• <ol type="circle"> : Danh sách bắt đầu là vòng tròn rỗng.
  
• <ol type="square"> : Danh sách bắt đầu là 1 vòng tròn đen.
  
• <ol type="I" start="5"> :Danh sách bắt đầu số La Mã hoa, kế tiếp là VI, VII, VIII...
  
• <ol type="i"> : Danh sách bắt đầu số La Mã thường, kế tiếp là vi, vii, viii...
  
• <ol type="A" start="3"> : Danh sách bắt đầu chữ cái Hoa, kế tiếp là C, D, E....
  
• <ol type="a"> : Danh sách bắt đầu chữ thường, kế tiếp là b,c,d...
  

Bạn cũng có thể tạo danh sách nhiều tầng sử dụng cặp Tags này hoặc
kết hợp với Unodered List. Cách tạo tương tự như ví dụ trong mục I.

III-Tạo Danh sách Định nghĩa:
Một ứng dụng tạo danh sách quan trọng là tạo danh sách các định
nghĩa, giải thích thuật ngữ. Chúng ta có 3 cặp tags để làm công việc này
như sau:

• <dl></dl> : Tags tạo danh sách định nghĩa. (Definition List)
  
• <dt></dt> : Tags hiển thị thuật ngữ sẽ được định nghĩa. (Definition Term)
  
• <dd></dd>: Tags hiển thị định nghĩa của thuật ngữ. (Definition Description)
  

Ví dụ:

Viết:	Hiển thị trên trình duyệt:
<dl> <dt>HTML</dt> <dd>Hypertext Markup Language.</dd> <dt>CSS</dt> <dd>Cascading Style Sheet.</dd> <dt>DHTML</dt> <dd>Damamic Hypertext Markup Language.</dd> <dt>Element</dt> <dd>Element được tạo bởi 2 Thẻ.</dd> <dt>Attribute</dt> <dd>Attribute mô tả đặc tính của Element.</dd> <dt>Value</dt> <dd>Value xác định một giá trị của Attribute.</dd> </dl>	HTMLHypertext Markup Language.CSSCascading Style Sheet.DHTMLDymamic Hypertext Markup Language.ElementElement được tạo bởi 2 Thẻ.AttributeAttribute mô tả đặc tính của Element.ValueValue xác định một đặc tính của Attribute.

IV-Thực hành:
Bạn có thể mở Notepad, gõ vào các ví dụ trên và lưu với tên tập tin list.html.
Bạn cũng có thể định dạng chữ cho các thành phần trong danh sách bằng
tất cả các tags định dạng như <font> hoặc <b>...Hãy sáng
tạo.

Hết Bài 7.




Nguồn: Sưu tầm Internet