Hướng dẫn lập trình HTML – Bài 4
| 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. |
Hướng dẫn lập trình HTML – Bài 2
Hướng dẫn lập trình HTML – Bài 3
Mục đích
Sau bài học này bạn có khả năng:
* Nhận dạng được mã cho việc tạo thành những danh sách có thứ tự (ordered list), không có thứ tự (unordered list) và danh sách lồng nhau (nested list) của một trang web.
* Đặt những loại danh sách khác nhau vào trong tài liệu HTML và nhìn thấy sự thay đổi của chúng trong trang Web.
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ự:
My Unordered List:
* Item 1
* Item 2
* Item 3
Và dạng HTML cho kết quả trên là:
<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:
My Ordered List:
1. Item 1
2. Item 2
3. Item 3
Và dạng HTML cho ví dụ trên là:
<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 :
<li> <li>
<li> <li>
</ul> </ol>
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ó:
Nested Unordered List
* This is the first item
* This is the second item
o This is the first sub item of the second item
+ And this is a sub item of a sub item
+ Getting lost yet?
o This is the second sub item of the second item
o This is the third sub item of the second item
* This is the third item
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:
<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ó:
Nested Unordered List
1. This is the first item
2. This is the second item
* This is the first sub item of the second item
1. An this is a numbered sub item of a sub item
2. An this is another numbered subItem of a sub item
3. Getting lost yet?
* This is the second sub item of the second item
* This is the third sub item of the second item
3. This is the third item
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:
<ol>
<li>This is the first item
<li>This is the second item
<ul>
<li> This is the first sub item of the second item
<ol>
<li> An this is a numbered subItem of a sub item
<li> An this is another numbered sub item of a sub item
<li> Getting lost yet?
</ol>
<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
</ol>
Đặ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ữ:
<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!):
volcano, other than the ones listed above, that has erupted
in the last 100 years. Your reports must include:
<ol>
<li>Type of volcano
<li>Geographic location
<li>Name, distance, and population of nearest major city
<li>Dates of most recent and most destructive eruptions.
<li>Other events associated with the recent eruptions
(earthquakes, floods, mudslides, etc)
</ol>
<p>
Then, write a one page description on the major hazards to
humans in the vicinity of this volcano. Speculate on what
you would do if you were in charge of minimizing the risk
to the population.
7. Lưu trữ và Reload trong Web browser của bạn.
Theo thekok