Định dạng chữ trong HTML
HTML có thể dùng để định dạng văn bản như ta làm với Word như đậm, nghiêng hoặc gạch chân
Dưới đây là một vài ví dụ bạn có thể tự mình thử.
Một vài ví dụ:
Text formatting
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is subscript and superscript
Preformatted text
Ví dụ này giải thích cách nào bạn có thể điều khiển xuống hàng và khoảng trống với Pre tag.
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:
for i = 1 to 10
print i
next i
"Computer output" tags
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p><b>Note:</b> These tags are often used to display computer/programming code.</p>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:Computer code
Keyboard input
Teletype text
Sample text
Computer variable
Địa chỉ
Ví dụ này hướng dẫn bạn cách tạo một địa chỉ trong HTML
<html>
<body>
<address>
Written by W3Schools.com<br />
<a href="mailto:
Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó.
">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
Written by W3Schools.com
Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó.
Address: Box 564, Disneyland
Phone: +12 34 56 78
Chữ viết tắt
Ví dụ này hướng dẫn bạn cách sử dụng kiểu viết tắt.
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
The WHO was founded in 1948.
Can I get this ASAP?
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.
Hướng chữ
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
Here is some Hebrew text
Trích dẫn
<html>
<body>
A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also insert margins.</p>
A short quotation:
<q>This is a short quotation</q>
<p><b>Notice that the browser inserts quotation marks around the short quotation (Does not work in IE).</b></p>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
A long quotation:
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
Note: The browser inserts white space before and after a blockquote element. It also insert margins.
A short quotation: This is a short quotation
Notice that the browser inserts quotation marks around the short quotation (Does not work in IE).
Muốn View source thì làm như thế nào?
Nếu bạn muốn xem mã nguồn của một trang web bạn chỉ cần nhấp chuột phải > View Source là bạn có thể xem được cấu trúc của trang đó như thế nào.
Những thẻ dùng để định dạng văn bản
Tag | Mô Tả |
<b> | Định dạng chữ đậm |
<big> | Định dạng chữ lớn |
<em> | Định dạng kiểu chữ được nhấn mạnh |
<i> | Chữ in nghiêng |
<small> | Chữ nhỏ |
<strong> | Chữ đậm |
<sub> | Định dạng subscripted (chữ nhỏ) |
<sup> | Định dạng superscripted (chữ lên cao) |
<ins> | Dạng chữ mới chèn thêm |
<del> | Dạng chữ bị xóa |
<s> | Hết hỗ trợ. Thay bằng <del> |
<strike> | Hết hỗ trợ. Thay bằng <del> |
<u> | Gạch dưới |