Định dạng văn bản (text) luôn là một vấn đề quan trọng trong bất kỳ tài liệu, văn bản nào. Để hiểu và vận dụng thành thạo các thẻ định dạng văn bản trong HTML không phải vấn đề khó khăn. Trong bài học này, các bạn sẽ tìm hiểu cách sử dụng các thẻ định dạng văn bản và cách kết hợp các thẻ với nhau để tăng hiệu quả trình bày của văn bản.
8.1. Thẻ B: Định dạng chữ đậm
Cú pháp:
<B>Nội dung chữ đậm</B>
Ví dụ 1:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><b>Văn bản chữ đậm</b>.</p>
</body>
</html>
Kết quả:
Cú pháp:
<STRONG>Văn bản cần nhấn mạnh</STRONG>
Ví dụ 2:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><strong>Văn bản chữ đậm dùng thẻ strong</strong>.</p>
</body>
</html>
Kết quả:
8.3. Thẻ I: Định dạng chữ nghiêng
Cú pháp:
<I>Nội dung chữ nghiêng</I>
Ví dụ 3:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><I>Văn bản chữ nghiêng</I>.</p>
</body>
</html>
Kết quả:
<I>Nội dung chữ nghiêng</I>
Ví dụ 3:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><I>Văn bản chữ nghiêng</I>.</p>
</body>
</html>
Kết quả:
8.4. Thẻ EM: Định dạng chữ nghiêng (giống thẻ I)
Cú pháp:
<EM>Văn bản được nhấn mạnh</EM>
Ví dụ 4:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><EM>Văn bản chữ nghiêng dùng thẻ EM</EM>.</p>
</body>
</html>
Kết quả:
8.7. Thẻ BIG: Định dạng cỡ chữ lớn hơn chữ xung quanh.
<EM>Văn bản được nhấn mạnh</EM>
Ví dụ 4:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><EM>Văn bản chữ nghiêng dùng thẻ EM</EM>.</p>
</body>
</html>
Kết quả:
8.5. Thẻ U: Định dạng chữ gạch chân.
Cú pháp:
<U>Văn bản chữ gạch chân</U>
Ví dụ 5:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><U>Văn bản chữ gạch chân</U>.</p>
</body>
</html>
Kết quả:
<U>Văn bản chữ gạch chân</U>
Ví dụ 5:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p><U>Văn bản chữ gạch chân</U>.</p>
</body>
</html>
Kết quả:
8.6. Thẻ SMALL: Định dạng cỡ chữ nhỏ hơn chữ xung quanh.
Cú pháp:
<SMALL>Chữ nhỏ hơn xung quanh</SMALL>
Ví dụ 6:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <SMALL>Chữ nhỏ hơn xung quanh</SMALL> Chữ bình thường.</p>
</body>
</html>
Kết quả:
<SMALL>Chữ nhỏ hơn xung quanh</SMALL>
Ví dụ 6:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <SMALL>Chữ nhỏ hơn xung quanh</SMALL> Chữ bình thường.</p>
</body>
</html>
Kết quả:
Cú pháp:
<BIG>Chữ lớn hơn xung quanh</BIG>
Ví dụ 7:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <BIG>Chữ lớn hơn xung quanh</BIG> Chữ bình thường.</p>
</body>
</html>
Kết quả:
<BIG>Chữ lớn hơn xung quanh</BIG>
Ví dụ 7:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <BIG>Chữ lớn hơn xung quanh</BIG> Chữ bình thường.</p>
</body>
</html>
Kết quả:
8.8. Thẻ MARK: Định dạng văn bản nổi bật (highlight).
Cú pháp:
<MARK>Văn bản cần nhấn mạnh</MARK>
Ví dụ 8:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <MARK>Chữ cần nổi bật</MARK> Chữ bình thường.</p>
</body>
</html>
Kết quả:
8.9. Thẻ DEL: Định dạng văn bản bị loại bỏ (gạch ngang)
8.10. Thẻ SUB : Định dạng văn bản nhỏ bên dưới (chỉ số dưới)
<MARK>Văn bản cần nhấn mạnh</MARK>
Ví dụ 8:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <MARK>Chữ cần nổi bật</MARK> Chữ bình thường.</p>
</body>
</html>
Kết quả:
Cú pháp:
<DEL>Văn bản cần đánh dấu loai bỏ</DEL>
Ví dụ 9:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <DEL>Chữ đánh dấu bị loại</DEL> Chữ bình thường.</p>
</body>
</html>
Kết quả:
<DEL>Văn bản cần đánh dấu loai bỏ</DEL>
Ví dụ 9:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Văn bản thông thường chưa định dạng</p>
<p>Chữ bình thường <DEL>Chữ đánh dấu bị loại</DEL> Chữ bình thường.</p>
</body>
</html>
Kết quả:
Cú pháp:
<SUB>Văn bản cần áp dụng</SUB>
Ví dụ 10:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>H2SO4</p>
<p>H<SUB>2</SUB>SO<SUB>4</SUB></p>
</body>
</html>
Kết quả:
<SUB>Văn bản cần áp dụng</SUB>
Ví dụ 10:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>H2SO4</p>
<p>H<SUB>2</SUB>SO<SUB>4</SUB></p>
</body>
</html>
Kết quả:
8.11. Thẻ SUP : Định dạng văn bản nhỏ bên trên (chỉ số trên)
Cú pháp:
<SUP>Văn bản cần áp dụng</SUP>
Ví dụ 11:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>AX2+BX+C=0</p>
<p>AX<SUP>2</SUP>+ BX + C = 0</p>
</body>
</html>
Kết quả:
<SUP>Văn bản cần áp dụng</SUP>
Ví dụ 11:
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>AX2+BX+C=0</p>
<p>AX<SUP>2</SUP>+ BX + C = 0</p>
</body>
</html>
Kết quả:
0 on: "[HTML] Bài 8: Thẻ định dạng văn bản (Formatting)"