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

22. Xeùt theâm veà Hình aûnh vaø Danh saùch

Haõy laøm boác hôi thoaùt ra khoûi nhöõng hoäp deã gaây töùc giaän bao quanh caùc button hình aûnh vaø

Muïc ñích

• Taïo moät hình aûnh sieâu lieân keát khoâng coù ñöôøng vieàn xung quanh.
• Vieát HTML cho moät danh saùch khoâng coù thöù töï söû duïng caùc daáu bullet khaùc nhau.
• Taïo moät danh saùch coù thöù töï ñöôïc ñaùnh soá baèng chöõ hoa hay chöõ thöôøng, hoaëc laø nhöõng soá La maõ lôùn hoaëc nhoû.
• Söûa ñoåi moät danh saùch coù thöù töï ñeå baét ñaàu ñaùnh soá töø moät trò döông baát kyø.

Baøi hoïc

Khoâng coù Ñöôøng vieàn treân Hình aûnh Sieâu lieân keát

hoaït ñoäng nhö baát kyø moät lieân keát sieâu vaên baûn naøo khaùc.

Tuy nhieân, caùi hoäp ñoâi luùc taïo ra söï caûn trôû, nhaát laø trong tröôøng hôïp chuùng ta coù moät hình coù saün ñöôøng vieàn khoâng vuoâng vöùc. Ngöôøi söû duïng veà nguyeân taéc vaãn xaùc ñònh ñöôïc moät hình aûnh laø "hyper" neáu daïng daáu nhaùy thay ñoåi khi di chuyeån chuoät baêng qua hình aûnh (noù thöôøng chuyeån thaønh hình "baøn tay" khi ôû treân moät lieân keát hoaït ñoäng ñöôïc).

Baïn coù theå "boû ñi" hoäp bao quanh baèng caùch theâm thuoäc tính vaøo tag <img...> nhö sau:

  <a href="bigpict.gif"><img src="lilpict.gif" border=0>

Chuùng ta ñaõ coù hai choã trong baøi Volcano Web cuûa chuùng ta coù hình aûnh inline sieâu lieân keát - Baïn coù nhôù ôû ñaâu khoâng?

Caùi ñaàu tieân trong taäp tin usa.htm, trong ñoù moät hình aûnh nhoû cuûa maùy ño ñòa chaán lieân keát ñeán moät hình aûnh lôùn hôn. Caùi thöù hai laø daáu muõi teân trong trang msh.htm ñeå quay laïi phaàn baøi hoïc.

1. Môû caû hai taäp tin usa.htm vaø msh.htm trong trình soaïn thaûo.
2. Tìm ra nôi maø chuùng ta ñaõ ñaët hình aûnh nhoû coù lieân keát ñeán thöù khaùc.
3. Söûa ñoåi moãi tag <img src=....> ñeå noù laø moät sieâu lieân keát vaø coù chöùa moät thuoäc tính border=0 . Laáy ví duï, trong taäp tin msh.htm noù seõ troâng gioáng nhö sau:

     <a href="usa.htm"> 
     <img src="../pictures/left.gif" alt="** " border=0> 
     Return to <i>Volcano Web</i></a>

4. Löu tröõ vaø Naïp laïi caùc taäp tin usa.htm vaø msh.htm trong browser cuûa baïn.
5. Neáu caùc hình nhoû khoâng coøn ñöôøng vieàn vaø vaãn noái ñeán ñuùng nôi caàn thieát khi baïn click vaøo, coâng vieäc cuûa baïn coi nhö ñaõ xong.

Caùc bullet cho Danh saùch Khoâng coù Thöù töï

 <ul type=xxxx>

• type=circle
• type=square
• type=disc [bullet maëc ñònh cho danh saùch caáp ngoaøi cuøng]

<ul type=square>
<li>this is item 1
<li>this is item 2
<li>this is item 3
<li type=circle>
     Hey! how about these bullets?
<li>this is another item
<li>and one more
<li type=disc>
     Hey! how about these bullets?
</ul>

Löu yù raèng loaïi ñöôïc chæ ñònh trong tag <li type=xxxx> vaãn ñöôïc söû duïng cho taát caû caùc tag <li> tieáp theo cho ñeán khi naøo moät loaïi bullet khaùc ñöôïc choïn.

Baây giôø, chuùng ta seõ thay ñoåi loaïi bullet trong trang Research Projects cuûa chuùng ta (taäp tin proj.htm).

1. Môû taäp tin proj.htm trong trình soaïn thaûo.
2. Doøng ñaàu tieân trong taäp tin naøy laø moät danh saùch coù thöù töï <ol>...</ol> nhöng baây giôø chuùng ta ñoåi noù thaønh moät danh saùch khoâng coù thöù töï vôùi bullet circle. Söûa ñoåi laïi HTML cho danh saùch ñaàu tieân thaønh:

   
     <ul type=circle>
     <li>Type of volcano
     <li>Geographic location
     <li>Name, distance, and population of nearest major city
     <li>Date of most recent eruption and date of most
         destructive eruption
     <li>Other events associated with the last eruption
         (earthquakes, floods, mudslides, etc)
     </ul>

3. Löu tröõ vaø Naïp laïi taäp tin cuûa baïn trong browser. Baïn coù theå so saùnh trang Web cuûa baïn vôùi ví duï maãu ñeå bieát noù neân xuaát hieän nhö theá naøo taïi ñaây.

Caùc kieåu vaø Giaù trò cho Danh saùch Coù thöù töï

Soá AÛ Raäp	Chöõ Hoa	Chöõ Thöôøng	Soá La Maõ Lôùn	Soá La Maõ Nhoû
<ol type=1>	<ol type=A>	<ol type=a>	<ol type=I>	<ol type=i>
Toâi ñaàu tieân! Toâi thöù hai! Toâi thöù ba! Toâi thöù tö! Toâi thöù naêm!	Toâi ñaàu tieân! Toâi thöù hai! Toâi thöù ba! Toâi thöù tö! Toâi thöù naêm!	Toâi ñaàu tieân! Toâi thöù hai! Toâi thöù ba! Toâi thöù tö! Toâi thöù naêm!	Toâi ñaàu tieân! Toâi thöù hai! Toâi thöù ba! Toâi thöù tö! Toâi thöù naêm!	Toâi ñaàu tieân! Toâi thöù hai! Toâi thöù ba! Toâi thöù tö! Toâi thöù naêm!

Chuùng ta ñaõ thaáy moät ví duï cuûa vieäc söû duïng danh saùch coù thöù töï beân trong moät danh saùch coù thöù töï khaùc khi trình baøy trang - vôùi thuoäc tính type chuùng ta coù theå coù nhöõng trang vôùi daïng trình baøy chuaån nhö:

1. Cheese in Pre-Historic time
   1. Africa
      1. Afar Triangle
      2. East Coast
   2. Asia
   3. Europe
      1. France
         1. Cave paintings depicting cheese harvesting
         2. Burial rituals inferred from dried cheese remnants
      2. British Isles
   4. North America
2. Cheese in the Middle Ages
   1. King Arthur's Longhorn
   2. Sharp Cheddar for the Crusades
3. Cheese in the Space Age

Vaø cuoái cuøng baïn coù theå thay ñoåi thöù töï soá beân trong moät danh saùch baèng caùch theâm thuoäc tính value=z vaøo tag <li>. Haõy xem ví duï sau:

HTML	Noù xem Nhö theá naøo
<ol type=A start=5><i> Important Cheese Laws</i><br> <li>Cheese Curing Act of 1905 <li>Milk Content Ruling of 1923 <p> <li value=12>Cheese Import Tariff of 1942 <li>Cheese Freshness Codes of 1942 <p> <li value=1>Cheese Values Act of 1789	Important Cheese Laws Cheese Curing Act of 1905 Milk Content Ruling of 1923 Cheese Import Tarif of 1942 Cheese Freshness Codes of 1942 Cheese Values Act of 1789

Khoâng theå noùi roõ laém (nhaát laø trong ví duï naøy) khi naøo baïn coù theå caàn phaûi söû duïng caùc tag naøy - chæ caàn nhôù raèng baïn coù khaû naêng laøm ñieàu ñoù khi vieát trang web cuûa baïn. Chuùng ta seõ minh hoïa theâm moät laàn nöõa trong trang Research Projects (taäp tin proj.htm). Neáu baïn nhôù laïi trong baøi veà baûng chuùng ta ñaõ chia danh saùch khoâng coù thöù töï cuûa nhöõng site caàn tham khaûo thaønh hai coät. Haõy ñoåi noù thaønh moät danh saùch coù thöù töï vaø söû duïng thuoäc tính type ñeå lieät keâ chuùng, söû duïng chöõ thöôøng ñeå ñaùnh soá thöù töï. Vì thaät söï chuùng ta coù ñeán hai danh saùch, haõy xem caùch taïi sao chuùng ta quyeát ñònh söû duïng thuoäc tính start.

1. Môû taäp tin proj.htm trong trình soaïn thaûo.
2. Haõy tìm baûng chuùng ta ñaõ taïo döôùi phaàn References. Thay ñoåi caû hai tag <ul> vaø </ul> thaønh tag <ol type=a> vaø </ol>
3. Baây giôø chuùng ta ñaõ coù 5 muïc trong danh saùch thöù nhaát, vì theá chuùng ta muoán danh saùch thöù 2 baét ñaàu ñaùnh soá töø 6. Söûa ñoåi tag <ol> thaønh:

     <ol type=a start=6>

4. Löu tröõ vaø Naïp laïi trong browser cuûa baïn. So saùnh trang cuûa baïn vôùi trang maãu ñeå xem danh saùch cuûa baïn neân xuaát hieän nhö theá naøo. Coät caùc muïc ñaàu tieân ñöôïc ñaùnh thöù töï töø "a" ñeán "e" coøn coät thöù hai töø "f" ñeán "k"

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

Xem laïi

1. Laøm theá naøo boû ñöôïc hoäp lieân keát bao quanh moät hình aûnh khi hình aûnh naøy laø moät sieâu lieân keát?
2. Laøm theá naøo thay ñoåi daáu bullet cho moät danh saùch khoâng coù thöù töï ?
3. Browser coù söû duïng cuøng moät daáu bullet cho taát caû caùc danh saùch khoâng? Neáu khoâng, laøm theá naøo ñeå ñoåi daáu bullet cho caùc danh saùch con?
4. Baïn coù theå taïo moät danh saùch maø moãi muïc ñöôïc ñaùnh thöù töï baèng moät soá La maõ khoâng?

Thöïc taäp töï do

<ol>...</ol>

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

ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Baûng" | Baøi keá: "Baûn ñoà Hình aûnh Lieân keát" |

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