- Đơn chưa đặt hàng: 1,

9. Preformatted Text

(1523 Từ tổng cộng trong nội dung này)
(1944 lần đọc)   Trang In


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 d

Mộ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á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 đề.
  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 trong trang Web của bạn.






  • 0. Tiêu chuẩn của HTML (2996 lần đọc) Trang In
  • Soạn thảo HTML (4748 lần đọc) Trang In
  • 1. Tạo tài liệu HTML đầu tiên (10537 lần đọc) Trang In
  • 2. Điều chỉnh một tài liệu HTML (2446 lần đọc) Trang In
  • 3. Sáu mức tiêu đề (2065 lần đọc) Trang In
  • 5. Làm việc với các kiểu mẫu (2087 lần đọc) Trang In
  • 4. Chia văn bản ra thành nhiều đoạn (3038 lần đọc) Trang In
  • 6. Danh sách, Danh sách, và Danh sách (1917 lần đọc) Trang In
  • 7. Thêm hình ảnh vào trang Web (3729 lần đọc) Trang In
  • 7a. Hình ảnh Inline (4610 lần đọc) Trang In
  • 8. Tạo Liên kết bằng Anchors (2704 lần đọc) Trang In
  • 8a. Liên kết đến tập tin cục bộ (6235 lần đọc) Trang In
  • 8b. URLs - Con trỏ đến Internet (1945 lần đọc) Trang In
  • 8c. Liên kết đến các site Internet bên ngoài (2508 lần đọc) Trang In
  • 8d. Liên kết Các phần của một Trang (3061 lần đọc) Trang In
  • 8e. Liên kết Siêu Hình ảnh (8119 lần đọc) Trang In
  • 9. Preformatted Text (1945 lần đọc) Trang In
  • 10. Các kí tự đặc biệt (24712 lần đọc) Trang In
  • 11. Danh sách mô tả (1865 lần đọc) Trang In
  • 12. Danh thiếp Địa chỉ và Liên kết E-Mail (2267 lần đọc) Trang In
  • 13. Blockquote ! (2898 lần đọc) Trang In
  • 14. Gộp lại (Lumping) hay Phân mảnh (Splitting) (18440 lần đọc) Trang In
  • 15. HTML "tiêu chuẩn" và "nâng cao" (2842 lần đọc) Trang In
  • 16. Màu sắc và Cấu trúc cho Nền (3508 lần đọc) Trang In
  • 17. Đừng làm cho chữ nhấp nháy! (3458 lần đọc) Trang In
  • 19. Easy Hard Rules (1835 lần đọc) Trang In
  • 20. Xét thêm về Sự Chỉnh lề (7671 lần đọc) Trang In
  • 21. Bảng (Table) (3270 lần đọc) Trang In
  • 22. Xét thêm về Hình ảnh và Danh sách (14819 lần đọc) Trang In
  • 23. Bản đồ Hình ảnh Liên kết (3899 lần đọc) Trang In
  • [ Mục lục chuyên mục ]

    Tìm kiếm
     Tìm theo từ: