Tìm hiểu Cách Trang Web Hoạt Động
Đối với một nhân viên lập trình web, việc hiểu rõ “web” là gì là vô cùng quan trọng. Bạn có bao giờ tự hỏi là một trang website hoạt động như thé nào chưa nhỉ? Nó là một tập hợp phức tạp của các yếu tố phối hợp với nhau để tạo ra trải nghiệm mà bạn thấy trên màn hình. Nào bây giờ chúng ta hãy cùng nhau đi vào cách hoạt động của trang web nhé!
HTTP: Giao thức “bí mật” của web
Để web hoạt động được, chúng ta cần một “ngôn ngữ” chung để các máy tính có thể giao tiếp với nhau. Đó chính là HTTP (Hypertext Transfer Protocol).
HTTP là một giao thức, một bộ quy tắc chuẩn hóa cách thức giao tiếp trên web. Khi bạn nhập một địa chỉ web vào trình duyệt và nhấn Enter, trình duyệt của bạn sẽ gửi một yêu cầu HTTP đến máy chủ web. Máy chủ web sẽ xử lý yêu cầu này và gửi lại một phản hồi HTTP chứa thông tin của trang web mà bạn muốn xem.
Bạn có thể đã từng thấy http:// hoặc https:// ở đầu địa chỉ web. Đây chính là dấu hiệu cho thấy bạn đang sử dụng giao thức HTTP để truy cập trang web đó.
HTTPS là phiên bản an toàn hơn của HTTP, sử dụng mã hóa để bảo vệ thông tin của bạn khi truyền qua internet. Khi bạn thấy https:// ở đầu địa chỉ web, bạn có thể yên tâm rằng thông tin của bạn đang được bảo vệ.
Request và Response
Khi bạn truy cập một trang web, sẽ một cuộc trò chuyện “bên dưới” diễn ra giữa trình duyệt của bạn (client) và máy chủ web (server).
- Yêu cầu (Request): Trình duyệt của bạn gửi một yêu cầu đến máy chủ web, yêu cầu một tài nguyên cụ thể (ví dụ: một trang web, một hình ảnh, một video).
- Phản hồi (Response): Máy chủ web nhận được yêu cầu, xử lý nó và gửi lại một phản hồi chứa tài nguyên mà trình duyệt yêu cầu.
- Hiển thị: Trình duyệt của bạn nhận được phản hồi và hiển thị nội dung của tài nguyên đó cho bạn.
Hãy tưởng tượng bạn đang đi ăn phở.
- Bạn (Client): Bạn đến quán phở và gọi một bát phở bò (yêu cầu).
- Quán phở (Server): Quán phở nhận yêu cầu của bạn, chuẩn bị một bát phở bò và mang ra cho bạn (phản hồi).
- Bạn: Bạn nhận bát phở và thưởng thức (hiển thị).
Web server (máy chủ web) là gì?
Máy chủ web là những máy tính đặc biệt, được kết nối với internet và có nhiệm vụ phục vụ các yêu cầu từ trình duyệt web. Khi bạn truy cập một trang web, bạn đang gửi yêu cầu đến một máy chủ web nào đó.
Khi bạn muốn xem một trang web, trình duyệt (browser) sẽ gửi yêu cầu đến server chứa website đó. Trình duyệt là một phần mềm đặc biệt, có khả năng “dịch” các đoạn mã phức tạp thành những hình ảnh, chữ viết mà chúng ta có thể dễ dàng hiểu được.
Ngoài máy chủ web, còn có nhiều loại máy chủ khác, như máy chủ email, máy chủ trò chơi, máy chủ cơ sở dữ liệu,… Mỗi loại máy chủ có một nhiệm vụ riêng, nhưng tất cả đều có chung một mục đích: phục vụ các yêu cầu từ client.
Client và Server: Hai Yếu Tố Chính Của Web
Trong kiến trúc web, chúng ta thường nói về hai “nhân vật” chính:
- Client (Máy khách): Là máy tính, điện thoại hoặc thiết bị khác mà bạn sử dụng để truy cập web. Trình duyệt web là một phần mềm client.
- Server (Máy chủ): Là máy tính lưu trữ các trang web và tài nguyên, và phục vụ chúng cho client khi được yêu cầu.
Client-side và Server-side:
- Client-side (Phía máy khách): Là tất cả những gì xảy ra trên máy tính của bạn, trong trình duyệt web. Ví dụ: hiển thị trang web, chạy các đoạn mã JavaScript.
- Server-side (Phía máy chủ): Là tất cả những gì xảy ra trên máy chủ web. Ví dụ: xử lý yêu cầu, truy vấn cơ sở dữ liệu, tạo ra nội dung trang web.
Ví dụ:
Khi bạn chơi một trò chơi trực tuyến, những gì bạn thấy trên màn hình (hình ảnh, âm thanh, nhân vật) là client-side. Còn những gì xảy ra “đằng sau” (tính toán điểm số, quản lý người chơi) là server-side.
HTML, CSS và Javascript Trong Phát Triển Website
Hãy tưởng tượng bạn là một kiến trúc sư, HTML là cấu trúc ngôi nhà, CSS là lớp sơn màu sắc và trang trí nội thất, còn JavaScript là hệ thống điện nước và các tiện ích thông minh. Ba yếu tố này kết hợp với nhau để tạo nên một ngôi nhà hoàn chỉnh và tiện nghi.
HTML: Bộ Khung Của Ngôi Nhà
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, đóng vai trò là bộ khung cơ bản của mọi trang web. Nó định nghĩa cấu trúc và nội dung của trang web, bao gồm:
- Văn bản: Tiêu đề, đoạn văn, danh sách,…
- Hình ảnh: Logo, ảnh minh họa, ảnh sản phẩm,…
- Liên kết: Dẫn đến các trang web khác hoặc các phần khác nhau trên cùng một trang.
- Biểu mẫu: Cho phép người dùng nhập dữ liệu (ví dụ: form đăng ký, form liên hệ).
- Các thành phần đa phương tiện: Video, âm thanh,…
Hãy tưởng tượng HTML như bản thiết kế chi tiết của ngôi nhà, nó xác định vị trí của các bức tường, cửa sổ, cửa ra vào và các phòng.
Ví dụ:
Bạn muốn hiển thị một đoạn giới thiệu về món phở trên trang web của mình. Bạn có thể sử dụng HTML như sau:
<!DOCTYPE html>
<html>
<head>
<title>Phở - Món ăn quốc hồn quốc túy</title>
</head>
<body>
<h1>Phở</h1>
<p>Phở là một món ăn truyền thống của Việt Nam, thường được dùng làm bữa sáng. Nước dùng được ninh từ xương bò, ăn kèm với bánh phở, thịt bò thái mỏng và các loại rau thơm.</p>
<img src="pho.jpg" alt="Hình ảnh tô phở">
</body>
</html>Trong ví dụ này:
<h1>là thẻ tiêu đề cấp 1, hiển thị tiêu đề chính của trang.<p>là thẻ đoạn văn, chứa nội dung giới thiệu về phở.<img>là thẻ hình ảnh, hiển thị hình ảnh tô phở (đường dẫn đến hình ảnh là “pho.jpg”).
CSS: Trang Trí Nội Thất
CSS (Cascading Style Sheets) là ngôn ngữ định kiểu, chịu trách nhiệm về giao diện và bố cục của trang web. Nó cho phép bạn kiểm soát:
- Màu sắc: Màu nền, màu chữ, màu viền,…
- Phông chữ: Kiểu chữ, kích thước chữ, độ đậm nhạt,…
- Bố cục: Vị trí, kích thước, khoảng cách giữa các thành phần.
- Hiệu ứng: Đổ bóng, chuyển động, hiệu ứng hover,…
Nếu HTML là bộ khung của ngôi nhà, thì CSS là lớp sơn, đồ nội thất và cách bài trí, biến ngôi nhà trở nên đẹp mắt và hấp dẫn.
Ví dụ:
Bạn muốn đoạn giới thiệu về phở có màu xanh lá cây, phông chữ Arial và hình ảnh được căn giữa. Bạn có thể sử dụng CSS như sau:
body {
font-family: Arial, sans-serif;
}
h1 {
color: red;
text-align: center;
}
p {
color: green;
}
img {
display: block;
margin: 0 auto;
}Trong ví dụ này:
bodylà bộ chọn (selector) áp dụng kiểu cho toàn bộ nội dung trang web.font-family: Arial, sans-serif;đặt phông chữ mặc định cho trang web là Arial (nếu không có Arial thì dùng phông chữ sans-serif).h1là bộ chọn áp dụng kiểu cho thẻ<h1>.color: red;đặt màu chữ cho tiêu đề là đỏ.text-align: center;căn giữa tiêu đề.plà bộ chọn áp dụng kiểu cho thẻ<p>.color: green;đặt màu chữ cho đoạn văn là xanh lá cây.imglà bộ chọn áp dụng kiểu cho thẻ<img>.display: block;biến hình ảnh thành một khối (block-level element).margin: 0 auto;căn giữa hình ảnh theo chiều ngang.
JavaScript: Hệ Thống Điện Nước
JavaScript là ngôn ngữ lập trình cho phép bạn thêm tính tương tác và chức năng động vào trang web. Nó có thể được sử dụng để:
- Xử lý sự kiện: Phản hồi khi người dùng nhấp chuột, di chuột, nhập liệu,…
- Thay đổi nội dung: Cập nhật nội dung trang web mà không cần tải lại trang.
- Tạo hiệu ứng: Tạo hiệu ứng động, hoạt ảnh,…
- Giao tiếp với máy chủ: Gửi và nhận dữ liệu từ máy chủ.
JavaScript giống như hệ thống điện nước của ngôi nhà, nó cho phép bạn bật đèn, mở vòi nước và sử dụng các thiết bị điện tử.
Ví dụ:
Bạn muốn khi người dùng nhấp vào hình ảnh tô phở, một hộp thoại sẽ hiện ra thông báo “Bạn thích món phở!”. Bạn có thể sử dụng JavaScript như sau:
<!DOCTYPE html>
<html>
<head>
<title>Phở - Món ăn quốc hồn quốc túy</title>
<style>
img {
cursor: pointer; /* Thay đổi con trỏ chuột khi di vào hình ảnh */
}
</style>
</head>
<body>
<h1>Phở</h1>
<p>Phở là một món ăn truyền thống của Việt Nam, thường được dùng làm bữa sáng. Nước dùng được ninh từ xương bò, ăn kèm với bánh phở, thịt bò thái mỏng và các loại rau thơm.</p>
<img src="pho.jpg" alt="Hình ảnh tô phở" onclick="thongBao()">
<script>
function thongBao() {
alert("Bạn thích món phở!");
}
</script>
</body>
</html>Trong ví dụ này:
onclick="thongBao()"là một thuộc tính HTML, gọi hàmthongBao()khi người dùng nhấp vào hình ảnh.<script>là thẻ chứa mã JavaScript.function thongBao() { ... }định nghĩa một hàm tên làthongBao().alert("Bạn thích món phở!");hiển thị một hộp thoại thông báo.
HTML, CSS và JavaScript phối hợp với nhau để tạo ra một trang web hoàn chỉnh. HTML cung cấp cấu trúc và nội dung, CSS định kiểu giao diện và bố cục, và JavaScript thêm tính tương tác và chức năng động.
Công Cụ Dành Cho Nhà Phát Triển (Developer Tools)
Hầu hết các trình duyệt web đều cung cấp một bộ công cụ mạnh mẽ dành cho nhà phát triển, cho phép bạn:
- Kiểm tra HTML và CSS: Xem cấu trúc HTML và các kiểu CSS được áp dụng cho từng phần tử trên trang web.
- Chỉnh sửa trực tiếp: Thay đổi HTML và CSS trực tiếp trên trình duyệt để xem kết quả ngay lập tức.
- Gỡ lỗi JavaScript: Tìm và sửa lỗi trong mã JavaScript.
- Theo dõi hiệu suất: Phân tích hiệu suất của trang web và tìm các điểm nghẽn.
Để mở Công cụ dành cho nhà phát triển trong Chrome, bạn có thể:
- Nhấp chuột phải vào một phần tử trên trang web và chọn “Inspect” (Kiểm tra).
- Nhấn phím F12 (hoặc Ctrl+Shift+I trên Windows/Linux, Cmd+Option+I trên macOS).
Tại Sao Cần Chia Nhiều Loại Tệp Trong Một Trang Web?
Tại sao chúng ta không thể có một tệp duy nhất chứa tất cả nội dung, kiểu dáng và chức năng của trang web? Có một số lý do:
- Tách biệt mối quan tâm: HTML, CSS và JavaScript có các vai trò khác nhau. Tách chúng thành các tệp riêng biệt giúp mã dễ đọc, dễ bảo trì và dễ tái sử dụng hơn.
- Hiệu suất: Trình duyệt có thể tải các tệp CSS và JavaScript song song, giúp tăng tốc độ tải trang.
- Bộ nhớ đệm: Trình duyệt có thể lưu trữ các tệp CSS và JavaScript trong bộ nhớ đệm, giúp giảm thời gian tải trang cho các lần truy cập tiếp theo.
Kết luận
Với những kiến thức cơ bản này, mình mong bạn đã sẵn sàng để bắt đầu hành trình lập trình web của mình. Chúc bạn luôn thành công trên con đường mình đã chọn nha.
