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

20. Xeùt theâm veà Söï Chænh leà

Taïi sao baïn chæ ôû beân traùi?
... khi naøo baïn qua beân phaûi?

hay laø ñeå vaøo giöõa?

Muïc ñích

Sau baøi hoïc naøy baïn coù theå:

Baøi hoïc

Chuù yù: Neáu baïn chöa coù taøi lieäu töø nhöõng baøi hoïc tröôùc, baïn coù theå download baây giôø. Baïn cuõng coù theå xem qua trang kieåm tra ñeå bieát web browser cuûa baïn coù hoå trôï nhöõng tag ñöôïc söû duïng trong baøi naøy hay khoâng.

Söï chænh leà vaên baûn

Khi maø Web ngaøy caøng phaùt trieån, ngaøy caøng xuaát hieän theâm caùc yeâu caàu cho vieäc ñieàu khieån caùch trình baøy cuûa trang. Moät trong nhöõng yù muoán ñoù laø ñònh daïng vaên baûn sao cho noù ñöôïc saép xeáp ngay giöõa trang, hôn laø chæ ñöôïc canh leà beân traùi.

Ñaây laø moät trong nhöõng ñaëc tính khaùc haún giöõa NetScape so vôùi HTML "tieâu chuaån". NetScape ñaõ giôùi thieäu tag môû roäng <center>...</center> - tag naøy saép xeáp moïi thöù beân trong noù ôû ngay giöõa trang web. Döôøng nhö noù gaây ra aán töôïng hôn? Vaäy thì, baïn haõy noùi vôùi moät nhaø laøm chuaån raèng söï chænh leà haøng laø moät ñaëc tính. Daïng HTML toång quaùt cho söï saép xeáp vaøo giöõa laø moät söï bieán ñoåi cuûa tag <p>: 

  <p>
  blah blah blah
  <img src="file.gif"><br>
  blah blah
  </p>
Löu yù raèng ôû ñaây coù tag ñoùng </p>. Moãi laàn baïn muoán canh giöõa moät vaøi ñoaïn vaên baûn, baïn ñaùnh daáu chuùng baèng <p align=center>...</p>

Hieän nay, haàu heát caùc loaïi browser vaø chuaån HTML 3.2 ñeàu hoå trôï tag <center>...</center> cuûa NetScape. Nhôù raèng neáu browser khoâng hoå trôï moät tag, noù chæ vieäc boû qua.

Ñeå thaáy ñöôïc hieäu quaû cuûa vieäc canh giöõa, haõy so saùnh trong ví duï döôùi ñaây:

Khoâng canh Giöõa

Cheese In History

Cheese was been there for many major events

When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.


return to the cheese home page

Ñöôïc canh Giöõa

Cheese In History

Cheese was been there for many major events

When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.


return to the cheese home page

Giôø ñaây chuùng ta seõ söûa ñoåi trang bìa cuûa chuùng ta (index.htm) baèng caùch söû duïng tag canh giöõa treân danh saùch caùc phaàn cuûa baøi hoïc. Chuùng ta cuõng seõ taïo moät vaøi thay ñoåi ñeå caûi thieän söï trình baøy cuûa noù.

  1. Môû taäp tin index.htm trong trình soaïn thaûo.
  2. Tìm phaàn sau: 
      <B>In this Lesson...</B>
  <ul>
  <i>
  <li><A HREF="intro.htm">Introduction</A>
  <li><A HREF="term.htm">Volcano Terminology</A>
  <li><A HREF="usa.htm">Volcanic Places in the USA</A>
  <li><A HREF="mars.htm">Volcanic Places on Mars</A>
  <li><A HREF="proj.htm">Research Project</A>
  </i>
  </ul>
    vaø thay theá noù baèng ñoaïn HTML sau: 
      <p align=center>
  <font size=+1>
  <i>
  <A HREF="intro.htm">Introduction</A><br>
  <A HREF="term.htm">Volcano Terminology</A><br>
  <A HREF="usa.htm">Volcanic Places in the USA</A><br>
  <A HREF="mars.htm">Volcanic Places on Mars</A><br>
  <A HREF="proj.htm">Research Project</A><br>
  </i>
  </font>
  </p>
  3. Löu tröõ vaø Naïp laïi trong Web browser cuûa baïn.
Chuù yù: Haõy nhìn moät caùch caån thaän nhöõng thay ñoåi maø chuùng ta ñaõ thöïc hieän. Toaøn boä phaàn naøy ñöôïc bao quanh trong tag <p align=center>..</p> cuûa söï chænh leà. Danh saùch khoâng coù thöù töï maø chuùng ta ñaõ xaây döïng trong baøi 6 ñöôïc canh vaøo giöõa moät caùch loå choå - caùc daáu bullet seõ bò loän xoän. Vì theá chuùng ta seõ boû ñi caáu truùc <ul> <li> ... <li> ... </ul>. Caùc tag <br> ôû cuoái moãi doøng seõ taïo moät ngaét doøng. Vaø cuoái cuøng, chuùng ta theâm moät tag <font>...</font> ñeå taêng côõ vaên baûn.

Neáu muoán baïn coù theå söû duïng tag <center>...</center> thay cho tag <p align=center>...</p>

Baïn coù theå muoán so saùnh taäp tin HTML cuûa baïn ñoái vôùi ví duï maãu ñeå bieát ñöôïc noù neân xuaát hieän nhö theá naøo.

Moïi tag tieâu ñeà (header) <hN>...</hN> ñeàu coù theå canh giöõa baèng caùch theâm moät thuoäc tính nhö sau: 

  <hN align=center>blah blah blah</hN>
Baây giôø chuùng ta seõ söû duïng thuoäc tính naøy ñeå canh giöõa töïa ñeà cuûa moãi trang Web:
  1. Môû taát caû file HTML cuûa baïn trong trình soaïn thaûo.
  2. Vôùi moãi moät trang, söûa chöõa laïi vaên baûn xuaát hieän ôû gaàn ñænh trong tag <h1> hay tag <h2> theo nhö ví duï döôùi ñaây cho taäp tin intro.htm, thay ñoåi töø: 
      <h2>Introduction</h2>
    thaønh 
      <h2 align=center>Introduction</h2>
  3. Löu tröõ vaø Reload trong Web browser cuûa baïn.
Chuù yù: Cuõng coù moät thuoäc tính chænh leà cho tag <hr> phuø hôïp vôùi caùc thoâng soá khaùc maø chuùng ta ñaõ xem trong baøi 19 "Easy Hard Rules". Khi baïn chæ ñònh moät chieàu roäng ngaén hôn cho moät hard rule, baïn cuõng coù theå chæ ñònh canh leà cho noù veà beân phaûi hay beân traùi (theo maëc ñònh caùc hard rule ñöôïc canh vaøo giöõa trang): 
  <hr size=8 width=60% align=right>
seõ taïo ra:
trong khi söû duïng canh leà traùi 
  <hr size=8 width=60% align=left>
seõ cho keát quaû laø:

Söï saép xeáp giöõa Hình aûnh vaø Vaên baûn

Trong baøi 7a chuùng ta ñaõ xeùt caùch ñaët hình aûnh vaøo trong trang Web cuûa chuùng ta vaø ñaõ thaáy raèng coù theå coù moät doøng vaên baûn ñöôïc saép xeáp ôû treân hoaëc cuoái moät hình aûnh. Tuy nhieân, cho ñeán taän baây giôø, chuùng ta chöa theå coù moät khoái vaên baûn vaø moät hình aûnh inline naèm caïnh nhau.

Vôùi vieäc theâm thuoäc tính align vaøo tag <img> giôø ñaây baïn coù theå coù chæ ñònh hình aûnh töï saép veà beân traùi hay beân phaûi cuûa trang. Nhöng hôn theá nöõa chuùng ta coù theå coù caùc vaên baûn HTML khaùc "laáp ñaày" nhöõng khoaûng troáng quanh hình. HTML ñeå thöïc hieän ñieàu naøy laø: 

  <img src="filename.gif" align=right>
  <img src="filename.gif" align=left>
Haõy so saùnh hai ví duï sau ñaây:

khoâng coù thuoäc tính align
align=bottom

Cheese In History

Cheese was been there for many major events
When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.

coù vaên baûn ñi theo
align=left

Cheese In History

Cheese was been there for many major events
When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.

Haõy co daõn cöûa soå browser cuûa baïn ñeå thaáy caùc hieäu öùng trong trang cuûa baïn vôùi vieäc saép xeáp hình aûnh/vaên baûn.

Theâm moät ñieàu löu yù nöõa. Coù khi vaên baûn hoaëc nhöõng muïc khaùc ñöôïc saép cuøng vôùi hình aûnh khaù ngaén vaø baïn muoán ñaåy vaên baûn keá tieáp xuoáng beân döôùi hình aûnh. Coù moät thuoäc tính cho tag <br> ñeå xoaù ñi söï saép xeáp, ví duï nhö: 

  <br clear=left>
  <br clear=right>
  <br clear=all>
seõ "xoùa" baát kyø söï saép xeáp naøo ñaõ ñöôïc caøi ñaët trong tag <img> tröôùc ñoù. Chuùng toâi ñeà nghò baïn luoân luoân söû duïng nhöõng tag naøy bôûi vì söï saép xeáp seõ phuï thuoäc raát nhieàu vaøo phoâng chöõ treân browser cuûa ngöôøi ñoïc vaø ñoä roäng cöûa soå browser cuûa hoï.

Baây giôø chuùng ta seõ trôû laïi trang index.htm ñeå ñònh daïng laïi phaàn môû ñaàu. Hình troâng coù veû ñeïp, nhöng noù laïi chieám quaù nhieàu haøng tröôùc khi caùc vaên baûn ñöôïc trình baøy. Chuùng ta seõ söû duïng söï saép xeáp hình aûnh/vaên baûn ñeå ñaët vaên baûn keá caän beân hình aûnh.

  1. Môû taäp tin index.htm trong trình soaïn thaûo.
  2. Tìm phaàn sau: 
      <img alt="A Lesson on:" src="../pictures/lava.gif">
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  <BLOCKQUOTE>
  <B><I><font size=+1>"Nature raves savagely, 
  threatening the lands"</font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  </BLOCKQUOTE>

  In this lesson you will use the Internet
  to research information on volcanoes and then 
  write a report on your
  results.
    vaø thay noù baèng: 
      <img alt="A Lesson on:"
     src="../pictures/lava.gif" align=left>
  <B><I><font size=+1>
  "Nature raves savagely, threatening the lands"
  </font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  <p>
  In this lesson you will use the Internet
  to research information on volcanoes and then write
  a report on your results.
  <br clear=left>
  3. Löu tröõ vaø Naïp laïi trong Web browser cuûa baïn.
Chuù yù: Moïi thöù ôû giöõa tag <img... align=left> vaø tag <br clear=left> seõ ñöôïc saép chung vôùi hình aûnh - hình ôû beân traùi vaø phaàn HTML trong caùc vò trí troáng coøn laïi.

Chuùng ta cuõng ñeå caâu trích daãn leân ñaàu ñeå gaây söï chuù yù. Vôùi daïng trình baøy naøy, tag <blockquote> khoâng coøn coù hieäu quaû nöõa, do vaäy noù ñöôïc xoùa boû.

Neáu muoán, baïn coù theå so saùnh taäp tin HTML cuûa baïn vôùi ví duï maãu ñeå bieát taïi ñaây neân trình baøy nhö theá naøo.

Chænh leà (Justification)/Saép xeáp (Alignment) vaên baûn

Chuùng ta seõ theâm moät tag saép xeáp nöõa laø tag "divisions" <div>...</div>, ñöôïc giôùi thieäu trong HTML 3.0. Taát caû vaên baûn beân trong tag naøy ñöôïc chænh leà döïa vaøo thuoäc tính align: 
  <div align=left>...</div>
  <div align=right>...</div>
  <div align=center>...</div>
Löu yù raèng thuoäc tính center coù hieäu quaû gioáng nhö tag <center>...</center> cuûa NetScape.

Baây giôø chuùng ta seõ söû duïng tag naøy ñeå laøm cho ñoaïn vaên baûn trong phaàn ghi chuù môû ñaàu cuûa trang bìa ñöôïc chænh leà ôû beân phaûi cuûa trang:

  1. Môû taäp tin index.htm trong trình soaïn thaûo.
  2. Theâm tag <div> and </div> nhö döôùi ñaây: 
      <div align=right>
  <B><I><font size=+1>
  "Nature raves savagely, threatening the lands"
  </font></I></B><br>
  -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pliny the Elder</A>, who died of asphyxiation after 
  observing the destruction of Pompeii by the
  79 A.D. eruption of Mount Vesuvius.
  <p>
  <B><font size=+4 color=#FF66FF>V</font>
  <font size=+3 color=#DD0055>OLCANO WEB</font></B>
  </div>
  3. 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

So saùnh trang Web cuûa baïn vôùi ví duï maãu ñeå xem noù neân xuaát hieän nhö theá naøo. Neáu trang cuûa baïn khaùc vôùi maãu hay caùc lieân keát sieâu vaên baûn khoâng hoaït ñoäng ñuùng, kieåm tra laïi vaên baûn baïn ñaùnh vaøo trong trình soaïn thaûo.

Xem laïi

Xem laïi nhöõng chuû ñeà sau :
  1. Laøm theá naøo ñeå cho moät phaàn naøo ñoù trong trang web cuûa baïn ñöôïc canh vaøo giöõa?
  2. Caùch naøo ñuùng nhaát ñeå laøm cho moät hình aûnh ñöôïc saép xeáp beân leà phaûi cuûa trang Web?
  3. Laøm caùch naøo baïn taïo ra moät vaên baûn ñöôïc chænh leà phaûi?

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


 Haõy taïo ra moät baûng ñeïp...
ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Easy Hard Rules" | Baøi keá: "Baûng" |
Soaïn thaûo HTML Baøi 20: Xeùt theâm veà Söï Chænh leà
©2095 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

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