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.

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:

Item 1
Item 2
Item 3

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
  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
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.

Huỳnh Phúc Huy 's Blog

Saturday, September 28, 2013

HTML cơ bản - Phần 7