Giáo trình phát triển ứng dụng web

Thứ nhất, giao diện hay tương t{c với người dùng của ứng dụng web không được thực hiện trực tiếp m| gi{n tiếp thông qua c{c phần mềm trung gian là trình duyệt web web browser, gọi tắt l

KIẾN TRÚC ỨNG DỤNG WEB

ỨNG DỤNG WEB CÙNG CÁC THÀNH PHẦN LIÊN QUAN

Để đáp ứng nhu cầu sử dụng ngày càng lớn và đa dạng của người dùng, nhiều phần mềm ứng dụng (application software, viết tắt là app) đã ra đời, trong đó có ứng dụng web (web app) Ứng dụng web là một dạng phần mềm phổ biến ngày nay, với những ví dụ điển hình như Google.com, Twitter.com, Facebook.com, Amazon.com, Github.com và Wikipedia.org, đang được hàng triệu người dùng trên toàn thế giới tin tưởng Các tổ chức và doanh nghiệp ở mọi quy mô đều sở hữu các web app riêng nhằm cung cấp tin tức, quảng bá sản phẩm, xử lý nghiệp vụ hoặc giao dịch với khách hàng Ứng dụng web có những đặc điểm riêng so với các dạng phần mềm khác Trước hết, giao diện người dùng và sự tương tác với ứng dụng web không được thực hiện trực tiếp ở máy tính của người dùng mà thông qua trình duyệt web và máy chủ web; trình duyệt ở phía khách hàng giao tiếp với máy chủ, và máy chủ lại xử lý và trả kết quả về cho người dùng Trình duyệt chạy trên thiết bị của người dùng trong khi máy chủ web thường chạy ở xa trên Internet Nhờ đó, phần front-end (mặt trước) do trình duyệt và người dùng tạo nên, còn phần back-end (mặt sau) được xử lý bởi máy chủ và ứng dụng web.

(frontend), trong khi trình phục vụ v| ứng dụng web thuộc về bên phục vụ

Server-side, or the backend, handles the core logic and data processing of web applications The browser communicates with the web server through the Hypertext Transfer Protocol (HTTP) within the client–server model, exchanging requests and responses to deliver dynamic content and enable user interactions.

Trong một ứng dụng web, kết quả xử lý hay đầu ra được khách hàng yêu cầu chính là nội dung web (web content), khác với dữ liệu thuần túy hay mã nguồn Nội dung web được thể hiện bằng HTML, JavaScript và CSS và trình duyệt web có nhiệm vụ diễn giải mã nguồn để trình diễn kết quả trên giao diện người dùng Nội dung web cũng chứa các siêu liên kết (hyperlink); người dùng có thể theo dõi các liên kết này để chuyển từ nội dung hiện tại đến nội dung khác bằng cách nhấp vào chúng.

1 Ứng dụng console, desktop, hay mobile

Lê Đ ình Thanh, Nguy ễ n Vi ệ t Anh

Theo Collins English Dictionary (2012), ứng dụng web là phần mềm được truy cập trên Internet Theo Random House Dictionary (2017), định nghĩa chi tiết hơn về ứng dụng web cho biết đây là phần mềm cung cấp chức năng tương tác và được truy cập thông qua trình duyệt web và URL Các định nghĩa này làm rõ vai trò của máy chủ web, giao thức HTTP và đặc tính của nội dung web Vì vậy, ứng dụng web nên được nhận diện dựa trên các đặc trưng đã được trình bày ở trên.

Ứng dụng web cung cấp cho trình duyệt các tài nguyên web (web resources) được tạo ra từ nhiều nguồn dữ liệu trên Internet Từ góc độ lưu trữ, nó là tập hợp các tài nguyên web; tài nguyên có thể là bất kỳ thứ gì có thể tạo ra nội dung, phổ biến nhất là các tệp tin Tài nguyên cũng có thể là một tiến trình với một socket và một luồng dữ liệu đầu ra Có thể hình dung tài nguyên như một đơn vị sản xuất nội dung, và phía máy chủ có nhiều đơn vị như vậy Mỗi lần gửi yêu cầu tới máy chủ, trình duyệt chỉ định rõ một tài nguyên duy nhất nó cần.

Trình duyệt thường bắt đầu bằng cách yêu cầu một tài liệu HTML và sau đó phân tích nội dung để yêu cầu các tài nguyên được tham chiếu bởi HTML Tài liệu HTML cùng các tài nguyên liên kết với nó được gọi là một trang web (web page) Một ứng dụng web là tập hợp các trang web có mối quan hệ chặt chẽ với nhau về chức năng, dữ liệu và người dùng Cấu trúc tài liệu HTML sẽ được trình bày chi tiết ở Chương 2.

Một trang web không chỉ chứa các siêu liên kết nội bộ giữa các trang trong cùng một ứng dụng mà còn có thể có các liên kết tới các trang thuộc ứng dụng khác Số lượng lớn trang web trên Internet và lượng siêu liên kết phong phú giữa chúng tạo thành một mạng lưới thông tin rộng khắp, gọi là World Wide Web (WWW hay the Web) Internet, máy chủ web, trình duyệt web và giao thức HTTP là những thành phần quan trọng cấu thành hạ tầng phục vụ cho việc xây dựng và khai thác không gian thông tin này, hay nói cách khác là hạ tầng cho việc triển khai các ứng dụng web.

Để hiểu rõ hơn về cấu trúc web và tối ưu hóa SEO, cần phân biệt ứng dụng web với website: website là thuật ngữ chỉ một nhóm các trang web được kết nối với nhau và cùng mang thông tin về một chủ đề hoặc một nhóm các chủ đề liên quan gần gũi với nhau; các trang web thuộc cùng website không nhất thiết phải thuộc cùng ứng dụng web.

TRÌNH KHÁCH WEB

Ngoài trình duyệt, các phần mềm khác như telnet, wget và crawler cũng yêu cầu sử dụng nội dung do ứng dụng web tạo ra Trình duyệt và các công cụ này được gọi chung là trình khách web (web client), bởi chúng truy cập và tương tác với nội dung web theo các cách khác nhau Các trình khách web sử dụng nội dung web nhằm phục vụ mục đích hiển thị, lấy dữ liệu hay thực thi các tác vụ tự động; nếu như trình duyệt tập trung vào hiển thị và tương tác người dùng, các công cụ như wget và crawler sẽ tự động thu thập và xử lý nội dung web theo các chiến lược riêng của chúng.

Trình duyệt nhận được mã nguồn và hiển thị kết quả cho người dùng; trong khi đó, các crawler (bot tìm kiếm) sẽ tìm kiếm và lập chỉ mục nội dung trên mã nguồn Telnet và wget chỉ tải mã nguồn về máy tính của người dùng mà không thực thi trang web Do tính phổ biến của trình duyệt, trong quá trình này, nếu không được phân biệt rõ ràng, trình khách web được hiểu như trình duyệt web và hai thuật ngữ trình duyệt (web) và trình khách (web) có thể được dùng thay thế cho nhau Các trình duyệt điển hình bao gồm Mozilla Firefox, Google Chrome, Microsoft Edge và Apple Safari.

TRÌNH PHỤC VỤ WEB

Trình phục vụ web, hay còn gọi là HTTP server, là phần mềm xử lý giao thức HTTP giữa trình duyệt và máy chủ Nó nhận yêu cầu từ trình khách và gửi phản hồi tương ứng, đồng thời tương tác với ứng dụng web để chuyển tiếp yêu cầu và nhận kết quả xử lý Trình phục vụ web phải đồng thời giao tiếp với nhiều trình khách và làm việc với nhiều ứng dụng web cùng lúc Các trình phục vụ web phổ biến hiện nay bao gồm Apache, IIS và Nginx.

TRÌNH PHỤC VỤ ỨNG DỤNG

Cũng như các ứng dụng khác, ứng dụng web cần một môi trường thực thi để hoạt động Môi trường này được cung cấp bởi trình phục vụ ứng dụng, là hệ thống chứa các ngôn ngữ lập trình và các thư viện thực thi (runtime libraries) Ứng dụng web được viết bằng các ngôn ngữ được trình phục vụ ứng dụng hỗ trợ và chạy trên trình phục vụ đó Khi vận hành, ứng dụng web sẽ gọi đến các thư viện thời gian thực thi và các thành phần khác được trình phục vụ ứng dụng cung cấp.

Giao tiếp giữa trình phục vụ ứng dụng và trình phục vụ web có thể thực hiện qua CGI (Common Gateway Interface) Ví dụ, ActivePerl kết hợp với Apache theo cách này Theo CGI, trình phục vụ ứng dụng nằm phía sau trình phục vụ web và chạy độc lập với nó như một ứng dụng giao tiếp (console hay shell) được nối ống với trình phục vụ web để chuyển tiếp yêu cầu và trả kết quả giữa hai bên Nhược điểm của CGI là tốn nhiều tài nguyên và bị chậm do phải khởi tạo tiến trình của trình phục vụ ứng dụng Để khắc phục vấn đề này, các trình phục vụ web ngày nay cho phép tích hợp các trình phục vụ ứng dụng dưới dạng mô-đun và giao tiếp với chúng qua API (Application Programming Interface), nhờ đó trình phục vụ ứng dụng có thể được nhúng vào trình phục vụ web và hai trình phục vụ hòa nhập với nhau.

Trong lĩnh vực máy chủ web, người ta thường gọi một trình phục vụ web bằng một tên chung Ví dụ, Apache không chỉ có httpd (trình phục vụ web) mà còn có các module như mod_php, mod_python và mod_perl để phục vụ các ứng dụng web động.

HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU

Một thành phần không thể thiếu trong các ứng dụng web ngày nay là cơ sở dữ liệu (CSDL) để lưu trữ thông tin một cách bền vững Các hệ quản trị CSDL phổ biến hiện nay như MariaDB/MySQL, PostgreSQL, MS SQL, Oracle và JavaDB đều có thể được sử dụng cho ứng dụng web Trình phục vụ ứng dụng cung cấp các giao diện (interface) cho phép ứng dụng web kết nối tới các CSDL khác nhau và thao tác dữ liệu Hệ quản trị CSDL thường được cài đặt trên máy tính trong cùng mạng cục bộ (LAN) với máy tính chạy trình phục vụ web nhằm đảm bảo tốc độ truy xuất dữ liệu Hệ quản trị CSDL cũng là một thành phần của phía máy chủ.

KHUNG NHÌN CHUNG

Đến thời điểm này, tất cả các thành phần liên quan đến ứng dụng web đã được giới thiệu Nhằm cung cấp cái nhìn toàn cảnh về ứng dụng web, một khung nhìn chung cho mọi thành phần được phác thảo, như Hình 1.1 Khung nhìn này phản ánh đầy đủ các thành phần cũng như sự tương tác giữa chúng.

Hình 1.1 mô tả kiến trúc ứng dụng web, được xây dựng theo kiến trúc đa tầng (multitier hoặc n-tier architecture) Trong mô hình này, mỗi tầng đảm nhận một chức năng riêng, cung cấp dịch vụ cho tầng phía trên và sử dụng dịch vụ từ tầng phía dưới Kiến trúc đa tầng thường được áp dụng cho các ứng dụng web và thường gồm ba tầng (three-tier architecture).

Trình phục vụ ứng dụng

Trình phục vụ ứng dụng ỨỨng dỨng dng dụụng web ng web ụng web

Tầng logic nghi ệ p v ụ Tầng truy cập d ữ li ệ u

5 tier): trình diễn, logic nghiệp vụ v| truy cập dữ liệu Tầng trình diễn

Kiến trúc ứng dụng được phân chia thành ba tầng: tầng trình diễn (presentation layer) có nhiệm vụ hiển thị kết quả và tương tác với người dùng; tầng logic nghiệp vụ (business logic layer) cung cấp các dịch vụ web và ứng dụng, nhận yêu cầu từ tầng trình diễn và trả về kết quả cho tầng trình diễn; tầng truy cập dữ liệu (data access layer) bao gồm hệ quản trị cơ sở dữ liệu (DBMS), lưu trữ và thao tác dữ liệu, nhận yêu cầu thao tác từ tầng logic nghiệp vụ và trả dữ liệu về cho tầng logic nghiệp vụ.

Kiến trúc đa tầng của ứng dụng web, hay còn gọi là ngăn xếp web, phân tách thành ba tầng chính: tầng trình diễn (giao diện người dùng), tầng logic nghiệp vụ và tầng truy cập dữ liệu Khi người dùng gửi một yêu cầu, tầng trình diễn gọi tới tầng logic nghiệp vụ, sau đó tầng logic nghiệp vụ sẽ gọi đến tầng truy cập dữ liệu để lấy dữ liệu cần thiết; dữ liệu nhận được từ tầng truy cập dữ liệu quay về tầng logic nghiệp vụ để xử lý tiếp, và kết quả cuối cùng được trả về tầng trình diễn để hiển thị cho người dùng Quá trình xử lý diễn ra theo chu trình qua các tầng và hình ảnh của một ngăn xếp để mô tả rõ ràng các thành phần, vì vậy kiến trúc đa tầng được xem như ngăn xếp web, trong đó các tầng trình diễn, logic nghiệp vụ và truy cập dữ liệu là các phần tử cấu thành nên ngăn xếp ấy.

ĐỊNH DANH ỨNG DỤNG WEB

Một trình phục vụ web có thể lưu trữ nhiều ứng dụng web, vì vậy mỗi ứng dụng cần được gắn danh để phân biệt với nhau Mỗi ứng dụng có ít nhất một định danh, tuy nhiên có thể có nhiều định danh, còn một định danh thì chỉ dành riêng cho một ứng dụng duy nhất Các trình phục vụ web hiện nay thường dùng kết hợp các yếu tố để định danh ứng dụng: lược đồ (scheme) http hoặc https, địa chỉ IP, số hiệu cổng (TCP port) và tên máy (hostname) Việc gắn danh cho ứng dụng được gọi là buộc (binding) lên địa chỉ IP, cổng và tên miền cho ứng dụng Phương pháp định danh này gắn liền với giao thức HTTP, vì HTTP chạy trên TCP ở tầng vận chuyển và có thể đi qua lớp TLS để thành https, trong đó gói TCP từ client tới server mang theo thông tin địa chỉ IP và cổng đích cùng với payload chứa yêu cầu HTTP có tên máy chủ phục vụ; dựa trên gói tin nhận được, web server có thể nhận diện yêu cầu và chuyển nó tới đúng ứng dụng được gắn danh.

Có thể buộc nhiều tổ hợp bất kỳ giữa địa chỉ IP, số hiệu cổng và tên máy cho một ứng dụng Tuy nhiên, trong thực tế ba cách thức phổ biến nhất là buộc theo IP (IP-based), theo cổng (port-based) hoặc theo tên (name-based) Buộc theo IP sử dụng địa chỉ IP làm định danh, không phân biệt số hiệu cổng và tên máy Máy chủ web khi thực hiện các buộc này thường cần có nhiều giao diện mạng để đáp ứng các yêu cầu buộc đa địa chỉ.

Trong cơ chế này, có thể thực hiện theo ba cách buộc định danh khi truy cập ứng dụng: buộc theo cổng, buộc theo tên máy, và buộc theo tên Buộc theo cổng dùng số hiệu cổng làm định danh, không phân biệt địa chỉ IP hay tên máy Buộc theo tên máy sử dụng tên máy làm định danh Buộc theo tên được ưa chuộng hơn vì người dùng chỉ cần nhớ tên miền để truy cập ứng dụng.

Thiết lập định danh cho ứng dụng web bằng cách thức được mô tả ở trên được gọi là lưu trữ ảo (virtual hosting) Phương pháp này cho phép thay đổi địa chỉ truy cập mà vẫn phục vụ cùng một ứng dụng, tối ưu hóa quản lý tên miền và tăng khả năng mở rộng khi làm việc với nhiều miền trên một máy chủ duy nhất.

IP, số hiệu cổng hay tên miền là cách người dùng truy cập ứng dụng web; dù họ có cảm giác ứng dụng được phục vụ từ nhiều máy chủ hay trình phục vụ khác nhau, thực tế các yêu cầu có thể được xử lý bởi cùng một máy chủ hoặc hạ tầng duy nhất nhờ cân bằng tải và proxy ngược Hiểu đúng kiến trúc này giúp người dùng nhận được giao diện và chức năng nhất quán, đồng thời tối ưu hóa hiệu suất và bảo mật cho website.

ĐỊNH VỊ TÀI NGUYÊN WEB

Tiếp theo ứng dụng web, từng t|i nguyên web cũng cần đƣợc định danh Hơn nữa, địa chỉ v| c{ch thức truy cập t|i nguyên web cũng cần đƣợc x{c định URL 2

URL (Uniform Resource Locator) là định vị tài nguyên trên Internet, được dùng để xác định địa chỉ truy cập của một tài nguyên, không chỉ là trang web Mọi tài nguyên đều được truy cập thông qua URL của chúng URL có cấu trúc gồm các thành phần: scheme://host[:port][/path][?query-string][#bookmark].

URL (địa chỉ tài nguyên) được cấu thành từ các thành phần: scheme (lược đồ truy cập), host (tên máy chủ hoặc địa chỉ IP), port (cổng), path (đường dẫn), query string (chuỗi truy vấn) và fragment (vết đánh dấu) Hai thành phần bắt buộc để nhận diện tài nguyên là scheme và host Lược đồ xác định cơ chế truy cập và có thể là http hoặc https; nếu dùng http, giao tiếp diễn ra trực tiếp trên kết nối TCP, còn với https, HTTP được mã hóa và tunnel qua TLS (Transport Layer Security), vẫn dựa trên kết nối TCP Địa chỉ máy được xác định bằng tên miền hoặc địa chỉ IP của máy chủ lưu trữ tài nguyên Cổng chuẩn mặc định cho http là 80 và cho https là 443; khi dùng cổng chuẩn, số hiệu cổng có thể bị bỏ qua, còn khi dùng cổng khác, cổng đó trở thành phần bắt buộc Đường dẫn dùng để nhận diện tài nguyên bên trong ứng dụng web; nếu không có đường dẫn, tài nguyên mặc định (default document) sẽ được trả về Đường dẫn bắt đầu bằng dấu '/' và có thể có các cấp con, được phân tách bởi dấu '/' Đường dẫn không nhất thiết phải là đường dẫn vật lý mà có thể là một bí danh (alias) được máy chủ ánh xạ tới một tài nguyên thực tế Chuỗi truy vấn được đặt sau dấu '?' và chứa các tham số được phân tách bằng dấu '&', cung cấp dữ liệu bổ sung cho yêu cầu mà không làm thay đổi đường dẫn cơ bản Điểm đánh dấu (fragment) sau dấu '#' cho phép tham chiếu tới một phần cụ thể của tài nguyên và được trình duyệt dùng để định hướng nội dung.

2 URL là một dạng của URI (Uniform Resource Identifier)

7 chấm hỏi (?), bao gồm c{c cặp tham_số=giá_trị đƣợc ph}n c{ch với nhau bởi ký tự

Chuỗi truy vấn cung cấp dữ liệu của người dùng (user input) cho ứng dụng web, cho phép trang web trả về các nội dung khác nhau tùy thuộc vào thông tin được gửi Tùy theo chuỗi truy vấn, một ứng dụng web có thể hiển thị các nội dung khác nhau nhằm tối ưu hóa trải nghiệm người dùng và hiệu quả của trang Cuối cùng, điểm đánh dấu (fragment identifier) là phần sau dấu thăng (#) và chứa định danh của một phần tử trên trang web Trình duyệt sẽ tự động điều chỉnh vị trí cuộn để người dùng nhìn thấy phần tử có định danh đó, giúp người dùng nhanh chóng đến được nội dung cần xem.

URL chỉ đƣợc bao gồm c{c ký tự ASCII in đƣợc, tức có mã từ 0x20 đến 0x7e Hơn nữa, một số ký tự, ví dụ ‘/’ và ‘#’, đƣợc d|nh riêng (reserved) vì chúng có nghĩa đặc biệt trong URL Tuy nhiên, gi{ trị của c{c tham số được người dùng nhập vào URL có thể chứa c{c ký tự bất kỳ Do vậy, mỗi ký tự không đƣợc phép phải đƣợc biểu diễn hay thay thế bằng một chuỗi c{c ký tự đƣợc phép Trình duyệt sẽ tự động l|m điều n|y trước khi gửi yêu cầu HTTP Trình phục vụ sẽ thực hiện phép thay thế ngƣợc lại để khôi phục gi{ trị của tham số Việc biểu diễn một ký tự bất kỳ bằng một chuỗi c{c ký tự đƣợc phép trong URL đƣợc gọi l| biểu diễn mã URL (URL encoding) Theo c{ch biểu diễn n|y, mỗi ký tự thuộc bảng mã ASCII đƣợc biểu diễn bằng mã hexa của nó với hai chữ số v| dấu phần trăm (%) ở phía trước Ví dụ, c{c ký tự ‘/’ và ‘#’, có mã tương ứng l| 0x23 v| 0x2f, được biểu diễn mã URL l| %23 v| %2f, tương ứng Dấu phần trăm được viết đầu c{c mã hexa trong c{c biểu diễn Do vậy, biểu diễn mã URL còn đƣợc gọi l| biểu diễn mã phần trăm (percent-encoding) Để URL hợp lệ, tất cả c{c ký tự d|nh riêng (theo RFC 3986, bao gồm *'();:@&=+$,/?#[]) phải đƣợc biểu diễn mã phần trăm C{c ký tự không d|nh riêng đƣợc khuyến c{o giữ nguyên C{c ký tự ngo|i bảng mã ASCII, nếu xuất hiện trong URL, đƣợc chuyển đổi th|nh dãy bytes, mỗi byte đƣợc biểu diễn bằng một mã phần trăm Ký tự ‘%’, nếu nằm trong URL với nghĩa gốc của nó, cũng phải đƣợc biểu diễn bằng mã phần trăm, tức %25

URL phi ngữ nghĩa là các URL chứa chuỗi truy vấn hoặc đường dẫn vật lý tới tài nguyên Nhược điểm của chúng là mang nhiều chi tiết triển khai, ít mang ý nghĩa với người dùng và không thân thiện với các máy tìm kiếm, khiến tính khả dụng và khả truy cập bị hạn chế và vì vậy chúng được sử dụng rất ít Ngược lại, URL ngữ nghĩa (semantic URL) được sử dụng rộng rãi vì nó che đi các chi tiết triển khai và thể hiện cấu trúc khái niệm của ứng dụng, mang lại trải nghiệm người dùng tốt hơn và tương thích với các máy tìm kiếm Với URL ngữ nghĩa, chuỗi truy vấn không còn cần thiết; thay vào đó, giá trị của các tham số được nhúng vào đường dẫn, giúp URL ngắn gọn, sáng sủa và dễ đọc, đồng thời cải thiện khả năng tối ưu hóa cho SEO Sự tương phản giữa URL ngữ nghĩa và URL phi ngữ nghĩa có thể được minh hoạ bằng một ví dụ sau.

Semantic URLs are readable, meaningful paths that describe the page content, such as http://example.com/marketing and http://example.com/services/legal, which help both users and search engines understand what the page is about Non-semantic URLs rely on query strings and dynamic parameters, like http://example.com/index.php?page=marketing and http://example.com/services.py?cat=legal, which can be harder to interpret and less friendly for SEO Adopting semantic URLs improves crawl efficiency, click-through rates, and user trust by keeping URLs concise and keyword-relevant.

C{c kỹ thuật viết lại (rewrite) và định tuyến URL (URL routing) đƣợc sử dụng để tạo URL ngữ nghĩa C{c kỹ thuật n|y sẽ được trình b|y trong Chương 9.

HTTP

HTTP là một giao thức truyền thông quan trọng được dùng để truy cập World Wide Web và ngày nay là nền tảng của hầu hết các ứng dụng web Nó hoạt động theo mô hình dựa trên thông điệp: trình duyệt gửi một HTTP request và máy chủ trả về một HTTP response HTTP là một giao thức hoàn toàn không duy trì trạng thái giữa các yêu cầu, mặc dù nó được vận chuyển trên TCP, một giao thức hướng kết nối và có trạng thái ở tầng vận chuyển Phiên bản HTTP được sử dụng phổ biến nhất hiện nay là HTTP/1.1 Trước HTTP/1.1 có HTTP/1.0 và HTTP/0.9; sau HTTP/1.1 có HTTP/2 được công bố vào năm 2015.

Trong giao thức HTTP, mỗi yêu cầu gồm ba thành phần chính: một dòng yêu cầu (request line) chứa phương thức, đường dẫn và phiên bản HTTP; một tập hợp các tiêu đề (headers), mỗi tiêu đề nằm trên một dòng và cung cấp thông tin bổ sung cho máy chủ (chẳng hạn kiểu nội dung, ngôn ngữ hoặc tham số kết nối); sau danh sách tiêu đề là một dòng trắng phân cách và có thể có thân (body) chứa dữ liệu được gửi đi hoặc nhận về từ máy chủ Ví dụ một yêu cầu HTTP có thể được trình bày như sau:

Dòng yêu cầu HTTP đầu tiên phải chứa ba thành phần được phân cách bằng dấu cách lần lượt là phương thức HTTP (ví dụ GET, POST), URL của tài nguyên được yêu cầu và phiên bản HTTP được sử dụng Các phương thức HTTP và các tiêu đề liên quan sẽ được trình bày trong các mục con ở phần sau Lưu ý dòng trắng sau các tiêu đề là bắt buộc để phân tách các phần và đảm bảo cú pháp đúng chuẩn.

1.9.2 Đáp ứng HTTP Đ{p ứng HTTP bao gồm một dòng trạng th{i (status line), một hoặc nhiều tiêu đề, mỗi tiêu đề nằm trên một dòng, theo sau l| một dòng trắng, v| một th}n Ví dụ một đ{p ứng HTTP nhƣ sau:

GET /auth/488/Details.php?uid9 HTTP/1.1

Accept: application/x-ms-application, image/jpeg, */*

Referer: http://uet.vnu.edu.vn/auth/488/Home.php

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)

Host: uet.vnu.edu.vn

Cookie: SessionId[FH0C71F3FD4945635CDB6682E549176

Dòng trạng thái là dòng đầu tiên trong phản hồi HTTP, bao gồm ba phần được phân cách bằng dấu trắng: phiên bản HTTP đang sử dụng, mã trạng thái và diễn giải trạng thái Các mã trạng thái sẽ được trình bày chi tiết trong các mục phụ phía sau để người đọc dễ tra cứu Phần thân của phản hồi HTTP chứa nội dung trả về cho trình khách, trong khi các header cung cấp thông tin bổ sung và hỗ trợ xử lý Lưu ý có một dòng trắng tách giữa phần header và phần body, đây là quy tắc bắt buộc trong cú pháp phản hồi HTTP.

Phương thức HTTP (HTTP method), còn được gọi là động từ (verb), được ghi trong yêu cầu HTTP nhằm xác định cách xử lý yêu cầu tại máy chủ Hai phương thức được sử dụng phổ biến nhất là GET và POST Phương thức GET được thiết kế để trình khách nhận dữ liệu từ máy chủ; khi người dùng nhập một URL vào thanh địa chỉ của trình duyệt hoặc nhấp chuột vào một liên kết trên trang web, trình duyệt sẽ gửi một yêu cầu HTTP theo phương thức GET đến máy chủ Yêu cầu GET không có thân (body); tuy nhiên, chuỗi truy vấn trong URL có thể gửi tham số đến tài nguyên được yêu cầu, và nội dung trả về có thể dựa vào giá trị của các tham số để hiển thị nội dung khác nhau cho người dùng.

Vì độ dài của URL bị giới hạn, độ dài của chuỗi truy vấn cũng bị giới hạn theo; do đó số lượng tham số và dung lượng của các giá trị tham số bị hạn chế.

Khác với GET, POST được thiết kế để trình khách gửi dữ liệu cho máy chủ và yêu cầu máy chủ chấp nhận dữ liệu đó Với POST, tham số và giá trị của chúng được đặt trong thân của yêu cầu HTTP, nhưng vẫn có thể thêm chuỗi truy vấn (tham số và giá trị) ở URL nếu cần Phương thức POST được dùng khi cần tải lên tệp hoặc gửi dữ liệu người dùng có dung lượng lớn Một khuyến nghị là nên dùng GET cho các yêu cầu không làm thay đổi trạng thái của máy chủ, ví dụ tra cứu điểm thi.

Set-Cookie: tracking=tI8rk7joMx44S2Uu85nSWc

Content-Type: text/html; charset=utf-8

Your details

10 của một sinh viên) v| sử dụng phương thức POST nếu yêu cầu l|m thay đổi trạng th{i bên phục vụ (ví dụ, chỉnh sửa điểm thi của một sinh viên)

HTTP hỗ trợ nhiều phương thức với mục đích cụ thể, trong đó GET và POST được dùng phổ biến để truy vấn và gửi dữ liệu; HEAD hoạt động tương tự GET nhưng trả về toàn bộ tiêu đề mà không có nội dung, giúp kiểm tra sự tồn tại của tài nguyên và thời điểm cập nhật cuối để so sánh với cache trình duyệt; nếu có cập nhật, trình duyệt sẽ gửi GET để nhận bản cập nhật, còn nếu không, nó có thể dùng bản lưu trong đệm ngay lập tức TRACE được thiết kế cho mục đích chẩn đoán và lần vết, trả lại nguyên vẹn nội dung yêu cầu để kiểm tra xem yêu cầu có bị thay đổi trên đường truyền hay không; OPTIONS được dùng để hỏi máy chủ về các phương thức HTTP được hỗ trợ cho một tài nguyên cụ thể, máy chủ sẽ trả về tiêu đề Allow liệt kê các phương thức được hỗ trợ; PUT được dùng để upload tệp lên máy chủ, và nếu PUT được cho phép, người dùng có thể tải lên các tệp bất kỳ, có thể là tệp kịch bản chương trình, vì vậy để an toàn nên hạn chế sử dụng PUT.

HTTP hỗ trợ một số lượng lớn các tiêu đề Một số tiêu đề có thể được sử dụng cho cả yêu cầu và đáp ứng HTTP, giúp điều chỉnh cách dữ liệu được gửi và nhận giữa máy khách và máy chủ Các tiêu đề còn lại được phân loại thành hai nhóm: những tiêu đề chỉ áp dụng cho yêu cầu và những tiêu đề chỉ áp dụng cho đáp ứng, tùy thuộc vào mục đích và ngữ cảnh của giao thức HTTP.

Một số tiêu đề chung:

Content-Encoding – cho biết nội dung trong th}n của thông điệp đƣợc biểu diễn mã nhƣ thế nào

Content-Type – cho biết kiểu MINE của nội dung chứa trong th}n của thông điệp (xem thêm Mục 1.10)

Một số tiêu đề cho yêu cầu:

Host – x{c định tên máy trong URL đang đƣợc yêu cầu

Referer – cho biết URL đã chuyển đến yêu cầu hiện tại

User-Agent – cung cấp thông tin về trình duyệt

Một số tiêu đề cho đáp ứng:

Access-Control-Allow-Origin – cho biết có thể truy cập t|i nguyên từ miền khác hay không

Expires – cho biết trình duyệt có thể lưu đệm th}n đ{p ứng đến khi n|o Server – cung cấp thông tin về trình phục vụ web

Set-Cookie – yêu cầu trình duyệt lưu cookies v| gửi lại cookies trong các yêu cầu sau

Mỗi đ{p ứng HTTP phải mang một mã trạng th{i trong dòng đầu tiên, cho biết kết quả xử lý yêu cầu C{c mã trạng th{i rơi v|o năm nhóm nhƣ sau:

1xx – Cung cấp thông tin

2xx – Yêu cầu th|nh công

3xx – Trình kh{ch được chuyển hướng sang một tài nguyên khác

4xx – Yêu cầu có lỗi

5xx – Trình phục vụ có lỗi v| không thể đ{p ứng yêu cầu

Có nhiều mã trạng th{i kh{c nhau, rất nhiều trong số đó chỉ đƣợc dùng trong những tình huống cụ thể Dưới đ}y l| những mã trạng th{i hay gặp nhất:

200 - OK – Yêu cầu th|nh công v| thân của đ{p ứng chứa kết quả xử lý

301 - Moved Permanently – Chuyển hướng vĩnh viễn trình duyệt đến URL mới đƣợc chỉ định trong tiêu đề Location của đ{p ứng

400 - Bad Request – Yêu cầu không hợp lệ, chẳng hạn không đúng cấu trúc

401 - Unauthorized – Trình phục vụ yêu cầu x{c thực HTTP trước

403 - Forbidden – Không đƣợc truy cập đến t|i nguyên đƣợc yêu cầu

404 - Not Found – Không tìm thấy t|i nguyên

500 - Internal Server Error – Trình phục vụ gặp lỗi khi xử lý yêu cầu

503 - Service Unavailable – Trình phục vụ vẫn l|m việc nhƣng ứng dụng không sẵn s|ng

1.9.6 Kết nối liên tục và cơ chế dẫn ống

HTTP sử dụng giao thức vận chuyển TCP để truyền tải yêu cầu và phản hồi Nếu mỗi kết nối TCP chỉ được dùng để gửi và nhận một yêu cầu/ứng dụng tương ứng, thời gian đáp ứng cho nhiều yêu cầu sẽ rất lớn do phải mở và đóng nhiều lần các kết nối TCP Giải pháp cho vấn đề này là tái sử dụng một kết nối TCP đã mở để gửi và nhận nhiều yêu cầu/ứng dụng tiếp theo trước khi đóng kết nối lại, được gọi là HTTP persistent connection (kết nối HTTP liên tục) Hiện nay, hầu hết các trình duyệt đều sử dụng kết nối liên tục để giảm độ trễ và cải thiện hiệu suất tải trang.

Trong kết nối HTTP duy trì, các yêu cầu có thể được gửi đồng bộ hoặc không đồng bộ Gửi đồng bộ có nghĩa trình duyệt phải đợi phản hồi của yêu cầu trước mới gửi yêu cầu tiếp theo; còn gửi không đồng bộ cho phép gửi nhiều yêu cầu liên tiếp mà không cần đợi phản hồi, được gọi là dẫn ống (pipelining) Dẫn ống làm tăng hiệu suất truyền thông và hiệu năng sử dụng, tuy nhiên với kết nối liên tục, cơ chế này hầu như không được trình duyệt hỗ trợ đầy đủ hoặc bị vô hiệu hóa theo mặc định Nguyên nhân là những lo ngại về việc dẫn ống chưa được hỗ trợ đầy đủ bởi các máy chủ và phần mềm trung gian, khiến pipelining gặp khó khăn trong triển khai thực tế.

KIỂU MINE

Ngoài HTML, JavaScript và CSS, ứng dụng web có thể trả về cho trình duyệt các tài nguyên được tham chiếu dưới dạng loại nội dung (content type), hay MIME type, để trình duyệt chọn ứng dụng xử lý phù hợp Ứng dụng xử lý có thể được tích hợp sẵn trong trình duyệt hoặc chạy bên ngoài trình duyệt Ví dụ, trình xem ảnh có thể được tích hợp sẵn trong hầu hết trình duyệt, trong khi các ứng dụng phát âm thanh hoặc video thường chỉ có ở một số trình duyệt hiện đại; nếu trình duyệt nhận một luồng audio/video nhưng không có ứng dụng phát phù hợp, nó sẽ tải dữ liệu đa phương tiện xuống và gọi trình phát có trên máy tính để thực hiện phát Một số MIME type phổ biến và quan trọng cho ứng dụng web gồm text/html, text/javascript, text/css, image/gif, image/jpeg, image/png, audio/mp3, video/mp4, text/xml, application/json và text/plain Thường thì các kiểu nội dung này có thể được phục vụ, nhưng máy chủ web có thể từ chối phục vụ một kiểu nội dung nhất định và đồng thời có thể cấu hình danh sách các kiểu nội dung mà nó phục vụ.

WEB TĨNH VÀ WEB ĐỘNG

Một trang web tĩnh là một trang có nội dung không thay đổi và được trả về như nhau cho mọi yêu cầu Nói một cách khác, mọi trình duyệt ghé thăm trang web tĩnh ở bất kỳ thời điểm nào sẽ nhận được cùng một nội dung, bất kể thiết bị, vị trí hay thời gian truy cập Điều này giúp tối ưu tốc độ tải trang và đơn giản hóa quản lý nội dung, từ đó cải thiện hiệu suất và SEO nhờ tính nhất quán của nội dung.

3 MINE (Multipurpose Internet Mail Extensions) l| một chuẩn Internet

4 Danh s{ch đầy đủ c{c kiểu MINE đƣợc IANA công bố tại https://www.iana.org/assignments/media- types/media-types.xhtml

Trang web tĩnh được xây dựng từ nguồn lưu trữ bền vững (tệp, cơ sở dữ liệu), nơi lưu sẵn mã nguồn HTML, JavaScript và CSS; khi nhận được yêu cầu, ứng dụng web chỉ cần đọc nội dung từ nguồn lưu trữ và trả về nội dung đã lưu cho khách hàng thông qua HTTP Ngược lại, trang web động là trang có nội dung có thể thay đổi theo từng yêu cầu, ví dụ theo thời điểm yêu cầu, tiêu đề hoặc tham số khác nhau, nên nội dung trả về có thể khác nhau; do đó, trang web động tạo nội dung HTML, JavaScript và CSS khi có yêu cầu (on-demand) Trang web động thường được xây dựng bằng các kịch bản viết bằng các ngôn ngữ lập trình đa năng như PHP, Perl, Python, Java, C#, và khi được yêu cầu, các kịch bản này được thông dịch để sinh ra nội dung HTML, JavaScript và CSS Một ứng dụng web có thể kết hợp cả trang web tĩnh và trang web động.

Lưu ý, tính chất động hay tĩnh được dùng để chỉ nội dung được thay đổi hay không thay đổi giữa c{c lần đ{p ứng kh{c nhau Tính chất động hay tĩnh cũng có thể đƣợc hiểu l| nội dung HTML, JavaScript v| CSS đƣợc tạo ra theo yêu cầu (on- demand) hay được chuẩn bị trước (prepared) Ƣu điểm của trang web tĩnh l| đơn giản v| hiệu năng cao Do nội dung có sẵn m| không cần xử lý để có nội dung, ứng dụng web có thể đ{p ứng rất nhanh c{c yêu cầu gọi đến trang web tĩnh Trình phục vụ web có thể nén sẵn c{c trang web tĩnh để tiết kiệm dung lƣợng, thời gian truyền dữ liệu C{c trình kh{ch cũng dễ d|ng lưu đệm c{c trang web tĩnh Tất cả những điều đó góp phần l|m tăng hiệu năng của trang web tĩnh Tuy nhiên, hạn chế của trang web tĩnh l| khó cung cấp c{c chức năng động v| linh hoạt Ngƣợc lại, trang web động cung cấp khả năng tùy biến cao trong cung cấp nội dung v| chức năng nhƣng hạn chế về mặt hiệu năng, phức tạp trong tổ chức C{c ứng dụng web ng|y nay biết tận dụng lợi thế của cả trang web tĩnh v| trang web động bằng c{ch sử dụng c{c bộ tạo web tĩnh (Static site generator) để tạo ra c{c trang web tĩnh từ nội dung động.

WEB PROXY

Ngo|i c{c th|nh phần đã được giới thiệu ở c{c mục trước, một th|nh phần kh{c có thể xuất hiện trong c{c hệ thống web l| web proxy Proxy l| th|nh phần trung gian nằm giữa trình kh{ch v| trình phục vụ v| đƣợc sử dụng với nhiều mục đích kh{c nhau

Ý đồ thứ nhất khi sử dụng web proxy là tăng tốc độ truy cập và giảm chi phí duyệt web Để đạt được mục đích này, proxy được triển khai ngay trong mạng LAN của cơ quan nơi có nhiều người cùng truy cập web Proxy sẽ lưu đệm (cache) mọi trang web mà nó biết, bất kể trang đó được phục vụ từ máy chủ nào Mọi yêu cầu duyệt web xuất phát từ các máy trong cơ quan được chuyển đến proxy Nếu proxy tìm thấy trang web được yêu cầu trong bộ đệm, nó sẽ trả về bản sao lưu trữ cho trình duyệt người dùng Ngược lại, proxy sẽ gửi yêu cầu tới máy chủ gốc, nhận về trang web và đồng thời cập nhật bộ đệm để phục vụ cho các lần truy cập sau.

Forward proxy hoạt động bằng cách nhận yêu cầu từ khách hàng, chuyển tiếp đến máy chủ và trả lại đáp ứng cho người dùng, đồng thời lưu bản sao trang web vừa được tải về vào cache Các yêu cầu sau đó đối với cùng trang sẽ được phục vụ từ cache mà không cần gửi tới máy chủ nữa Nhờ cơ chế này, thời gian đáp ứng được cải thiện rõ rệt và băng thông Internet được tiết kiệm vì nhiều yêu cầu không cần phải ra Internet Các proxy phục vụ mục đích này được gọi là forward proxy, vì nó thực hiện việc chuyển tiếp các yêu cầu khi cần thiết.

Mục đích thứ hai của việc sử dụng proxy web là cân bằng tải và lưu đệm các trang để tăng tốc độ phục vụ và nâng cao độ an toàn khi vận hành hệ thống Với mục đích này, proxy được triển khai ở phía trước các máy chủ web, đại diện cho chúng tiếp nhận và đáp ứng mọi yêu cầu từ trình duyệt của khách hàng Proxy thực hiện cân bằng tải và lưu đệm các trang được phục vụ từ các máy chủ phía sau, giúp giảm thời gian tải trang và tăng khả năng chịu tải của hệ thống Các máy chủ phía sau không được trình duyệt truy cập trực tiếp, từ đó giảm rủi ro tấn công vào lỗ hổng an ninh của máy chủ hoặc hệ điều hành đang chạy Tuy nhiên, proxy không thể giảm rủi ro tấn công vào lỗ hổng bảo mật của chính ứng dụng web; các proxy được sử dụng cho mục đích này được gọi là reverse proxy.

LỊCH SỬ PHÁT TRIỂN WEB

Đầu thập niên 1990, Tim Berners-Lee, làm việc tại CERN, đề xuất một hệ thống quản lý thông tin cho phép chia sẻ tài nguyên thông qua mạng máy tính, hệ thống này sau này được gọi là World Wide Web, với mục tiêu ban đầu là chia sẻ tài liệu và thông tin của nhóm nghiên cứu Những ngày đầu, các trang web chỉ là tĩnh và được viết bằng HTML.

Với sự phát triển của nhu cầu sử dụng, việc xây dựng các trang web động đã trở thành một yêu cầu phổ biến Giải pháp phổ biến là sử dụng ngôn ngữ lập trình để xây dựng ứng dụng web và sinh ra nội dung web động cho người dùng Giao tiếp giữa ứng dụng web và máy chủ web lúc đầu chủ yếu được thực hiện bằng CGI.

Vào năm 1995, Netscape giới thiệu JavaScript, mở đầu cho lập trình web động và tương tác trên trình duyệt Cùng năm đó, Sun Microsystems phát triển công nghệ servlet cho phép thực thi các chương trình Java ở phía máy chủ thay vì chạy dưới dạng applet trên máy khách Servlet cung cấp thư viện đầy đủ để thao tác với giao thức HTTP, mở đường cho các ứng dụng web quy mô lớn, an toàn và dễ mở rộng.

Năm 1996, Macromedia giới thiệu công nghệ Flash, có thể đƣợc thêm v|o trình duyệt nhƣ một plugin để nhúng hình ảnh vào trang web

Cuối những năm 90, hàng loạt công nghệ phát triển ứng dụng web ra đời như JSP, ASP và PHP, mang lại một bước tiến đáng kể cho lĩnh vực phát triển web Những nền tảng lập trình này làm cho việc xây dựng ứng dụng web thuận tiện hơn, cho phép triển khai nhanh chóng, dễ bảo trì và có khả năng mở rộng, đồng thời tối ưu hóa quy trình phát triển và tích hợp với cơ sở dữ liệu Với JSP, ASP và PHP, các nhà phát triển có thể tạo ra các giải pháp web hiện đại hơn, nâng cao hiệu suất và đáp ứng nhu cầu người dùng một cách hiệu quả.

Những năm gần đây chứng kiến sự ra đời và ứng dụng nhiều công nghệ phát triển ứng dụng web, như ASP.NET, Ruby, Python và Go, đồng thời bùng nổ các framework web như Laravel đã định hình cách xây dựng và triển khai các hệ thống web Sự đa dạng công nghệ cho phép các nhà phát triển lựa chọn công cụ phù hợp với mục tiêu về hiệu suất, bảo mật và tốc độ phát triển, từ các dự án nhỏ đến các hệ thống quy mô doanh nghiệp Các framework phổ biến giúp tối ưu hóa quy trình phát triển, tăng khả năng mở rộng và bảo trì, đồng thời đẩy nhanh thời gian ra mắt sản phẩm trên thị trường.

Web development today is driven by frameworks such as Symfony, Rails, ASP.NET MVC, Django, Node.js, AngularJS, Ember, jQuery, and Bootstrap, which enable rapid, scalable applications At the same time, developers are embracing new development models like MVC (Model-View-Controller), SPA (Single Page Applications), and the Thick Client – Thin Server pattern, signaling a shift toward more dynamic, client-centric architectures.

1 Hãy x{c định c{c th|nh phần trong URL sau: http://vnu.edu.vn:81/daotao/monhoc.php?mamon&hanhdong=xem#mota

2 Sử dụng trình duyệt Firefox để truy cập trang web tại địa chỉ http://vnu.edu.vn Đồng thời, sử dụng công cụ Network Monitor đƣợc tích hợp sẵn trong Firefox để xem nội dung c{c yêu cầu v| đ{p ứng HTTP đã đƣợc trình duyệt gửi v| nhận Trang web có bao nhiêu tài nguyên? Tên tệp và kiểu MINE của ba tài nguyên đƣợc trả về trong ba đ{p ứng HTTP đầu tiên lần lƣợt là gì?

3 C|i đặt trình phục vụ web Nginx và sử dụng cấu hình mặc định của nó Thƣ mục n|o l| thƣ mục gốc của ứng dụng web? Những t|i nguyên n|o l| t|i nguyên mặc định của ứng dụng? Sử dụng trình duyệt để duyệt trang web mặc định đƣợc tạo cùng c|i đặt Nginx Đọc thêm

1 R Fielding et al., "RFC 2616: Hypertext Transfer Protocol HTTP/1.1", The Internet Society, 1999

2 David Gourley and Brian Totty, "HTTP: The Definative Guide", O’Reilly Media, 2002

3 Stephen Ludin and Javier Garza, "Learning HTTP/2: A Practical Guide for Beginners", O'Reilly Media, 2017

XÂY DỰNG TRANG WEB BẰNG HTML

MÃ NGUỒN TRANG WEB, ĐỐI TƢỢNG TÀI LIỆU

Trong lập trình, một trang web được xem như một kịch bản chứa mã nguồn viết bằng HTML, CSS và JavaScript Máy chủ có nhiệm vụ tạo và cung cấp mã nguồn cho trình khách, trong khi trình duyệt của người dùng thông dịch mã nguồn và hiển thị kết quả trên giao diện người dùng Bản chất của trình duyệt web là một trình thông dịch, có chức năng diễn dịch mã nguồn trang web và trình diễn nội dung một cách trực quan Hiểu rõ vai trò của máy chủ, trình khách và trình duyệt giúp tối ưu hóa cấu trúc, hiệu suất và trải nghiệm người dùng của trang web.

Có một câu hỏi tự nhiên là tại sao lại phải dùng cả ba ngôn ngữ lập trình HTML, CSS và JavaScript để tạo mã nguồn trang web thay vì chỉ một ngôn ngữ Lý do là trang web gồm các đối tượng/tài liệu (document objects/elements) được HTML khai báo, CSS đảm nhận việc định kiểu trình diễn trên giao diện, còn JavaScript quản lý và tương tác với các đối tượng đó HTML cho phép khai báo tĩnh và khởi tạo các đối tượng khi trang vừa tải về, trong khi JavaScript cho phép quản lý và khai báo động các đối tượng bất cứ khi nào Mặc dù HTML có thể được dùng để định kiểu cho một số trường hợp, nguyên tắc tách biệt nội dung với trình diễn trong kỹ thuật phần mềm khiến các nhà phát triển web ngày nay ưa chuộng CSS cho mục đích trình diễn và styling, nhằm tối ưu hóa khả năng bảo trì và hiệu suất của trang web.

THẺ

HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu được dùng để khai báo các đối tượng của tài liệu, không chỉ nhằm mục đích định dạng văn bản Các thẻ HTML thực sự là những câu lệnh khai báo, và mỗi đối tượng tài liệu được khai báo bằng một thẻ HTML Thẻ đóng vai trò như một constructor trong các ngôn ngữ lập trình hướng đối tượng; khi gặp thẻ, đối tượng tài liệu sẽ được tạo Thẻ cũng cho phép gán giá trị ban đầu cho các thuộc tính của đối tượng Cú pháp khai báo đối tượng tài liệu sử dụng thẻ HTML như sau:

hoặc

5 Có thể dùng VBScript, JScript, < thay cho JavaScript, nhƣng các ngôn ngữ này không phổ biến

Thẻ bắt đầu với dấu nhọn mở () Về cú pháp, thẻ được chia thành thẻ đơn và thẻ đôi; thẻ đôi là cặp thẻ gồm thẻ mở và thẻ đóng, thẻ đóng có cùng tên với thẻ mở và thêm ký tự dấu gạch chéo (/) ngay sau dấu nhọn mở Thẻ đơn là thẻ chỉ có thẻ mở và không có thẻ đóng Để đảm bảo tính nhất quán trong cú pháp, một vài phiên bản HTML như XHTML yêu cầu ký tự gạch chéo được đặt ở cuối thẻ đơn trước dấu đóng (>), cho phép thẻ đơn vừa là thẻ mở vừa là thẻ đóng Thông thường tên thẻ là một từ hoặc viết tắt của một từ trong tiếng Anh, ví dụ form, img, div, và tên thẻ không phân biệt chữ hoa chữ thường.

FORM và form như nhau Thuộc tính được khai báo trong thẻ mở của thẻ HTML Thứ tự liệt kê các thuộc tính không quan trọng và không ảnh hưởng đến kết quả của câu lệnh khai báo Giá trị thuộc tính được đặt giữa hai dấu nháy đơn (') hoặc hai dấu nháy kép (") Có thể không cần sử dụng dấu nháy nếu giá trị là số hoặc chuỗi ký tự không có dấu trắng Nếu một thuộc tính không được liệt kê trong thẻ, giá trị của nó sẽ được đặt mặc định Theo nghĩa này, mỗi thẻ HTML chính là một hàm tạo với nhiều giá trị mặc định.

Trong HTML, một đối tượng được khai báo bằng thẻ đôi có thể chứa các đối tượng khác ở bên trong Đối tượng nằm ở bên ngoài được gọi là đối tượng cha (parent element), còn đối tượng ở bên trong được gọi là đối tượng con (child element) Ví dụ, ba thẻ , và có thể được xếp vào một cấu trúc nested, nơi thẻ cha bao bọc các thẻ con để tạo thành cây phần tử hợp lý. -**Support Pollinations.AI:**🌸 **Quảng cáo** 🌸 Dành cho bạn đang học về thẻ HTML cha-con: [Ủng hộ Pollinations.AI](https://pollinations.ai/redirect/kofi) để tiếp tục nhận trợ giúp AI miễn phí!

4

Một đối tượng con có thể chứa các đối tượng con của nó, hình thành một cấu trúc phân cấp rõ ràng Tương tự, các đối tượng tài liệu được khai báo bằng HTML có quan hệ với nhau theo một cấu trúc cây, nơi mỗi phần tử liên kết với cha và con của nó để tạo nên mối quan hệ cha-con trên trang web và đảm bảo sự nhất quán của tài liệu.

HTML chỉ có thể khai báo các thẻ và các đối tượng tài liệu, và không thể quản lý chúng bằng cách thay đổi thuộc tính, gọi phương thức hay loại bỏ chúng Hầu hết các đối tượng tài liệu thuộc các lớp dựng sẵn (built-in) và được gọi là các phần tử chuẩn (standard elements) Việc khai báo các đối tượng chuẩn bằng HTML sẽ được trình bày ở các phần dưới đây Định nghĩa lớp đối tượng tài liệu mới, hay lớp đối tượng tùy biến (custom element), là nội dung dành cho tự học và không được trình bày trong giáo trình này.

CHÚ THÍCH

Chú thích trong HTML đƣợc viết nhƣ sau Nội dung chú thích đƣợc đặt giữa

CẤU TRÚC TÀI LIỆU HTML

Toàn bộ tài liệu HTML được đại diện bởi thẻ , có đúng hai đối tượng con theo thứ tự là và ; chứa các siêu dữ liệu (metadata) của trang, còn chứa nội dung hiển thị của trang web Chỉ các đối tượng nằm trong mới được trình duyệt hiển thị trên giao diện người dùng. -**Support Pollinations.AI:**🌸 **Quảng cáo** 🌸 Tối ưu hóa SEO nội dung HTML dễ dàng với Pollinations.AI free text APIs—[hỗ trợ sứ mệnh của chúng tôi](https://pollinations.ai/redirect/kofi) để giữ cho AI luôn miễn phí!

4

7

DOCTYPE

DOCTYPE không phải là một thẻ mà là một chỉ dẫn (declaration) được đặt ở đầu tài liệu HTML, trước mọi thẻ khai báo đối tượng Chỉ dẫn này cho trình duyệt biết phiên bản HTML được sử dụng, từ đó giúp trang web hiển thị đúng Với các phiên bản HTML trước HTML5, DOCTYPE tham chiếu tới DTD (Document Type Definition); với HTML5, DOCTYPE không cần tham chiếu tới DTD Ví dụ khai báo DOCTYPE cho HTML5 và HTML 4.01 Strict lần lượt như sau:

//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

TIÊU ĐỀ TRANG

Thẻ được dùng để khai báo tiêu đề cho toàn bộ tài liệu HTML Mỗi trang HTML chỉ có một thẻ , và thẻ này phải nằm trong phần của tài liệu Tiêu đề hiển thị trên tab trình duyệt và là yếu tố SEO quan trọng giúp người dùng và công cụ tìm kiếm hiểu nội dung trang; vì vậy nên ngắn gọn, chứa từ khóa liên quan, phản ánh đúng chủ đề và đồng bộ với nội dung bài viết cũng như thương hiệu nếu có.

Khai b{o đối tƣợng nhƣ sau:

1 Nội dung tiêu đề

Tiêu đề sẽ đƣợc hiển thị trên thanh tiêu đề hoặc tab của trình duyệt khi tài liệu HTML đƣợc tải

WebAppDev Lê Đ ình Thanh, Nguy ễ n Vi ệ t Anh

THÔNG TIN VỀ TRANG

Thẻ meta là loại metadata của tài liệu HTML, không hiển thị trực tiếp trên giao diện người dùng nhưng có tác dụng hướng dẫn trình duyệt và các dịch vụ web trong quá trình phân tích, diễn giải và trình diễn nội dung Ví dụ, thẻ meta charset với khai báo cho phép trình duyệt giải mã văn bản theo bảng mã UTF-8 Ngoài ra, thẻ meta còn được các công cụ tìm kiếm và dịch vụ web sử dụng để tối ưu hóa việc lập chỉ mục và xử lý dữ liệu trên trang.

Ngoại trừ charset có ý nghĩa nhƣ đã đƣợc mô tả ở trên, c{c đối tƣợng

Thẻ meta được phân biệt dựa trên hai thuộc tính name và http-equiv, hai thuộc tính này không được sử dụng đồng thời cho cùng một thẻ Giá trị của thuộc tính name hoặc http-equiv cho biết tác dụng và ý nghĩa của thẻ meta, trong khi nội dung của thẻ meta được xác định bởi thuộc tính content Việc hiểu đúng cách khai báo thẻ meta giúp tối ưu hóa cách hiển thị trang và cách các công cụ tìm kiếm diễn giải nội dung.

Thẻ meta có hai kiểu chính: thẻ meta theo name và thẻ meta theo http-equiv Thẻ meta theo name chứa thông tin mô tả nội dung của trang, giúp các công cụ tìm kiếm và trình duyệt hiểu rõ ngữ cảnh và chủ đề của trang, từ đó cải thiện SEO và khả năng hiển thị Thẻ meta theo http-equiv được dùng để thiết lập các tiêu đề HTTP và các tham số giao tiếp giữa máy chủ và trình duyệt, ảnh hưởng đến cách trình duyệt xử lý nội dung và các phản hồi từ máy chủ Những thẻ meta thường gặp và hữu ích nhất sẽ được liệt kê và mô tả chi tiết trong ví dụ dưới đây.

2

4

6

7

8

9

10

11

12

C{c đối tƣợng phải nằm trong đối tƣợng Có thể có nhiều đối tƣợng

trong cùng một tài liệu HTML.

LIÊN KẾT TÀI NGUYÊN

Thẻ được dùng để liên kết tài liệu hiện thời với các tài nguyên khác được tham chiếu, được gọi là nguồn được tham chiếu Mối quan hệ giữa tài liệu hiện thời và nguồn được tham chiếu được xác định bằng thuộc tính rel trên thẻ liên kết.

Quan hệ giữa tài liệu hiện tại và các tài nguyên tham chiếu phụ thuộc vào loại quan hệ; một tài nguyên có thể là bản sao khác của tài liệu hiện tại (alternate), cung cấp ngữ cảnh cho tài liệu hiện tại (up), hoặc là stylesheet (tài nguyên CSS sẽ được nhúng vào trang hiện thời) URL của tài nguyên tham chiếu được xác định bằng thuộc tính href; các thuộc tính khác như type cho biết MIME type của tài nguyên và hreflang cho biết ngôn ngữ/khu vực liên quan Những quan hệ này giúp trình duyệt xử lý và kết hợp nội dung hiệu quả, đồng thời hỗ trợ tối ưu hóa SEO bằng cách làm rõ nguồn gốc, định dạng và ngôn ngữ của tài nguyên được tham chiếu.

20 cho biết ngôn ngữ của văn bản trong t|i nguyên được tham chiếu Dưới đ}y l| một vài ví dụ sử dụng c{c đối tƣợng

1

2

C{c đối tƣợng phải nằm trong đối tƣợng Có thể có nhiều đối tƣợng

trong cùng một tài liệu HTML.

KỊCH BẢN

Đối tượng được dùng để nhúng hoặc định nghĩa kịch bản phía trình duyệt Nó có thể trực tiếp chứa các câu lệnh kịch bản hoặc tham chiếu đến một tệp kịch bản bên ngoài Thuộc tính src (source) được dùng để tham chiếu đến tệp kịch bản Nếu thẻ tham chiếu đến một tệp kịch bản, nội dung bên trong thẻ phải để trống.

Có thể sử dụng thuộc tính type để cho biết kiểu MINE (giá trị mặc định là

Thuộc tính charset của thẻ cho biết bảng mã được sử dụng cho tệp kịch bản, giúp trình duyệt xử lý ký tự đúng cách Nếu charset không được chỉ định, tệp kịch bản được hiểu là dùng cùng bảng mã với tài liệu HTML, đảm bảo đồng bộ ký tự giữa mã nguồn và trang web Dưới đây là một vài ví dụ về cách khai báo đối tượng để áp dụng charset và nhúng JavaScript vào trang web.

1

4 n.innerHTML = "Một bài viết đã được xóa.";

Trong HTML, thẻ script có thể được đặt cả trong thẻ head lẫn trong body của tài liệu Có thể có nhiều thẻ script trong cùng một tài liệu HTML để nhúng các đoạn mã JavaScript khác nhau Việc sử dụng JavaScript sẽ được trình bày chi tiết trong Chương 4.

KIỂU TRÌNH DIỄN

Đối tượng được sử dụng để định nghĩa c{c bảng định dạng CSS Dưới đ}y l| ví dụ khai b{o đối tƣợng

Trong tài liệu HTML, các thẻ được đặt trong thẻ , và một tài liệu HTML có thể chứa nhiều thẻ khác nhau Việc sử dụng CSS sẽ được trình bày chi tiết ở Chương 3.

NỘI DUNG VĂN BẢN

Phần thân (body) của trang web chứa nội dung chính và chiếm tỷ lệ lớn trong mọi tài liệu HTML Phần này mô tả các đối tượng nội dung thuộc phần thân của tài liệu HTML và cách chúng được tổ chức để người dùng có thể tiếp cận thông tin một cách trực quan Việc xác định đúng các đối tượng nội dung trong thân giúp cải thiện cấu trúc trang, tăng khả năng hiển thị trên công cụ tìm kiếm và mang lại trải nghiệm người dùng tốt hơn.

2.11.1 Đầu mục Đầu mục (heading) văn bản đƣợc khai báo bằng c{c đối tƣợng - là đầu mục lớn nhất là đầu mục nhỏ nhất Ví dụ sau là khai báo và hiển thị năm đầu mục từ lớn đến nhỏ

2

Khai báo tài liệu HTML

4 Khai báo và trình bày văn bản

Trong HTML, văn bản được xem như một đối tượng đặc biệt vì nó không có thẻ khai báo riêng cho nó; các ký tự nằm giữa hai thẻ mở và đóng tạo thành nội dung văn bản hiển thị trên trang Ví dụ, trong đoạn mã Nội dung web, chữ 'Nội dung web' là đối tượng văn bản nằm bên trong thẻ h1 và sẽ được hiển thị như tiêu đề trang Hiểu cách văn bản được nhúng trong các thẻ HTML giúp tối ưu hóa nội dung cho công cụ tìm kiếm và cải thiện cấu trúc, khả năng đọc hiểu và SEO của trang.

Đoạn mã ngắn được giới thiệu khai báo năm đối tượng, trong đó có ba đối tượng văn bản: một đối tượng là thẻ h1, một đối tượng là thẻ h2, và một đối tượng văn bản nằm trong thẻ h1 có nội dung "Nội dung web" Cấu trúc này cho thấy cách bố trí tiêu đề và nội dung trong HTML nhằm xác định thứ tự ưu tiên trên trang và tối ưu hóa SEO bằng cách làm rõ các yếu tố nội dung trọng tâm cho máy tìm kiếm.

có nội dung l| ‚Khai b{o t|i liệu HTML‛, và một đối tƣợng văn bản nằm giữa và

có nội dung l| ‚ ‚ (ba dấu cách)

1 Nội dung web

Khai báo tài liệu HTML

Trong quá trình trình diễn các đối tượng văn bản, theo mặc định các từ—là các chuỗi ký tự liên tiếp không có dấu cách hay dấu xuống dòng—được hiển thị từ trái sang phải và từ trên xuống dưới, với các từ ở cùng một dòng được phân cách bằng một khoảng trắng.

2.11.3 Trích dẫn Đối tƣợng đƣợc sử dụng để chỉ tên công trình đƣợc trích dẫn Nếu cần thể hiện nội dung đƣợc trích dẫn, c{c đối tƣợng và có thể đƣợc sử dụng đƣợc dùng nếu nội dung trích dẫn ngắn Ngƣợc lại, đƣợc dùng để trích dẫn cả đoạn có nội dung dài Có thể chỉ định nguồn trích dẫn bằng việc gán URL cho thuộc tính cite của và Ví dụ khai báo một số trích dẫn nhƣ sau

1 Tác phẩm The Scream được Edward Munch vẽ năm 1893

2 Phương châm của jQuery là Write less, do more

3 The Hypertext

Transfer Protocol (HTTP) is a stateless application-level protocol for distributed, collaborative, hypertext information systems

2.11.4.Đoạn văn Đối tƣợng

(paragraph) đƣợc sử dụng để tạo c{c đoạn văn Theo mặc định,

Được hiển thị theo khối, với chiều rộng bằng chiều rộng của vùng hiển thị Dòng đầu tiên của văn bản trong thẻ

được giãn dòng rộng hơn so với các dòng còn lại, nhưng không có lùi dòng ở đầu Ví dụ sau minh họa cách khai báo đối tượng thẻ

.

Cây tre từ lâu đã trở thành biểu tượng đẹp đẽ của sức sống và phẩm cách con người Việt Nam Nhà thơ Nguyễn Duy khẳng định điều này bằng những hình ảnh giàu ý nghĩa và cách nói dí dỏm, phù hợp với sự tiếp nhận của cả bạn đọc nhỏ tuổi.

2.11.5 Bài viết Đối tƣợng đƣợc sử dụng để định nghĩa một nội dung độc lập, nghĩa l| nội dung có thể đứng một mình, không cần một ngữ cảnh khác, mà vẫn giữ nguyên đầy đủ ý nghĩa B|i viết trên diễn dàn, bản tin, bài báo là những ví dụ về nội dung độc lập Ví dụ khai b{o đối tƣợng nhƣ sau

2 Thông báo tuyển sinh đại học năm 2017

3

Năm 2017, Trường Đại học Công nghệ tuyển sinh 5000 chỉ tiêu đại học và hơn 1000 chỉ tiêu sau đại học

Một bài viết có thể được chia thành nhiều phần khác nhau; thẻ được dùng để thực hiện việc này, vì nội dung trong mỗi section có quan hệ ngữ nghĩa với nhau và tạo thành một luồng ý tưởng có chủ đề liên quan Ví dụ, chương, bài và mục trong bài viết thường được thể hiện bằng các , giúp tổ chức nội dung một cách có cấu trúc và tối ưu hóa SEO nhờ sự phân chia rõ ràng và liên kết logic giữa các phần.

3

Một tài liệu HTML có thể được chia thành nhiều phân đoạn.

2.11.7 Ngắt chủ đề Đối tƣợng (horizontal rule) đƣợc sử dụng để ngắt chủ đề Nếu trang web có nhiều nội dung với các chủ đề khác nhau, giữa hai nội dung thuộc hai chủ đề kh{c nhau l| điểm thích hợp để đặt Theo mặc định, các trình duyệt sẽ trình diễn như một đường kẻ ngang Ví dụ sử dụng như sau

2

HTML dùng để khai báo các đối tượng tài liệu

5

CSS định kiểu trình diễn các đối tượng tài liệu

Mỗi ký tự trong HTML có thể tự biểu diễn chính nó hoặc được biểu diễn bằng một chuỗi ký tự khác Chuỗi ký tự biểu diễn một ký tự được gọi là tham chiếu ký tự Tham chiếu ký tự thường được dùng để biểu diễn các ký tự dành riêng (ví dụ <) hoặc các ký tự nằm ngoài bảng mã ASCII (ví dụ β).

Có hai cách tham chiếu ký tự là theo tên hoặc theo số Tham chiếu ký tự theo tên có dạng &name;, trong đó name là tên hoặc viết tắt của ký tự Ví dụ, các ký tự < (less-than) và β (beta) được biểu diễn là < và β HTML định nghĩa 252 tham chiếu ký tự theo tên Nhiều ký tự không có tham chiếu theo tên.

Ký tự tham chiếu theo số có dạng &#dddd; hoặc &#xhhhh; cho biết mã ký tự ở hệ thập phân và hệ thập lục phân tương ứng Ví dụ, ký tự < được biểu diễn là < hoặc <, ký tự β được biểu diễn là β hoặc β Các tham chiếu ký tự này thường gặp trong HTML và XML, cho phép biểu diễn ký tự đặc biệt mà không cần nhập trực tiếp ký tự đó vào tài liệu.

β Khác với tham chiếu theo tên, tham chiếu theo số có cho mọi ký tự

2.11.9.Sử dụng bảng mã Để các ký tự đƣợc hiển thị đúng trên giao diện của trình duyệt, tài liệu HTML cần cho trình duyệt biết bảng mã (còn gọi là tập ký tự hay charset) n|o đƣợc sử dụng cho trang web Có thể sử dụng một trong hai sau đ}y để chỉ định bảng mã đƣợc dùng:

1 hoặc

1

Bảng mã đƣợc khuyến cáo sử dụng cho các trang web là UTF-8 vì với bảng mã này có thể thể hiện trang web ở bất kỳ ngôn ngữ nào.

SIÊU LIÊN KẾT, ĐIỂM ĐÁNH DẤU

Đối tượng thẻ (anchor) định nghĩa siêu liên kết, dùng để liên kết hay tham chiếu từ tài liệu hiện tại tới tài nguyên khác Thuộc tính quan trọng nhất của thẻ này là href, chứa URL của tài nguyên được tham chiếu Thẻ còn có các thuộc tính bổ sung như rel, type và hreflang, tương tự thẻ , giúp mô tả mối quan hệ giữa các tài nguyên và định dạng nội dung liên kết Một thuộc tính khác là target, cho biết nơi mở tài nguyên được tham chiếu; các giá trị phổ biến gồm _blank mở ở cửa sổ hoặc tab mới, _self mở trong cùng cửa sổ, và các giá trị như _parent, _top Việc tối ưu href và các thuộc tính liên quan cùng với văn bản liên kết (anchor text) phù hợp sẽ hỗ trợ SEO và cải thiện trải nghiệm người dùng.

_self (mặc định, mở t|i nguyên đƣợc tham chiếu trong cùng khung hiện thời),

6 https://www.w3.org/TR/html4/sgml/entities.html

_parent (mở t|i nguyên được tham chiếu ở khung cha) < Dưới đ}y l| một vài ví dụ khai b{o đối tƣợng

1 Website Đại học Quốc gia Hà Nội

2 Chuyển đến mục Cơ cấu tổ chức

3 Trang tuyển sinh

4 Tải biểu mẫu

Đối tượng trên trang web có thể tham chiếu đến điểm đánh dấu (bookmark), cho phép người dùng nhảy tới một phần cụ thể của trang Với các trang dài, các điểm đánh dấu hữu ích để cải thiện điều hướng và trải nghiệm người dùng Để sử dụng điểm đánh dấu, trước tiên hãy tạo điểm đánh dấu bằng cách gán định danh (id) cho phần tử được đánh dấu, ví dụ id='section-1', và sau đó liên kết tới nó bằng liên kết nội bộ (href='#section-1') Việc tổ chức điểm đánh dấu hợp lý giúp nội dung rõ ràng hơn và hỗ trợ SEO bằng cách cấu trúc trang một cách có hệ thống.

1

Công bố khoa học

Tiếp đó, tạo liên kết đến điểm đ{nh dấu, ví dụ

1 Xem công bố khoa học

Khi người dùng nhấp vào liên kết chứa điểm đánh dấu (anchor), trình duyệt sẽ tự động cuộn đến vị trí của điểm đánh dấu trên cùng một trang Liên kết có thể đưa người dùng tới điểm đánh dấu ở một trang khác (ví dụ href="page.html#section"), và sau khi trang đích tải xong, trình duyệt sẽ cuộn tới vị trí tương ứng trên trang đó. -**Support Pollinations.AI:**🌸 **Quảng cáo** 🌸Khám phá miễn phí các API văn bản từ Pollinations.AI và [ủng hộ sứ mệnh](https://pollinations.ai/redirect/kofi) mang trí tuệ nhân tạo tới mọi người!

1 Đề tài khoa học

DANH SÁCH, BẢNG BIỂU

2.13.1 Danh sách có thứ tự Đối tƣợng

(ordered list) đƣợc sử dụng để tạo danh sách có thứ tự Nó là đối tƣợng chứa (container), chứa c{c đối tƣợng

(list item), hay các mục trong danh sách Mặc định, các mục sẽ đƣợc đ{nh thứ tự tăng dần theo số nguyên bắt đầu từ 1 Có thể chỉ định đ{nh thứ tự các mục theo số nguyên/chữ cái in hoa/chữ c{i in thường/số La Mã in hoa/số La Mã in thường bằng c{ch đặt giá trị thuộc tính type của

6

2.13.2 Danh sách không có thứ tự Đối tƣợng

, hay các mục trong danh sách Ví dụ sau là khai báo một danh sách không có thứ tự
2.13.3 Danh sách mô tả Đối tƣợng (description list) đƣợc sử dụng để tạo danh sách các thuật ngữ cùng với mô tả của thuật ngữ Nó l| đối tƣợng chứa, chứa c{c đối tƣợng hay là thuật ngữ và hay là mô tả cho thuật ngữ Ví dụ sau là khai báo một danh sách mô tả
3 World Wide Web
5 Hypertext Markup Language
2.13.4 Bảng biểu Để trình bày dữ liệu theo dạng bảng trên web, đối tƣợng đƣợc sử dụng Bản thân l| đối tƣợng chứa Dữ liệu trong bảng đƣợc chứa trong c{c đối tƣợng (table header) và (table data), trong đó c{c đối tƣợng và đƣợc nhóm theo hàng bằng đối tƣợng (table row) Ở dạng đơn giản nhất,
Bảng HTML chỉ chứa các thẻ tr (hàng) và td ( ô dữ liệu); có thể thêm ô tiêu đề bằng th (thẻ th) vào bảng Theo cách trình bày thông thường, các ô tiêu đề thường xuất hiện ở dòng đầu tiên hoặc ở cột đầu bảng Lưu ý, số ô trong các hàng không nhất thiết phải bằng nhau; một hàng có thể có nhiều ô hơn hàng khác Có thể ghép nhóm các hàng của bảng thành ba phần: đầu bảng, thân bảng và chân bảng.
, , đƣợc sử dụng cho mục đích n|y Nếu có mặt đồng thời, chúng phải xuất hiện theo thứ tự liệt kê trên Trình duyệt có thể sử dụng c{c đối tƣợng n|y để cuộn nội dung thân bảng độc lập với đầu và chân bảng Hơn nữa, khi in bảng lớn trải nhiều trên nhiều trang, c{c đối tƣợng n|y cho phép đầu và chân bảng đƣợc in lặp lại trên tất cả các trang Ví dụ sau khai báo bảng có cả ba phần l| đầu, chân và thân bảng
Cũng có thể nhóm gộp các cột của bảng bằng đối tƣợng Nhóm gộp các cột thường được sử dụng để áp dụng kiểu trình diễn cho tất cả các ô trong một hoặc nhiều cột thay vì phải chỉ định cho từng ô Đối tƣợng có thuộc tính span đƣợc sử dụng để chỉ định số lƣợng cột đƣợc gộp nhóm Nếu có mặt,
Trong bảng HTML, thẻ colgroup phải xuất hiện trước các đối tượng như thead, tbody, tfoot và tr để tạo nhóm cột; có thể khai báo nhiều colgroup trong một bảng để tổ chức các cột thành các nhóm riêng biệt Khi cần chỉ định những cột cụ thể trong một nhóm cột, thẻ col có thể được khai báo bên trong colgroup để đạt được mục đích này, và thẻ col cũng có thuộc tính span cho phép một col đại diện cho nhiều cột Ví dụ, sử dụng hai thẻ colgroup: thẻ colgroup đầu tiên nhóm hai cột đầu tiên, trong khi thẻ colgroup thứ hai dùng các thẻ col để gộp ba cột còn lại của bảng.
2 Danh sách nhân viên
3
5
WebAppDev Lê Đ ình Thanh, Nguy ễ n Vi ệ t Anh
20 vinh@example.com
Mặt khác, có thể thêm chú thích bảng sử dụng đối tƣợng Chú thích bảng, nếu có mặt, phải trước tất cả c{c đối tượng khác trong bảng
Trong bảng HTML, mỗi ô, bao gồm thẻ td và thẻ th, có thể trải dài trên nhiều hàng hoặc nhiều cột nhờ thuộc tính colspan và rowspan Khi một ô được trải trên nhiều cột, các ô còn lại trong cùng một hàng sẽ bị đẩy sang bên phải khi hiển thị, khiến một số ô ở cuối hàng xuất hiện trên các cột mới ở bên phải bảng Để bảng không bị lệch bố cục, cần điều chỉnh nội dung các ô ở hàng bị lệch và loại bỏ các ô ở cuối hàng sẽ hiển thị trên cột mới Ví dụ bảng sau có một ô được trải trên hai cột ở hàng đầu tiên, và hàng đầu tiên có ít ô hơn so với các hàng còn lại.
3 Họ và Tên
Cũng tương tự, khi một ô được trải trên nhiều hàng, các ô ở các hàng bị chiếm chỗ sẽ bị đẩy sang bên phải một ô khi hiển thị Để bảng hiển thị không bị lệch, cần điều chỉnh nội dung các ô ở hàng bị xô lệch và đồng thời loại bỏ các ô ở cuối hàng đang được hiển thị trên cột mới.
NỘI DUNG NHÚNG
2.14.1.Đối tƣợng nhúng Đối tƣợng đƣợc sử dụng để nhúng một nội dung bên ngoài vào tài liệu HTML Nó biểu diễn một nội dung bên ngoài nói chung, có thể là hình ảnh, âm thanh, phim, Java applets, ActiveX, PDF, Flash,

Tiêu đề	Giáo trình Phát triển ứng dụng web
Tác giả	Lê Đình Thanh, Nguyễn Việt Anh
Trường học	Đại Học Quốc Gia Hà Nội
Chuyên ngành	Phát triển ứng dụng web
Thể loại	Giáo trình
Năm xuất bản	2018
Thành phố	Hà Nội

Định dạng
Số trang	226
Dung lượng	2,74 MB

Giáo trình phát triển ứng dụng web

KIẾN TRÚC ỨNG DỤNG WEB

ỨNG DỤNG WEB CÙNG CÁC THÀNH PHẦN LIÊN QUAN

TRÌNH KHÁCH WEB

TRÌNH PHỤC VỤ WEB

TRÌNH PHỤC VỤ ỨNG DỤNG

HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU

KHUNG NHÌN CHUNG

ĐỊNH DANH ỨNG DỤNG WEB

ĐỊNH VỊ TÀI NGUYÊN WEB

HTTP

KIỂU MINE

WEB TĨNH VÀ WEB ĐỘNG

WEB PROXY

LỊCH SỬ PHÁT TRIỂN WEB

XÂY DỰNG TRANG WEB BẰNG HTML

MÃ NGUỒN TRANG WEB, ĐỐI TƢỢNG TÀI LIỆU

THẺ

CHÚ THÍCH

CẤU TRÚC TÀI LIỆU HTML

DOCTYPE

TIÊU ĐỀ TRANG

THÔNG TIN VỀ TRANG

LIÊN KẾT TÀI NGUYÊN

KỊCH BẢN

KIỂU TRÌNH DIỄN

NỘI DUNG VĂN BẢN

Khai báo tài liệu HTML

có nội dung l| ‚Khai b{o t|i liệu HTML‛, và một đối tƣợng văn bản nằm giữa và

có nội dung l| ‚ ‚ (ba dấu cách) 1 Nội dung web

Khai báo tài liệu HTML

SIÊU LIÊN KẾT, ĐIỂM ĐÁNH DẤU

Công bố khoa học

DANH SÁCH, BẢNG BIỂU

NỘI DUNG NHÚNG

có nội dung l| ‚ ‚ (ba dấu cách)
1 Nội dung web