Vivavoy Learning

Kiến Thức Căn Bản: Internet Vận Hành Như Thế Nào?

1. Mở đầu

Chào mừng các bạn đến với bài học đầu tiên trong chuỗi “Tìm hiểu về HTML và CSS”. Trước khi đi sâu vào mã lệnh, chúng ta cần vững chắc những kiến thức nền tảng về cách Internet hoạt động, vì mọi trang web, mọi dòng HTML, CSS, JavaScript đều vận hành dựa trên kết nối và giao tiếp giữa các thiết bị trên mạng toàn cầu. Hãy cùng khám phá xem Internet thực chất là gì, làm thế nào để trình duyệt hiển thị một trang web, và ba công nghệ chính (HTML, CSS, JavaScript) đóng vai trò như thế nào nhé!

2. Internet là gì? Mạng lưới kết nối toàn cầu

Khái niệm cơ bản: Internet (viết tắt của “Interconnected Network”) là một hệ thống mạng lưới kết nối hàng tỷ thiết bị, từ máy tính, điện thoại di động, tablet, đến các máy chủ (server) khổng lồ.

Tuyến cáp quang – “xương sống” của Internet::

  • Các thiết bị trên thế giới được liên kết với nhau bằng hàng loạt tuyến cáp quang ngầm dưới đáy biển và trên đất liền.
  • Những tuyến cáp này truyền tín hiệu ánh sáng với tốc độ rất cao, đảm bảo dữ liệu (hình ảnh, video, trang web…) di chuyển gần như ngay lập tức giữa các châu lục.
  • Ở Việt Nam, chúng ta cũng nằm trên những nhánh cáp quang quan trọng, nối liền với các nước khác trong khu vực Đông Nam Á, giúp tốc độ Internet ổn định và nhanh chóng hơn.

Tuyến cáp quang chủ lực biến AGG Tra tuyến cáp quang Thế Giới tại đây
Mẹo dễ nhớ: Hãy tưởng tượng Internet như những con đường cao tốc siêu rộng: cáp quang chính là các tuyến đường chính (highway), cho phép xe hơi (dữ liệu) di chuyển cực nhanh giữa các thành phố (quốc gia).

3. Mô hình Client–Server: Thiết bị của bạn và “thư viện thông tin”

a) Client (Máy khách)

  • Mỗi khi bạn mở trình duyệt (Chrome, Firefox, Safari…), thiết bị bạn đang dùng (laptop, điện thoại, tablet) đóng vai trò là “client”.
  • Client chịu trách nhiệm:
    • Gửi yêu cầu (request) đến máy chủ để lấy dữ liệu.
    • Nhận và hiển thị dữ liệu từ máy chủ.

b) Server (Máy chủ)

  • Thay vì là một chiếc máy tính cá nhân, server là những máy chủ lớn, có cấu hình mạnh (CPU, RAM, băng thông lớn) để lưu trữ và xử lý thông tin 24/7.
  • Ví dụ: Khi bạn gõ google.com, yêu cầu của bạn sẽ gửi đến server của Google. Server đó chứa toàn bộ dữ liệu của trang Google, xử lý yêu cầu, rồi gửi trả lại file HTML, CSS, JavaScript… để trình duyệt hiển thị.
  • Vì server “ở đâu đó trên Internet” (có thể ở Mỹ, châu Âu hay châu Á), nó được gán một địa chỉ IP cố định, để khi có yêu cầu, client biết phải gửi đến đâu.
architecture diagram of a client-server application

4. IP và DNS: Làm thế nào để “tìm” được server?

  1. Địa chỉ IP (Internet Protocol Address):
    • Mỗi thiết bị khi kết nối vào Internet đều có một địa chỉ IP, ví dụ: 172.217.11.46.
    • Địa chỉ này giống như “địa chỉ nhà” trên mạng, cho phép client và server xác định lẫn nhau.
  2. Vấn đề khó nhớ
    • Nếu mỗi lần muốn vào Google, Facebook, Instagram… bạn phải gõ dãy số IP, chắc chắn rất “gian nan” và dễ nhầm lẫn.
  3. Hệ thống Domain Name System (DNS)
    • DNS giống như một cuốn sổ địa chỉ (phonebook) khổng lồ, chứa danh sách “tên miền ⇔ địa chỉ IP”.
    • Khi bạn gõ google.com lên trình duyệt:
      1. Trình duyệt gửi truy vấn đến DNS server để hỏi: “Địa chỉ IP của google.com là gì?”
      2. DNS trả về một dãy số (IP) tương ứng, ví dụ: 142.250.190.14.
      3. Trình duyệt tiếp tục gửi request đến địa chỉ IP đó.
    • Các trang web khác như facebook.com, instagram.com cũng tương tự: DNS sẽ giúp tìm ra IP tương ứng để trình duyệt kết nối.
Hướng dẫn kiểm tra IP của tên miền:
  1. Mở trình duyệt và tìm từ khóa “check IP domain”.
  2. Chọn một website bất kỳ để kiểm tra IP (ví dụ: “IP checker”).
  3. Nhập tên miền (ví dụ: google.com) và nhấn “Check”.
  4. Bạn sẽ thấy dãy số IP của Google. Sau đó, nếu copy dãy số vào trình duyệt và nhấn Enter, nó sẽ tự động chuyển hướng (redirect) về google.com.
Hoặc Bấm Vào Đây

5. Quy trình Request – Response: Làm thế nào để trang web xuất hiện trên màn hình?

Khi mọi thứ đã sẵn sàng (bạn đã biết server cần IP nào, và DNS sẽ cung cấp), quá trình diễn ra như sau:

  1. Bước 1: Gõ địa chỉ trang web và nhấn Enter
    • Ví dụ: Bạn mở Chrome, gõ https://example.com, nhấn Enter.
  2. Bước 2: Trình duyệt gửi Request đến server
    • Yêu cầu này gọi là HTTP request (hay HTTPS request với bảo mật).
    • Trong request có chứa thông tin:
      • Phương thức (GET, POST, PUT, DELETE…)
      • Tên miền (đã được dịch sang IP thông qua DNS)
      • Các header (ngôn ngữ, loại thiết bị, cookie…)
  3. Bước 3: Server xử lý request
    • Server nhận yêu cầu và tìm kiếm file tương ứng (HTML, CSS, JavaScript, hình ảnh, video…) trong thư mục lưu trữ.
    • Server có thể chạy thêm một số xử lý (như truy vấn cơ sở dữ liệu, kiểm tra đăng nhập…) rồi mới gửi dữ liệu về.
  4. Bước 4: Server trả về Response (phản hồi)
    • Phản hồi bao gồm:
    • Mã trạng thái HTTP (200: thành công, 404: không tìm thấy, 500: lỗi máy chủ…)
    • Header response (loại nội dung, kích thước, cookie…)
    • Nội dung chính (body): file HTML, CSS, JavaScript…
  5. Bước 5: Trình duyệt nhận Response
    • Trình duyệt phân tích và “đọc” file HTML.
    • Nếu trong HTML có liên kết tới file CSS hoặc JavaScript, trình duyệt sẽ tiếp tục gửi thêm các request để tải những file này.
    • Sau khi tải xong, trình duyệt kết hợp CSS, JavaScript, tài nguyên khác để “vẽ” (render) ra trang web mà bạn nhìn thấy.

Mô tả trực quan:
  • Request đi xuống mạng → qua DNS (nếu cần) → đến server.
  • Server trả response → trình duyệt nhận và “vẽ” trang web.

6. Ba công nghệ cốt lõi cho lập trình web front-end

Trong quá trình server trả về các tệp tin, ta thường thấy ba loại file chính:

  1. HTML (HyperText Markup Language)
    • Ngôn ngữ đánh dấu dùng để cấu trúc nội dung trang web: tiêu đề, đoạn văn, hình ảnh, liên kết…
    • Mỗi trang web nếu không có HTML thì trình duyệt không thể biết hiển thị gì.
    • Ví dụ một đoạn HTML đơn giản:
      •               <!DOCTYPE html>
              <html lang="vi">
              <head>
                <meta charset="UTF-8">
                <title>Trang web của tôi</title>
              </head>
              <body>
                <h1>Chào mừng đến với trang web của tôi!</h1>
                <p>Đây là một đoạn văn mẫu.</p>
              </body>
              </html>
  2. CSS (Cascading Style Sheets)
    • Ngôn ngữ tạo kiểu dáng cho HTML: màu sắc, kích thước chữ, bố cục, margin/padding, hiệu ứng khi rê chuột…
    • Khi HTML là khung xương (structure), CSS chính là “áo quần” giúp trang web đẹp mắt, chuyên nghiệp.
    • Ví dụ CSS gắn với HTML trên:
      •                 body {
                  font-family: Arial, sans-serif;
                  background-color: #f0f0f0;
                  color: #333;
                }
                h1 {
                  color: #4CAF50;
                }
                p {
                  font-size: 16px;
                }
  3. JavaScript (JS)
    • Ngôn ngữ lập trình giúp trang web “động”: tương tác với người dùng, xử lý form, gọi API, thay đổi nội dung mà không cần tải lại trang…
    • JavaScript chạy ngay trong trình duyệt (client-side), tạo nên các hiệu ứng, xác thực dữ liệu, gửi/nhận dữ liệu bất đồng bộ (AJAX, Fetch API).
    • Ví dụ JavaScript đơn giản:
      •                 document.addEventListener("DOMContentLoaded", function() {
                  const greeting = document.createElement("p");
                  greeting.textContent = "Chào mừng bạn đến với trang web!";
                  document.body.appendChild(greeting);
                });
Tóm Tắt:
  • HTML: Xác định nội dung, cấu trúc trang.
  • CSS: Tạo phong cách, trang trí, định dạng trang.
  • JavaScript: Tạo tương tác, xử lý logic ngay trên trang.

7. Ví dụ minh họa: Toàn cảnh một lần truy cập trang web

  1. Bạn gõ “example.com” vào trình duyệt
    • Trình duyệt hỏi DNS: “Địa chỉ IP của example.com là gì?”
    • DNS trả về IP, ví dụ: 93.184.216.34.
  2. Trình duyệt gửi HTTP GET request đến IP đó
    • Yêu cầu tải file index.html.
  3. Server (tại IP 93.184.216.34) nhận request
    • Server kiểm tra file, tìm index.html trong thư mục gốc.
    • Server gửi Response:
      • HTTP/1.1 200 OK
      • Content-Type: text/html
      • Body: toàn bộ nội dung HTML.
  4. Trình duyệt nhận HTML và phân tích
    • Phát hiện trong HTML có liên kết tới style.css và script.js.
    • Trình duyệt tiếp tục gửi thêm hai request:
      • GET /style.css
      • GET /script.js
  5. Server trả về CSS và JS
    • CSS giúp định dạng giao diện: font chữ, màu nền, độ rộng layout…
    • JS giúp thêm tính năng: nhấn nút, xử lý form, gọi API.
  6. Trình duyệt “vẽ” trang web hoàn chỉnh
    • Kết quả: bạn nhìn thấy một giao diện đẹp, có thể nhấn vào các nút, điền form, lướt xuống, cuộn lên…
Nhờ có quy trình trên, chỉ trong vài giây, trang web hiện ra ngay trước mắt bạn, dù server có thể đang cách bạn hàng nghìn cây số.

8. Các thuật ngữ quan trọng cần ghi nhớ

  • HTTP/HTTPS: Giao thức truyền siêu văn bản (Secure – có mã hóa), cho phép client và server trao đổi dữ liệu.
  • Port (Cổng): Con số xác định một dịch vụ trên máy chủ (ví dụ HTTP thường chạy ở port 80, HTTPS ở port 443).
  • URL (Uniform Resource Locator): Địa chỉ đầy đủ của tài nguyên trên Internet, bao gồm giao thức (http/https), tên miền, đường dẫn và cổng (nếu có). Ví dụ: https://www.example.com:443/path/page.html.
  • Frontend – Backend:
    • Frontend (giao diện người dùng): Làm việc với HTML, CSS, JavaScript để tạo trải nghiệm trực quan.
    • Backend (phía máy chủ): Xử lý logic, truy vấn cơ sở dữ liệu, gửi/nhận dữ liệu cho frontend (thường dùng các ngôn ngữ như PHP, Node.js, Python, Java, C#…).
  • Framework/Library:
    • Frontend: React, Vue.js, Angular, jQuery…
    • Backend: Express (Node.js), Django (Python), Spring (Java), ASP.NET (C#)…

9. Tại sao phải hiểu nguyên lý hoạt động trước khi vào code?

  1. Giúp tiết kiệm thời gian học tập
    • Khi nắm rõ cách client–server giao tiếp, DNS hoạt động, HTTP request–response, bạn sẽ dễ hiểu tại sao mã HTML lại được trình duyệt hiển thị, tại sao CSS có thể thay đổi giao diện, và JavaScript có thể tương tác “real-time”.
  2. Hiểu được khái niệm cơ bản
    • Biết được khi bạn sửa file .css, trình duyệt cần request lại file CSS mới.
    • Biết rằng mỗi lần refresh trang, có thể trình duyệt sẽ tải lại tài nguyên hoặc dùng cache (nếu có thiết lập).
  3. Dễ dàng gỡ lỗi (debug)
    • Khi bạn gặp lỗi “404 Not Found” hay “500 Internal Server Error”, thay vì lo lắng, bạn biết cần kiểm tra server đã đặt file đúng chỗ chưa, hoặc có lỗi trong mã server không.
  4. Chuẩn bị cho phần tiếp theo
    • Sau khi nắm chắc lý thuyết, chúng ta sẽ đi vào lập trình HTML, CSS. Hiểu nền tảng sẽ giúp bạn không “bọt nước” khi đọc tài liệu nâng cao hoặc khi gặp thuật ngữ chuyên ngành.