Lessons V : Sáu mức tiêu đề

3. Sáu mức tiêu đề

Như là bạn đã nhìn thấy trong trang Web này, các phần tiêu đề (“Sáu mức tiêu đề”, “Mục đích”, “Mục Lục”, …) xuất hiện ở những kích cỡ khác nhau và, có lẽ ở cả những phông chữ và màu sắc khác nhau nữa. HTML cung cấp những đoạn mã cho việc thiết kế phần tiêu đề theo sáu mức độ khác nhau. Browser tự xác định chính xác phông chữ và kích cỡ để hiển thị.

Mục đích

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

  • Nhận dạng được những mức độ khác nhau của các tiêu đề trong HTML và các tag liên quan tới chúng.
  • Ðặt những mức tiêu đề khác nhau vào trong tài liệu HTML và nhìn thấy sự thay đổi của chúng trong browser của bạn.

Bài học

Những tiêu đề của HTML

Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những tag tiêu đề (heading tag). Dạng các tag tiêu đề của HTML là:

 <hN>Text to Appear in Heading</hN> 

N là một số có giá trị từ 1 đến 6 chỉ định kích cỡ tiêu đề. Sau đây là một vài ví dụ cho những kích cỡ khác nhau của tiêu đề :

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Các mức độ tiêu đề được sắp xếp từ 1 (quan trọng nhất) đến 6 (ít quan trọng nhất). Các tiêu đề nên có tính tương đối, đánh số thứ tự và đặt tại các vị trí tương tự nhau.

Ðặt những tiêu đề HTML vào tài liệu của bạ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ờ.

 

  1. Mở lại workspace của bạn (nếu nó chưa được mở).
  2. Ðến cửa sổ soạn thảo văn bản.
  3. Mở lại tập tin HTML đã tạo trong bài 2, "Volc.htm".
  4. Trước hết, chúng ta sử dụng tag <h1> để trình bày tiêu đề như là header lớn nhất, <H1>. Nhâp dòng sau vào phần thân của HTML và sau các tag </head><body>:
     <h1>Volcano Web</h1> 
  5. Bên dưới những dòng văn bản đã nhập, tạo những đề mục khác nhau cho những phần sau này của trang Volcano Webcủa bạn.Nhập những tiêu đề sau trong phần thân của trang Web của bạn (chú ý một số sử dụng </h3> còn một số sử dụng </h2>):
     <h2>Introduction</h2> <h2>Volcano Terminology</h2> <h2>Volcanic Places in the USA</h2> <h3>Mount St Helens</h3> <h3>Long Valley</h3> <h2>Volcanic Places on Mars?</h2> <h2>Research Project</h2> <h3>References</h3> 
  6. Lưu trữ (save) lại sự thay đổi trong trình soạn thảo.
  7. Trở lại web browser của bạn, MởNạp lạitập tin HTML. 

    Chú ý rằng trên máy tính bạn đang sử dụng hiện nay, bạn có thể cài đặt cho browser của bạn phông và/hay kích thước của các tiêu đề. Ví dụ như, bạn có thể có một browser thể hiện tag h1 theo phông Times có 36 điểm; tag h2 theo phông Helvetica có 24 điểm, v.v… Các mã HTML chỉ đưa ra các loại của tiêu đề (từ h1 đến h6); còn việc thể hiện chúng thì được điều khiển bởi người sử dụng thông qua trình web browser.


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

So sánh công việc của bạn với ví dụ mẫusẵn có. Nếu có một vài tiêu đề xuất hiện không đúng, hãy kiểm tra lại tag bắt đầu và tag kết thúc của mỗi tiêu đề.

Như là một phần bài tập đề nghị, hãy nhìn xem chuyện gì sẽ xảy ra khi bạn có một lỗi đánh máy sai. Mở lại tài liệu HTML của bạn trong chương trình soạn thảo và xoá đi ký tự “/” trong tag kết thúc <h1> , sau đề mục Volcano Web:

 <h1>Volcano Web<h1> [missing "/" -----------^^^] 

Lưu trữ sự thay đổi và nạp lại trong Web browser. Không có sự kết thúc đúng đắn của tag h1, browser của bạn sẽ thông dịch phần văn bản tiếp theo như là một phần của tiêu đề! Sau khi thử xong bạn nên trở lại tài liệu của bạn và thêm lại dấy / như ban đầu.

Xem lại

  1. Những mức độ khác nhau của tiêu đề trong HTML là gì?
  2. Những tag liên quan đến những mức độ này là gì?
  3. Những bước nào được sử dụng trong việc đặt tiêu đề vào trong tài liệu HTML ?
  4. Những gì xảy ra nếu bạn quên dấu “/” tại cuối của một tag tiêu đề?

Thực tập tự do

Hãy thêm vào ít nhất ba tiêu đề với các cấp độ khác nhau vào tài liệu WWW của riêng bạn.


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

Phân chia văn bản thành nhiều đoạn văn.

 

ÐẾN…. | Mục Lục | Bài trước: “Ðiều chỉnh một tài liệu HTML” | Bài kế tiếp: “Phân chia thành nhiều đoạn văn” |

Soạn thảo HTML Bài 3: Sáu mức tiêu đề

?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/tut3.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: