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 cao và đa dạng của người dùng, nhiều phần mềm ứng dụng, đặc biệt là ứng dụng web, đã ra đời Ứng dụng web, như Google.com, Twitter.com, Facebook.com, Amazon.com, Github.com và Wikipedia.org, trở thành những phần mềm phổ biến với hàng triệu người dùng trên toàn thế giới Các tổ chức và doanh nghiệp, bất kể quy mô, đều sở hữu ứng dụng web riêng để cung cấp thông tin, quảng bá sản phẩm, xử lý nghiệp vụ và giao dịch với khách hàng Ứng dụng web có những đặc trưng riêng, trong đó giao diện người dùng tương tác gián tiếp qua trình duyệt web và máy chủ web Người dùng gửi yêu cầu đến ứng dụng web thông qua trình duyệt, trong khi ứng dụng web và máy chủ thường hoạt động trên máy tính từ xa qua Internet.
(frontend), trong khi trình phục vụ v| ứng dụng web thuộc về bên phục vụ
The server-side, also known as the backend, facilitates communication between the web browser and the web server through the Hypertext Transfer Protocol (HTTP) in a client-server model.
Kết quả xử lý của ứng dụng web, hay còn gọi là nội dung web, không chỉ là dữ liệu mà chủ yếu là mã nguồn được viết bằng HTML, JavaScript và CSS Trình duyệt web có nhiệm vụ thông dịch mã nguồn này và hiển thị kết quả cho người dùng Nội dung web bao gồm các siêu liên kết, cho phép người dùng chuyển đổi giữa các nội dung khác nhau bằng cách chọn theo các liên kết đó.
1 Ứng dụng console, desktop, hay mobile
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Theo Collins English Dictionary (2012), ứng dụng web là phần mềm truy cập qua Internet Random House Dictionary (2017) cung cấp định nghĩa chi tiết hơn, mô tả ứng dụng web là phần mềm tương tác có thể truy cập thông qua trình duyệt web và URL Các định nghĩa này nhấn mạnh vai trò của máy chủ web, giao thức HTTP và đặc trưng của nội dung web, do đó, ứng dụng web cần được nhận diện dựa trên các đặc điểm đã nêu.
Ứng dụng web cung cấp nội dung cho trình khách được tạo ra từ các tài nguyên web Từ góc độ lưu trữ, ứng dụng web là tập hợp các tài nguyên web, bao gồm tệp, tiến trình với socket hoặc dòng dữ liệu ra, hoạt động như đơn vị sản xuất nội dung Mỗi lần gửi yêu cầu tới trình phục vụ, trình duyệt chỉ định rõ một tài nguyên duy nhất nó cần, giúp trình phục vụ xác định và cung cấp nội dung phù hợp.
Trình duyệt thường bắt đầu bằng cách yêu cầu một tài liệu HTML, sau đó phân tích nội dung và yêu cầu các tài nguyên được tham chiếu trong HTML Một tài liệu HTML cùng với các tài nguyên của nó được gọi là trang web Ứng dụng web là tập hợp các trang web có mối quan hệ chặt chẽ 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 trong Chương 2.
Một trang web không chỉ chứa các siêu liên kết đến các trang trong cùng ứng dụng mà còn có thể liên kết đến các trang thuộc ứng dụng khác Sự hiện diện đông đảo của các trang web trên Internet cùng với số lượng lớn siêu liên kết giữa chúng tạo nên một mạng lưới thông tin phong phú, được gọi là World Wide Web (WWW) Các thành phần quan trọng như Internet, trình phục vụ web, trình duyệt web và giao thức HTTP tạo nên hạ tầng cho việc xây dựng và khai thác các ứng dụng web.
Cần hiểu rõ sự khác biệt giữa ứng dụng web và website Website là một tập hợp các trang web liên kết với nhau, cung cấp thông tin về một chủ đề hoặc một nhóm chủ đề liên quan Tuy nhiên, các trang web trong cùng một website không nhất thiết phải thuộc cùng một ứ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 cần sử dụng nội dung do ứng dụng web tạo ra Tất cả những phần mềm này được gọi chung là trình khách web (web client) Các trình khách này sử dụng nội dung web theo nhiều cách khác nhau, với trình duyệt là một trong những ứng dụng phổ biến nhất.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Các trình duyệt web như Mozilla Firefox, Google Chrome, Microsoft Edge và Apple Safari nhận và hiển thị mã nguồn, tương tác với người dùng Trong khi đó, crawler tìm kiếm nội dung từ mã nguồn, còn telnet và wget chỉ đơn giản là tải mã nguồn về máy tính Do tính phổ biến của trình duyệt, thuật ngữ 'trình duyệt (web)' và 'trình khách (web)' thường được sử dụng thay thế cho nhau.
TRÌNH PHỤC VỤ WEB
Trình phục vụ web, hay còn gọi là trình phục vụ HTTP, là một phần mềm chịu trách nhiệm giao tiếp với trình khách thông qua giao thức HTTP Nó nhận các 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 các ứ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 có khả năng giao tiếp với nhiều trình khách và tương tác với nhiều ứng dụng web cùng lúc Một số 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
Ứng dụng web cần một môi trường để hoạt động, và môi trường này được cung cấp bởi trình phục vụ ứng dụng Trình phục vụ ứng dụng bao gồm các ngôn ngữ lập trình và thư viện thực thi Ứng dụng web là mã chạy trên trình phục vụ ứng dụng và được viết bằng ngôn ngữ mà trình phục vụ hỗ trợ Nó gọi đến các thư viện thời gian thực thi cùng các thành phần khác do 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), như ví dụ ActivePerl với Apache Theo CGI, trình phục vụ ứng dụng hoạt động độc lập, kết nối với trình phục vụ web thông qua các ống dẫn (pipe) để chuyển tiếp yêu cầu và kết quả Tuy nhiên, CGI có nhược điểm là tiêu tốn tài nguyên và tốc độ xử lý chậm do việc khởi tạo các tiến trình Để khắc phục, các trình phục vụ web hiện nay cho phép tích hợp trình phục vụ ứng dụng dưới dạng mô-đun và giao tiếp qua API (Application Programming Interface), giúp hai trình phục vụ hòa nhập với nhau.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Apache là một máy chủ web nổi tiếng, không chỉ cung cấp dịch vụ httpd mà còn hỗ trợ nhiều mô-đun như mod_php, mod_python và mod_perl để phục vụ các ứng dụng web khác nhau.
HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU
Một thành phần thiết yếu trong các ứng dụng web hiện nay là cơ sở dữ liệu (CSDL) để lưu trữ bền vững Các hệ quản trị CSDL phổ biến 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 giao diện cho phép kết nối và thao tác dữ liệu với các CSDL khác nhau 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 hiệu quả.
KHUNG NHÌN CHUNG
Tất cả các thành phần liên quan đến ứng dụng web đã được giới thiệu, nhằm tạo ra một bức tranh tổng thể về ứng dụng web Hình 1.1 cung cấp một cái nhìn tổng quan, phản ánh đầy đủ các thành phần và sự tương tác giữa chúng.
Ứng dụng web được xây dựng theo kiến trúc đa tầng, hay còn gọi là kiến trúc n-tier, trong đó mỗi tầng đảm nhiệm những chức năng riêng biệt Mỗi tầng cung cấp dịch vụ cho tầng liền trên và sử dụng dịch vụ từ tầng liền dưới Kiến trúc đa tầng thường bao gồm ba tầng chính, tạo ra sự phân chia rõ ràng giữa các chức năng và cải thiện khả năng mở rộng của ứng dụng.
Trình phục vụ ứng dụng Trình phục vụ ứng dụng Ứng dụng web Ứng dụng web Ứng dụng web Người dùng
Tầng truy cập dữ liệu Ngăn xếp web
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
5 tier): trình diễn, logic nghiệp vụ v| truy cập dữ liệu Tầng trình diễn
Tầng trình diễn (presentation) có nhiệm vụ chính là trình diễn kết quả và tương tác với người dùng Tầng logic nghiệp vụ (business logic) bao gồm các trình phục vụ web và ứng dụng web, chịu trách nhiệm giải quyết bài toán, nhận yêu cầu từ tầng trình diễn và trả kết quả lại cho tầng này Tầng truy cập dữ liệu (data access) thường bao gồm hệ quản trị cơ sở dữ liệu (CSDL), có chức năng lưu trữ và thao tác dữ liệu, nhận yêu cầu từ tầng logic nghiệp vụ và cung cấp dữ liệu cho tầng này.
Yêu cầu xử lý thường phát sinh từ tầng trình diễn do người dùng đưa ra Trong quá trình này, tầng trình diễn sẽ gọi đến tầng logic nghiệp vụ, và sau đó, tầng logic nghiệp vụ sẽ tiếp tục gọi đến tầng truy cập dữ liệu Khi tầng truy cập dữ liệu hoàn tất, dữ liệu sẽ được trả về cho tầng logic nghiệp vụ để xử lý tiếp Sau khi hoàn tất, tầng logic nghiệp vụ sẽ gửi kết quả về tầng trình diễn để hiển thị cho người dùng Quá trình này tạo thành một ngăn xếp (stack) và kiến trúc đa tầng của ứng dụng web được gọi là ngăn xếp web (web stack), trong đó các tầng trình diễn, logic nghiệp vụ và truy cập dữ liệu là những phần tử chính.
ĐỊNH DANH ỨNG DỤNG WEB
Một trình phục vụ web có khả năng lưu trữ nhiều ứng dụng web, và để phân biệt giữa các ứng dụng, mỗi ứng dụng cần có ít nhất một định danh duy nhất Định danh này thường được tạo thành từ sự kết hợp của lược đồ (http hoặc https), địa chỉ IP, số hiệu cổng (TCP port) và tên máy (hostname) Quá trình gán định danh cho ứng dụng web được gọi là buộc lược đồ, địa chỉ IP, số hiệu cổng và tên miền cho ứng dụng Phương thức định danh này liên quan đến giao thức HTTP, trong đó TCP hoạt động ở tầng giao vận và có thể đi qua tầng trung gian TLS (lược đồ https) Khi trình khách gửi gói TCP đến trình phục vụ web, gói này chứa thông tin về địa chỉ IP và số hiệu cổng đích, cùng với yêu cầu HTTP chứa tên máy phục vụ, giúp trình phục vụ xác định và chuyển yêu cầu đến ứng dụng phù hợp.
Có thể kết hợp nhiều tổ hợp của lược đồ, địa chỉ IP, số hiệu cổng và tên máy cho một ứng dụng Tuy nhiên, ba phương thức phổ biến là buộc theo IP, theo cổng và theo tên Phương thức buộc theo IP sử dụng địa chỉ IP làm định danh mà không phân biệt số hiệu cổng và tên máy Để chạy trình phục vụ web, máy cần có nhiều giao diện mạng.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Có hai cách thức buộc nối phổ biến, bao gồm buộc theo cổng sử dụng số hiệu cổng và địa chỉ IP, hoặc buộc theo tên sử dụng tên máy là định danh Trong đó, buộc theo tên được ưa chuộng hơn do người dùng chỉ cần nhớ tên miền để truy cập ứng dụng, giúp đơn giản hóa quá trình truy cập và tăng cường trải nghiệm người dùng.
Thiết lập định danh cho ứng dụng web thông qua phương thức buộc, còn được gọi là lưu trữ ảo, cho phép thay đổi địa chỉ một cách linh hoạt.
IP, số hiệu cổng và tên miền là những yếu tố mà người dùng thấy khi truy cập các ứng dụng web Mặc dù các ứng dụng này có vẻ được phục vụ từ nhiều máy chủ khác nhau, nhưng thực tế, chúng có thể được cung cấp bởi cùng một máy chủ.
ĐỊNH VỊ TÀI NGUYÊN WEB
Để truy cập tài nguyên web, mỗi tài nguyên cần được định danh thông qua địa chỉ URL (Uniform Resource Locator) URL không chỉ xác định địa chỉ mà còn chỉ ra cách thức truy cập tài nguyên trên Internet Cấu trúc của một URL bao gồm các thành phần như scheme, host, port, path, query-string và bookmark, giúp người dùng dễ dàng tìm kiếm và truy cập các tài nguyên trực tuyến.
URL bao gồm nhiều thành phần như lược đồ, địa chỉ máy, số hiệu cổng, đường dẫn, chuỗi truy vấn và điểm đánh dấu, trong đó lược đồ và địa chỉ máy là bắt buộc Lược đồ chỉ ra cách truy cập tài nguyên, với hai loại phổ biến là http và https Khi sử dụng http, giao tiếp diễn ra trực tiếp trên kết nối TCP, trong khi https sử dụng giao thức bảo mật TLS để mã hóa dữ liệu Địa chỉ máy có thể là tên miền hoặc địa chỉ IP của máy chủ web, và số hiệu cổng xác định cổng ứng dụng, với cổng mặc định cho http là 80 và https là 443 Nếu sử dụng cổng mặc định, số hiệu cổng có thể không cần thiết Đường dẫn là chuỗi ký tự nhận diện tài nguyên trong ứng dụng, bắt đầu bằng dấu gạch chéo và có thể không phải là đường dẫn vật lý Chuỗi truy vấn phân cách các thành phần bằng dấu "&" và cung cấp thông tin bổ sung cho yêu cầu truy cập tài nguyên.
2 URL là một dạng của URI (Uniform Resource Identifier)
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
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 đầu vào của người dùng cho ứng dụng web, cho phép trả về nội dung khác nhau tùy theo từng chuỗi Điểm đánh dấu, phân cách với các thành phần phía trước bằng dấu thăng (#), là định danh của một phần tử trong trang web Khi người dùng truy cập, trình duyệt sẽ tự động điều chỉnh vị trí thanh cuộn để hiển thị phần tử có định danh tương ứng.
URL chỉ được phép chứa các ký tự ASCII in được, với mã từ 0x20 đến 0x7e Một số ký tự như ‘/’ và ‘#’ là ký tự dành riêng vì có ý nghĩa đặc biệt trong URL Tuy nhiên, giá trị của các tham số do người dùng nhập vào URL có thể chứa bất kỳ ký tự nào Do đó, các ký tự không hợp lệ cần được biểu diễn bằng chuỗi ký tự hợp lệ Trình duyệt sẽ tự động thực hiện việc này trước khi gửi yêu cầu HTTP Máy chủ sẽ thực hiện phép thay thế ngược lại để khôi phục giá trị tham số Việc biểu diễn ký tự bằng chuỗi ký tự hợp lệ trong URL được gọi là mã hóa URL (URL encoding).
ASCII được biểu diễn bằng mã hexa với hai chữ số và dấu phần trăm (%) ở phía trước Ví dụ, ký tự ‘/’ và ‘#’ có mã tương ứng là 0x2f và 0x23, được biểu diễn trong mã URL là %2f và %23 Dấu phần trăm đứng trước các mã hexa trong các biểu diễn này, do đó, mã URL còn được gọi là mã phần trăm (percent-encoding) Để đảm bảo URL hợp lệ, tất cả các ký tự đặc biệt cần được mã hóa đúng cách.
RFC 3986 yêu cầu rằng các ký tự đặc biệt như *'();:@&=+$,/?#[] phải được mã hóa bằng phương pháp mã phần trăm Những ký tự không được định nghĩa rõ ràng nên được giữ nguyên Đối với các ký tự ngoài bảng mã ASCII, nếu xuất hiện trong URL, chúng cần được chuyển đổi thành dãy bytes, với mỗi byte được biểu diễn bằng mã phần trăm Ký tự ‘%’ cũng phải được mã hóa thành %25 khi nó được sử dụng với nghĩa gốc trong URL.
URL phi ngữ nghĩa (non-semantic URL) là chuỗi truy vấn hoặc đường dẫn vật lý đến tài nguyên, nhưng có nhược điểm là chứa nhiều chi tiết cài đặt, ít có ngữ nghĩa và không thân thiện với người dùng cũng như máy tìm kiếm, dẫn đến tính khả dụng và khả truy cập bị hạn chế Ngược lại, URL ngữ nghĩa (semantic URL) ngày càng được sử dụng rộng rãi hơn, vì nó che giấu các chi tiết cài đặt và cung cấp cấu trúc khái niệm của ứng dụng, thân thiện với cả người dùng và máy tìm kiếm Với URL ngữ nghĩa, chuỗi truy vấn không còn được sử dụng; thay vào đó, giá trị của các tham số được nhập vào đường dẫn, làm cho URL trở nên ngắn gọn và rõ ràng hơn Sự khác biệt giữa URL ngữ nghĩa và phi ngữ nghĩa có thể dễ dàng nhận thấy qua ví dụ cụ thể.
Semantic URLs enhance user experience and SEO by providing clear, descriptive web addresses For instance, transforming a complex URL like http://example.com/index.php?page=marketing into a simpler format such as http://example.com/marketing makes it more intuitive Similarly, changing http://example.com/services.py?cat=legal to http://example.com/services/legal improves readability and relevance, ultimately benefiting search engine rankings.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
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 cho việc truy cập World Wide Web, được sử dụng bởi tất cả các ứng dụng web hiện nay Giao thức này dựa trên mô hình thông điệp, trong đó trình khách web gửi yêu cầu HTTP và trình phục vụ web trả lại phản hồi HTTP Mặc dù HTTP là giao thức phi kết nối, nó vẫn sử dụng TCP, một giao thức hướng kết nối và có trạng thái Phiên bản phổ biến nhất hiện nay là HTTP/1.1, trước đó có các phiên bản HTTP/1.0 và HTTP/0.9, trong khi phiên bản mới nhất, HTTP/2, được công bố vào năm 2015.
Mỗi yêu cầu HTTP bao gồm một dòng yêu cầu, nhiều tiêu đề nằm trên các dòng riêng biệt, và kết thúc bằng một dòng trắng trước khi có thể có phần thân Ví dụ về một yêu cầu HTTP như sau:
Dòng yêu cầu trong HTTP là dòng đầu tiên và bao gồm ba thành phần: động từ chỉ phương thức HTTP, URL của tài nguyên yêu cầu và phiên bản HTTP sử dụng Các phương thức HTTP cùng các tiêu đề sẽ được trình bày trong các mục nhỏ phía sau Lưu ý rằng dòng trắng sau các tiêu đề là bắt buộc.
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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Dòng trạng thái phải là dòng đầu tiên của đáp ứng HTTP, bao gồm ba thành phần được phân cách bởi dấu trắng: phiên bản HTTP, mã trạng thái và diễn giải mã trạng thái Các mã trạng thái sẽ được trình bày trong các mục nhỏ phía sau Thân của đáp ứng HTTP chứa nội dung trả về cho trình khách Lưu ý rằng dòng trắng sau các tiêu đề cũng là dòng bắt buộc.
Phương thức HTTP, hay còn gọi là động từ, được sử dụng trong yêu cầu HTTP để xác định cách xử lý yêu cầu tại máy chủ Trong số các phương thức, GET và POST là hai phương thức phổ biến nhất Phương thức GET được thiết kế để trình khách nhận tài nguyên từ máy chủ Khi người dùng nhập URL trên thanh địa chỉ hoặc nhấn vào liên kết, trình duyệt sẽ gửi yêu cầu HTTP theo phương thức GET Yêu cầu này không có phần thân, nhưng có thể sử dụng chuỗi truy vấn trong URL để gửi tham số đến tài nguyên Dựa vào giá trị của các tham số, tài nguyên có thể trả về nội dung khác nhau cho trình khách.
Độ dài của URL bị giới hạn, dẫn đến việc độ dài của chuỗi truy vấn cũng bị giới hạn Điều này có nghĩa là số lượng tham số và dung lượng của giá trị tham số trong URL đều có giới hạn nhất định.
Phương thức POST, trái ngược với GET, được thiết kế để trình khách gửi dữ liệu đến trình phục vụ nhằm yêu cầu chấp nhận dữ liệu đó Các tham số và giá trị của chúng được đặt trong thân yêu cầu HTTP, mặc dù vẫn có thể sử dụng chuỗi truy vấn trong URL Phương thức này thường được áp dụng khi cần tải lên tệp hoặc gửi dữ liệu người dùng với dung lượng lớn Ngoài ra, nên sử dụng phương thức GET cho những yêu cầu không làm thay đổi trạng thái bên phục vụ, chẳng hạn như tra cứu điểm thi.
Set-Cookie: tracking=tI8rk7joMx44S2Uu85nSWc
Content-Type: text/html; charset=utf-8
Your details
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
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)
Giao thức HTTP hỗ trợ nhiều phương thức khác nhau, trong đó phương thức HEAD tương tự như GET nhưng chỉ trả về tiêu đề mà không có thân HEAD có thể 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 cùng, giúp trình duyệt quyết định có cần gửi yêu cầu GET hay không Phương thức TRACE được sử dụng để chẩn đoán và xác định xem yêu cầu HTTP có bị thay đổi trong quá trình truyền tải hay không Phương thức OPTIONS cho phép hỏi các phương thức HTTP mà máy chủ hỗ trợ cho một tài nguyên cụ thể, với tiêu đề Allow trong phản hồi liệt kê các phương thức đó Cuối cùng, phương thức PUT được dùng để tải tệp lên máy chủ, nhưng cần hạn chế sử dụng vì lý do an ninh.
HTTP hỗ trợ nhiều loại tiêu đề, trong đó một số tiêu đề có thể được sử dụng cho cả yêu cầu và đáp ứng Các tiêu đề khác chỉ áp dụng cho yêu cầu hoặc chỉ áp dụng cho đáp ứng.
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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
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 TCP để truyền tải yêu cầu và đáp ứng Nếu mỗi kết nối TCP chỉ phục vụ một yêu cầu, thời gian phản hồi sẽ kéo dài do phải mở và đóng kết nối nhiều lần Giải pháp cho vấn đề này là sử dụng lại một kết nối TCP đã mở để gửi và nhận nhiều yêu cầu và đáp ứng trước khi đóng kết nối Phương pháp này được gọi là kết nối HTTP liên tục (HTTP persistent connection), và tất cả các trình duyệt hiện đại đều áp dụng kết nối này.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Kết nối liên tục cho phép gửi yêu cầu HTTP đồng bộ hoặc không đồng bộ Gửi đồng bộ yêu cầu trình duyệt phải chờ đợi phản hồi trước khi gửi yêu cầu tiếp theo, trong khi 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 chờ Phương pháp gửi không đồng bộ, hay dẫn ống (pipelining), giúp tăng hiệu suất truyền thông Tuy nhiên, hầu hết các trình duyệt hiện nay không hỗ trợ hoặc đã vô hiệu hóa tính năng này do lo ngại về sự hỗ trợ chưa đầy đủ từ các máy chủ và phần mềm trung gian.
KIỂU MINE
Ngoài HTML, JavaScript và CSS, ứng dụng web có thể cung cấp cho trình duyệt nhiều loại nội dung khác nhau như PDF, hình ảnh JPEG, âm thanh MP3 và mã Java bytecode Dựa vào kiểu nội dung (content type), hay còn gọi là kiểu phương tiện (media type) hoặc kiểu MINE (MIME type), trình duyệt sẽ chọn ứng dụng xử lý phù hợp Các ứng dụng xử lý này có thể được tích hợp sẵn trong trình duyệt hoặc chạy bên ngoài Ví dụ, ứng dụng xem ảnh thường có sẵn trong hầu hết các trình duyệt, trong khi ứng dụng phát audio/video chỉ có trong một số trình duyệt hiện đại Nếu trình duyệt không có ứng dụng phát phù hợp, nó sẽ tải xuống dữ liệu đa phương tiện và gọi ứng dụng có sẵn trên máy tính để phát tệp Một số kiểu MINE phổ biến bao 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 Mặc dù hầu hết các ứng dụng web có thể phục vụ nhiều kiểu nội dung, nhưng máy chủ web có thể từ chối phục vụ một số kiểu nội dung cụ thể và cũng có khả năng 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 (static) là trang web có nội dung không thay đổi và luôn trả về thông tin giống nhau cho tất cả người dùng Điều này có nghĩa là bất kỳ trình duyệt nào truy cập vào trang web tĩnh, vào bất kỳ thời điểm nào, đều nhận được cùng một 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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Trang web tĩnh được tạo thành từ nguồn lưu trữ bền vững như tệp hoặc cơ sở dữ liệu, lưu sẵn mã nguồn HTML, JavaScript và CSS, và chỉ cần đọc nội dung khi có yêu cầu Ngược lại, trang web động thay đổi nội dung theo từng yêu cầu, cho phép trả về thông tin khác nhau dựa trên tiêu đề hoặc tham số khác nhau Nội dung của trang web động được tạo ra theo yêu cầu thông qua các kịch bản viết bằng các ngôn ngữ lập trình như PHP, Perl, Python, Java hoặc C# Khi nhận được yêu cầu, các kịch bản này sẽ được thông dịch và chạy để tạo ra mã nguồn HTML, JavaScript và CSS Một ứng dụng web có thể bao gồm cả trang web tĩnh và trang web động.
Tính chất động hay tĩnh của trang web phản ánh sự thay đổi nội dung giữa các lần đáp ứng khác nhau Trang web tĩnh có ưu điểm là đơn giản và hiệu năng cao, vì nội dung đã được chuẩn bị sẵn, giúp ứng dụng phản hồi nhanh chóng Các trang tĩnh có thể được nén để tiết kiệm dung lượng và thời gian truyền dữ liệu, đồng thời dễ dàng lưu đệm, từ đó nâng cao hiệu suất Tuy nhiên, nhược điểm 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 cho phép tùy biến cao nhưng lại gặp hạn chế về hiệu năng và tính phức tạp Hiện nay, nhiều ứng dụng web kết hợp ưu điểm của cả hai loại bằng cách sử dụng bộ tạo web tĩnh để tạo ra trang web tĩnh từ nội dung động.
WEB PROXY
Một thành phần quan trọng trong các hệ thống web là web proxy, đóng vai trò trung gian giữa trình duyệt và máy chủ Proxy được sử dụng cho nhiều mục đích khác nhau, giúp cải thiện hiệu suất và bảo mật khi truy cập internet.
Mục đích chính của việc sử dụng web proxy là tăng tốc độ truy cập và giảm chi phí duyệt web Proxy thường được triển khai trong mạng LAN của cơ quan, nơi nhiều người cùng truy cập internet Nó lưu đệm các trang web mà nó biết, bất kể nguồn gốc của trang web Mọi yêu cầu duyệt web từ các máy trong cơ quan sẽ được chuyển đến proxy, và nếu trang web yêu cầu có trong bộ nhớ đệm, proxy sẽ trả lại bản sao đã lưu cho trình duyệt.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Proxy sẽ chuyển tiếp yêu cầu đến trình phục vụ, nhận và chuyển đáp ứng cho trình khách, đồng thời lưu đệm trang web vừa được tải về Các yêu cầu tiếp theo đến cùng trang web sẽ không cần gửi đến trình phục vụ, giúp tăng tốc độ đáp ứng và tiết kiệm băng thông Internet Các proxy này được gọi là forward proxy vì chúng thực hiện việc chuyển tiếp yêu cầu khi cần thiết.
Mục đích thứ hai của việc sử dụng web proxy là cân bằng tải, tăng tốc độ phục vụ và nâng cao độ an toàn khi phục vụ web Proxy được triển khai trước các trình phục vụ web, tiếp nhận và đáp ứng mọi yêu cầu từ các trình khách Nó thực hiện cân bằng tải và lưu đệm các trang từ các trình phục vụ mà proxy đại diện Do các trình phục vụ không bị truy cập trực tiếp bởi trình khách, điều này giúp giảm thiểu rủi ro tấn công vào lỗ hổng an ninh của trình phục vụ và hệ điều hành Tuy nhiên, proxy không thể giảm rủi ro tấn công vào lỗ hổng an ninh của chính ứng dụng web Các proxy phục vụ cho mục đích này được gọi là reverse proxy.
LỊCH SỬ PHÁT TRIỂN WEB
Vào đầu thập niên 90, Tim Berners-Lee tại CERN đã đề xuất một hệ thống quản lý thông tin để chia sẻ tài nguyên qua mạng máy tính, được gọi là World Wide Web, với mục tiêu ban đầu là chia sẻ dữ liệu và thông tin của nhóm nghiên cứu Trong giai đoạn đầu, các trang web chủ yếu là tĩnh và được viết bằng HTML.
Với sự gia tăng nhu cầu sử dụng, việc xây dựng các trang web động có tính tương tác trở thành một yêu cầu thiết yếu Giải pháp phổ biến cho vấn đề này là sử dụng ngôn ngữ lập trình để phát triển ứng dụng web, từ đó tạo ra nội dung web động Giao tiếp giữa ứng dụng web và máy chủ web ban đầu chủ yếu dựa vào CGI.
Năm 1995, Netscape đã giới thiệu JavaScript, trong khi Sun phát triển công nghệ servlet cho phép thực thi chương trình Java trên máy chủ thay vì sử dụng applet trên máy khách Servlet cung cấp thư viện hoàn chỉnh để tương tác với giao thức HTTP.
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 ảnh vào trang web
Cuối những năm 90, nhiều công nghệ phát triển ứng dụng web như JSP, ASP và PHP đã ra đời, giúp việc phát triển ứng dụng trở nên thuận tiện hơn.
Trong những năm gần đây, sự phát triển mạnh mẽ của công nghệ đã dẫn đến việc ứng dụng nhiều ngôn ngữ lập trình như ASP.NET, Ruby, Python và Go cho việc phát triển ứng dụng web Đồng thời, sự bùng nổ của các khung phát triển ứng dụng web như Laravel cũng đã góp phần nâng cao hiệu quả và tính năng của các sản phẩm công nghệ này.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Symfony, Rails, ASP.NET MVC, Django, NodeJS, AngularJS, Ember, jQuery, and Bootstrap are prominent frameworks and libraries that have shaped modern web development They have contributed to the evolution of new development models, including MVC (Model-View-Controller), SPA (Single Page Application), and the Thick Client – Thin Server architecture.
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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
XÂY DỰNG TRANG WEB BẰNG HTML
MÃ NGUỒN TRANG WEB, ĐỐI TƢỢNG TÀI LIỆU
Trang web được xem như một kịch bản với mã nguồn được viết bằng các ngôn ngữ lập trình như HTML, CSS và JavaScript Bên phục vụ có nhiệm vụ cung cấp mã nguồn cho trình khách, trong khi trình khách sẽ thông dịch mã nguồn này Trình duyệt web hoạt động như một trình thông dịch, có chức năng thông dịch mã nguồn trang web và hiển thị kết quả trên giao diện người dùng.
Một câu hỏi tự nhiên đặt ra là tại sao cần sử dụng ba ngôn ngữ lập trình (HTML, CSS, JavaScript) để tạo mã nguồn cho trang web Câu trả lời ngắn gọn là: HTML dùng để khai báo các đối tượng tài liệu, CSS để định kiểu trình diễn chúng, và JavaScript để quản lý chúng HTML chỉ cho phép khai báo tĩnh khi trang được tải, trong khi JavaScript có khả năng quản lý và khai báo động các đối tượng tài liệu bất cứ lúc nào Mặc dù HTML có thể định kiểu cho các đối tượng tài liệu, nguyên tắc "tách biệt nội dung với trình diễn" trong kỹ nghệ phần mềm khiến các lập trình viên web hiện nay ưu tiên và khuyến cáo sử dụng CSS cho mục đích này.
THẺ
HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu chủ yếu dùng để định dạng văn bản và khai báo các đối tượng tài liệu Các thẻ HTML hoạt động như những câu lệnh khai báo, trong đó mỗi đối tượng tài liệu được tạo ra thông qua một thẻ HTML, tương tự như hàm tạo trong lập trình hướng đối tượng Khi thẻ được sử dụng, đối tượng tài liệu sẽ được khởi tạo và các thuộc tính ban đầu của nó có thể được gán giá trị thông qua cú pháp khai báo bằng thẻ HTML.
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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
Thẻ HTML bắt đầu bằng dấu nhỏ hơn () Cú pháp của thẻ được chia thành thẻ đơn và thẻ đôi; thẻ đôi bao gồm thẻ mở và thẻ đóng, trong đó thẻ đóng có cùng tên với thẻ mở và thêm ký tự chéo trái (/) Thẻ đơn chỉ có thẻ mở mà không có thẻ đóng Một số phiên bản HTML như XHTML yêu cầu ký tự chéo trái ở cuối thẻ đơn Tên thẻ thường là một từ hoặc viết tắt trong tiếng Anh, không phân biệt chữ hoa và thường Thuộc tính được khai báo trong thẻ mở, và thứ tự của các thuộc tính không ảnh hưởng đến kết quả Giá trị thuộc tính được đặt giữa hai dấu nháy đơn hoặc kép, nhưng có thể bỏ qua nếu giá trị là số hoặc chuỗi không có dấu trắng Nếu thuộc tính không được liệt kê, giá trị của nó sẽ được đặt mặc định, cho thấy mỗi thẻ HTML giống như một hàm tạo với nhiều giá trị mặc định.
Một đối tượng tài liệu đượ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 bên ngoài được gọi là đối tượng cha (parent element), trong khi đối tượng bên trong được gọi là đối tượng con (child element) Ví dụ, ba đối tượng , và được khai báo nằm trong một đối tượng cha.
4
Một đối tượng con có khả năng chứa các đối tượng con khác, tạo nên một cấu trúc cây giữa các đối tượng tài liệu được khai báo bằng HTML.
HTML chỉ cung cấp các thẻ và lệnh để khai báo đối tượng tài liệu mà không cho phép quản lý chúng như thay đổi thuộc tính hay gọi phương thức Hầu hết các đối tượng tài liệu đều thuộc các lớp dựng sẵn và được gọi là đối tượng chuẩn Việc khai báo các đối tượng chuẩn bằng HTML sẽ được trình bày trong các phần tiếp theo Định nghĩa lớp đối tượng tài liệu mới hoặc lớp đối tượng tùy biến là nội dung dành cho tự học và không được đề cập 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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
CẤU TRÚC TÀI LIỆU HTML
Tài liệu HTML được cấu trúc bởi một đối tượng , bao gồm hai phần chính là và Phần chứa các siêu dữ liệu (meta data), trong khi phần chứa nội dung chính của trang web Chỉ những đối tượng trong phần mới được hiển thị trên giao diện trình duyệt.
4
7
DOCTYPE
không phải là một thẻ mà là một chỉ dẫn cần thiết, được đặt ở đầu tài liệu HTML trước các thẻ khác Chỉ dẫn này xác định phiên bản HTML được sử dụng, giúp trình duyệt hiển thị trang web chính xác Đối với các phiên bản HTML cũ hơn 5, yêu cầu tham chiếu đến DTD (Document Type Definition), trong khi với HTML 5, không cần tham chiếu này Ví dụ về khai báo cho HTML 5 và HTML 4.01 Strict được trình bày như sau:
//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
TIÊU ĐỀ TRANG
Đối tượng được sử dụng để khai báo tiêu đề cho toàn bộ tài liệu HTML Mỗi tài liệu HTML chỉ có một đối tượng duy nhất và nó phải nằm trong phần của tài liệu.
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
Đối tượng trong HTML cung cấp siêu dữ liệu về tài liệu, không hiển thị trên giao diện người dùng nhưng giúp trình duyệt hiểu và hiển thị nội dung Ví dụ, câu lệnh hướng dẫn trình duyệt phân tích và hiển thị văn bản theo bảng mã UTF-8 Ngoài ra, meta còn được sử dụng bởi các công cụ tìm kiếm và dịch vụ web khác.
Ngoại trừ charset có ý nghĩa nhƣ đã đƣợc mô tả ở trên, c{c đối tƣợng
Thẻ được phân biệt qua thuộc tính name hoặc thuộc tính http-equiv, nhưng không thể sử dụng đồng thời cả hai Giá trị của các thuộc tính này xác định tác dụng và ý nghĩa của thẻ Nội dung của thẻ được xác định thông qua thuộc tính content.
Meta theo tên cung cấp thông tin về nội dung trang, trong khi meta theo http-equiv xác định các tiêu đề HTTP Dưới đây là danh sách và mô tả các thẻ thường được sử dụng.
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
Đối tượng được sử dụng để kết nối tài liệu hiện tại với các tài nguyên khác, được gọi là tài nguyên tham chiếu Mối quan hệ giữa tài liệu hiện tại và tài nguyên tham chiếu được xác định thông qua thuộc tính rel.
Tùy thuộc vào mối quan hệ, tài nguyên được tham chiếu có thể trở thành một phần của tài liệu hiện tại hoặc tách biệt với nó Các mối quan hệ giữa tài liệu hiện tại và tài nguyên tham chiếu bao gồm: alternate (tài nguyên tham chiếu là một biểu diễn khác của tài liệu hiện tại), up (tài nguyên tham chiếu cung cấp ngữ cảnh cho tài liệu hiện tại), và stylesheet (tài nguyên tham chiếu là CSS sẽ được nhập vào trang hiện tại) URL của tài nguyên được tham chiếu được xác định bằng thuộc tính href, trong khi thuộc tính type cho biết kiểu MIME của tài nguyên đó và thuộc tính hreflang cung cấp thông tin về ngôn ngữ.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
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
Thẻ được sử dụng để định nghĩa và bao hàm kịch bản phía trình khách, có thể chứa trực tiếp các câu lệnh kịch bản hoặc tham chiếu đến một tệp kịch bản Để tham chiếu tệp kịch bản, thuộc tính src (source) được sử dụng, và nếu tham chiếu đến tệp, nội dung bên trong thẻ phải để rỗng.
Có thể sử dụng thuộc tính type để cho biết kiểu MINE (giá trị mặc định là
Để đảm bảo tệp kịch bản được hiểu đúng, bạn cần sử dụng thuộc tính type với giá trị 'text/javascript' và thuộc tính charset để chỉ định bảng mã Nếu không chỉ định charset, tệp kịch bản sẽ mặc định sử dụng cùng bảng mã với tài liệu HTML Dưới đây là một số ví dụ về việc khai báo đối tượng .
1
4 n.innerHTML = "Một bài viết đã được xóa.";
Thẻ có thể được đặt trong cả phần và của tài liệu HTML, và có thể có nhiều đối tượng trong cùng một tài liệu Chi tiết về việc sử dụng JavaScript sẽ được trình bày 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
Đối tượng được đặt trong phần của tài liệu HTML, và có thể có nhiều đối tượng trong cùng một tài liệu Chi tiết về cách sử dụng CSS sẽ được trình bày trong Chương 3.
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
NỘI DUNG VĂN BẢN
C{c đối tƣợng trong phần thân của tài liệu HTML chiếm tỉ lệ lớn và mang nội dung chính của trang web Mục này cùng với các mục tiếp theo sẽ trình bày các đối tƣợng nội dung thuộc phần thân của tài liệu HTML.
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
Văn bản thường là một đối tượng tài liệu đặc biệt, không cần thẻ để khai báo Các ký tự nằm giữa hai thẻ liên tiếp tạo thành đối tượng văn bản Chẳng hạn, đoạn mã Nội dung web khai báo một đối tượng đầu mục và chứa văn bản bên trong.
Đoạn mã ngắn dưới đây khai báo năm đối tượng, bao gồm ba đối tượng văn bản: một đối tượng , một đối tượng
, và một đối tượng văn bản nằm trong với nội dung "Nội dung web".
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
Khi trình bày các đối tượng văn bản, mặc định các từ sẽ được hiển thị từ trái sang phải và từ trên xuống dưới, với các từ trên cùng một dòng được ngăn cách bởi một dấu cách.
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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
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,
Đoạn văn được trình bày theo khối với độ rộng tương ứng với vùng hiển thị Dòng đầu tiên trong thẻ
có khoảng cách giữa các dòng lớn hơn và không có thụt đầu dòng so với các dòng còn lại Dưới đây là ví dụ về cách khai báo đối tượng
.
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 qua những hình ảnh sâu sắc và cách diễn đạt dí dỏm, dễ tiếp cận với cả độc giả trẻ.
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 đoạn bằng cách sử dụng đối tượng Nội dung trong mỗi có mối quan hệ ngữ nghĩa với nhau, ví dụ như chương, bài, hoặc mục trong bài viết.
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
WebAppDev Lê Đình Thanh, Nguyễn Việt Anh
5
CSS định kiểu trình diễn các đối tượng tài liệu
Trong HTML, mỗi ký tự có thể được biểu diễn bằng chính nó hoặc thông qua một dãy ký tự khác, được gọi là tham chiếu ký tự Tham chiếu ký tự thường dùng để đại diện cho các ký tự đặc biệt như dấu nhỏ hơn (