Học cách định dạng và hiển thị text trong HTML - từ tiêu đề đến đoạn văn
Thẻ văn bản (Text Tags) là những thẻ HTML được sử dụng để hiển thị và định dạng nội dung văn bản trên trang web. Chúng bao gồm tiêu đề, đoạn văn, danh sách, và các thẻ định dạng text.
Tạo tiêu đề với 6 cấp độ từ h1 đến h6
<h1> <h2> <h3> <h4> <h5> <h6>
Hiển thị đoạn văn bản và ngắt dòng
<p> <br> <hr>
Tạo danh sách có thứ tự và không thứ tự
<ul> <ol> <li> <dl>
Định dạng text: in đậm, in nghiêng, gạch chân...
<strong> <em> <u> <mark>
HTML cung cấp 6 cấp độ tiêu đề từ <h1> đến <h6>, trong đó <h1> là tiêu đề quan trọng nhất và <h6> là ít quan trọng nhất.
<h1>Tiêu đề cấp 1 - Quan trọng nhất</h1>
<h2>Tiêu đề cấp 2 - Phần chính</h2>
<h3>Tiêu đề cấp 3 - Tiểu mục</h3>
<h4>Tiêu đề cấp 4 - Chi tiết</h4>
<h5>Tiêu đề cấp 5 - Phụ</h5>
<h6>Tiêu đề cấp 6 - Ít quan trọng nhất</h6><p>Đây là một đoạn văn bản đầu tiên.</p>
<p>Đây là đoạn văn thứ hai. Mỗi thẻ p sẽ tự động tạo khoảng cách
với đoạn văn khác.</p>
<p>Trong HTML, dù bạn viết nhiều dòng như thế này,
hoặc có nhiều spaces như vậy,
browser vẫn chỉ hiển thị một dòng và một space.</p>Đây là một đoạn văn bản đầu tiên.
Đây là đoạn văn thứ hai. Mỗi thẻ p sẽ tự động tạo khoảng cách với đoạn văn khác.
Trong HTML, dù bạn viết nhiều dòng như thế này, hoặc có nhiều spaces như vậy, browser vẫn chỉ hiển thị một dòng và một space.
<p>Dòng thứ nhất<br>
Dòng thứ hai (có <br> phía trên)</p>
<p>Đoạn văn trước đường kẻ</p>
<hr>
<p>Đoạn văn sau đường kẻ</p>
<!-- Địa chỉ thường dùng br -->
<address>
Công ty ABC<br>
123 Đường XYZ<br>
Quận 1, TP.HCM<br>
Phone: 0123-456-789
</address>Dòng thứ nhất
Dòng thứ hai (có <br> phía trên)
Đoạn văn trước đường kẻ
Đoạn văn sau đường kẻ
Công ty ABC<!-- Danh sách mặc định (1, 2, 3...) -->
<ol>
<li>Học HTML</li>
<li>Học CSS</li>
<li>Học JavaScript</li>
</ol>
<!-- Danh sách chữ cái (a, b, c...) -->
<ol type="a">
<li>Frontend Development</li>
<li>Backend Development</li>
<li>DevOps</li>
</ol>
<!-- Bắt đầu từ số 5 -->
<ol start="5">
<li>Bước 5: Testing</li>
<li>Bước 6: Deployment</li>
<li>Bước 7: Maintenance</li>
</ol><!-- Danh sách bullet points -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Danh sách lồng nhau (nested) -->
<ul>
<li>Frontend Technologies
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript ES6+</li>
</ul>
</li>
<li>Backend Technologies
<ul>
<li>Node.js</li>
<li>Python</li>
<li>PHP</li>
</ul>
</li>
</ul><dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - Ngôn ngữ đánh dấu siêu văn bản</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - Ngôn ngữ định dạng giao diện</dd>
<dt>JavaScript</dt>
<dd>Ngôn ngữ lập trình cho web</dd>
<dd>Có thể chạy trên browser và server</dd>
</dl>Các thẻ định dạng giúp làm nổi bật, nhấn mạnh hoặc thay đổi giao diện của văn bản mà không thay đổi ý nghĩa cơ bản.
<!-- Text Emphasis -->
<p>Văn bản <strong>quan trọng</strong> và <em>nhấn mạnh</em></p>
<p>Văn bản <b>in đậm</b> và <i>in nghiêng</i></p>
<!-- Text Decoration -->
<p>Văn bản <u>gạch chân</u> và <s>gạch ngang</s></p>
<p>Văn bản <mark>được highlight</mark> quan trọng</p>
<!-- Special Formatting -->
<p>Công thức: H<sub>2</sub>O và E = mc<sup>2</sup></p>
<p>Đây là <small>chữ nhỏ</small> và <del>nội dung bị xóa</del></p>
<!-- Code và Quotes -->
<p>Sử dụng tag <code><p></code> để tạo đoạn văn</p>
<p><q>Đây là quote ngắn</q> trong câu</p>
<blockquote>
<p>Đây là một quote dài, thường được sử dụng để trích dẫn
từ nguồn khác hoặc làm nổi bật một ý quan trọng.</p>
<footer>— <cite>Tác giả nổi tiếng</cite></footer>
</blockquote>Văn bản quan trọng và nhấn mạnh
Văn bản in đậm và in nghiêng
Văn bản gạch chân và gạch ngang
Văn bản được highlight quan trọng
Công thức: H2O và E = mc2
Đây là chữ nhỏ và nội dung bị xóa
Sử dụng tag <p> để tạo đoạn văn
Đây là quote ngắn
trong câu
Đây là một quote dài, thường được sử dụng để trích dẫn từ nguồn khác hoặc làm nổi bật một ý quan trọng.
<strong>, <em> - có ý nghĩa<b>, <i> - chỉ giao diệnTạo một trang blog đơn giản với các yêu cầu sau:
<!--
🎯 YÊU CẦU:
1. Tiêu đề chính (h1): "Blog của [Tên bạn]"
2. Mô tả ngắn (p): Giới thiệu về blog
3. Bài viết 1:
- Tiêu đề h2: "Học HTML cơ bản"
- Đoạn mở đầu với strong, em
- Danh sách ol: 5 bước học HTML
- Quote về tầm quan trọng của HTML
4. Bài viết 2:
- Tiêu đề h2: "Công nghệ web hiện đại"
- Đoạn văn có mark, code
- Danh sách ul: Frontend technologies
- Công thức với sub/sup nếu có
5. Footer: Thông tin liên hệ với br
✅ SỬ DỤNG:
- h1, h2, p, strong, em, ol, ul, li
- mark, code, sub, sup
- blockquote, br
- Ít nhất 10 thẻ text khác nhau
-->
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog cá nhân</title>
</head>
<body>
<!-- Viết code của bạn ở đây -->
</body>
</html><!--
📄 YÊU CẦU CV:
1. Header:
- h1: Tên của bạn
- p: Chức danh mong muốn (ví dụ: Junior Web Developer)
2. Thông tin cá nhân:
- h2: "Thông tin liên hệ"
- address với br: Email, phone, địa chỉ
3. Học vấn:
- h2: "Học vấn"
- dl: Trường - Chuyên ngành - Thời gian
4. Kỹ năng:
- h2: "Kỹ năng"
- ul: Danh sách kỹ năng với strong cho level
5. Kinh nghiệm:
- h2: "Kinh nghiệm"
- h3: Tên công ty
- p: Mô tả công việc với em, strong
6. Quote cá nhân:
- blockquote: Triết lý làm việc của bạn
💡 GỢI Ý:
- Dùng mark để highlight kỹ năng mạnh
- Dùng time cho thời gian
- Dùng cite cho nguồn quote
-->
<!-- Tạo CV của bạn ở đây --><p></p>Trong Bài 3, chúng ta sẽ học về Links & Media Tags - cách tạo liên kết giữa các trang và nhúng hình ảnh, video, audio vào website.