Thứ Sáu, 23 tháng 1, 2026

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>