Chào bạn!
Bạn đang đọc những dòng chữ này trên một trình duyệt – có thể là Chrome, Firefox hay Safari.
Nhưng bạn có bao giờ thắc mắc: “Làm sao trình duyệt này biết lấy nội dung từ đâu? Ai gửi nó đến? Và gửi bằng cách nào?”
Trong thế giới lập trình web, mọi thứ không chỉ là giao diện đẹp đẽ hay vài dòng mã HTML. Trước khi bạn viết bất kỳ dòng code nào, bạn cần hiểu cách một website hoạt động từ gốc rễ, cụ thể là mối quan hệ giữa Client (trình duyệt) và Server (máy chủ).
Bài học hôm nay sẽ giống như giải phẫu một website, từ lúc bạn gõ “google.com” đến khi kết quả hiện ra.
Mục tiêu bài học
Sau bài học này, bạn sẽ:
- Hiểu được vai trò của Client và Server trong quá trình truy cập web.
- Biết được một website gồm những thành phần nào.
- Nắm được luồng hoạt động từ khi người dùng gửi yêu cầu đến khi server phản hồi.
- Làm quen với một vài thuật ngữ căn bản: HTTP, domain, IP, hosting…
Nội dung chính
1. Web là gì?
Web (World Wide Web) là một hệ thống thông tin cho phép bạn truy cập tài liệu qua Internet thông qua một trình duyệt.
Bạn có thể tưởng tượng web giống như một thư viện khổng lồ, nơi mọi trang web là một cuốn sách, và trình duyệt là người thủ thư dẫn bạn đi tìm cuốn sách bạn muốn đọc.
2. Client và Server – hai đầu của “cuộc đối thoại”
Client là gì?
Là thiết bị của người dùng (máy tính, điện thoại, tablet…)
Client thường là trình duyệt web như Chrome, Edge, Firefox. Nó gửi yêu cầu (request) để lấy dữ liệu từ web.
Server là gì?
Là máy chủ lưu trữ website, có thể ở bất kỳ đâu trên thế giới. Server nhận yêu cầu từ Client và phản hồi lại (response) – thường là dữ liệu HTML, CSS, JS hoặc file ảnh, video…
Mẹo nhớ:
Client hỏi – Server trả lời
(Client: “Cho mình xem trang chủ nhé?” → Server: “Đây nè, code đây!”)
3. Quá trình hoạt động của một website (mô hình Client – Server)
Hãy tưởng tượng bạn truy cập vào www.vnwebpro.com, chuyện gì xảy ra?
Các bước cơ bản:
- Bạn gõ địa chỉ web (URL) vào trình duyệt:
www.vnwebpro.com - Trình duyệt hỏi “Thằng www.vnwebpro.com này là IP nào vậy?”
Gửi yêu cầu tới DNS để tra cứu (giống danh bạ tra số điện thoại). - Trình duyệt lấy được IP của server, rồi gửi yêu cầu HTTP (ví dụ: “GET /trang-chu”).
- Server nhận yêu cầu, xử lý, và gửi lại phản hồi chứa:
- File HTML, CSS, JS
- Ảnh, dữ liệu từ database, API…
- Trình duyệt hiển thị nội dung cho bạn → bạn nhìn thấy giao diện website!
Đây gọi là Request – Response cycle:
Client gửi Request → Server xử lý → Server trả Response → Client hiển thị
4. Một số thuật ngữ bạn nên làm quen
| Thuật ngữ | Ý nghĩa đơn giản |
|---|---|
| HTTP | Giao thức truyền tải dữ liệu web |
| URL | Địa chỉ trang web, ví dụ https://zalo.me |
| DNS | Hệ thống dịch tên miền ra địa chỉ IP |
| IP Address | Địa chỉ của server, ví dụ: 104.26.14.120 |
| Hosting | Dịch vụ lưu trữ website trên internet |
| Domain | Tên miền dễ nhớ (google.com, vnwebpro.com) |
5. Hình minh họa vui – “Web là quán cafe?”
- Bạn (Client): bước vào quán → gọi món (request)
- Nhân viên order: mang yêu cầu vào bếp (server)
- Đầu bếp: chế biến món → mang ra (response)
- Bạn: thưởng thức món ăn (giao diện hiển thị)
Một website vận hành cũng giống như vậy: Client gọi món – Server nấu ăn – Trình duyệt dọn ra bàn.
Tổng kết ngắn gọn
- Mọi trang web bạn thấy đều bắt đầu từ một cuộc trò chuyện giữa Client và Server.
- Client gửi yêu cầu, Server gửi lại nội dung → trình duyệt hiển thị cho bạn.
- Hiểu quy trình này giúp bạn tự tin hơn khi viết frontend lẫn backend trong những phần tiếp theo.
Bài tập nhỏ
Câu hỏi suy nghĩ:
- Khi bạn vào Facebook, theo bạn lúc đó trình duyệt đang làm gì?
- Điểm khác biệt giữa domain và IP address là gì?
Thực hành đề xuất:
- Mở Developer Tools (F12 trong Chrome), vào tab “Network”
- Truy cập một trang web bất kỳ và quan sát các request/response diễn ra
- Thử tra DNS của google.com bằng công cụ như https://dnschecker.org
Kết bài – Chuẩn bị bước sang HTML
Vậy là chúng ta đã đặt viên gạch đầu tiên!
Từ giờ, mỗi dòng code bạn viết sẽ không còn là “mù mờ”, mà có ý nghĩa rõ ràng trong dòng chảy Client–Server của một website thực sự.
Trong bài học tiếp theo, mình sẽ hướng dẫn bạn viết những dòng HTML đầu tiên – thứ giúp tạo ra “bộ xương” của bất kỳ trang web nào.
Bắt đầu học HTML cũng giống như lắp ráp khung xương một ngôi nhà. Rồi mình sẽ sơn màu (CSS) và thổi linh hồn vào nó (JavaScript) ngay sau đó!
Hẹn gặp bạn ở Bài 2: HTML cơ bản – Thẻ và cấu trúc trang web!
Thảo luận