Sign In Sign-Up

Welcome!

Close

Would you like to make this site your homepage? It's fast and easy...

Yes, Please make this my home page!

No Thanks

  Don't show this to me again.

Close

Soaïn thaûo HTML | Giôùi thieäu | FAQ | Alumni | Caùc Tag | Muïc Luïc | Baøi tröôùc | Baøi keá tieáp |

6. Danh saùch, Danh saùch, vaø Danh saùch

Muïc ñích

• Nhaän daïng ñöôïc maõ cho vieäc taïo thaønh nhöõng danh saùch coù thöù töï (ordered list), khoâng coù thöù töï (unordered list) vaø danh saùch loàng nhau (nested list) cuûa moät trang web.
• Ñaët nhöõng loaïi danh saùch khaùc nhau vaøo trong taøi lieäu HTML vaø nhìn thaáy söï thay ñoåi cuûa chuùng trong trang Web.

Baøi hoïc

Danh saùch khoâng coù thöù töï

Sau ñaây laø ví duï cho moät danh saùch khoâng coù thöù töï:

My Unordered List:

• Item 1
• Item 2
• Item 3

Vaø daïng HTML cho keát quaû treân laø:

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

Danh saùch coù thöù töï

My Ordered List:

1. Item 1
2. Item 2
3. Item 3

Vaø daïng HTML cho ví duï treân laø:

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

Danh saùch loàng nhau

Böôùc ñaàu baïn coù veû thaáy phöùc taïp vôùi caùc tag <ol> <li> </ul> <li>, nhöng haõy coá gaéng nhôù caáu truùc cô baûn nhö sau :

      <ul>            <ol>
          <li>           <li>
          <li>           <li>
      </ul>           </ol>

Sau ñaây laø moät ví duï vôùi moät danh saùch khoâng coù thöù töï vôùi caùc möùc danh saùch con khaùc cuûa noù:

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

Vaø ñaây laø ñoaïn maõ HTML cho ví duï treâ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 saùch loàng nhau - Troän chuùng laïi vôùi nhau

Laáy ví duï, danh saùch coù thöù töï döôùi ñaây bao goàm moät danh saùch khoâng coù thöù töï beân trong noù:

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

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

Ñaët nhöõng danh saùch vaøo trong taøi lieäu HTML cuûa baïn

Söû duïng tag list, baïn seõ theâm moät danh saùch coù thöù töï vaø moät danh saùch khoâng coù thöù töï vaøo trang web Volcano Web cuûa baïn.

1. Môû laïi workspace cuûa baïn (neáu noù chöa ñöôïc môû).
2. Môû laïi taøi lieäu HTML trong trình soaïn thaûo.
3. Beân döôùi ñeà muïc Volcano Terminology chuùng ta söû duïng moät danh saùch khoâng coù thöù töï ñeå trình baøy moät soá thuaät ngöõ kyõ thuaät ñöôïc söû duïng trong vieäc nghieân cöùu nuùi löûa. Haõy ñeán muïc naøy trong taøi lieäu HTML cuûa baïn.
4. Tröôùc heát theâm caâu sau :

   
        How many do you know?
   

5. Vaø baây giôø, haõy ñaùnh vaøo daïng HTML ñeå taïo ra danh saùch caùc thuaät ngöõ:

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

6. Baây giôø chuùng ta söû duïng moät danh saùch coù thöù töï ñeå xaùc ñònh nhöõng phaàn yeâu caàu cuûa baøi hoïc chuùng ta ñang xaây döïng. Beân döôùi ñeà muïc Research Project, theâm nhöõng doøng sau (Höôùng daãn: luùc naøy baïn neân söû duïng chöùc naêng caét vaø daùn töø trong trang web tröø phi baïn coù thích thuù vaø muoán töï ñaùnh laïi ñoaïn vaên baû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.
   

7. Löu tröõ vaø Reload trong Web browser cuûa baïn.

Kieåm tra laïi coâng vieäc cuûa baïn

Xem laïi

1. Danh saùch coù giaù trò nhö theá naøo trong trang Web ?
2. Tag HTML naøo ñöôïc duøng cho danh saùch khoâng coù thöù töï?
3. Tag HTML naøo ñöôïc duøng cho danh saùch coù thöù töï?
4. Phaûi laøm theá naøo ñeå taïo ra danh saùch loàng nhau ?
5. Nhöõng böôùc naøo ñöôïc söû duïng trong vieäc theâm moät danh saùch vaøo taøi lieäu HTML cuûa baïn?

Thöïc taäp töï do

Ñi ñeán phaàn tieáp theo ....

ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Laøm vieäc vôùi Style" | Baøi keá tieáp: "Hình aûnh" |

URL: http://www.mcli.dist.maricopa.edu/tut/tut6.html