Cơ chế phản hồi nội dung HTML qua giao thức HTTP
Về bản chất, trình duyệt web đóng vai trò là một Client gửi yêu cầu đến Server. Server sẽ xử lý và trả về dữ liệu tuân thủ định dạng của giao thức HTTP. Dưới đây là ví dụ minh họa cách thiết lập một Server đơn giản bằng Python để trả về nội dung HTML cho trình duyệt:
import socket
# Khởi tạo kết nối mạng qua socket
web_server = socket.socket()
web_server.bind(('127.0.0.1', 9000))
web_server.listen(5)
print("Server đang chạy tại cổng 9000...")
while True:
client_link, client_addr = web_server.accept()
request_data = client_link.recv(1024)
# Gửi Header phản hồi theo đúng chuẩn HTTP
client_link.send(b"HTTP/1.1 200 OK\r\nContent-Type: text/html; charset=utf-8\r\n\r\n")
# Đọc nội dung file giao diện và gửi về phía Client
try:
with open('index.html', 'rb') as template:
html_content = template.read()
client_link.send(html_content)
except FileNotFoundError:
client_link.send(b"<h1>404 - Khong tim thay tep tin</h1>")
client_link.close()
Quy trình hoạt động của hệ thống Web
Kiến trúc Web hiện đại chủ yếu dựa trên mô hình B/S (Browser/Server). Quy trình tương tác diễn ra như sau:
- Người dùng nhập URL vào thanh địa chỉ của trình duyệt.
- Trình duyệt đóng gói yêu cầu và gửi tới Server thông qua Internet.
- Server tiếp nhận yêu cầu và xử lý logic (đọc dữ liệu từ database hoặc file hệ thống).
- Server gửi phản hồi chứa mã HTML và các tài nguyên liên quan.
- Trình duyệt phân tích mã (parsing) và hiển thị giao diện cho người dùng.
Cấu trúc cơ bản của một trang HTML
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu được sử dụng để định hình cấu trúc của một trang web. Một tệp tin HTML tiêu chuẩn bao gồm các thành phần:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang Web Đào Tạo</title>
</head>
<body>
<h1>Xin chào thế giới</h1>
<p>Định dạng văn bản: <b>In đậm</b>, <i>In nghiêng</i>, <u>Gạch chân</u>.</p>
</body>
</html>
- <!DOCTYPE html>: Khai báo phiên bản HTML5.
- <html>: Phần tử gốc chứa toàn bộ nội dung trang web.
- <head>: Chứa các thông tin cấu hình (metadata), tiêu đề trang, liên kết CSS mà không hiển thị trực tiếp trên vùng nhìn của trình duyệt.
- <body>: Chứa các thành phần hiển thị như văn bản, hình ảnh, bảng, form.
Phân loại các thẻ HTML thông dụng
Trong HTML, các thẻ được chia thành hai nhóm chính dựa trên cách hiển thị:
1. Thẻ khối (Block-level elements)
Đặc điểm của nhóm này là luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn.
<div>: Thẻ điều hướng hoặc phân chia khu vực chung.<p>: Thẻ đoạn văn bản.<h1>đến<h6>: Các thẻ tiêu đề theo cấp độ quan trọng.<hr>: Đường kẻ ngang phân cách nội dung.
2. Thẻ nội dòng (Inline elements)
Nhóm này chỉ chiếm không gian vừa đủ với nội dung của nó và không tạo dòng mới.
<span>: Dùng để nhóm các phần tử nhỏ hoặc áp dụng kiểu dáng cục bộ.<b>, <i>, <u>, <s>: Các thẻ định dạng kiểu chữ.<a>: Thẻ liên kết.
Lưu ý về phân cấp: Thông thường, thẻ khối có thể chứa thẻ nội dòng hoặc các thẻ khối khác. Tuy nhiên, riêng thẻ <p> không được chứa các thẻ khối như <div> hay <p> khác bên trong nó.
Xử lý dữ liệu người dùng với Form
Thẻ <form> là thành phần quan trọng nhất để thu thập thông tin từ phía người dùng gửi về Server.
Các thuộc tính quan trọng của Form
- action: Đường dẫn (URL) nơi dữ liệu sẽ được gửi tới.
- method: Phương thức gửi (thường là
GEThoặcPOST). - enctype: Cần thiết lập là
multipart/form-datakhi có thực hiện tải tệp tin (upload file).
Các thành phần nhập liệu phổ biến
<input type="text">: Nhập văn bản một dòng.<input type="password">: Nhập mật khẩu (ẩn ký tự).<input type="radio">: Chọn một trong nhiều lựa chọn.<input type="checkbox">: Chọn nhiều lựa chọn cùng lúc.<input type="file">: Chọn tệp tin từ máy tính.<select>: Danh sách thả xuống (kết hợp với thẻ<option>).<textarea>: Vùng nhập văn bản nhiều dòng.<input type="submit">: Nút gửi toàn bộ dữ liệu trong form đi.
Quan trọng: Để Server có thể nhận biết và xử lý dữ liệu, tất cả các thành phần nhập liệu bên trong form phải được khai báo thuộc tính name.