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

4. Chia văn bản ra thành nhiều đoạn

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


Cho đến bây giờ bạn đã tạo và sửa đổi tài liệu HTML, và chắc bạn đã cảm thấy thoải mái với việc soạn thảo và nạp lại văn bản trong Web browser. Vì vậy bây giờ bạn sẽ cảm thấy dễ dàng với bài học nhanh này: thêm vào các dấu chia đoạn văn (paragraph break).

Mục đích

Sau bài học này bạn có thể:
  • Nhận dạng những tag chia đoạn trong HTML.
  • Chép một đoạn văn bản từ Web page và dán (paste) nó vào một tài liệu khác.
  • Chèn các dấu chia đoạn vào trong văn bản HTML và nhìn sự thay đổi trong Web browser của bạn.

Bài học

Chia đoạn trong HTML

Trước đây chúng ta đã biết rằng một Web browser sẽ bỏ qua tất cả ký tự XUỐNG DÒNG (carriage returns) được đánh trong trình soạn thảo. Nhưng, khi browser nhìn thấy tag chia đoạn, nó chèn một dòng trống và bắt đầu một đoạn mới. Mã HTML cho công việc chèn một sự chia đoạn là :
     <p>
Lưu ý rằng tag này là một đặc biệt vì nó không cần tag kết thúc; vì thế bạn không cần sử dụng:
     </p>
Trong bài sau chúng ta sẽ thấy trường hợp tag <p> có sử dụng tag </p> để kết thúc.

Cũng lưu ý rằng tag <h> có sự gắn liền với sự chia đoạn nên không cần thiết đặt tag <p> trước một tag tiêu đề như ví dụ dưới đây:

     <p>
<h2>Blah Blah Blah Blah</h2>

Chèn các dấu chia đoạn

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

Hãy theo sự chỉ dẫn dưới đây để chèn và xem lại một sự ngắt đoạn trong tài liệu HTML của bạn.

 

  1. Mở lại workspace của bạn (nếu nó chưa được mở).
  2. Đi đến cửa sổ soạn thảo văn bản.
  3. Mở tài liệu làm việc của bạn Volc.htm trong trình soạn thảo văn bản (nếu nó chưa được mở).
  4. Trước hết chúng ta di chuyển câu ("A volcano is ...") đến dưới tiêu đề Introduction. Hãy sử dụng chuột để cắtdán đoạn văn bản này vào vị trí thích hợp.
  5. Sau những câu này, chúng ta muốn thêm vào một đoạn nữa. Nhưng thay vì phải đánh lại nó, từ trang Web này hãy sử dụng chuột để chọn và chép (copy) vào clipboard các đoạn văn:
    
    Volcanoes have been a part of earth's history
    long before humans. Compare the history of human 
    beings, a few million years in the making, to that of 
    the Earth, over four billion years in the making. 
    
  6. Bây giờ, hãy trở lại tài liệu HTML trong trình soạn thảo và dán (paste) nó vào sau những câu có sẵn bên trong đề mục <h2>Introduction</h2>.
  7. Lưu trữ sự thay đổi trong trình soạn thảo.
  8. Trở lại Web browser của bạn.
  9. Nếu tài liệu của bạn chưa có, sử dụng lệnh Open Local... từ thực đơn File để mở tài liệu.
  10. Chọn Reload từ thực đơn File. Bây giờ bạn sẽ nhìn thấy hai câu của phần Introduction. Bây giờ chúng ta muốn đặt một dấu phân đoạn giữa các câu này.
  11. Một lần nữa trở lại tài liệu HTML trong trình soạn thảo.
  12. Sau câu thứ hai của phần <h2>Introduction</h2> (tức là câu có kết thúc là " as a sticky, slow lava flow.") nhấn RETURN (thật ra không cần thiết nhưng điều này làm cho bản HTML dễ đọc hơn khi bạn làm việc với nó), và bây giờ hãy nhập tag phân đoạn như sau :
         <p>
    
    Lúc này đoạn văn bản trông giống như sau:
      <h2>Introduction</h2>
    A volcano is a location where magma, 
    or hot melted rock from within a planet, reaches the
    surface. It may happen violently, in a massive supersonic
    explosion, or more quietly, as a sticky, slow lava flow.
    <p>
    Volcanoes have been a part of earth's history long before
    humans. Compare the history of human beings, a few million
    years in the making, to that of the Earth, over four
    billion years in the making.
    
  13. Lưu trữ sự thay đổi trong trình soạn thảo.
  14. Trở lại Web browser và nạp lại tài liệu. Hai câu của mục introduction bây giờ sẽ ở trên hay đoạn văn khác nhau.

Những dạng phân đoạn khác

Để phân chia những phần chính của một trang Web, sử dụng hard rule hay còn gọi là tag hr . Tag này sẽ chèn một đường thẳng giống như bạn nhìn thấy ngay trên phần tiêu đề của mục này.

Dạng HTML cho tag hard rule là:


<hr>
Bây giờ chúng ta hãy sử dụng nó! Đặt một tag hr ngay trên tiêu đề Introduction. Công việc này giúp cho việc tách câu mở đầu của bài học ra khỏi những phần đi sau nó.

Và cuối cùng, tag <br> sẽ đẩy văn bản xuống dòng mới như tag <p> nhưng không chèn thêm một dòng trống. Bạn có thể phải sử dụng tag này khi tạo một danh sách (list), khi viết những dòng của một bài thơ, v.v... Hãy so sánh sự khác nhau giữa việc sử dụng tag <br> và tag <p> trong hai ví dụ sau đây:

 

Chỉ sử dụng các tag <p>
HTML Kết quả
And then, we could all see
at once the brilliant purpose 
of the paragraph tag.
<p>
Moving on...
<p>
the more tags you write, 
the better you will feel?
And then, we could all see at once the brilliant purpose of the paragraph tag.

Moving on...

the more tags you write, the better you will feel?

Sử dụng cả tag <p> và tag <br>
HTML Kết quả
And then, we could all see<br> 
at once the brilliant purpose<br>
of the paragraph tag.
<p>
Moving on...
<br>
the more tags you write,<br> 
the better you  will feel?
And then, we could all see
at once the brilliant purpose
of the paragraph tag.

Moving on...
the more tags you write,
the better you will feel?

Tag <br> còn có thể được sử dụng cho những cách trình bày khác nhau cho phần tiêu đề của bạn. Nếu như bạn chú ý, bạn sẽ nhận thấy là các tag tiêu đề <h1>, <h2>, ... tự động chèn thêm các dòng trắng trên và dưới dòng chữ của tag tiêu đề. Một vài tác giả của những trang Web thích tự điều khiển những dòng trắng này.
Tên đề mục dùng tag tiêu đề
HTML Kết quả
and in the end it was all 
for naught.
<h4>header tag</h4>
Later, sir Longhorn declared 
that all makers of cheese would 
have to be certified before 
commencing production.
and in the end it was all for naught.

The New Cheese Edict

Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.
Tên đề mục dùng tag <b><br>
HTML Kết quả
and in the end it was all 
for naught.
<p>
<b>The New Cheese Edict</b><br>
Later, sir Longhorn declared 
that all makers of cheese would 
have to be certified before 
commencing production.
and in the end it was all for naught.

The New Cheese Edict
Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.

Ở đây sự khác nhau có vẻ tầm thường quá, nhưng thực tế điều này tạo ra các khả năng để sau này chúng ta học cách tạo ra tiêu đề có màu và kích cỡ khác nhau. Ví dụ như hãy xem trang Web Pages That Don't Look Like Web Pages

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

Nếu bạn thích, hãy so sánh trang Web bạn đang thực hiện với ví dụ mẫu. Nếu tài liệu bạn tạo ra khác với ví dụ mẫu, hãy kiểm tra lại cách bạn đánh vào các dấu chia đoạn <p>. Hãy chắc chắn rằng bạn đã làm đúng theo sự hướng dẫn trong mục Chèn các dấu chia đoạn của bài này.

Xem lại

  1. Tag HTML nào dùng cho việc phân đoạn?
  2. Những bước nào bạn sử dụng cho việc chèn thêm một sự phân đoạn trong tài liệu của bạn?
  3. Làm thế nào trình bày và nhìn thấy được sự thay đổi đó trong Web browser ?
  4. Điểm thêm*- Tag <hr> là gì? Tag <br> là gì?

Thực tập tự do

Sử dụng paragraph, tag hard rule, hay tag br để tạo ra các đề mục hay đoạn văn trong tài liệu của bạn.

Đi đến phần tiếp theo....

Bạn có nhớ phông chữ đầu tiên không ?
Làm thế nào để thêm một kiểu mẫu... (style) khác vào văn bản của bạn.





  • 0. Tiêu chuẩn của HTML (2896 lần đọc) Trang In
  • Soạn thảo HTML (4633 lần đọc) Trang In
  • 1. Tạo tài liệu HTML đầu tiên (10470 lần đọc) Trang In
  • 2. Điều chỉnh một tài liệu HTML (2398 lần đọc) Trang In
  • 3. Sáu mức tiêu đề (2024 lần đọc) Trang In
  • 5. Làm việc với các kiểu mẫu (2042 lần đọc) Trang In
  • 4. Chia văn bản ra thành nhiều đoạn (2990 lần đọc) Trang In
  • 6. Danh sách, Danh sách, và Danh sách (1868 lần đọc) Trang In
  • 7. Thêm hình ảnh vào trang Web (3606 lần đọc) Trang In
  • 7a. Hình ảnh Inline (4482 lần đọc) Trang In
  • 8. Tạo Liên kết bằng Anchors (2592 lần đọc) Trang In
  • 8a. Liên kết đến tập tin cục bộ (6147 lần đọc) Trang In
  • 8b. URLs - Con trỏ đến Internet (1891 lần đọc) Trang In
  • 8c. Liên kết đến các site Internet bên ngoài (2384 lần đọc) Trang In
  • 8d. Liên kết Các phần của một Trang (3007 lần đọc) Trang In
  • 8e. Liên kết Siêu Hình ảnh (7996 lần đọc) Trang In
  • 9. Preformatted Text (1861 lần đọc) Trang In
  • 10. Các kí tự đặc biệt (24118 lần đọc) Trang In
  • 11. Danh sách mô tả (1826 lần đọc) Trang In
  • 12. Danh thiếp Địa chỉ và Liên kết E-Mail (2223 lần đọc) Trang In
  • 13. Blockquote ! (2783 lần đọc) Trang In
  • 14. Gộp lại (Lumping) hay Phân mảnh (Splitting) (18271 lần đọc) Trang In
  • 15. HTML "tiêu chuẩn" và "nâng cao" (2787 lần đọc) Trang In
  • 16. Màu sắc và Cấu trúc cho Nền (3450 lần đọc) Trang In
  • 17. Đừng làm cho chữ nhấp nháy! (3412 lần đọc) Trang In
  • 19. Easy Hard Rules (1799 lần đọc) Trang In
  • 20. Xét thêm về Sự Chỉnh lề (7488 lần đọc) Trang In
  • 21. Bảng (Table) (3210 lần đọc) Trang In
  • 22. Xét thêm về Hình ảnh và Danh sách (14663 lần đọc) Trang In
  • 23. Bản đồ Hình ảnh Liên kết (3845 lần đọc) Trang In
  • [ Mục lục chuyên mục ]

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