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

18. Trang trí cho Vaên baûn

Nhöng HAÕY CHÔØ MOÄT CHUÙT! Baây giôø baïn coù theå vieát chöõ ôû treân vaø ôû döôùi nhö vôùi nhöõng coâng thöùc hoùa hoïc vaø toaùn nhö sau:

CO₂ + SO₄^-2
3x² - 2y^-1/2 = 4z

Muïc ñích

• Thay ñoåi kích côû cuûa moät phaàn vaên baûn ñöôïc chæ ñònh trong moät trang Web.
• Thay ñoåi maøu saéc cuûa moät phaàn vaên baûn ñöôïc chæ ñònh trong moät trang Web.
• Taïo chöõ vieát treân vaø döôùi cho vaên baûn trong moät trang Web.
• Chæ ñònh phoâng cho nhöõng phaàn vaên baûn trong moät trang Web.

Baøi hoïc

Vôùi HTML do NetScape vaø HTML 3.0 giôùi thieäu, baïn coù theâm moät vaøi khaû naêng ñònh daïng nöõa cho vaên baûn cuûa baïn. Ñaëc bieät nhaát laø, baïn coù theå ñònh nhöõng kích côû chöõ cuõng nhö maøu saéc khaùc nhau cho vaên baûn. Khi söû duïng moät caùch ñuùng ñaén, söï ñònh daïng vaên baûn coù theå laøm noåi baät caùch trình baøy trang Web. Khi söû duïng moät caùch töï do, chuùng coù theå taïo ra caùc trang web troâng raát hoãn ñoän.

Baïn cuõng coù theå taïo ra chöõ vieát treân vaø döôùi ñöôïc söû duïng trong bieåu thöùc toaùn hoïc, coâng thöùc hoùa hoïc, hoaëc ñaùnh daáu caùc ghi chuù.

Trong baøi naøy chuùng toâi seõ giôùi thieäu vôùi baïn nhöõng tính chaát naøy cuøng vôùi vaøi ví duï maø baïn seõ söû duïng ñeå söûa ñoåi trang Volcano Web. Tröôùc heát coù theå baïn muoán tham khaûo ñeán trang kieåm tra phoâng chöõ ñeå bieát ñöôïc web browser cuûa baïn coù hoå trôï nhöõng tag ñöôïc söû duïng trong baøi hoïc naøy khoâng.

Kích côû phoâng chöõ

Côû phoâng = 1
Côû phoâng = 2
Côû phoâng = 3 -- côû chöõ thöôøng
Côû phoâng = 4
Côû phoâng = 5
Côû phoâng = 6
Côû phoâng = 7
Caàn nhôù raèng kích côû thaät cuûa chöõ coøn phuï thuoäc vaøo phoâng chöõ treân maùy tính do ngöôøi söû duïng ñaõ choïn cho web browser cuûa hoï -- baïn ñang ñieàu chænh laïi kích côû töông ñoái so vôùi phoâng maëc ñònh maø hoï ñaõ choïn.

Chuù yù: Neáu moät web browser khoâng hoå trôï cho tag <font>, baïn coù theå thöû nhöõng tag cuûa HTML 3.0:

  <BIG>...</BIG>
  <SMALL>...</SMALL>

seõ cho baïn ít loaïi kích côû hôn nhöng vaãn coù theå höõu ích cho nhöõng browser ñoù.

Daïng HTML cho tag chænh côû phoâng laø:

    <font size=N>blah blah blah</font>

trong ñoù N=1 tôùi 7. Tag phoâng coù theå ñöôïc söû duïng chung vôùi nhöõng tag ñònh kieåu chöõ khaùc (baøi 5) hay beân trong caùc tag tieâu ñeà (baøi 3).

Moät caùch söû duïng khaùc cuûa tag font laø taïo ra moät söï thay ñoåi kích côû töông ñoái:

    <font size=+1>blah blah blah</font>
    <font size=-2>blah blah blah</font>

töùc laø, caùc giaù trò +N hoaëc-N cho bieát ñoä dòch chuyeån (offset) so vôùi kích côû phoâng hieän taïi. Chuùng thöôøng ñöôïc söû duïng cuøng vôùi moät tag khaùc:

    <basefont size=5>

ñeå thay ñoåi côû phoâng cô baûn (base font size) töø giaù trò maëc ñònh cuûa noù laø 3 thaønh moät giaù trò khaùc. Coù theå baïn phaûi laøm ñieàu naøy trong moät trang Web maø coù haàu heát caùc vaên baûn vôùi côû lôùn hôn hoaëc nhoû hôn côû phoâng chuaån. Vôùi caùch naøy, neáu baïn caàn ñieàu chænh moät phaàn nhoû cuûa trang, baïn coù theå söû duïng tag chænh côû phoâng töông ñoái nhö treân.

Ñieåm maïnh cuûa vieäc söû duïng tag chænh côû phoâng töông ñoái (ví duï nhö size=+2) so vôùi tag chænh côû phoâng tuyeät ñoái (ví duï nhö size=5) laø chuùng ta coù theå deã daøng thay ñoåi côû cuûa TAÁT CAÛ vaên baûn trong trang ñoù baèng moät tag <basefont>.

Chuù yù: tag <basefont> khoâng coù tag ñoùng laïi - noù vaãn laø côû phoâng cô sôû cho ñeán khi moät tag <basefont> khaùc xuaát hieän.

Tröôùc heát chuùng ta seõ söû duïng tag chænh côû phoâng ñeå söûa ñoåi tieâu ñeà cuûa trang môû ñaàu:
1. Môû taäp tin index.html trong trình soaïn thaûo cuûa baïn.
2. Tröôùc ñaây chuùng ta ñaõ söû duïng moät tag tieâu ñeà <h1>..</h1> ñeå ñònh daïng cho tieâu ñeà cho trang naøy. Baây giôø chuùng ta seõ söû duïng vaøi tag chænh côû phoâng thay theá taïo moät tieâu ñeà coù côû hoãn hôïp.

   Thay ñoåi doøng:

     <h1>Volcano Web</h1>

   thaønh:

     <p>
     <B><font size=+4>V</font><font size=+3>OLCANO 
     WEB</font></B>

   Haõy nhìn caån thaän chuùng ta ñaõ laøm gì - V baây giôø ñaõ taêng côû leân 4 ñôn vò so vôùi giaù trò cô baûn, coøn nhöõng kyù töï khaùc (baây giôø döôùi daïng chöõ hoa) taêng leân 3 ñôn vò so vôùi giaù trò cô baûn. Ñieàu naøy taïo thaønh moät caùch trình baøy cuûa CHÖÕ HOA NHOÛ (SMALL CAPS). Cuõng löu yù raèng chuùng ta ñaõ theâm tag <b>...</b> ñeå laøm tieâu ñeà noåi baät leân. Vaø cuoái cuøng, bôûi vì chuùng ta khoâng söû duïng tag tieâu ñeà ñeå tag naøy töï taïo ra söï ngaét doøng nhö maëc ñònh, chuùng ta phaûi theâm tag <p> trong tieâu ñeà ôû treân ñeå eùp buoäc noù xuoáng doøng môùi (sau naøy baïn seõ thaáy khoâng caàn vì doøng HTML keá tieáp laø moät <BLOCKQUOTE> vaø noù töï theâm söï ngaét doøng cuûa noù - xem baøi 13).
3. Tieáp theo, chuùng ta muoán laøm lôøi chuù thích cuûa Pliny noåi baät hôn moät chuùt nöõa, vì theá chuùng ta seõ taêng noù leân theâm moät côû nöõa:

     <B><I><font size=+1>"Nature raves savagely, 
     threatening the lands"</font></I></B><br>

4. Löu tröõ vaø Naïp laïi trong Web browser cuûa baïn.
Tröôùc khi tieáp tuïc, chuùng ta seõ söû duïng tag chænh côû phoâng ñeå söûa ñoåi hai trang Web khaùc trong baøi cuûa chuùng ta. Ñoù laø trang Volcanic Places in the USA (taäp tin usa.html) vaø Research Project (taäp tin proj.html) ñang söû duïng tag <h2>...</h2> cho tieâu ñeà chính vaø tag <h3>...</h3> cho caùc phaàn ñeà muïc con. Ñeán trình soaïn thaûo vaø thay ñoåi moãi söï xuaát hieän cuûa tag:

  <h3>blah blah blah</h3>

thaønh :

  <p>
  <font size=+1><B>blah blah blah</B></font><br>

Löu yù laø tag <p> luoân luoân theâm moät doøng môùi cho vaên baûn theo sau vaø tag <br> taïo moät ngaét doøng (khoâng coù doøng traéng) cho vaên baûn theo sau.

Baïn coù nhìn thaáy ñöôïc söï khaùc nhau giöõa vieäc söû duïng tag <font> vaø tag <hN> cho phaàn tieâu ñeà khoâng? Söï ñònh daïng khaùc nhau naøy raát tinh teá, nhöng noù cung caáp cho baïn - taùc giaû cuûa trang Web - moät caùch nhìn môùi trong vieäc thieát keá trang Web. Nhöng nhôù raèng neáu browser cuûa ngöôøi ñoïc khoâng hoå trôï tag chænh côû phoâng, taát caû chuùng seõ ñöôïc nhìn thaáy ôû côû chöõ bình thöôøng.

Hai Phöông phaùp ñeå taïo Tieâu ñeà
<h3>...</h3>	<p><b><font size=+1> ...</font></b><br>
...before the next great innovation that rocked the world of rotten milk. History of Longhorn Cheese Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...	...before the next great innovation that rocked the world of rotten milk. History of Longhorn Cheese Longhorn cheese was first discovered by Alister Longhorn in 1754 when he...

Maøu cuûa font

Trong baøi 16, chuùng toâi ñaõ giôùi thieäu nhöõng tag ñònh maøu saéc cho vaên baûn trong toaøn boä trang Web cuøng vôùi vieäc bieåu dieãn giaù trò maøu trong HTML. Baïn cuõng coù theå theâm nhöõng thuoäc tính vaøo tag ñeå ñònh maøu moät ñoaïn vaên baûn xaùc ñònh baèng caùch söû duïng maõ heä thaäp luïc phaân hoaëc teân cuûa 16 maøu:
<font color=red>...</font>
<font color=#993459>...</font>
<font color=lime>...</font>
<font color=#002200>...</font>
<font color=navy>...</font>
<font color=#193467>...</font>

Chuùng ta seõ khoâng ñi saâu vaøo nhöõng raéc roái cuûa tag maøu, nhöng nhö laø moät ví duï, chuùng ta seõ ñoåi maøu cuûa ñoaïn VOLCANO WEB maø chuùng ta ñaõ xeùt trong trang bìa. Neáu baïn vaãn coøn nhôù, chuùng ta ñaõ söû duïng maøu cho vaên baûn cuûa trang naøy laø maøu vaøng vaø chuùng ta seõ thay maøu khaùc cho phaàn tieâu ñeà:

1. Môû taäp tin index.htm trong trình soaïn thaûo.
2. Ñieàu chænh doøng chöùa chöõ VOLCANO WEB thaønh nhö sau:

     <B><font size=+4 color=#FF66FF>V</font>
     <font size=+3 color=#DD0055>OLCANO WEB</font></B>

3. Löu tröõ vaø Reload trong Web browser.

Chuù yù: Caùc thuoäc tính size vaø color coù theå ôû trong cuøng moät tag <font>. ÔÛ ñaây keát quaû laøm cho chöõ "V" coù maøu vioâleùt saùng vaø taêng côû hôn moät ñôn vò so vôùi caùc chöõ khaùc.

Chöõ treân vaø chöõ döôùi (Superscript and Subscript)

HTML 3.0 cho pheùp baïn vieát caùc bieåu thöùc toaùn hoïc, coâng thöùc hoùa hoïc, hoaëc nhöõng bieåu thöùc khaùc vôùi superscript vaø/hay subscript. Nhöõng tag môùi naøy naâng cao/haï xuoáng ñoaïn vaên baûn "script" moät nöûa doøng vaø giaûm bôùt côû cuûa noù moät ñôn vò.

Daïng HTML cho nhöõng tag naøy laø:

Superscripts / Subscripts
HTML	Keát quaû
<sup>...</sup>	superscript
<sub>...</sub>	subscript

Baây giôø chuùng ta seõ söû duïng caùc tag naøy cho trang Introduction cuûa chuùng ta:

1. Môû taäp tin intro.htm trong trình soaïn thaûo.
2. Tröôùc heát chuùng ta seõ söû duïng subscript ñeå vieát moät vaøi coâng thöùc hoùa hoïc. Sau caâu cuoái cuøng cuûa ñoaïn 2 ("Compare the history of human beings...'), theâm caâu söû duïng subscript sau:

     Volcanoes were important contributors to 
     the early earth atmosphere by releasing 
     gases such as nitrogen (N<sub>2</sub>), 
     carbon dioxide (CO<sub>2</sub>), and 
     ammonia (NH<sub>4</sub>).

3. Baây giôø chuùng ta seõ söû duïng superscripts ñeå bieåu thò moät trò laäp phöông. Beân döôùi baûng ñöôïc taïo ra baèng tag <pre>...</pre>, theâm caâu sau:

     Note that volcanic eruptions that occurred 
     before historic times were several orders 
     of magnitude larger (more than 1000 km<sup>3</sup> 
     in erupted volume) than ones observed by 
     humans.

4. Neáu baïn chuù yù coät thöù ba cuûa baûng, tröôùc ñaây chuùng ta söû duïng "km^3" ñeå chæ ra "km³". Maëc daàu ñoaïn vaên naøy ôû beân trong tag preformat, chuùng ta vaãn coù theå söû duïng tag superscript. Ñoåi:

     Volume in km^3

   thaønh

     Volume in km<sup>3</sup>

Daïng phoâng (font face)

Trong tieâu chuaån HTML 3.2 hieän nay coù theâm vaøi thoâng soá cho tag ñeå chæ ra daïng phoâng duøng cho vieäc hieån thò. Chöùc naêng naøy coù theå khoâng laøm vieäc treân nhieàu browser, vì theá baïn coù theå thöû kieåm tra xem browser cuûa baïn coù hoå trôï ñoåi daïng phoâng khoâng.

HTML cho vieäc chæ ñònh moät daïng phoâng laø:

   <font FACE="font1,font2">some text

Neáu browser cuûa ngöôøi ñoïc hoå trôï ñaëc tính font FACE vaø hoï coù moät danh saùch caùc phoâng ñaõ ñöôïc caøi ñaët saün treân maùy tính cuûa hoï, thì vaên baûn seõ ñöôïc hieån thò theo daïng phoâng ñöôïc chæ ñònh. Ngöôïc laïi, browser seõ söû duïng cuøng moät phoâng vôùi phaàn coøn laïi cuûa trang web.

Neáu baïn quyeát ñònh söû duïng moät daïng phoâng, baïn neân söû duïng caùc daïng phoâng chuaån hoaëc laø chaéc chaén raèng caùc maùy tính cuûa ngöôøi duøng ñaõ caøi ñaët theâm daïng phoâng ñoù.

Baây giôø chuùng ta seõ ñieàu chænh tag cho trang tieâu ñeà ñeå töø "Volcano Web" xuaát hieän ôû moät daïng font khaùc:

1. Môû taäp tin index.htm trong trình soaïn thaûo.
2. Söûa ñoåi doøng chöùa ñoaïn vaên VOLCANO WEB thaønh:

     <B><font face="Arial,Helvetica"
        size=+4 color=#FF66FF>V</font>
     <font face="Arial,Helvetica"
        size=+3 color=#DD0055>OLCANO WEB</font></B>

3. Löu tröõ vaø Reload trong Web browser .

Chuù yù: Chuùng ta chæ ñònh cho browser choïn phoâng Arial vôùi Windows, Helvetica cho Macintosh vaø/hay caùc maùy tính chöa ñöôïc caøi ñaët phoâng Arial.

Söû duïng tính chaát naøy cuûa HTML vôùi söï thaän troïng! Ngheä thuaät söû duïng daïng phoâng khaùc hoaøn toaøn vôùi söï laïm duïng chuùng!

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å bieát daïng hieån thò cuûa noù. 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 hoaït ñoäng khoâng ñuùng, haõy xem laïi vaên baûn baïn ñaõ ñaùnh trong trình soaïn thaûo.

Xem laïi

Xem laïi nhöõng chuû ñeà sau:
1. Laøm theá naøo thay ñoåi côû vaø maøu saéc cuûa moät phaàn vaên baûn trong moät trang Web?
2. Baïn coù theå söû duïng daïng HTML naøo neáu browser khoâng hoã trôï tag <font>...</font>?
3. Laøm theá naøo baïn taïo ñöôïc subscript trong HTML?
4. Laøm theá naøo taïo ñöôïc moät khoái vaên baûn ñeå ñöôïc trình baøy döôùi moät daïng phoâng xaùc ñònh?

Thoâng tin boå sung

Döôùi ñaây laø hai kieåu nöõa ñöôïc cho pheùp trong HTML 3.2 vaø coù theå ñang ñöôïc chaáp nhaän trong web browser cuûa baïn.

Caùc tag Ñònh kieåu
HTML	Keát quaû
<u>This is Underline...</u>	This is Underline
<strike>This is Strike-through...</strike>	This is Strike-through

Vaø cuoái cuøng, coù moät ñieåm teá nhò veà maøu saéc cuûa vaên baûn maø moät luùc naøo ñoù baïn coù theå thaáy söï höõu ích. Trong baøi 16, chuùng ta ñaõ hoïc caùch söû duïng tag <body> ñeå taïo maøu cho neàn, vaên baûn, vaø caùc lieân keát. Neáu chuùng ta toâ maøu moät khoái vaên baûn vôùi tag <font> , noù seõ chæ taùc ñoäng leân phaàn thaân vaên baûn, maø khoâng taùc ñoäng leân caùc lieân keát sieâu vaên baûn - coù nghóa laø chuùng vaãn ñöôïc giöõ maøu xanh maëc ñònh hoaëc laø maøu ñöôïc xaùc ñònh trong tag <body>.

Maøu Lieân keát Maëc ñònh
HTML	Keát quaû
<font color=red> It was a long time after the sad death of <A HREF="http://www.longhorn.org/sir/"> Sir Longhorn</A> that someone was able to recreate his formula.	It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.
Chuùng ta coù theå thay ñoåi maøu cuûa lieân keát sieâu vaên baûn baèng caùch ñaët caùc tag beân trong moät lieân keát anchor. Löu yù raèng ñieàu naøy chæ coù hieäu quaû cho caùc lieân keát chöa ñöôïc xem; moät khi baïn ñaõ thaáy treân maøn hình trang töông öùng cuûa lieân keát, noù seõ ñöôïc toâ bôûi maøu lieân keát ñaõ xem, töùc laø maøu tím maëc ñònh:
Maøu Lieân keát ñöôïc Söûa ñoåi
<font color=red> It was a long time after the sad death of <A HREF="http://www.longhorn.org/sir/"> <font color=#228800>Sir Longhorn</font></A> that someone was able to recreate his formula.	It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.

Thöïc taäp töï do

Thöû tìm kinh nghieäm vôùi caùc tag <font>...</font> trong trang web rieâng cuûa baïn. Cuõng neân xem thöû noù hoaït ñoäng nhö theá naøo beân trong caùc tag <hN>...</hN>. Tìm kinh nghieäm vôùi vieäc söû duïng caùc phoâng khaùc nhau, ngay caû vôùi caùc phoâng lung tung!

Tìm vaøi choã maø baïn nghó raèng baïn coù theå caàn superscript hay subscript. Moät ví duï coù theå laø caùc chuù thích - baïn coù theå ñaùnh maõ soá hay kyù töï cho chuùng, sau ñoù laøm cho moãi chuù thích thaønh moät lieân keát sieâu vaên baûn ñeán moät vuøng chuù thích (hay ñeán moät trang rieâng coù caùc ghi chuù chung):

... and after Linberger and Gordon's 1963 study¹² on the effects of temperature on cheese maturation, Gange and Walters (1964)¹³ as well as Colby (1969)¹⁴ reached the same conclusion.

    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

---

12.Linberger and Gordon's experiments were controversial because of their radical techniques of temperature control.
13.Gange and Walters actually did not reach the same conclusion until their results had been verified by J.D. Smith. For more information see, Cheese Abtracts 1964, pp.234-239
14.Colby never received appropriate recongition for his pioneering work in the cheese field, and died penniless.

---

Ñeán baøi tieáp theo....

---

---

---

---

---

---

Caùc thöôùc keû to? Thöôùc keû lôùn? Thöôùc keû caàm tay? Theâm thoâng soá cho <hr>

ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Ñöøng laøm Nhaáp nhaùy" | Baøi keá: "Easy Hard Rules" |

---

Soaïn thaûo HTML Baøi 18: Trang trí cho Vaên baûn

©1995, 1996 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/tut18.html