HTML 2 . Các thẻ văn bản, list, liên kết
BÀI GIẢNG: GIỚI THIỆU CÁC THẺ VĂN BẢN CƠ BẢN TRONG HTML
1. Thẻ đoạn văn (<p>)
Thẻ <p> dùng để tạo một đoạn văn bản. Nội dung bên trong thẻ sẽ được hiển thị theo dạng khối (block-level), có khoảng cách trước và sau đoạn văn.
Cú pháp:
<p>Đây là một đoạn văn bản.</p>
Kết quả:
Đây là một đoạn văn bản.
2. Thẻ tiêu đề (<h1> - <h6>)
HTML cung cấp 6 mức tiêu đề từ <h1> đến <h6>, trong đó <h1> là tiêu đề lớn nhất và <h6> là nhỏ nhất.
Cú pháp:
<h1>Tiêu đề cấp 1</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6</h6>
Kết quả:
Tiêu đề cấp 1
Tiêu đề cấp 2
Tiêu đề cấp 3
Tiêu đề cấp 4
Tiêu đề cấp 5
Tiêu đề cấp 6
3. Thẻ danh sách
Danh sách trong HTML có hai loại chính:
- Danh sách không có thứ tự (
<ul>) - mỗi mục được đánh dấu bằng dấu chấm (bullet). - Danh sách có thứ tự (
<ol>) - mỗi mục được đánh số.
Cú pháp:
Danh sách không có thứ tự:
<ul>
<li>Mục 1</li>
<li>Mục 2</li>
<li>Mục 3</li>
</ul>
Kết quả:
- Mục 1
- Mục 2
- Mục 3
Danh sách có thứ tự:
<ol>
<li>Mục 1</li>
<li>Mục 2</li>
<li>Mục 3</li>
</ol>
Kết quả:
- Mục 1
- Mục 2
- Mục 3
4. Thẻ liên kết (<a>)
Thẻ <a> được sử dụng để tạo liên kết đến một trang web hoặc tài liệu khác.
Cú pháp:
<a href="https://www.example.com">Truy cập trang web</a>
Kết quả:
5. Thẻ đa phương tiện (Media)
HTML hỗ trợ nhúng hình ảnh, âm thanh và video thông qua các thẻ như <img>, <audio>, và <video>.
Cú pháp:
Hình ảnh (<img>):
<img src="image.jpg" alt="Mô tả hình ảnh">
Kết quả:
(Hình ảnh "image.jpg" sẽ hiển thị nếu có tệp hình ảnh hợp lệ.)
Âm thanh (<audio>):
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Kết quả:
(Bộ điều khiển âm thanh sẽ xuất hiện nếu tệp "audio.mp3" hợp lệ.)
Video (<video>):
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Kết quả:
(Bộ điều khiển video sẽ xuất hiện nếu tệp "video.mp4" hợp lệ.)
6. Thẻ bảng (<table>)
Thẻ <table> được sử dụng để tạo bảng trong HTML.
Cấu trúc bảng:
<table>: Định nghĩa bảng.<tr>: Định nghĩa một hàng.<th>: Định nghĩa ô tiêu đề.<td>: Định nghĩa ô dữ liệu.
Cú pháp:
<table border="1">
<tr>
<th>Họ tên</th>
<th>Tuổi</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>22</td>
</tr>
</table>
Kết quả:
| Họ tên | Tuổi |
|---|---|
| Nguyễn Văn A | 25 |
| Trần Thị B | 22 |
7. Tổng kết
Trong bài này, chúng ta đã tìm hiểu các thẻ văn bản cơ bản trong HTML:
- Thẻ
<p>để tạo đoạn văn bản. - Thẻ
<h1>đến<h6>để tạo tiêu đề. - Thẻ
<ul>và<ol>để tạo danh sách. - Thẻ
<a>để tạo liên kết. - Thẻ
<img>,<audio>,<video>để hiển thị hình ảnh, âm thanh, video. - Thẻ
<table>để tạo bảng dữ liệu.
Những thẻ này là nền tảng quan trọng trong việc xây dựng trang web bằng HTML
CODE BÀI GIẢNG:
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Trang 2. Bài học html</title>
</head>
<body>
<p id="tieude">Đây là một đoạn văn bản</p>
<p>Đây là đoạn văn bản 2</p>
<h3>BÀI GIẢNG: GIỚI THIỆU CÁC THẺ VĂN BẢN CƠ BẢN TRONG HTML</h3>
<h5>1. Thẻ đoạn văn <p> </h5>
<p>
Thẻ dùng để tạo một đoạn văn bản.
Nội dung bên trong thẻ sẽ được hiển thị theo dạng khối (block-level),
có khoảng cách trước và sau đoạn văn.
</p>
<!-- Phần thẻ mục lục: Thứ tự -->
<!-- ul: Dấu chấm liệt kê -->
<ul>
<li>Mục 1</li>
<li>Mục 2</li>
</ul>
<!-- ol: Số thứ tự liệt kê -->
<ol>
<li>Ol mục 1</li>
<li>Ol mục 2</li>
</ol>
<!-- Thẻ liên kết -->
<!-- 1. Url nội tuyến (id trong trang) -->
<!-- 2. Url tuyệt đối: Http:// https:// -->
<!-- Thuộc tính target: -->
<a href="https://google.com.vn">Đi tới google</a>
<a href="#tieude">Về đầu</a>
<!-- Thẻ hình ảnh img -->
<!--<img src="https://cdn-media.sforum.vn/storage/app/media/anh-dep-8.jpg" width="200" height="auto" alt="Mô tả hình ảnh" />-->
<!-- Thẻ âm thanh -->
<!--<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>-->
<!-- Thẻ video -->
<!--<video controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>-->
<!-- Thẻ table -->
<table style="border:1px solid; border-collapse:collapse">
<thead>
<tr>
<th style="border:1px solid">TT</th>
<th style="border:1px solid">Họ và tên</th>
<th style="border:1px solid">Địa chỉ</th>
<th style="border:1px solid">Số điện thoại</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:1px solid">1</td>
<td style="border:1px solid">Nguyễn văn a</td>
<td style="border:1px solid">Hà Nội</td>
<td style="border:1px solid">056734444</td>
</tr>
<tr>
<td style="border:1px solid">2</td>
<td style="border:1px solid">Nguyễn văn B</td>
<td style="border:1px solid">HCM</td>
<td style="border:1px solid">093443652</td>
</tr>
</tbody>
<tfoot>
<tr>
<th style="border:1px solid">Tổng</th>
<th style="border:1px solid"></th>
<th style="border:1px solid"></th>
<th style="border:1px solid"></th>
</tr>
</tfoot>
</table>
</body>
</html>