Mở Code Playground tương tác ↗
02 · Cấu trúc nội dung
HTML: tạo khung trang
HTML mô tả cấu trúc và ý nghĩa nội dung. Thẻ thường có thẻ mở, nội dung và thẻ đóng. Dùng các phần tử có ngữ nghĩa như header, main, section, h1, p, a, button.
index.html HTML
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CLB AI TPK</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><strong>Câu Lạc Bộ AI TPK</strong></header>
<main>
<h1>Chào mừng đến với CLB AI</h1>
<p>Cùng học, thử nghiệm và sáng tạo có trách nhiệm.</p>
<button id="helloButton">Bấm thử</button>
<p id="message" aria-live="polite"></p>
</main>
<script src="script.js"></script>
</body>
</html>
Thử nghiệm: đổi nội dung tiêu đề, lưu file và tải lại trang. Mỗi trang nên có một tiêu đề h1 chính, nội dung có thứ bậc hợp lý.
03 · Hình thức
CSS: làm giao diện dễ đọc
CSS điều khiển màu sắc, khoảng cách, chữ và bố cục. Chọn màu có độ tương phản đủ, cỡ chữ dễ đọc và kiểm tra giao diện trên điện thoại.
style.css CSS
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, sans-serif;
background: #0b1020;
color: #f4f7ff;
}
header { padding: 20px; border-bottom: 1px solid #334; }
main { width: min(700px, 90%); margin: 60px auto; }
h1 { font-size: clamp(2rem, 6vw, 4rem); }
p { line-height: 1.7; color: #b8c3d8; }
button {
padding: 12px 18px; border: 0; border-radius: 10px;
background: #53e2ff; color: #07111d; font-weight: 700;
cursor: pointer;
}
button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
Thử thay background, color, padding. Dùng CSS responsive như clamp() hoặc media query để bố cục co giãn.
04 · Hành vi
JavaScript: làm trang tương tác
JavaScript cho phép xử lý sự kiện và cập nhật nội dung trang. Bắt đầu với các thao tác đơn giản, kiểm tra dữ liệu đầu vào và không đặt bí mật vào mã chạy ở trình duyệt.
script.js JavaScript
const button = document.querySelector('#helloButton');
const message = document.querySelector('#message');
button.addEventListener('click', () => {
message.textContent = 'Chào bạn! Cùng khám phá AI nhé.';
});
Giải thích: querySelector tìm phần tử theo selector; addEventListener lắng nghe sự kiện; khi bấm, textContent đổi nội dung chữ.
