Phần 2. Nâng cao 12. Tạo danh sách

12. Tạo các danh sách
1. Bài học

Danh sách được dùng để trình bày thông tin thành một dạng dễ đọc hơn. Chẳng hạn để tạo ra các bảng chỉ mục, nội dung của một dãy các tài liệu hay các chương.

HTML có hai kiểu danh sách, danh sách có thứ tự (ordered) và danh sách không có thứ tự (unorder).

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

Danh sách không có thứ tự có các mục bắt đầu bằng các "butllet" hoặc các ký hiệu đánh dấu ở trước. Ðể tạo ra danh sách không có thứ tự ta dùng các tag sau:

<ul>

<li>Chỉ mục thứ nhất

...

<li>Chỉ mục cuối

</ul>

Ví dụ khi trong phần body của file HTML của bạn có đoạn như sau:

<h3>Các bộ môn trong khoa Công nghệ Thông tin trường Ðại học Bách khoa Hà nội</h3>

<ul>

<li>Bộ môn Khoa học máy tính

<li>Bộ môn Kỹ thuật máy tính

<li>Trung tâm máy tính

<li>Phòng thí nghiệm Liên mạng

</ul>

Thì trên trình duyệt danh sách được hiển thị như sau :

Danh sách có thứ tự

Danh sách có thứ tự là danh sách mà mỗi mục của danh sách được đánh số, thường bắt đầu từ "1". Ðể tạo ra danh sách có thứ tự ta dùng các tag sau:

<ol>

<li>Chỉ mục thứ nhất

...

<li>Chỉ mục cuối cùng

</ol>

Danh sách có thứ tự chỉ khác danh sách không có thứ tự ở chỗ thay tag <ul> bằng tag <ol>.

Ví dụ : Nếu trong phần body của file HTML có đoạn

<h3>Các bước chuẩn bị để học HTML</h3>

<ol>

<li>Chương trình soạn thảo văn bản trơn (như NotePad của Windows)

<li>Trình duyệt Web(như Internet Explorer hoặc Nescape Navigator)

<li>Bộ sách về HTML của tạp chí Internet Today

</ol>

Danh sách định nghĩa (definition lists)

Danh sách định nghĩa không có các chỉ mục đầu dòng. Sau khi kết thúc tag <dt>, nó tự động xuống dòng, viết thụt vào hệt như các định nghĩa trong sách giáo khoa vậy.

Ví dụ:

để có trang web trên, bạn phải đánh đoạn mã sau:

<h3>Ví dụ về danh sách định nghĩa<h3>

<dl>

<dt>Ðịnh nghĩa 1</dt>

<dd>giải thích định nghĩa 1.</dd>

<dt>Ðịnh nghĩa 2</dt>

<dd>giải thích định nghĩa 2</dd>

<dt>Ðịnh nghĩa 3</dt>

<dd>giải thích định nghĩa 3.</dd>

</dl>

Trong trang Web để tạo ra các mục thông tin có cấu trúc logic hơn bạn có thể lồng các danh sách với nhau.

Ví dụ về trộn danh sách

<h3>Ví dụ về trộn danh sách</h3>

<ol>

<li> Chỉ mục 1

<ul>

<li> Chỉ mục con 1

<ol>

<li> Chỉ mục con 1

<li> Chỉ mục con 2

</ol>

<li> Chỉ mục con 2

</ul>

<li> Chỉ mục con

</ol>

Ta có danh sách như sau :

2.Thực hành

Ðưa danh sách vào trang Web của bạn

1. Mở một file HTML mới, trong phần body bạn tạo một danh sách bằng các tag HTML như sau :

<h3>Mục lục</h3>

<ul>

<li>Chương một

<ol>

<li>Giới thiệu chung

<li>Những kiến thức vỡ lòng về HTML

</ol>

<li>Chương hai

<ol>

<li>Các tag thông dụng

<ul>

<li>Tag định dạng kiều chữ

<li>Tag chèn ảnh

</ul>

<li>Các tag trang trí trang Web

</ol>

<li>Chương ba

<ul>

<li>Các trang Web mẫu

<li>Kết thúc

</ul>

</ul>

2. Lưu công việc của bạn. Mở trên trình duyệt và so sánh với ví dụ mẫu