Bài 6: Danh sách, Danh sách, và Danh sách

Danh sách được dùng để trình bày các mục thông tin thành một dạng dễ đọc hơn. Chẳng hạn như, ngay sau phần tiêu đề kế tiếp dưới đây có một danh sách.

Có rất nhiều trang Web trình bày danh sách các mục. Có những mục bắt đầu bằng một "bullet" (unordered) hoặc là một danh sách có đánh số theo thứ tự (ordered). Những danh sách này được định dạng dễ dàng trong HTML, và chúng cũng có thể được lồng vào nhau (danh sách trong danh sách) tạo thành một dạng phân cấp tài liệu. Danh sách cũng được sử dụng cho việc tạo một bảng chỉ mục hay là một bảng nội dung của một dãy các tài liệu hoặc các chương.

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

Danh sách không có thứ tự (unordered list) sử dụng tag ul được xuất hiện như là một danh sách các mục với những dấu "bullet" hoặc những ký hiệu đánh dấu ở trước. Ký hiệu dùng để đánh dấu tùy thuộc vào từng loại phiên bản của Web browser và phông để trình bày các ký tự thông thường (ví dụ như, trong Macintosh các bullet là ký tự option-8 của phông Times có dạng là một hình vuông nhỏ, còn trong Geneva nó lại là một dấu chấm tròn lớn).

Sau đây là ví dụ cho một danh sách không có thứ tự:


Và dạng HTML cho kết quả trên là:

<B>My Unordered List:</B> <ul> <li> Item 1 <li> Item 2 <li> Item 3 </ul>

Các tag <ul> đánh dấu sự bắt đầu và kết thúc của danh sách, còn tag <li> chỉ ra từng mục cho một danh sách.

Danh sách có thứ tự

Danh sách có thứ tự là danh sách mà browser sẽ đánh số thứ tự cho mỗi mục trong danh sách, thường là bắt đầu bằng "1." Lưu ý rằng, sự khác nhau đó chính là do một thay đổi nhỏ từ tag ul thành tag ol. Lấy ví dụ tương tự như ví dụ trên:


Và dạng HTML cho ví dụ trên là:

<B>My Ordered List:</B> <ol> <li> Item 1 <li> Item 2 <li> Item 3 </ol>

Danh sách lồng nhau

Danh sách có thứ tự và danh sách không có thứ tự có thể lồng vào nhau theo nhiều mức độ khác nhau tùy thuộc vào từng loại Web browser. Vấn đề bạn cần quan tâm chính ở đây là việc kiểm tra rằng mỗi danh sách được kết thúc một cách chính xác và trật tự lồng vào nhau là đúng.

Bước đầu bạn có vẻ thấy phức tạp với các tag <ol> <li> </ul> <li>, nhưng hãy cố gắng nhớ cấu trúc cơ bản như sau :


Sau đây là một ví dụ với một danh sách không có thứ tự với các mức danh sách con khác của nó:


Hãy chú ý sự thay đổi của các dấu đánh dấu cho các mức khác nhau của danh sách. Và đây là đoạn mã HTML cho ví dụ trên:

<ul><B>Nested Unordered List</B> <li>This is the first item <li>This is the second item <ul> <li> This is the first sub item of the second item <ul> <li> And this is a sub item of a sub item <li> Getting lost yet? </ul> <li> This is the second sub item of the second item <li> This is the third sub item of the second item </ul> <li>This is the third item </ul>

Những danh sách lồng nhau - Trộn chúng lại với nhau

Bạn không những có thể lồng các danh sách có thứ tự vào trong danh sách có thứ tự mà còn có thể trộn lẫn các loại danh sách. Đừng quá ngạc nhiên! Bắt đầu HTML trông có vẻ hơi ngớ ngẩn, nhưng bạn hãy xem thử cách mà các danh sách lại có những danh sách khác bên trong của nó.

Lấy ví dụ, danh sách có thứ tự dưới đây bao gồm một danh sách không có thứ tự bên trong nó:


Và đây là đoạn mã HTML cho ví dụ trên. Hãy chú ý sự sắp xếp trong cách viết HTML để dễ đọc hơn:


Đặt những danh sách vào trong tài liệu HTML của bạn

Sử dụng tag list, bạn sẽ thêm một danh sách có thứ tự và một danh sách không có thứ tự vào trang web Volcano Web của bạn.

1. Mở lại workspace của bạn (nếu nó chưa được mở).
2. Mở lại tài liệu HTML trong trình soạn thảo.
3. Bên dưới đề mục Volcano Terminology chúng ta sử dụng một danh sách không có thứ tự để trình bày một số thuật ngữ kỹ thuật được sử dụng trong việc nghiên cứu núi lửa. Hãy đến mục này trong tài liệu HTML của bạn.
4. Trước hết thêm câu sau :

How many do you know?

5. Và bây giờ, hãy đánh vào dạng HTML để tạo ra danh sách các thuật ngữ:

<ul> <li>caldera <li>vesicularity <li>pahoehoe <li>rheology <li>lahar </ul>

6. Bây giờ chúng ta sử dụng một danh sách có thứ tự để xác định những phần yêu cầu của bài học chúng ta đang xây dựng. Bên dưới đề mục Research Project, thêm những dòng sau (Hướng dẫn: lúc này bạn nên sử dụng chức năng cắt và dán từ trong trang web trừ phi bạn có thích thú và muốn tự đánh lại đoạn văn bản!):


7. Lưu trữ và Reload trong Web browser của bạn.

(C) TTDT DHBK TPHCM

->Read More...