Bài 1: Bắt đầu với Web tĩnh (HTML · CSS · JavaScript)
🎯 Mục tiêu
- Phân biệt HTML, CSS, JavaScript
- Tạo trang HTML đầu tiên
- Biết chèn CSS và JavaScript trong 1 file
📘 Lý thuyết ngắn
HTML dùng để tạo cấu trúc nội dung (tiêu đề, đoạn văn, nút…).
CSS dùng để làm đẹp (màu sắc, font chữ, khoảng cách…).
JavaScript dùng để tạo tương tác (bấm nút đổi màu, hiện/ẩn…).
💻 Code mẫu (copy & chạy)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 1 - Hello Web tĩnh</title>
<style>
body {
font-family: Arial;
padding: 24px;
line-height: 1.6;
}
h1 {
color: #c00;
}
button {
padding: 10px 14px;
border: none;
border-radius: 8px;
cursor: pointer;
background: #111;
color: #fff;
}
</style>
</head>
<body>
<h1 id="title">Xin chào Web tĩnh</h1>
<p>Đây là trang HTML + CSS + JavaScript đầu tiên.</p>
<button id="btn">Đổi màu tiêu đề</button>
<script>
const title = document.getElementById("title");
const btn = document.getElementById("btn");
let isRed = true;
btn.addEventListener("click", function () {
isRed = !isRed;
title.style.color = isRed ? "#c00" : "#0077cc";
});
</script>
</body>
</html>
👉 Copy toàn bộ code → lưu thành file bai1.html → mở bằng Chrome.
✍️ Bài tập
- Đổi chữ trong thẻ
<h1>thành tên của bạn. - Thêm 1 nút “Đổi nền” để đổi màu nền trang.
✅ Đáp án gợi ý
<button id="btnBg">Đổi nền</button>
<script>
const btnBg = document.getElementById("btnBg");
let light = true;
btnBg.addEventListener("click", function () {
light = !light;
document.body.style.background =
light ? "white" : "#f2f7ff";
});
</script>