Định dạng HTML: in đậm, in nghiêng, gạch chân, chỉ số trên, chỉ số dưới trong HTML

Trang trước
Trang sau  

Nếu bạn sử dụng một ứng dụng Word, bạn phải làm quen với các thao tác để in đậm, in nghiêng, hay gạch chân; đó là 3 trong số 10 tùy chọn có sẵn để chỉ cách mà văn bản xuất hiện trong HTML và XHTML.

In đậm trong HTML - Thẻ b trong HTML

Bất cứ nội dung gì mà xuất hiện trong phần tử <b>...</b> đều được in đậm.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>In dam van ban trong HTML</title>
</head>
<body>
<p>Vi du <b>the b trong HTML</b>.</p>
</body>
</html>

Kết quả hiển thị là:

Vi du the b trong HTML.

In nghiêng trong HTML - Thẻ i trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử <i>...</i> đều được in nghiêng:

Quảng cáo

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>In nghiêng văn bản trong HTML</title>
</head>
<body>
<p>Vi du <i>the i trong HTML</i>.</p>
</body>
</html>

Kết quả hiển thị:

Vi du the i trong HTML.

Gạch chân trong HTML - Thẻ u trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử <u>...</u> đều được gạch chân:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Gạch chân văn bản trong HTML</title>
</head>
<body>
<p>Vi du <u>the u trong HTML</u>.</p>
</body>
</html>

Nó sẽ hiển thị kết quả khi bạn chạy đoạn code trên là:

Vi du the u trong HTML.

Gạch ngang trong HTML - The strike trong HTML

Bất cứ nội dung nào xuất hiện trong phần tử <strike>...</strike> đều được gạch ngang:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the strike trong HTML</title>
</head>
<body>
<p>Vi du <strike>the strike trong HTML</strike>.</p>
</body>
</html>

Kết quả hiển thị là:

Vi du the strike trong HTML.

Quảng cáo

Font đơn cách trong HTML - The tt trong HTML

Nội dung trong phần tử <tt>...</tt> được viết dưới dạng font đơn cách. Hầu hết các font chữ đều được biết như là các font rộng bởi vì các ký tự khác nhau có độ rộng khác nhau (ví dụ như ký tự 'm' rộng hơn ký tự 'i'). Tuy nhiên trong font đơn cách, các ký tự có độ rộng giống nhau.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the tt trong HTML</title>
</head>
<body>
<p>Vi du <tt>the tt trong HTML</tt>.</p>
</body>
</html>

Kết quả hiển thị là:

Vi du the tt trong HTML.

Chỉ số trên trong HTML - Thẻ sup trong HTML

Nội dung trong phần tử <sup>...</sup> được viết dưới dạng chỉ số trên, kích cỡ của nó bằng kích cỡ của các ký tự quanh nó nhưng độ cao của nó bằng một nửa các ký tự khác.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Van bang dang chi so tren trong HTML</title>
</head>
<body>
<p>Vi du <sup>the sup trong HTML</sup>.</p>
</body>
</html>

Nó sẽ hiển thị kết quả sau khi bạn chạy code trên:

Vi du the sup trong HTML .

Chỉ số dưới trong HTML - The sub trong HTML

Nội dung trong phần tử <sub>...</sub> được viết ở dạng chỉ số dưới, kích cỡ của nó bằng kích cỡ các ký tự xung quanh nhưng chiều cao bằng một nửa.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Van ban dang chi so duoi trong HTML</title>
</head>
<body>
<p>Vi du <sub>the sub trong HTML</sub>.</p>
</body>
</html>

Kết quả hiển thị:

Vi du the sub trong HTML.

Chèn văn bản trong HTML - The ins trong HTML

Bất cứ nội dung xuất hiện trong phần tử <ins>...</ins> được hiển thị như ở dạng văn bản được chèn.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the ins trong HTML</title>
</head>
<body>
<p>Toi thich hoc <del>HTML</del> <ins>CSS</ins></p>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Toi thich hoc HTML CSS

Phần văn bản bị xóa trong HTML - Thẻ del trong HTML

Nội dung xuất hiện trong phần tử <del>...</del> được hiển thị dưới dạng bị xóa.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the del trong HTML</title>
</head>
<body>
<p>Toi thich hoc <del>HTML</del> <ins>CSS</ins></p>
</body>
</html>

Kết quả hiển thị khi bạn chạy code:

Toi thich hoc HTML CSS

Cách làm văn bản hiển thị lớn hơn trong HTML - Thẻ big trong HTML

Nội dung trong phần tử <big>...</big> được hiển thị ở một kích cỡ lớn hơn phần còn lại xung quanh nó.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the big trong HTML</title>
</head>
<body>
<p>Tu sau day su dung the <big>big </big> trong HTML.</p>
</body>
</html>

Kết quả hiển thị:

Tu sau day su dung the big trong HTML.

Cách làm văn bản hiển thị nhỏ hơn trong HTML - The small trong HTML

Nội dung xuất hiện trong phần tử <small>...</small> được hiển thị ở một kích cỡ nhỏ hơn phần còn lại xung quanh nó.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the small trong HTML</title>
</head>
<body>
<p>Tu sau day su dung the <small>small</small> trong HTML.</p>
</body>
</html>

Kết quả hiển thị là:

Tu sau day su dung the small trong HTML.

Tạo nhóm nội dung trong HTML - Thẻ div và span trong HTML

Phần tử <div> và <span> cho phép bạn tạo các phần tử thành nhóm nội dung để tạo ra các khu vực hoặc các tiểu khu của một trang.

Ví dụ, bạn muốn đặt tất cả các lời chú thích ở cuối trang và đặt tất cả chúng trong một phần tử <div> để chỉ rằng tất cả các phần tử trong phần tử <div> nào đó. Bạn cũng có thể đính kèm một style cho phần tử này.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the div trong HTML</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="../index.jsp">HOME</a> | 
<a href="../lien-he/">CONTACT</a> | 
<a href="../index.jsp">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">
<h5>Vi du the div</h5>
<p>Hoc HTML tai VietJack.....</p>
</div>
</body>
</html>

Nó sẽ hiển thị kết quả như sau:

/about/contact_us.jsp
Vi du the div

Hoc HTML tai VietJack....

Bên cạnh đó, phần tử <span> có thể sử dụng để tạo nhóm chỉ cho các phần tử trong một dòng. Vì thế, nếu bạn có một phần của câu hay đoạn văn mà bạn muốn phân nhóm chúng, bạn có thể sử dụng phần tử <span> như ví dụ dưới đây.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Vi du the span</title>
</head>
<body>
<p>Day la vi du ve the <span style="color:green">span</span> va the <span style="color:red">div</span> co su dung CSS</p>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Day la vi du ve the span va the div co su dung CSS

Những thẻ này được sử dụng phổ biến với CSS cho phép bạn đính kèm một style tới một khu vực của trang.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Trang trước
Trang sau  
Bài viết liên quan
Học cùng VietJack
Tài liệu giáo viên