Lessons XVII : Preformatted Text

9. Preformatted Text

Làm thế nào bạn có thể hiển thị được những đoạn văn trong đó có xét đến các khoảng trắng và dấu xuống dòng?

      display  
          text 
       where        space   and   carriage return
                  characters   count?

Mục đích

Sau bài học này bạn có khả năng:

  • Tạo một bảng các văn bản đã được định biên
  • Ðiều khiển vị trí của văn bản trên một trang khi tab và khoảng cách được xét đến

Bài học

Lưu ý: Nếu bạn không có tài liệu từ những bài học trước, bạn có thể download ngay bây giờ.

Trong những bài học trước chúng ta đã biết là một Web browser sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư thừa trong tập tin HTML của bạn. Tuy nhiên có một vài trường hợp cá biệt mà việc trình bày trang với các tính chất đó trở nên quan trọng. Trong bài này, chúng ta sẽ xét một ví dụ mà ở đó ta sẽ trình bày văn bản thành các cột ngay hàng với nhau.

Tag preformat hướng dẫn cho Web browser trình bày văn bản chính xác như khi bạn đánh vào trong văn bản HTML, bao gồm cả việc thể hiện các khoảng trắng, các tab, và cả dấu xuống dòng. Một browser tiêu biểu sẽ hiển thị văn bản như vậy theo kiểu:

 

m o n o s p a c e dMột ví dụ cho việc sử dụng tag preformat là:

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

Không có các tag <pre></pre>, thì đoạn HTML trên sẽ được trình bà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, sẽ dễ hơn khi trình soạn thảo bạn đang sử dụng có thể trình bày trong một phông mono-spaced (như là “Courier” hay “Monoco”); nếu không bạn cần phải đếm kỹ số khoảng trắng để chỉnh cột các đoạn văn (và bạn sẽ khá mệt khi làm chuyện đó).

Với bài Volcano của chúng ta, chúng ta muốn thêm vào một bảng bên dưới phần Introduction để liệt kê ra một vài núi lửa nổi tiếng, khi nào nó đã hoạt động lại, và mức độ hoạt động của nó. Ðể làm điều này:

  1. Mở tập tin HTML thứ hai, index.htm trong trình soạn thảo văn bản.
  2. Dưới phần cuối cùng của Introduction, đặt một tiêu đề mức 4 (<h4>) với dòng chữ: Volumes of Some Well-Known Volcanic Eruptions (Nếu bạn không nhớ cách tạo tiêu đề, hãy xem bài 3).
  3. Bên dưới tiêu đề này, nhập chính xácvăn bản sau (có thể thuận lợi hơn khi sử dụng chức năng cắt và dán từ trang web nà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í dụ này, chúng ta sử dụng các khoảng trắng để làm cho cột đầu tiên được chỉnh biên trái (left justified) còn hai cột kia được chỉnh biên giữa (center-justified). Các dấu trừ để nhấn mạnh cột tiêu đề.

  4. Lưu trữReload trong web browser của bạn.

Kiểm tra lại công việc của bạn

So sánh trang Web của bạn với ví dụ mẫuđể biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Nếu các cột không được chỉnh đúng, có lẽ bạn đánh thiếu hay thừa các khoảng trắng.

Xem lại

Những vấn đề ôn lại của bài này là:

  1. Tag preformat làm thay đổi cách browser thông dịch HTML như thế nào?
  2. Trong những trường hợp nào có thể bạn cần sử dụng tag này?

Thông tin bổ sung

Bạn vẫn có thể sử dụng các tag HTML bên trong văn bản đã được đánh dấu bởi tag preformat. Ví dụ như chúng ta có thể thêm một liên kết siêu văn bản và vài tag định kiểu khác bên trong cặp tag <pre>...</pre>:

HTML Kết quả
<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

Chú ý rằng các tag HTML không được xem như là khoảng trắng; chúng được bỏ qua trong vùng preformat.

Một số tác giả của trang web sử dụng tag <pre>...</pre> với các ký tự xuống dòng bên trong để thêm những dòng trắng giữa văn bản và hình ảnh trong trang web của họ- nhất là trong trường hợp họ cần nhiều dòng trắng hơn so với tag <p>. Ví dụ như:

HTML Kết quả
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 tập tự do

Thêm vào một bảng hay một sơ đồ trong tài liêu HTML của bạn sử dụng tag preformat.


Ði đến phần tiếp theo….

Sử dụng những ký tự đặc biệt ⣣覣273;t…. trong trang Web của bạn.

ÐẾN…. | Mục Lục | Bài trước: “Liên kết Siêu Hình ảnh” | Bài kế: “Các Ký tự Ðặc biệt” |

 


Soạn thảo HTML Bà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

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: