Buổi 07: HTML/CSS — Xây Bộ Xương và Mặc Áo 🦴👗
Thành quả: Tự tay viết 1 trang web hoàn chỉnh với AI hỗ trợ!
🎯 Mục tiêu buổi học
- Hiểu HTML là gì (bộ xương website)
- Hiểu CSS là gì (quần áo website)
- Viết được 10 HTML tag phổ biến nhất
- Style được 10 CSS property quan trọng nhất
- Tạo 1 trang web cá nhân hoàn chỉnh
📖 Phần 1: HTML — Bộ Xương
HTML là gì?
HTML = HyperText Markup Language = Ngôn ngữ đánh dấu
Tưởng tượng bạn xây nhà LEGO:
- Mỗi viên LEGO = 1 tag HTML
- Ghép các viên lại = 1 trang web!
Cấu trúc cơ bản
html
<!DOCTYPE html>
<html lang="vi"> ← Bắt đầu trang
<head>
<title>Trang Web Đầu Tiên</title> ← Tiêu đề tab
<meta charset="UTF-8"> ← Hỗ trợ tiếng Việt
</head>
<body> ← Nội dung hiển thị
<h1>Xin Chào!</h1> ← Tiêu đề lớn
<p>Đây là trang web đầu tiên của tôi.</p> ← Đoạn văn
</body>
</html> ← Kết thúc trang10 Tag HTML Quan Trọng Nhất
| Tag | Ý nghĩa | Ví dụ |
|---|---|---|
<h1>-<h6> | Tiêu đề (lớn→nhỏ) | <h1>Xin Chào</h1> |
<p> | Đoạn văn | <p>Nội dung...</p> |
<a> | Liên kết | <a href="url">Click</a> |
<img> | Hình ảnh | <img src="anh.jpg"> |
<div> | Hộp chứa | <div>Nhóm nội dung</div> |
<span> | Inline marker | <span>Từ này</span> |
<ul>/<li> | Danh sách | <ul><li>Mục 1</li></ul> |
<button> | Nút bấm | <button>Click Me!</button> |
<input> | Ô nhập | <input type="text"> |
<section> | Phân đoạn | <section>...</section> |
Ví von Tags
<header> = Mái nhà 🏠
<nav> = Cầu thang 🪜
<main> = Phòng khách 🛋️
<section> = Các phòng 🚪
<footer> = Nền móng 🧱
<aside> = Ban công 🌿📖 Phần 2: CSS — Quần Áo
CSS là gì?
CSS = Cascading Style Sheets = Trang định dạng
Nếu HTML là cơ thể, thì CSS là:
- Quần áo (màu sắc, font)
- Trang sức (viền, bóng)
- Tư thế (vị trí, kích thước)
Cách viết CSS
css
/* Cú pháp: selector { property: value; } */
h1 {
color: #2196F3; /* Màu chữ */
font-size: 36px; /* Cỡ chữ */
font-family: 'Inter'; /* Font chữ */
text-align: center; /* Canh giữa */
}
.card {
background: #f5f5f5; /* Nền */
padding: 20px; /* Đệm trong */
margin: 10px; /* Khoảng cách ngoài */
border-radius: 12px; /* Bo góc */
box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Bóng đổ */
}10 CSS Property Quan Trọng
| Property | Tác dụng | Ví von |
|---|---|---|
color | Màu chữ | Màu mực viết |
background | Màu nền | Màu sơn tường |
font-size | Cỡ chữ | Chữ to/nhỏ |
padding | Đệm trong | Bông gòn trong hộp |
margin | Khoảng ngoài | Khoảng cách giữa 2 hộp |
border-radius | Bo góc | Mài tròn góc bàn |
display: flex | Sắp xếp | Xếp hàng/cột |
gap | Khe hở | Khoảng cách giữa items |
width/height | Kích thước | Chiều rộng/cao |
box-shadow | Bóng đổ | Bóng dưới hộp |
📖 Phần 3: Flexbox — Sắp Xếp Ma Thuật
Flexbox là gì?
Cách sắp xếp elements theo hàng hoặc cột một cách DỄ DÀNG.
css
.container {
display: flex; /* Bật Flexbox */
justify-content: center; /* Canh ngang: giữa */
align-items: center; /* Canh dọc: giữa */
gap: 20px; /* Khoảng cách */
}Trục chính (Main Axis)
flex-direction: row (default) flex-direction: column
┌─────────────────────┐ ┌───────┐
│ [A] [B] [C] → → → │ │ [A] │
└─────────────────────┘ │ ↓ │
│ [B] │
│ ↓ │
│ [C] │
└───────┘justify-content
flex-start: [A][B][C]_________
center: ____[A][B][C]____
flex-end: _________[A][B][C]
space-between: [A]____[B]____[C]
space-around: _[A]__[B]__[C]_📖 Phần 4: Responsive Design
Responsive = Co giãn theo màn hình
css
/* Desktop (>768px): 3 cột */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Tablet & Mobile (≤768px): 1 cột */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}📖 Phần 5: Thực hành — Trang Profile
Code mẫu hoàn chỉnh
html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile - VibeCoding</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background: white;
border-radius: 20px;
padding: 40px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 400px;
width: 90%;
}
.avatar {
width: 120px; height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
margin: 0 auto 20px;
display: flex; align-items: center; justify-content: center;
font-size: 48px;
}
h1 { font-size: 24px; margin-bottom: 8px; }
.subtitle { color: #666; margin-bottom: 20px; }
.skills {
display: flex; gap: 8px; justify-content: center;
flex-wrap: wrap; margin-bottom: 20px;
}
.skill-tag {
background: #f0f0ff; color: #667eea;
padding: 6px 14px; border-radius: 20px;
font-size: 14px;
}
.btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white; border: none; padding: 12px 32px;
border-radius: 10px; font-size: 16px; cursor: pointer;
transition: transform 0.2s;
}
.btn:hover { transform: scale(1.05); }
</style>
</head>
<body>
<div class="card">
<div class="avatar">👋</div>
<h1>Tên Bạn</h1>
<p class="subtitle">VibeCoder Junior | Buổi 07</p>
<div class="skills">
<span class="skill-tag">HTML</span>
<span class="skill-tag">CSS</span>
<span class="skill-tag">AI Prompting</span>
</div>
<button class="btn">Xem Portfolio</button>
</div>
</body>
</html>Thử copy code trên → Lưu thành profile.html → Mở trong trình duyệt!
🎓 Tóm tắt
| Khái niệm | Ví von | Nhớ gì |
|---|---|---|
| HTML | Bộ xương | Tags: h1, p, div, img, button |
| CSS | Quần áo | color, background, padding, flex |
| Flexbox | Sắp xếp | display:flex, justify, align |
| Responsive | Co giãn | @media max-width: 768px |
⏭️ Buổi tiếp theo
Buổi 08: JavaScript — Làm Website "Sống Dậy" ⚡