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.
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.
Bài học
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:
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:
My Ordered List:
- Item 1
- Item 2
- Item 3
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 :
<ul> <ol>
<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
- This is the first sub item of the second
item
- And this is a sub item of a sub item
- Getting lost yet?
- This is the second sub item of the second
item
- 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:
<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ó:
Nested Unordered List
- This is the first item
- This is the second item
- This is the first sub item of the second
item
- An this is a numbered sub item of a
sub item
- An this is another numbered subItem of
a sub item
- Getting lost yet?
- This is the second sub item of the second
item
- This is the third sub item of the second
item
- 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:
<B>Nested Unordered List</B>
<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
Lưu ý: Nếu bạn chưa có tài
liệu từ bài học trước, hãy download
ngay bây giờ.
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.
- Mở lại workspace của
bạn (nếu nó chưa được mở).
- Mở lại tài liệu HTML trong
trình soạn thảo.
- 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.
- Trước hết thêm câu sau :
How many do you know?
- 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>
- 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!):
Your mission is to find information and report on a
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.
- Lưu trữ và Reload
trong Web browser của bạn.
Kiểm tra lại công việc
của bạn
Có thể bạn muốn so sánh tài
liệu của bạn với ví
dụ mẫu cho phần bạn vừa làm. Nếu danh sách
của bạn khác với danh sách trong ví dụ mẫu, hãy
kiểm tra lại những gì bạn đã đánh trong trình
soạn thảo. Hãy chắc chắn rằng nó phù hợp
với các hướng dẫn trong mục Đặt
những danh sách vào trong tài liệu HTML của bạn
trong bài này.
Xem lại
- Danh sách có giá trị như
thế nào trong trang Web ?
- Tag HTML nào được dùng cho
danh sách không có thứ tự?
- Tag HTML nào được dùng cho
danh sách có thứ tự?
- Phải làm thế nào để
tạo ra danh sách lồng nhau ?
- Những bước nào được
sử dụng trong việc thêm một danh sách vào tài
liệu HTML của bạn?
Thực tập tự do
Có thể bạn muốn có kinh
nghiệm trong việc chuyển đổi một danh sách có
thứ tự thành một danh sách không có thứ tự.
Đồng thời bạn cũng muốn thêm một danh sách
có thứ tự hay không có thứ tự vào trong tài
liệu WWW của bạn. Hãy chắc chắn rằng nó
được thể hiện đúng trong browser của
bạn. Bạn có tạo được các danh sách có danh
sách con không ?
Đi đến phần tiếp
theo ....
Hãy làm thêm gì đó để không
chỉ có chữ -- thêm hình ảnh vào trang Web của
bạn.