Bài 1: Web hoạt động thế nào? Vai trò của HTML, CSS, JavaScript

Trước khi gõ dòng code web đầu tiên, bài này cho bạn bức tranh tổng thể: một trang web hiển thị trên màn hình bạn bằng cách nào, và ba “ngôn ngữ” web mỗi cái lo việc gì. Nắm được điều này, các bài sau sẽ không còn cảm giác “làm theo mà không hiểu”.

Một trang web đến với bạn thế nào?

Khi bạn gõ một địa chỉ và nhấn Enter:

1. Trình duyệt (Chrome, Safari…) gửi yêu cầu tới một máy chủ (server) — chiếc máy tính lưu trang web đó trên internet.
2. Máy chủ gửi về các tệp (HTML, CSS, JS, ảnh…).
3. Trình duyệt đọc các tệp đó và “vẽ” ra trang bạn nhìn thấy.

Điểm quan trọng cho người mới: việc dựng giao diện (HTML/CSS/JS) chạy ngay trong trình duyệt trên máy bạn — bạn không cần máy chủ để học. Máy chủ chỉ cần khi muốn đưa web lên mạng cho người khác xem (học ở cuối series).

Ba ngôn ngữ, ba vai trò

Hãy hình dung một trang web như một ngôi nhà:

• HTML — phần khung & nội dung. Là “bộ xương”: tiêu đề, đoạn văn, hình, nút, danh sách. Không có HTML thì không có gì để hiển thị.
• CSS — phần trang trí. Là “sơn và nội thất”: màu sắc, font chữ, bố cục, khoảng cách, responsive cho điện thoại. Cùng một HTML, CSS khác nhau cho ra giao diện khác hẳn.
• JavaScript — phần tương tác. Là “điện nước, công tắc”: xử lý khi bấm nút, đổi nội dung mà không tải lại trang, hiệu ứng động, gọi dữ liệu.

Một ẩn dụ dễ nhớ: HTML là danh từ, CSS là tính từ, JavaScript là động từ.

Vì sao học theo thứ tự HTML → CSS → JS?

Vì mỗi lớp xây trên lớp trước. Phải có nội dung (HTML) rồi mới trang trí (CSS), rồi mới thêm hành vi (JS). Người mới nhảy thẳng vào JavaScript thường tắc vì chưa nắm cấu trúc trang. Series này đi đúng thứ tự tự nhiên đó.

Bạn sẽ làm được gì sau series?

Một trang cá nhân tĩnh hoàn chỉnh (giới thiệu bản thân, có bố cục đẹp, responsive trên điện thoại) và đưa nó lên mạng bằng hosting miễn phí — đủ để khoe hoặc làm hồ sơ.

Việc cần làm trước bài sau

Bài 2 ta sẽ cài công cụ (VS Code) và viết file HTML đầu tiên. Trước đó, hãy làm một bài tập “đọc web”:

1. Mở một trang web bất kỳ bạn hay dùng.
2. Thử nhận diện: đâu là nội dung (HTML), đâu là trang trí (CSS — màu, font, bố cục), đâu là tương tác (JS — bấm nút thì gì xảy ra).

Tập nhìn web qua “ba lớp” này sẽ giúp bạn học nhanh hơn nhiều. Nếu bạn cũng quan tâm nền lập trình rộng hơn, xem Python hay JavaScript nên học trước và Git cơ bản.