Trang chủ
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:
<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> và </pre>, thì đoạn HTML trên sẽ được trình bày như sau:
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:
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.
- Mở tập tin HTML thứ hai, index.htm trong trình soạn thảo văn bản.
- 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).
- Bên dưới tiêu đề này, nhập chính xác vă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 đề.
- Lưu trữ và 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à:- Tag preformat làm thay đổi cách browser thông dịch HTML như thế nào?
- 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. |
||||
