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

9. Preformatted Text

Laøm theá naøo baïn coù theå hieån thò ñöôïc nhöõng ñoaïn vaên trong ñoù coù xeùt ñeán caùc khoaûng traéng vaø daáu xuoáng doøng?

      display  
          text 
       where        space   and   carriage return
                  characters   count?

Muïc ñích

Sau baøi hoïc naøy baïn coù khaû naêng:


Baøi hoïc

Löu yù: Neáu baïn khoâng coù taøi lieäu töø nhöõng baøi hoïc tröôùc, baïn coù theå download ngay baây giôø.

Trong nhöõng baøi hoïc tröôùc chuùng ta ñaõ bieát laø moät Web browser seõ boû qua nhöõng kyù töï khoaûng traéng, kyù töï tab, vaø daáu xuoáng doøng dö thöøa trong taäp tin HTML cuûa baïn. Tuy nhieân coù moät vaøi tröôøng hôïp caù bieät maø vieäc trình baøy trang vôùi caùc tính chaát ñoù trôû neân quan troïng. Trong baøi naøy, chuùng ta seõ xeùt moät ví duï maø ôû ñoù ta seõ trình baøy vaên baûn thaønh caùc coät ngay haøng vôùi nhau.

Tag preformat höôùng daãn cho Web browser trình baøy vaên baûn chính xaùc nhö khi baïn ñaùnh vaøo trong vaên baûn HTML, bao goàm caû vieäc theå hieän caùc khoaûng traéng, caùc tab, vaø caû daáu xuoáng doøng. Moät browser tieâu bieåu seõ hieån thò vaên baûn nhö vaäy theo kieåu:

m o n o s p a c e d

Moät ví duï cho vieäc söû duïng tag preformat laø:

    <pre>
    We have indented with 5 space characters.
    And used the carriage return to jump
    to
    a
    new
    line.
    
          Here      we
          use       
          spaces    to
          create    a
          text      table.
   </pre>
Khoâng coù caùc tag <pre> vaø </pre>, thì ñoaïn HTML treân seõ ñöôïc trình baøy nhö sau:

We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table.
Vôùi tag preformat, seõ deã hôn khi trình soaïn thaûo baïn ñang söû duïng coù theå trình baøy trong moät phoâng mono-spaced (nhö laø "Courier" hay "Monoco"); neáu khoâng baïn caàn phaûi ñeám kyõ soá khoaûng traéng ñeå chænh coät caùc ñoaïn vaên (vaø baïn seõ khaù meät khi laøm chuyeän ñoù).

Vôùi baøi Volcano cuûa chuùng ta, chuùng ta muoán theâm vaøo moät baûng beân döôùi phaàn Introduction ñeå lieät keâ ra moät vaøi nuùi löûa noåi tieáng, khi naøo noù ñaõ hoaït ñoäng laïi, vaø möùc ñoä hoaït ñoäng cuûa noù. Ñeå laøm ñieàu naøy:

  1. Môû taäp tin HTML thöù hai, index.htm trong trình soaïn thaûo vaên baûn.
  2. Döôùi phaàn cuoái cuøng cuûa Introduction, ñaët moät tieâu ñeà möùc 4 (<h4>) vôùi doøng chöõ: Volumes of Some Well-Known Volcanic Eruptions (Neáu baïn khoâng nhôù caùch taïo tieâu ñeà, haõy xem baøi 3).
  3. Beân döôùi tieâu ñeà naøy, nhaäp chính xaùc vaên baûn sau (coù theå thuaän lôïi hôn khi söû duïng chöùc naêng caét vaø daùn töø trang web naøy!):
    <pre>
      Eruption                      Date           Volume in km^3
      --------                      ----           --------------
      Paricutin, Mexico             1943                 1.3
      Mt. Vesuvius, Italy          79 A.D.                3
      Mount St. Helen, Washington   1980                  4
      Krakatoa, Indonesia           1883                 18
      Long Valley, California     pre-historic        500 - 600
      Yellowstone, Wyoming        pre-historic           2400
    </pre>
    
    Trong ví duï naøy, chuùng ta söû duïng caùc khoaûng traéng ñeå laøm cho coät ñaàu tieân ñöôïc chænh bieân traùi (left justified) coøn hai coät kia ñöôïc chænh bieân giöõa (center-justified). Caùc daáu tröø ñeå nhaán maïnh coät tieâu ñeà.
  4. 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å bieát taøi lieäu neân xuaát hieän nhö theá naøo. Neáu trang web cuûa baïn khoâng gioáng nhö ví duï maãu, haõy kieåm tra laïi vaên baûn baïn ñaõ ñaùnh trong trình soaïn thaûo. Neáu caùc coät khoâng ñöôïc chænh ñuùng, coù leõ baïn ñaùnh thieáu hay thöøa caùc khoaûng traéng.

Xem laïi

Nhöõng vaán ñeà oân laïi cuûa baøi naøy laø:

  1. Tag preformat laøm thay ñoåi caùch browser thoâng dòch HTML nhö theá naøo?
  2. Trong nhöõng tröôøng hôïp naøo coù theå baïn caàn söû duïng tag naøy?

Thoâng tin boå sung

Baïn vaãn coù theå söû duïng caùc tag HTML beân trong vaên baûn ñaõ ñöôïc ñaùnh daáu bôûi tag preformat. Ví duï nhö chuùng ta coù theå theâm moät lieân keát sieâu vaên baûn vaø vaøi tag ñònh kieåu khaùc beân trong caëp tag <pre>...</pre>:
HTML Keát quaû
<pre>
This tutorial is copyright
1995, 1996
    
    <B>Be sure to tell all of
    your friends about it!</B>
        <i>We
             Welcome
               Your
                 Feedback</i>
fondly,
<A HREF=
"http://www.mcli.dist.maricopa.edu/">
mcli</A>
</pre>
This tutorial is copyright
1995, 1996
    
    Be sure to tell all of
    your friends about it!
           We
             Welcome
               Your
                 Feedback
fondly,
mcli
Chuù yù raèng caùc tag HTML khoâng ñöôïc xem nhö laø khoaûng traéng; chuùng ñöôïc boû qua trong vuøng preformat.
Moät soá taùc giaû cuûa trang web söû duïng tag <pre>...</pre> vôùi caùc kyù töï xuoáng doøng beân trong ñeå theâm nhöõng doøng traéng giöõa vaên baûn vaø hình aûnh trong trang web cuûa hoï- nhaát laø trong tröôøng hôïp hoï caàn nhieàu doøng traéng hôn so vôùi tag <p>. Ví duï nhö:
HTML Keát quaû
Cheese was long since
abolished from the Orient.
<pre>



</pre>
...until Sir Longhorn arrived with the
great Cheese Crusade of 1167.
Cheese was long since abolished from the Orient.



...until Sir Longhorn arrived with the great Cheese Crusade of 1167.

Thöïc taäp töï do

Theâm vaøo moät baûng hay moät sô ñoà trong taøi lieâu HTML cuûa baïn söû duïng tag preformat.

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

Söû duïng nhöõng kyù töï ñaëc bieät âccèñt.... trong trang Web cuûa baïn.

ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Lieân keát Sieâu Hình aûnh" | Baøi keá: "Caùc Kyù töï Ñaëc bieät" |


Soaïn thaûo HTML Baøi 9: Preformatted Text

©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/tut9.html