HTML – Định dạng

80
HTML - Định dạng

Chắc hẳn ba kiểu định dạng cơ bản này bạn đã được biết trong những văn bản như word:

This text is bold
This text is italic
This text is underline

Chúng ta sẽ tìm hiểu một số kiểu định dạng HTML.

In đậm (Bold and Strong)

Nội dung in đậm được chứa trong thẻ <b>…</b>:

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>

Kết quả như sau:
This text is normal.
This text is bold.

Thẻ <strong>…</strong> cũng thể hiện phần nội dung strong như nghĩa của nó.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</html>

Kết quả:
This text is normal.
This text is strong.

In nghiêng (Italic và emphasized)

Nội dung in nghiêng được chứa trong thẻ <i>…</i>:

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>

Kết quả như sau:
This text is normal.
This text is italic.

Tương tự, nội dung được nhấn mạnh (emphasized) được chứa trong thẻ <em> … </em>

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>

Kết quả như sau:
This text is normal.
This text is emphasized.

Gạch chân (underlined và inserted)

Nội dung gạch chân được đặt trong thẻ <u>…</u>.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This is a <u>parragraph</u>.</p>
</body>
</html>

Kết quả trả về :
This is a parragraph.

Nội dung nhấn mạnh “được thêm vào” được đăt trong thẻ <ins>…</ins>.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>

<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>

Kết quả trả về:
The ins element represent inserted (added) text.
My favorite color is red.

Gạch ngang và “đã bị xoá” (Strike và Deleted)

Nội dung gạch ngang được đặt trong thẻ <strike>…</strike.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>
<p>The strike element is not supported in HTML5. Use CSS instead.</p>
</body>
</html>

Kết quả trả về:

Version 2.0 is not yet available! now available!
The strike element is not supported in HTML5. Use CSS instead.

Nội dung nằm giữa <del>…</del> được hiển thị như đoạn text bị gạch ngang, như báo cho người đọc rằng đoạn này đã bị xoá.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>The del element represent deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>

Kết quả trả về:
The del element represent deleted (removed) text.
My favorite color is blue red.

In trên và dưới (Superscript và Subscript)

Nội dung của phần tử <sup>…</sup> được hiển thị cao hơn một nửa chữ khác.

Ví dụ :

<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>

Kết quả trả về là :
This is superscripted text.

Nội dung đặt trong phần tử <sub>…</sub được hiển thị một nửa chiều cao và nằm ở vị trí thấp hơn so với kí tự khác.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>

Kết quả trả về rất là:

This is subscripted text.

In lớn và nhỏ (big và small)

Nội dung nằm giữa <big>…</big> được hiển thị với font chữ lớn hơn các chữ lân cận.

Ví dụ

<!DOCTYPE html>
<html>
<body>

<p>HTML <big>Big</big> Formatting</p>

</body>
</html>

Kết quả như sau:
HTML Big Formatting

Nội dung nằm giữa <small>…</small> được hiển thị với font chữ nhỏ hơn các chữ lân cận.

<!DOCTYPE html>
<html>
<body>

<p>HTML <small>Small</small> Formatting</p>

</body>
</html>

Kết quả như sau:

HTML Small Formatting

Đánh dấu (marked)

Nội dung chứa trong thẻ <mark>…<mark> hiển thị nội dung ấy được đánh dấu (marked) hoặc tô sáng lên (highlighted):

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>HTML <mark>Marked</mark> Formatting</p>
</body>
</html>

Kết quả như sau:
HTML Marked Formatting