HTML - Định dạng
Nếu bạn sử dụng trình xử lý văn bản, bạn phải làm quen với khả năng làm cho văn bản in đậm, in nghiêng hoặc gạch chân; đây chỉ là ba trong số mười tùy chọn có sẵn để chỉ ra cách văn bản có thể xuất hiện trong HTML và XHTML.
Chữ in đậm
Mọi thứ xuất hiện bên trong <b>...</b> , được in đậm như hình dưới đây -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản in nghiêng
Mọi thứ xuất hiện bên trong <i>...</i> phần tử được in nghiêng như hình dưới đây -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản được gạch chân
Mọi thứ xuất hiện bên trong <u>...</u> , được hiển thị với gạch dưới như hình dưới đây -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản cảnh cáo
Mọi thứ xuất hiện bên trong <strike>...</strike> phần tử được hiển thị với đường gạch ngang, là một đường mảnh xuyên qua văn bản như được hiển thị bên dưới -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Phông chữ Monospaced
Nội dung của một <tt>...</tt>phần tử được viết bằng phông chữ monospaced. Hầu hết các phông chữ được gọi là phông chữ có chiều rộng thay đổi vì các chữ cái khác nhau có chiều rộng khác nhau (ví dụ: chữ 'm' rộng hơn chữ 'i'). Tuy nhiên, trong phông chữ monospaced, mỗi chữ cái có cùng chiều rộng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản siêu chỉ số
Nội dung của một <sup>...</sup>phần tử được viết bằng chỉ số trên; kích thước phông chữ được sử dụng có cùng kích thước với các ký tự xung quanh nó nhưng được hiển thị bằng nửa chiều cao của ký tự so với các ký tự khác.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản chỉ số
Nội dung của một <sub>...</sub>phần tử được viết trong chỉ số con; kích thước phông chữ được sử dụng giống với các ký tự xung quanh nó, nhưng được hiển thị bằng nửa chiều cao của ký tự bên dưới các ký tự khác.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đã chèn văn bản
Mọi thứ xuất hiện bên trong <ins>...</ins> phần tử được hiển thị dưới dạng văn bản được chèn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản đã Xóa
Mọi thứ xuất hiện bên trong <del>...</del> , được hiển thị dưới dạng văn bản đã xóa.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản lớn hơn
Nội dung của <big>...</big> phần tử được hiển thị một kích thước phông chữ lớn hơn phần còn lại của văn bản xung quanh nó như được hiển thị bên dưới -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản nhỏ hơn
Nội dung của <small>...</small> phần tử được hiển thị một cỡ chữ nhỏ hơn phần còn lại của văn bản xung quanh nó như được hiển thị bên dưới -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhóm nội dung
Các <div> và <span> các phần tử cho phép bạn nhóm một số phần tử lại với nhau để tạo các phần hoặc tiểu mục của một trang.
Ví dụ: bạn có thể muốn đặt tất cả các chú thích trên một trang trong phần tử <div> để chỉ ra rằng tất cả các phần tử trong phần tử <div> đó đều liên quan đến các chú thích. Sau đó, bạn có thể đính kèm một kiểu vào phần tử <div> này để chúng xuất hiện bằng cách sử dụng một bộ quy tắc kiểu đặc biệt.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Mặt khác, phần tử <span> chỉ có thể được sử dụng để nhóm các phần tử nội tuyến. Vì vậy, nếu bạn có một phần của câu hoặc đoạn muốn nhóm lại với nhau, bạn có thể sử dụng phần tử <span> như sau.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Các thẻ này thường được sử dụng với CSS để cho phép bạn đính kèm một kiểu vào một phần của trang.