Bài 2: Các phần tử (thẻ) cơ bản trong HTML
🎯 Mục tiêu
- Biết và dùng được các thẻ cơ bản:
h1–h6,p,a,img,ul/li,ol/li,div,span,br - Hiểu “thuộc tính” (attribute) là gì:
href,src,alt,target - Tạo được 1 trang giới thiệu đơn giản bằng HTML
📘 Lý thuyết ngắn
1) Thẻ (tag) là các “khối lệnh” để tạo nội dung. Ví dụ:
<h1>Tiêu đề lớn</h1>
<p>Đây là một đoạn văn.</p>
2) Thuộc tính (attribute) là phần bổ sung thông tin cho thẻ. Ví dụ:
<a href="https://google.com" target="_blank">Mở Google</a>
<img src="anh.jpg" alt="Ảnh minh họa">
3) Thẻ khối & thẻ nội tuyến
- Thẻ khối (block): thường chiếm nguyên 1 dòng:
div,p,h1,ul… - Thẻ nội tuyến (inline): nằm trong dòng:
span,a,strong,em…
🧾 Các thẻ HTML hay dùng (tóm tắt)
| Thẻ | Dùng để | Ví dụ |
|---|---|---|
h1…h6 |
Tiêu đề | <h2>Mục tiêu</h2> |
p |
Đoạn văn | <p>Xin chào!</p> |
a |
Liên kết | <a href="...">Link</a> |
img |
Hình ảnh | <img src="..." alt="..."> |
ul/ol + li |
Danh sách | <ul><li>...</li></ul> |
div |
Khối chứa nội dung | <div>...</div> |
span |
Nhóm chữ trong dòng | <span>...</span> |
br |
Xuống dòng | Dòng 1<br>Dòng 2 |
💻 Code mẫu (trang giới thiệu đơn giản)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 2 - Thẻ HTML cơ bản</title>
<style>
body {
font-family: Arial;
padding: 24px;
line-height: 1.7;
background: #f7f8fa;
}
.card {
max-width: 720px;
margin: 0 auto;
background: white;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 18px;
}
h1 { margin-top: 0; }
.tag {
display: inline-block;
background: #eef2ff;
border: 1px solid #dbeafe;
padding: 2px 10px;
border-radius: 999px;
font-size: 13px;
margin-right: 6px;
}
img {
width: 100%;
max-width: 100%;
border-radius: 12px;
margin-top: 12px;
border: 1px solid #eee;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
button {
margin-top: 10px;
padding: 10px 14px;
border: 0;
border-radius: 10px;
cursor: pointer;
background: #111;
color: #fff;
}
</style>
</head>
<body>
<div class="card">
<h1 id="tieuDe">Giới thiệu bản thân</h1>
<p>Xin chào! Mình đang học <b>thiết kế web tĩnh</b> với:</p>
<p>
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
</p>
<h2>Sở thích</h2>
<ul>
<li>Học công nghệ</li>
<li>Thiết kế</li>
<li>Thể thao</li>
</ul>
<p>Tài liệu tham khảo:
<a href="https://developer.mozilla.org/vi/" target="_blank" rel="noopener">MDN Web Docs</a>
</p>
<img src="https://via.placeholder.com/900x260.png?text=Demo+Image" alt="Ảnh minh hoạ">
<button id="btn">Đổi tiêu đề</button>
</div>
<script>
// JS: bấm nút để đổi nội dung tiêu đề
const btn = document.getElementById("btn");
const tieuDe = document.getElementById("tieuDe");
let on = false;
btn.addEventListener("click", function () {
on = !on;
tieuDe.textContent = on ? "Bạn vừa tương tác bằng JavaScript!" : "Giới thiệu bản thân";
});
</script>
</body>
</html>
👉 Copy code → lưu thành bai2.html → mở bằng Chrome để xem kết quả.
✍️ Bài tập
- Thay “Giới thiệu bản thân” bằng tên của bạn.
- Trong danh sách sở thích, thêm ít nhất 2 mục mới.
- Đổi link MDN thành link blog của bạn.
- (Nâng cao) Thêm 1 đoạn văn có
<strong>và<em>.
✅ Đáp án gợi ý
<p><strong>Quan trọng:</strong> Hãy luyện tập mỗi ngày <em>15 phút</em>.</p>
📌 Danh sách bình luận