Thứ Ba, 13 tháng 8, 2013

Home » HTML và CSS » [HTML] Bài 3: Nhóm Các Thẻ Block - Thẻ Định Dạng Tiêu Đề

[HTML] Bài 3: Nhóm Các Thẻ Block - Thẻ Định Dạng Tiêu Đề

By Unknown   Posted at  05:18   HTML và CSS No comments

Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như Chương, Mục,... cũng cần có đề mục rõ ràng khác với phần thân để người đọc theo dõi cho thuận tiện.

1. Định Nghĩa sử Dụng:
- Cấu trúc thẻ : <Hn> Nội dung Tiêu đề </Hn>
- H là viết tắt của từ headings nghĩa là mục hoặc tiêu đề.
- Có 6 mức tiêu đề trong HTML. Cách thể hiện các tiêu đề phụ thuộc vào trình duyệt nhưng thông thường thì:
Tiêu đề mức 1: <H1> .........</H1>
Tiêu đề mức 2: <H2> .........</H2>
Tiêu đề mức 3: <H3> .........</H3>
Tiêu đề mức 4: <H4> .........</H4>
Tiêu đề mức 5: <H5> .........</H5>
Tiêu đề mức 6: <H6> .........</H6>
Mức độ Quan trọng của tiêu đề giãm dần từ 1 đến 6 ( tiêu đề càng quan trọng thì kích thước càng lớn ) thẻ H1 là thẻ quan trọng nhất trong HTML thường được sử dụng cho logo dùng để SEO.
Ví Dụ:
Code HTML: (bấm vào Result để xem hiển thị trình duyệt )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
  <p>=Ví Dụ Tiêu đề trên groupFCwc=</p>
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
<h4>Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)</h4>
<h5>Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)</h5>
<h6>Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)</h6>
</body>
</html>
See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen
2. Những Cấu trúc không nên sử dụng:
Không được chứa bên trong thẻ tiêu đề các thẻ thuộc nhóm block, code sau đây là sai không đúng chuẩn W3C (sau này mình sẽ viết 1 bài về chuẩn W3C )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<h1><p>Đây là đoạn văn</p></h1>
<h2><div>Đây là đoạn văn</div></h2>
<h3>
<dl>
<dt>Tiêu đề</dt>
<dd>Nội dung</dd>
</dl>
</h3>
<h2>
<ul>
<li>liên kết 01</li>
<li>liên kết 02</li>
</ul>
</h2>
</body>
</html>
Tổng Kết:
- Biết cách sử dụng các thẻ tiêu đề.
- Biết những cấu trúc không nên sử dụng với tag tiêu đề.

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 nhận xét:

Back to top ↑
Connect with Us

What they says

© 2013 abcdasdasd. WP Mythemeshop Converted by BloggerTheme9
Blogger templates. Proudly Powered by Blogger.