Cơ bản IT/Web
1〜2 giờ Nhập mônHiểu cách thức hoạt động của Web. Những kiến thức cần thiết trước khi học lập trình.
Tổng quan
Cơ bản IT/Web là kiến thức để hiểu cách trang web và ứng dụng web hoạt động. Hiểu các thuật ngữ như máy chủ, máy khách, HTTP và mạng giúp việc học lập trình sau này suôn sẻ hơn.
Hầu hết các khóa học lập trình đều bắt đầu với những kiến thức cơ bản này. Nếu không biết, bạn có thể tạo được trang web đơn giản nhưng khi gặp lỗi phức tạp, bạn sẽ không hiểu tại sao nó không chạy.
- Cách trang web hiển thị (Máy khách và Máy chủ)
- HTTP/HTTPS là gì
- Vai trò của trình duyệt
- Sự khác biệt giữa HTML, CSS và JavaScript
Chi tiết
Máy khách (Client) và Máy chủ (Server)
Trên Web, "Máy khách" (máy tính/điện thoại của bạn) gửi yêu cầu "Cho tôi trang này" đến "Máy chủ" (máy tính ở xa lưu trữ dữ liệu), và máy chủ trả về các tệp như HTML. Trình duyệt giải mã HTML đó và hiển thị lên màn hình.
- Bạn nhập URL → Trình duyệt gửi yêu cầu → Máy chủ trả về HTML → Trình duyệt hiển thị
- Máy khách = bên yêu cầu, Máy chủ = bên cung cấp
- Một máy chủ có thể phản hồi cho nhiều máy khách
- Nhầm lẫn giữa máy chủ và máy khách
- Nghĩ máy chủ là một thiết bị đặc biệt → Một PC bình thường cũng có thể làm máy chủ
HTTP và HTTPS
HTTP là "giao thức" (quy tắc) để máy chủ và máy khách trao đổi dữ liệu. HTTPS là phiên bản an toàn đã được mã hóa. Nếu URL bắt đầu bằng https://, giao tiếp đã được bảo mật.
- http://example.com → Không mã hóa
- https://example.com → Có mã hóa (biểu tượng ổ khóa)
- Hiện nay HTTPS là tiêu chuẩn. HTTP đang dần bị loại bỏ
- Các biểu mẫu gửi dữ liệu bắt buộc phải dùng HTTPS
- Nhầm lẫn HTTP với HTML
- Nghĩ HTTPS là một cơ chế hoàn toàn khác → Nó là bản mã hóa của HTTP
Vai trò của HTML, CSS và JavaScript
HTML là "cấu trúc" (tiêu đề, đoạn văn, liên kết). CSS là "diện mạo" (màu sắc, kích thước, bố cục). JavaScript là "chuyển động" (phản hồi khi click, nhận dữ liệu). Cả 3 kết hợp tạo nên một trang web hoàn chỉnh.
- HTML: <h1>Tiêu đề</h1> định nghĩa tiêu đề
- CSS: h1 { color: blue; } làm chữ xanh
- JavaScript: Hiển thị thông báo khi nhấn nút
- Dùng HTML tạo khung, CSS trang trí, JS tạo chuyển động
- Chia nhỏ vai trò giúp dễ bảo trì
- Cố gắng dùng HTML để làm đẹp → Hãy để CSS lo
- Viết tất cả bằng JavaScript → Cấu trúc nên ở HTML
Các bước thực hành
- 1 Mở Công cụ dành cho nhà phát triển (DevTools) 2 phút
Hãy nhìn vào phía sau (HTML) của trang bạn đang xem. Đây là công cụ mà mọi kỹ sư chuyên nghiệp dùng hàng ngày.
- Click chuột phải vào bất kỳ đâu trên màn hình, chọn "Kiểm tra" (Inspect)
- Một bảng với các dòng mã sẽ hiện ra bên phải hoặc bên dưới
- Đảm bảo tab Elements (Yếu tố) đang được chọn
Câu hỏi thường gặp
- HTTP và HTTP/3 khác gì nhau?
- HTTP/1 và 2 dùng phương thức TCP (đảm bảo gửi hàng!), còn HTTP/3 dùng UDP (QUIC - cứ thế mà phóng!). Nó giúp kết nối lại cực nhanh ngay cả khi mạng chập chờn.
- Tại sao phải tách Web Server và DB Server? Gộp lại không tiện sao?
- Gộp lại sẽ rất nguy hiểm về bảo mật và khó mở rộng khi có nhiều người truy cập. Giống như trong game RPG, bạn cần chia ra Tiền tuyến (Web) và Hậu phương (DB). Nếu gộp lại, một đòn tấn công diện rộng có thể làm sập toàn bộ hệ thống.
- Lỗi CORS là gì mà màn hình đỏ rực vậy?
- Nỗi ám ảnh mang tên CORS! Đó là khi trình duyệt ngăn cản trang web lấy dữ liệu từ một tên miền khác để bảo mật. Bạn sẽ gặp nó thường xuyên khi làm việc với API.
- Các con số 404, 500 có ý nghĩa gì?
- Đó là mã trạng thái. Đầu 4 (như 404) là lỗi do phía người dùng (nhập sai địa chỉ), đầu 5 là lỗi do máy chủ (bị crash). Biết số này giúp bạn xác định lỗi nhanh hơn!
① Đã đọc giải thích. Tiếp theo ② Bước kế tiếp.
Đã hiểu cơ chế của Web.
Tiếp theo là thiết lập môi trường. Chuẩn bị trình duyệt và trình soạn thảo để viết mã HTML đầu tiên.