Nhập môn thiết kế Web : Tài liệu tham khảo / Phó Hải Đăng, Nguyễn Văn Thọ

TỔNG QUAN VỀ THIẾT KẾ WEB

Các khái niệm cơ bản trong môi trường web

Internet là mạng toàn cầu kết nối các máy tính và các thiết bị điện tử khác Trong đó, các máy tính và thiết bị điện tử này truyền dữ liệu với nhau thông qua tập giao thức TCP/IP

WWW là một dịch vụ cung cấp mạng lưới thông tin toàn cầu, cho phép truy xuất các tài liệu của các máy chủ (server) dễ dàng thông qua các giao tiếp đồ hoạ Để sử dụng dịch vụ này, người dùng cần sử dụng một chương trình gọi là trình duyệt web (web browser)

Máy chủ là thiết bị lưu trữ và quản lý trang web bằng cách cài đặt phần mềm máy chủ web Máy chủ đóng vai trò trung gian cung cấp dịch vụ truy cập trang web cho khách hàng Ngoài ra, máy chủ còn cung cấp các tiện ích quản trị web và cơ sở dữ liệu cho người quản lý website để họ thực hiện công việc quản trị hiệu quả.

Máy khách là máy mà người dùng sử dụng trình duyệt để truy cập trang web mà họ muốn Trình duyệt là những ứng dụng như: Chrome, Microsoft Edge, Safari, Opera, Firefox,…

Trình duyệt web (web browser)

Trình duyệt web là một ứng dụng được cài tại máy khách (client) Nó còn được gọi là trình khách trong mô hình máy chủ - máy khách trong lĩnh vực web Mục đích của trình duyệt web là cung cấp giao diện đồ hoạ cho người dùng có thể truy xuất các trang web và nguồn tài nguyên của máy chủ thông qua giao thức web và domain Hiện tại có những trình duyệt phổ biến sau: Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge

Giao thức là một tập hợp các quy tắc cho việc giao tiếp giữa máy chủ (server) và máy khách (client) Ví dụ một số giao thức phổ biến: TCP/IP, HTTP, FTP, SMTP

Tên miền là địa chỉ của trang web dưới dạng chuỗi kí tự chữ cái được ánh xạ từ một địa chỉ IP của máy chủ web thông qua dịch vụ DNS (Domain Name System) Ví dụ ta có tên miền google.com được ánh xạ từ địa chỉ IP là 2406:6800:4003:c04::71 (IPv6)

Mỗi một ứng dụng tại máy chủ (server) khi giao tiếp với các máy khách cần thông qua một cổng được đăng ký trước Và cổng này là duy nhất cho mỗi ứng dụng tại máy chủ, nhờ vào điều này mỗi máy khách sẽ liên lạc một cách chính xác Ví dụ cổng mặc định của web là 80

Hệ thống định vị tài nguyên thống nhất (URL)

URL là từ viết tắt của “Uniform Resource Locator”, là một địa chỉ dẫn đến một tập tin (file) cụ thể trong nguồn tài nguyên trên máy chủ (server) Đối với web thì URL được gọi là địa chỉ trang web

Ví dụ: https://www.tiki.vn/trangchu.html là URL chỉ rõ nơi mà tài nguyên (là tập tin mã nguồn trangchu.html) đang được lưu trữ tại máy chủ đang chứa trang web Tiki Đường dẫn (path) Đường dẫn là một trong những khái niệm quan trọng trong thiết kế web

Nó là nơi tài nguyên đang được lưu trữ tại web server Có hai loại đường dẫn, bao gồm: a) Đường dẫn tuyệt đối (absolute path) Đây là loại đường dẫn có đầy đủ các thành phần của một URL (Uniform Resource Locator) Loại đường dẫn này thường được sử dụng trong các trường hợp mà trang web liên kết tới một tài nguyên (tập tin) ở bên ngoài trang web đó

Ví dụ, trang web ta đang xây dựng cần liên kết tới trang chủ của VnExpress thì ta cần sử dụng đường dẫn tuyệt đối, là nơi lưu trữ tập tin trang chủ của VnExpress Ví dụ ta có đường dẫn tuyệt đối của VnExpress là: https://www.vnexpress.net:80/index.html

Ta thấy đường dẫn này có đầy đủ các thành phần của một URL gồm: giao thức (https), tên miền (www.vnexpress.net), cổng (80), và đường dẫn tài liệu (index.html) Tuy nhiên, các trình duyệt sẽ luôn mặc định truy cập web là cổng

80 và tên trang chủ mặc định là những tên sau: home, index Vì thế tại ô địa chỉ trình duyệt (address bar), chúng ta sẽ thấy đường dẫn tuyệt đối được rút gọn lại như sau: https://www.vnexpress.net b) Đường dẫn tương đối (relative path) Đây là loại đường dẫn được dùng cho những tài nguyên thuộc trong phạm vi trang web của nhà phát triển Chúng giúp việc truy xuất linh hoạt, vì nhà phát triển không cần quan tâm tới những đường dẫn khác ngoài thư mục trang web của họ Chúng ta có một ví dụ cụ thể, như sau:

Giả sử, chúng ta đang có một dự án trang web là Khoa HTTTQL, toàn bộ tài nguyên của dự án được đặt trong thư mục “www”, đây chính là thư mục gốc của web server (máy tính đã cài phần mềm Apache hoặc IIS 1 ) Người dùng sử dụng tên miền để truy cập tới web server là www.khoahtttql.edu.vn, sẽ được web server điều hướng tới trực tiếp thư mục www này Trong thư mục www này, chúng ta có cấu trúc tập tin và thư mục như sau:

 trangchu.html: là trang chủ của trang web

 Thư mục images: thư mục chứa các hình ảnh của trang web

 Thư mục specializes: chứa 3 trang web gồm

▪ computer-science.html: chứa thông tin về chuyên ngành khoa học máy tính

▪ ecommerce.html: chứa thông tin về chuyên ngành TMĐT

▪ mis.html: chứa thông tin về chuyên ngành hệ thống thông tin doanh nghiệp

1 Tuỳ theo phiên bản Apache và IIS mà thư mục gốc của web server sẽ có tên khác nhau (www, hoặc inetpub, htdocs)

 Thư mục news: chứa các trang tin tức của khoa

 Thư mục events: chứa các hoạt động khoa và đoàn hội

Lịch sử phát triển của WWW

Lịch sử phát triển của WWW (World Wide Web) gắn liền với lịch sử hình thành Internet Vì thế, ta cần nhắc lại bối cảnh ra đời Internet

Từ thập niên 1950, Mỹ đã tiên phong trong phát triển máy tính điện tử Nhu cầu kết nối các máy tính với nhau để tạo mạng diện rộng trở nên cấp thiết, dẫn đến sự ra đời của ARPANET vào năm 1960, do Robert Taylor và Lawrence Roberts thực hiện, đánh dấu bước ngoặt quan trọng trong sự hình thành của Internet.

Vào đầu những năm 1970, có nhiều giao thức truyền thông được phát triển, dự án ARPANET đã tạo tiền đề cho sự phát triển của các giao thức liên mạng Một trong những giao thức đó chính là TCP/IP do Robert E Kahn và Vint Cerf đề xuất, và bộ giao thức này đã trở thành giao thức mạng chuẩn trên ARPANET

Vào những năm 1980, Quỹ Khoa học Quốc gia (NSF) đã thành lập các trung tâm siêu máy tính quốc gia tại các trường đại học, cung cấp kết nối cho các tổ chức nghiên cứu và giáo dục Cuối những năm 1980, các nhà cung cấp dịch vụ mạng xuất hiện, phục vụ cho mục đích trao đổi thương mại.

Những năm cuối của thập niên 80, Tiến sĩ Tim Berners-Lee đã đề xuất WWW, một mạng lưới liên kết các siêu văn bản, có thể được truy cập ở bất kỳ nơi nào miễn là máy tính đó có kết nối tới mạng lưới

TS Tim Berners-Lee đã phát triển mạnh WWW để phạm vi truy cập các tài liệu siêu văn bản mở rộng ra toàn cầu Và dự án WWW đã làm cho Internet trở nên phổ biến, hữu dụng cho đến ngày nay.

Tổ chức W3C

W3C được viết tắt bởi từ World Wide Web Consortium W3C là một tổ chức quy tụ rất nhiều thành viên là các tổ chức lớn, những chuyên gia, nhà khoa học về lĩnh vực web, internet, và được dẫn dắt bởi tổng giám đốc điều hành là TS Tim Berners-Lee Mục đích của tổ chức này là phát triển, mở rộng tiềm năng của trang web, phục vụ nhu cầu số hoá của con người (World Wide Web Consortium, n.d.)

Khi ngày càng có nhiều nhà phát triển web và các trình duyệt web được tạo ra để phục vụ cho người sử dụng, việc cần đảm bảo chuẩn hoá các nguyên tắc thiết kế, phát triển là hết sức quan trọng Điều này giúp các nhà phát triển web có sự thống nhất khi phát triển các ứng dụng web, và đảm bảo tính dễ sử dụng cho người dùng Ngoài ra, tổ chức W3C luôn cập nhật các phiên bản của những ngôn ngữ phát triển web như: HTML, Javascript

Và với những nhà phát triển web chuyên nghiệp, trang web W3.ORG là nguồn tham khảo chính và liên tục để đảm bảo cho chuyên môn và sự nghiệp của mình Người học web cũng cần sử dụng trang web W3C là một nguồn tài liệu tham khảo chính thức để đảm bảo các kiến thức về lý thuyết không bị sai sót.

Các thế hệ web

Chúng ta đã tìm hiểu về lịch sử phát triển của WWW Nó xuất phát từ mục đích là chia sẻ các tài liệu dưới dạng siêu văn bản cho các máy tính thông qua việc truy cập internet Nếu web chỉ dừng lại ở việc chia sẻ tài liệu siêu văn bản để người dùng đọc, thì nó sẽ không thể phát triển như hiện nay Kể từ khi web ra đời và phát triển tới nay, nó đã tạo ra nhiều đột phá quan trọng về công nghệ Ứng với từng cột mốc với sự thay đổi lớn mang trính cách mạng đó, chúng ta có các thế hệ web như sau:

Giai đoạn đầu của web được gọi là Web 1.0 (web thế hệ đầu tiên) Web 1.0 còn được biết đến là một loại web tĩnh, là các trang web chỉ hiển thị cho người dùng đọc thông tin hoặc xem hình ảnh Nó đơn giản là nơi người dùng tiếp nhận thông tin một cách thụ động, không cho phép người dùng gửi phản hồi tới nhà quản trị web

Web 2.0 là nền tảng mạng đọc ghi, nơi mà người dùng có thể giao tiếp với nhau Web 2.0 tạo ra sự cách mạng không chỉ cho việc chia sẻ thông tin một cách nhanh chóng, mà còn giúp người dùng có thể tương tác với nhau ở thời gian thực Các ứng dụng nổi bật trong thế hệ web 2.0 chính là các trang web mạng xã hội (social network) như Facebook, YouTube, và các loại web nhật ký (blog) Web 2.0 tạo sự đột phá rất lớn về tính tương tác giữa người dùng với trang web Vì thế, nó còn được gọi là web tương tác

Web 3.0 còn được gọi là web ngữ nghĩa (semantic web) Với cấu trúc và bố cục giàu tính ngữ nghĩa, Web 3.0 hứa hẹn tiềm năng sẽ giúp nội dung có thể đọc được trên các thiết bị điện tử; hỗ trợ hiệu quả cho các công nghệ rút trích thông tin, tóm tắt văn bản Đây là tiền đề quan trọng cho việc phát triển lĩnh vực trí tuệ nhân tạo (AI) Phần lớn các trang web hiện nay đang tập trung vào thế hệ Web 3.0, khi mà yêu cầu về tính ngữ nghĩa ngày càng mạnh mẽ và phổ biến

Web 4.0 còn được gọi là web cộng sinh (symbiotic web) Ý tưởng này là khi một siêu dữ liệu được tạo ra từ Web 3.0 là lúc con người và máy móc có thể tương tác cộng sinh Điều này sẽ giúp máy móc giao tiếp với con người giống như giữa người và người giao tiếp với nhau Tuy nhiên, Web 4.0 vẫn là một ý tưởng đang được hoàn thiện.

Mô hình máy khách – máy chủ (client – server)

Mô hình máy khách – máy chủ là mô hình cho thấy cách thức hoạt động giữa máy khách (client) và máy chủ (server) Máy chủ là máy tính được cài đặt dịch vụ web server, và là nơi chứa tất cả các tài nguyên gồm tập tin, trang web, hình ảnh, video,… Còn máy khách là thiết bị mà người dùng có thể sử dụng để truy cập tới tài nguyên của máy chủ

Hình 1-1 Mô hình hoạt động của trang web

Cơ chế hoạt động của mô hình này như sau: Đầu tiên, người dùng nhập địa chỉ trang web (mình muốn truy cập) vào trình duyệt Địa chỉ trang web chính là hệ thống định vị tài nguyên thống nhất (URL), gồm đầy đủ các thành phần:

 Giao thức (protocal): với web là http hoặc https

 Tên miền (domain): người dùng có thể nhập tên miền hoặc địa chỉ IP của máy chủ đang chứa trang web

 Cổng (port): cổng mặc định của giao thức http là 80 và https là 443

 Đường dẫn tập tin (document path): là đường dẫn tương đối tới trang web cần truy cập

Ví dụ, để truy cập vào trang chủ của trường ĐH Ngân Hàng TP.HCM, người dùng sẽ nhập địa chỉ đầy đủ như sau: https://buh.edu.vn:443/trangchu.html

Sau khi người dùng nhập địa chỉ trang web, trình duyệt sẽ gửi một yêu cầu (request) tới máy chủ thông qua mạng Internet Tại máy chủ, dịch vụ web server thực hiện tìm kiếm trang web dựa trên đường dẫn tập tin (document path) Nếu dịch vụ web server tìm thấy tập tin này, nó sẽ hồi đáp lại (response) toàn bộ nội dung của tập tin cho trình duyệt yêu cầu Ngược lại, nếu dịch vụ web server không tìm thấy tập tin mà trình duyệt yêu cầu, máy chủ sẽ gửi mã lỗi 404 cho trình duyệt

Cuối cùng, khi trình duyệt nhận được nội dung hồi đáp từ phía máy chủ, trình duyệt sẽ hiển thị cho người dùng xem dưới dạng một trang web

 Khi người dùng nhấp chuột trái (click) vào một liên kết (link), thì quá trình thực hiện sẽ theo cơ chế hoạt động giống như việc họ nhập một URL vào thanh địa chỉ của trình duyệt (như đã mô tả ở trên)

 Thông thường, người dùng sẽ không nhập đầy đủ các thành phần của một URL Ví dụ, người dùng sẽ không nhập giao thức, cổng, vì trình duyệt sử dụng các giá trị mặc định để tự động thêm vào Điều này giúp người dùng không phải ghi nhớ các giá trị mang tính kỹ thuật chi tiết, và tạo sự tiện lợi cho họ

 Dịch vụ web server có thể được cài đặt trên máy tính cá nhân Lúc này, tên miền được sử dụng là localhost, hoặc địa chỉ IP là 127.0.0.1 Đặc điểm của việc cài đặt dịch vụ web server trên máy tính cá nhân là người dùng sẽ không thể truy cập từ một máy tính khác Tuy nhiên, nhà phát triển web có thể thực hiện dự án web của mình theo đúng mô hình máy khách – máy chủ ngay trên máy tính cá nhân của mình.

NGÔN NGỮ HTML

Giới thiệu về ngôn ngữ HTML

HTML (HyperText Markup Language) là ngôn ngữ gồm các đoạn mã chuẩn được quy ước để thiết kế web HTML được trình duyệt web hiển thị dưới dạng trang web mà chúng ta thường thấy

HTML là ngôn ngữ đánh dấu văn bản được dùng để tạo ra trang web Tài liệu HTML là văn bản thuần túy được đánh dấu theo quy tắc của HTML Các trình duyệt web sử dụng các đánh dấu này để hiển thị tài liệu HTML thành trang web cho người dùng.

Các phiên bản của HTML

Trình duyệt có chức năng thông dịch ngôn ngữ HTML để hiển thị thành trang web Từ khi HTML ra đời đến nay, có khá nhiều trình duyệt được phát triển bởi các tổ chức khác nhau Điều này gây ra nhiều vấn đề về sự nhất quán trong việc thông dịch, hiển thị trang web của trình duyệt Và W3C giúp giải quyết vần đề này W3C là tổ chức chính thức có nhiệm vụ đưa ra các quy tắc chuẩn trong cú pháp của ngôn ngữ HTML, nhằm đảm bảo tất cả các trình duyệt, hay phần mềm có chức năng tương tự như trình duyệt, có cách xử lý nhất quán khi thông dịch ngôn ngữ này

HTML được tổ chức W3C phát triển chính thức từ năm 1993 đến nay, có các phiên bản lớn và chính thức như sau:

HTML 1.0 là phiên bản đầu tiên của HTML Nó tập trung hỗ trợ các thành phần hiển thị văn bản và hình ảnh Phiên bản này còn rất hạn chế, có nhiều thành phần có đa dạng tính năng, như định dạng (styling); cấu trúc dữ liệu dạng bảng

Phiên bản HTML 2.0 được phát triển từ năm 1995, với mục đích nâng cấp phiên bản 1.0 để đảm bảo tính nhất quán khi các trình duyệt khác nhau thông dịch cùng một mã nguồn HTML

HTML 3.2 là phiên bản kế tiếp của HTML 2.0, được phát triển từ năm

1997 Với phiên bản này, các thẻ (tag) được phát triển mạnh mẽ và phong phú hơn phiên bản trước, đặc biệt là các thẻ dùng để hiển thị, xử lý các thành phần biểu mẫu (form) Quan trọng hơn hết, HTML 3.2 hỗ trợ mạnh mẽ ngôn ngữ CSS (ngôn ngữ định dạng, trang trí trang web) Đây chính là điểm đột phá tạo nên sự phát triển mạnh mẽ cho web 2.0

Phiên bản 4.01 được phát triển từ năm 1999 Và như trên đã nói, với phiên bản 3.2, HTML bắt đầu hỗ trợ ngôn ngữ CSS Tuy nhiên, việc kết hợp CSS với mã nguồn HTML gây khó khăn rất lớn cho việc bảo trì trang web, và không thể tái sử dụng mã nguồn CSS cho những trang web khác Phiên bản 4.01 phát triển tối đa tính tái sử dụng, tính dễ bảo trì mã nguồn CSS, bằng cách cho phép các mã nguồn trang web tham chiếu tới các mã nguồn CSS thông qua kỹ thuật liên kết ngoài (external style sheet)

Cùng với sự phát triển mạnh mẽ của thế hệ web 2.0, các trang web hiện nay được yêu cầu ngày càng cao, đặc biệt là yêu cầu về tính ngữ nghĩa (semantic) Với một trang web có sự rõ ràng và mang tính ngữ nghĩa (trong các thành phần nó chứa), sẽ hỗ trợ mạnh mẽ cho các trình đọc web, hoặc công nghệ trí tuệ nhân tạo (AI) thu thập nội dung, thông tin một cách nhanh chóng, hiệu quả Chúng ta sẽ tìm hiểu chi tiết về tính ngữ nghĩa của HTML5 ở chương 4.

Cấu trúc ngôn ngữ HTML

Một tài liệu được viết bằng ngôn ngữ HTML sẽ được gọi là tài liệu HTML

Từ cấu trúc tài liệu này, chúng ta cũng sẽ có cấu trúc trang web Dưới đây là hình mô tả cấu trúc của một tài liệu HTML

Hình 2-1 Cấu trúc tài liệu HTML

Như vậy, với một tài liệu HTML, dù là một tài liệu thuần văn bản nhưng vẫn thể hiện rõ cấu trúc gồm 2 phần:

 Mô tả tài liệu (head): chứa các thông tin về tài liệu và trang web gồm: tiêu đề, các từ khoá, và các khai báo liên kết khác Phần này được gọi là siêu dữ liệu (metadata)

 Phần thân (body): nơi chứa các nội dung mà trang web sẽ được trình duyệt hiển thị cho người dùng xem

Về bản chất, tài liệu HTML được tổ chức thành dạng cây như hình sau

Hình 2-2 Tài liệu HTML biểu diễn dạng cây

Từ cấu trúc trên, trình duyệt sẽ hiển thị thành trang web như sau

Hình 2-3 Giao diện trang web khi trình duyệt hiển thị

Vậy là chúng ta thấy rằng, khi hiển thị thành trang web, các thẻ đánh dấu văn bản và các phần siêu dữ liệu sẽ không được hiển thị trên nội dung trang.

Cú pháp ngôn ngữ HTML

Một bộ thẻ đánh dấu được gọi là phần tử HTML (HTML element) Cú pháp đầy đủ cho một bộ thẻ đánh dấu sẽ bắt đầu với một thẻ mở (opening tag), kết thúc là một thẻ đóng (closing tag), cùng với đối tượng bên trong nó, như sau:

TagName là tên của thẻ đánh dấu Một bộ thẻ sẽ gồm thẻ mở và thẻ đóng Dưới đây là một số thẻ đánh dấu thông dụng:

 …: quy định văn bản bên trong là đề mục lớn nhất



…



…



…

Thẻ trong HTML là một thẻ quy định cấu trúc dữ liệu dạng bảng, giúp trình bày nội dung dưới dạng hàng và cột Các thẻ HTML thường bao gồm cả thẻ mở và thẻ đóng, nhưng đối với một số thẻ đặc biệt gọi là thẻ rỗng (empty tag), chúng không chứa nội dung bên trong Thẻ rỗng có cú pháp độc đáo là chỉ có thẻ mở mà không có thẻ đóng, thường dùng để biểu diễn các thành phần không chứa dữ liệu hoặc có hành vi cố định.

 : quy định ngắt dòng

 : tạo một đường ngang

PropertiesList là danh sách các thuộc tính của thẻ Mỗi thuộc tính sẽ gồm có tên thuộc tính và giá trị của thuộc tính Vị trí của thuộc tính sẽ nằm ở phần thẻ mở Mỗi thuộc tính sẽ mô tả chi tiết thêm cho thẻ

Ví dụ: Tạo một bảng dữ liệu có độ rộng là 200px và có viền xung quanh

Object là những thẻ khác, hoặc là văn bản được chứa bên trong Với những thẻ đánh dấu văn bản thì object chính là văn bản Ví dụ: Chào mừng đến với môn TKWeb

Ngoài ra, HTML chứa nhiều thẻ đóng vai trò là khung chứa cho các thẻ khác, tạo thành các đối tượng phức tạp hơn Ví dụ: Chào mừng!, trong đó đối tượng chính là toàn bộ thẻ (phần được in đậm).

Các loại thẻ văn bản và danh sách

Nhóm thẻ này quy định việc hiển thị văn bản tại trình duyệt HTML có những nhóm thẻ sau

Các thẻ này quy định cấp độ tiêu đề của văn bản HTML cho ta 6 cấp độ tương ứng: h1, h2, h3, h4, h5, h6 Trong đó, h1 (là heading 1) là cấp độ lớn nhất, và h6 là nhỏ nhất Hai hình bên dưới minh họa cho các thẻ tiêu đề này

Hình 2-4 Ví dụ mã HTMLl cho các heading 1 đến heading 6

Hình 2-5 Kết quả trình duyệt hiển thị

2.5.2 Thẻ đoạn văn (paragraph) Để trình duyệt hiển thị một đoạn văn trên trang web thì chúng ta sử dụng thẻ

với cú pháp như sau:

nội dung đoạn văn

Nguyên tắc quan trọng khi sử dụng thẻ đoạn văn là không được lồng một thẻ đoạn văn khác bên trong nó Ví dụ trường hợp này là sai chuẩn của W3C (từ phiên bản HTML5 trở lên), vì có hiện tượng lồng đoạn văn vào nhau:

Trong nhóm này, HTML có một loại thẻ giúp ngắt dòng, đó là Thẻ

là thẻ rỗng (empty tag) Ví dụ ta có đoạn mã HTML như sau:

Bài thơ: Bánh Trôi Nước - Tác giả: Hồ Xuân HươngThân em vừa trắng lại vừa tròn,Bảy nổi ba chìm với nước non,Lớn nhỏ mặc dù tay kẻ nặn,Mà em vẫn giữ tấm lòng son.

Hình 2-6 Kết quả hiển thị khi sử dụng thẻ

Thẻ danh sách được chia thành 2 loại: danh sách có thứ tự (ordered list), và danh sách không thứ tự

2.5.3.1 Danh sách có thứ tự

Với danh sách có thứ tự, chúng ta sử dụng thẻ

như sau:

Danh sách thứ 1

Danh sách thứ 2

Danh sách thứ 3

Với đoạn mã HTML trên, ta sẽ có kết quả hiển thị tại trình duyệt như sau:

Hình 2-7 Kết quả trình duyệt hiển thị

Danh sách thứ tự có thể dùng số thứ tự (1, 2, 3,…) hoặc dùng theo dạng chữ cái (A, B, C, ) Để quy định hiển thị dạng số hay chữ, chúng ta sẽ sử dụng thuộc tính type với cú pháp type = “value” Value sẽ gồm các giá trị và có ý nghĩa như sau:

Bảng 2-1 Bảng liệt kê các giá trị của thuộc tính type trong danh sách có thứ tự

1 Hiển thị số đếm 1, 2, 3,… (mặc định được sử dụng nếu không khai báo thuộc tính type)

A Hiển thị ký tự in hoa từ A Z a Hiển thị ký tự in thường từ a z

I Hiển thị số la mã in hoa I, II, III, IV,… i Hiển thị số la mã in thường i, ii, iii, iv,…

Ví dụ chúng ta sẽ dùng thuộc tính type = “i” để hiển thị ký tự la mã thay cho số đếm như sau:

Danh sách thứ 1

Danh sách thứ 2

Danh sách thứ 3

Hình 2-8 Kết quả hiển thị danh sách với loại ký tự La Mã in thường

2.5.3.2 Danh sách không có thứ tự

Danh sách không thứ tự được thể hiện dưới dạng các ký hiệu hoa thị (bullet), như:  (circle),  (square) Đoạn mã bên dưới hiển thị danh sách không thứ tự với ký hiệu hoa thị là hình vuông (square)

Hình 2-9 Kết quả hiển thị danh sách không thứ tự

Các loại thẻ đối tượng

Ở nhóm thẻ này, chúng ta sẽ tìm hiểu các loại đối tượng gồm: hình ảnh (image), phim (video) và khung (frame)

Trang web có 2 loại hình ảnh (với mục đích khác nhau), đó là: hình ảnh nội dung, và hình ảnh nền

Hình ảnh nội dung được dùng để truyền tải nội dung cho người đọc Hình ảnh này có cú pháp như sau:

Như vậy, thẻ hình ảnh nội dung thuộc loại rỗng (empty tag), có hai thuộc tính chính gồm:

 Source (src): chứa giá trị là đường dẫn tương đối hay tuyệt đối của tập tin ảnh mà chúng ta muốn hiển thị

Thuộc tính alt cung cấp văn bản mô tả cho hình ảnh, đóng vai trò quan trọng trong trường hợp hình ảnh không hiển thị trên trình duyệt Thuộc tính này thay thế hình ảnh để truyền tải thông điệp đến người đọc, giúp họ hiểu nội dung ngay cả khi hình ảnh không hiển thị.

Ví dụ ta có đoạn mã html cho việc hiển thị ảnh nội dung như sau:

Ảnh nền là dạng hình ảnh chỉ đóng vai trò trang trí, không mang nội dung hay ý nghĩa cụ thể Để tạo ảnh nền đẹp mắt, bạn có thể tìm hiểu kỹ thuật trong chương 3.

Thẻ video là thành phần HTML dùng để hiển thị và điều khiển nội dung video trên trang web Để sử dụng được thẻ video, trình duyệt cần hỗ trợ trình điều khiển phát video Hiện nay, phần lớn các trình duyệt phổ biến đều tích hợp sẵn trình điều khiển này, do đó người dùng không cần cài đặt thêm bất kỳ plugin nào để có thể xem video trên trang web.

Cú pháp của thẻ video như sau:

Thẻ video có đầy đủ thẻ mở, thẻ đóng Và thẻ này có các thuộc tính:

 width: kích thước chiều rộng của video

 height: kích thước chiều cao của video

 controls: thuộc tính cho phép hiển thị các nút điều khiển video bao gồm: play, pause, …

Thẻ source là thẻ chỉ định đường dẫn tới file video thông qua thuộc tính src (source), và chỉ định rõ video thuộc loại tập tin gì thông qua thuộc tính type HTML hiện hỗ trợ các loại tập tin video sau:

Bảng 2-2 Bảng các định dạng video được hỗ trợ Định dạng Giá trị thuộc tính type

Chúng ta có thể sử dụng nhiều thẻ source trong cùng một thẻ video để hỗ trợ đa dạng trình duyệt (ở phía người dùng) hiển thị được video Ví dụ bên dưới sẽ hiển thị video có chiều rộng là 800px và chiều cao là 600px, với đầy đủ các tính năng của trình điều khiển video

Như tên gọi, loại thẻ này dùng làm khung chứa cho những đối tượng khác trong trang web Một khung sẽ hoạt động độc lập, và có các thanh cuộn (ngang, dọc) riêng Điều này giúp cho người dùng có một khung làm việc độc lập ngay trong trang web Việc chia trang web thành các khung độc lập có những lợi ích như sau:

 Giúp giảm băng thông mạng khi trang web nạp (load) lại dữ liệu Điều này giúp cải thiện tốc độ của trang web

 Giúp ta chia nhỏ mã nguồn trang thành các mã nguồn tập tin độc lập

Từ đó, giúp dễ bảo trì trang web hơn

 Dưới đây là mã nguồn của một trang sử dụng thẻ frame để chia thành các khung độc lập

Ví dụ này có 3 khung (frame) Khung tên “top” sẽ liên kết với tập tin banner.html (nơi chứa mã nguồn hiển thị banner của trang web) Khung tên “left” sẽ liên kết tới tập tin menu.html (nơi chứa mã nguồn hiển thị trình đơn của trang web) Còn khung “main” sẽ liên kết với tập tin home.html (nơi chứa nội dung chính như các sản phẩm của doanh nghiệp)

Với mã nguồn trên, ta có cấu trúc trang web sau khi chia khung như sau: banner.html menu.html home.html

Tuy nhiên, cách thức chia khung như vậy có nhiều khuyết điểm Khuyết điểm lớn nhất là tạo sự phức tạp khi các khung chứa dữ liệu có kích thước lớn hơn kích thước được định sẵn trong trang Lúc này, khung sẽ xuất hiện các thanh cuộn ngang, hoặc dọc Điều này làm người dùng dễ bị bối rối và gặp khó khăn khi đọc nội dung Do đó, cách chia như vậy không còn được sử dụng phổ biến

Bắt đầu từ phiên bản HTML5 trở lên, vấn đề này được khắc phục bằng cách sử dụng thẻ iframe (inline frame) Điểm khác biệt cơ bản của inline frame so với frame là khung sẽ được đặt ở bất kỳ đâu trong trang web Khung được xem là một đối tượng, như video hoặc hình ảnh Điều này giúp iframe có độ linh hoạt tốt hơn

Thẻ iframe có cú pháp như sau:

Thẻ này có một số thuộc tính phổ biến:

 width: chiều rộng của khung

 height: chiều cao của khung

 src: đường dẫn tới tập tin chứa mã nguồn của frame

 frameborder: đường viền của khung (có: 1, không: 0)

 allowfullscreen: cho phép mở toàn màn hình frame này không Một ví dụ ứng dụng thẻ iframe là ta nhúng các video từ kênh YouTube vào trang web Sau đây là mã nguồn cho ví dụ này:

Thẻ siêu liên kết (hyperlink)

2.7.1 Liên kết tới tài liệu khác

Một trang tài liệu HTML được cấu tạo bởi hai phần, đó là: siêu văn bản (hypertext) và siêu liên kết (hyperlink) Siêu liên kết thường được gọi là liên kết (link) Nó giúp các tài liệu có khả năng liên kết được với các tài liệu khác

Khi người dùng gõ một địa chỉ trang web trên thanh địa chỉ của trình duyệt, hoặc nhấp chuột trái vào liên kết, quá trình yêu cầu (request) và hồi đáp (response) sẽ xảy ra giữa trình duyệt và web server

Một liên kết có đầy đủ các thành phần của một URL, gồm:

 Giao thức http hoặc https

 Cổng: mặc định cổng cho dịch vụ web server là 80

 Đường dẫn tới tài liệu html cần truy cập

Ví dụ, ta có một liên kết tới tài liệu html (là một trang web), như sau: http://www.buh.edu.vn/khoahtttql/gioithieu.html

Liên kết này có 4 thành phần, gồm:

 Tên miền: www.buh.edu.vn

 Cổng: 80 (mặc định nên không hiển thị)

 Đường dẫn tới tài liệu: khoahtttql/gioithieu.html

Dạng liên kết đầy đủ này chính là đường dẫn tuyệt đối Tuy nhiên, nhà phát triển web chỉ cần sử dụng dạng đường dẫn tương đối để liên kết các trang web trong cùng dự án web Để dễ dàng phân biệt, với đường dẫn tuyệt đối, ta sẽ dùng để liên kết với các trang web bên ngoài dự án web của mình Loại liên kết này được gọi là liên kết ngoài (external link)

Với đường dẫn tương đối, ta sẽ dùng để liên kết các trang web trong dự án web ta đang phát triển Chúng được gọi là liên kết trong (internal link) Để tạo một siêu liên kết, ta sử dụng thẻ với cú pháp như sau:

Văn bản hiển thị

Thẻ này có các thành phần sau đây:

 href: thuộc tính chỉ định đường dẫn tương đối hay tuyệt đối tới tập tin muốn liên kết

 target: chỉ định hành vi khi siêu liên kết được nhấn bởi người dùng Thuộc tính target này có 3 giá trị sau:

▪ _self: nội dung trang của liên kết sẽ nạp ngay trên chính khung (frame) đang chứa liên kết

▪ _parent: nội dung trang của liên kết sẽ nạp trên khung (frame) cha, là khung đang chứa khung có liên kết

▪ framename: là giá trị của thuộc tính name trong thẻ hoặc mà ta muốn nội dung của liên kết sẽ nạp vào khung đó

▪ _blank: nội dung của liên kết sẽ được nạp vào một cửa sổ mới hoặc thẻ mới của trình duyệt

2.7.2 Liên kết trong cùng một tài liệu

Có nhiều trường hợp, nội dung trang web rất dài Vì thế, ta cần tạo một liên kết đi từ cuối trang đến đầu trang, và ngược lại Hoặc có những trường hợp, ta cần đánh dấu các mục lớn để người dùng dễ dàng đi đến các mục đó Với những trường hợp như vậy, ta có thể sử dụng liên kết đoạn (fragment id) Để sử dụng liên kết đoạn, ta cần 2 vị trí:

 Vị trí đầu tiên là nơi được chuyển tới (destination) Đây là nơi giúp người dùng có thể tới được thông qua việc nhấn vào liên kết

 Vị trí thứ hai là liên kết (link), là nơi người dùng có thể nhấn vào để tới khu vực nội dung họ muốn

Vị trí được chuyển tới (destination) có cú pháp như sau:

 id: là thuộc tính chứa giá trị (value) duy nhất trong tài liệu html (trang web) để đánh dấu nơi được chuyển đến (destination)

 Object: có thể là đoạn văn hoặc hình ảnh hoặc bất cứ dữ liệu nào

Vị trí liên kết (link) có cú pháp như sau:

 href: là thuộc tính chứa giá trị của thuộc tính id ở thẻ của nơi chuyển đến (destination) Ta cần lưu ý là ta phải sử dụng kí tự “#” ở trước giá trị

 Object: là đoạn văn hoặc hình ảnh dùng làm phần hiển thị cho liên kết.

Thẻ bảng (table)

Trong HTML, đa số các bảng được dùng để thể hiện những số liệu dưới dạng dòng và cột Đầu tiên, ta sẽ tìm hiểu về cấu trúc bảng

2.8.1 Cấu trúc bảng dữ liệu

Một cấu trúc bảng dữ liệu có các thành phần sau đây:

 Tiêu đề (header): tên của cột

 Thân (body): các dòng dữ liệu

 Chân (footer): tổng hợp các dòng ở phần thân để thống kê

Hình 2.10 Ví dụ cấu trúc đầy đủ của một bảng dữ liệu

Dựa vào các thành phần cấu tạo nên bảng, HTML có các thẻ tương ứng sau đây:

 : thẻ tạo một cấu trúc bảng

 : thẻ tạo một cấu trúc tiêu đề bảng

 : thẻ tạo một cấu trúc thân bảng dữ liệu

 : thẻ tạo một cấu trúc chân bảng

 : tạo một dòng dữ liệu

 : tạo một ô dữ liệu Để tạo bảng dữ liệu, ta có cú pháp tổng quát như sau:

Chú thích cho bảng

Tiêu đề cột 1

Tiêu đề cột 2

… Tiêu đề cột n

Giá trị ô dòng 1, cột 1

Giá trị ô dòng 1, cột n

Giá trị ô dòng 2, cột n

Giá trị ô 1 của dòng cuối cùng

Giá trị ô n của dòng cuối cùng

2.8.3 Kỹ thuật trộn các ô dữ liệu lại với nhau

Để trộn ô theo chiều ngang trong HTML, sử dụng thuộc tính colspan trong thẻ mở đầu Thuộc tính này xác định số ô sẽ được trộn lại với nhau theo chiều ngang.

Hàng 1 cột 1 và hàng 1 cột 2

Mã nguồn trên sẽ hiển thị kết quả là bảng như sau:

Hàng 1 cột 1 và hàng 1 cột 2 Hàng 1 cột 3

Hàng 2 cột 1 Hàng 2 cột 2 Hàng 2 cột 3

Trộn các ô theo chiều dọc: Để trộn các ô theo chiều dọc, ta sử dụng thuộc tính rowspan ngay bên trong thẻ mở (ô bắt đầu thực hiện trộn) Ví dụ, mã nguồn bên dưới sẽ thực hiện việc trộn 3 ô lại với nhau, là các ô: hàng 1 cột 1, hàng 2 cột 1, và hàng 3 cột 1

Thiết kế web

Mã nguồn trên sẽ cho kết quả là bảng như sau:

Các loại thẻ điều khiển biểu mẫu (form control)

Với một tài liệu siêu văn bản (HTML), ngoài những dữ liệu là văn bản, hình ảnh, video, khung, bảng dữ liệu…, trang web còn cho chúng ta thu thập thông tin từ người dùng Các phần tử trang giúp người dùng nhập dữ liệu được gọi là phần tử điều khiển biểu mẫu (form control) Hình bên dưới là một ví dụ về biểu mẫu dùng để nhận thông tin từ người dùng

Hình 2-10 Ví dụ một biểu mẫu đăng ký trên web

Thẻ form được sử dụng để tạo ra các biểu mẫu Thẻ này là cha của tất cả các thẻ điều khiển Vì thế, nó có đầy đủ thẻ mở và thẻ đóng Thẻ biểu mẫu này có cú pháp như sau:

Bảng 2-3 Bảng các thuộc tính của thẻ form

STT Tên thuộc tính Diễn giải

1 name Mỗi form sẽ được đặt một tên duy nhất trong một trang web

2 action Lưu trữ giá trị là đường dẫn đến trang xử lý thông tin nhập liệu trong form

3 method Chấp nhận một trong 2 giá trị là post hoặc get Hai kỹ thuật này liên quan tới xử lý web ở phía server

Nội dung bên trong thẻ form sẽ chứa các thẻ điều khiển biểu mẫu khác để tạo ra một biểu mẫu hoàn chỉnh Ở các phần tiếp theo, chúng ta sẽ tìm hiểu các thẻ điều khiển biểu mẫu phổ biến

2.9.2 Thẻ nhập liệu văn bản (textbox) Đây là loại thẻ điều khiển nhập liệu phổ biến nhất, thường được gọi là ô nhập liệu Đúng với bản chất và tên gọi, các ô text này đơn giản là giúp người dùng nhập liệu thông tin Chúng thường được dùng để nhập các thông tin như: họ tên, số điện thoại, email,… Và chúng cho phép người dùng nhập liệu dưới dạng các chuỗi ký tự, với độ dài giới hạn

Bảng 2-4 Bảng các thuộc tính của textbox

1 name Mỗi ô nhập văn bản sẽ được đặt một tên duy nhất trong một trang web

2 value Chứa giá trị văn bản sẽ hiển thị trong ô textbox Đoạn mã nguồn dưới đây sẽ cho kết quả là một ô văn bản có dòng chữ “Đại học Ngân Hàng Tp.HCM”

Hình 2.12 Kết quả của mã nguồn textbox

2.9.3 Ô nhập liệu mật khẩu (password) Ô nhập liệu mật khẩu sẽ nhận các ký tự từ người dùng nhập vào, giống như ô nhập liệu văn bản Tuy nhiên, ô nhập liệu mật khẩu sẽ hiển thị thành các kí tự * nhằm không để lộ văn bản mà người dùng nhập

Một ô nhập liệu mật khẩu có cú pháp như sau:

2.9.4 Nút nhấn gửi (submit) Ở đây, thuật ngữ “submit” có nghĩa là người dùng đồng ý với tất cả các thông tin mà họ đã nhập trong biểu mẫu, và tiến hành gửi tất cả các thông tin này cho trang web xử lý Những trường hợp khi người dùng nhấn vào nút “Đăng nhập”, “Đăng ký” hoặc “Gửi” đều có ý nghĩa này

Cú pháp tạo ra nút submit như sau:

Bảng 2-5 Bảng các thuộc tính của nút submit

1 name Mỗi nút nhấn sẽ được đặt một tên duy nhất trong một trang web

2 value Chứa giá trị văn bản sẽ hiển thị trên nút submit

2.9.5 Điều khiển hộp kiểm đơn chọn (radiobox) Đây là loại điều khiển nhập liệu với thao tác nhanh thông qua việc nhấp chuột Với cách nhập liệu này, người dùng sẽ không mất thời gian nhập dữ liệu như trong ô nhập liệu văn bản Và quan trọng là dữ liệu được thu thập sẽ thống nhất, giảm thiểu sai sót, giúp ta dễ dàng thống kê hoặc xử lý

Radiobox là loại kiểm soát đầu vào sử dụng để cho phép người dùng chọn một trong nhiều tùy chọn được liệt kê Trái ngược với checkbox, radiobox giới hạn người dùng trong việc chỉ chọn một lựa chọn duy nhất.

Bảng 2-6 Bảng các thuộc tính radiobox

1 name Giá trị thuộc tính này là tên chung cho tất cả các nút radio trong cùng một nhóm giá trị mà chúng ta đưa ra cho người dùng lựa chọn

2 value Chứa giá trị văn bản sẽ được dùng để phân biệt với các nút radio khác trong cùng một nhóm

3 checked Nhận giá trị “true” hoặc “false” Với “true”, radiobox sẽ được chọn Còn với “false”, radiobox sẽ không được chọn

4 Văn bản hiển thị Văn bản được hiển thị kế bên nút radio

Mã nguồn sau đây sẽ hiển thị 2 nút nhấn chọn giới tính là “Nam” và “Nữ” Người dùng chỉ được phép chọn một trong hai nút nhấn này

Nam

Nữ

Hình 2-11 Kết quả mã nguồn radiobox

2.9.6 Điều khiển hộp kiểm đa chọn (checkbox)

Checkbox tương tự như radiobox vì chúng cho phép người dùng chọn các giá trị được liệt kê bằng cách nhấp chuột Điểm khác biệt chính là checkbox cho phép người dùng chọn nhiều giá trị trong nhóm các giá trị được liệt kê, trong khi radiobox chỉ cho phép chọn một giá trị duy nhất.

Bảng 2-7 Bảng các thuộc tính của checkbox

1 name Giá trị thuộc tính này là tên chung cho các nút check khác trong cùng một nhóm giá trị mà chúng ta đưa ra cho người dùng lựa chọn

2 value Chứa giá trị văn bản sẽ được dùng để phân biệt với các nút check khác trong cùng một nhóm

3 checked Nhận giá trị “true” hoặc “false” Với “true”, checkbox sẽ được chọn Còn với “false”, checkbox sẽ không được chọn

4 Văn bản hiển thị Văn bản được hiển thị kế bên nút checkbox

Mã nguồn bên dưới sẽ tạo ra 4 checkbox với văn bản hiển thị tương ứng như sau: Súp, Phở, Thịt bò, Cá Trong đó, checkbox Súp và Thịt bò được chọn

Súp

Phở

Thịt bò

Cá

Hình 2-12 Kết quả thực hiện mã nguồn checkbox

2.9.7 Điều khiển thanh chọn (selectbox) Điều khiển selectbox cũng thuộc nhóm điều khiển nhập liệu dạng chọn Tuy nhiên, hình thức chọn của nó là có một hộp thoại xổ xuống cho người dùng chọn

Một selectbox được cấu tạo bằng thẻ Thẻ này có thẻ mở và thẻ đóng, có thuộc tính “name” nhằm định danh tên của điều khiển

Ngoài ra, bên trong thẻ có các thẻ con Mỗi thẻ sẽ tương ứng với một mục chọn (trong danh sách chọn) Thuộc tính “value” trong thẻ option giúp xác định giá trị duy nhất của option đó trong danh sách Và thẻ option còn có thuộc tính selected, giúp xác định option đó có được chọn hay không

NGÔN NGỮ CSS

Giới thiệu

CSS là từ viết tắt của Cascading Style Sheets CSS là ngôn ngữ giúp trình bày trang web (định dạng font chữ, chọn màu chữ, màu nền, điều chỉnh khoảng cách,…), và trang trí trang web sao cho có tính thẩm mỹ cao

Năm 1996, phiên bản đầu tiên - CSS1 được giới thiệu (HTML vào thời điểm đó đã đạt đến phiên bản 4.0)

Sự ra đời của CSS giúp các nhà phát triển web giải quyết được bài toán đau đầu khi phải xử lý trang web mà mã nguồn HTML bao gồm cả nội dung, thẻ đánh dấu (tag), lẫn phần trình bày trang web sao cho bắt mắt Đây là một cuộc cách mạng thật sự

Năm 1998, CSS2 tiếp tục được giới thiệu Với nhiều tính năng như: relative position, absolute position, fixed position, z-index…

Version 2.1 (CSS 2.1) được công bố chính thức vào năm 2011, là phiên bản hoàn chỉnh mà gần như tất cả các trang web hiện nay đều sử dụng

W3C (World Wide Web Consortium) vẫn không ngừng phát triển CSS để cho ra đời version 3 (CSS 3), version 4 (CSS 4) với nhiều tính năng vượt trội gồm: rounded corners, box shadows, gradients, transitions & animations, multi-column layout, flexible box (flexbox)

3.1.2 Lợi ích khi sử dụng CSS

CSS là một ngôn ngữ lập trình hỗ trợ tách biệt việc phân cấp cấu trúc trang web và thiết kế giao diện, cho phép mã HTML đơn giản hơn và dễ dàng tùy chỉnh giao diện cho phù hợp với sở thích cá nhân.

Cú pháp của ngôn ngữ CSS

Thông thường, một trang tài liệu html có rất nhiều phần tử trang Và vấn đề đặt ra là làm sao để chọn được những phần tử ta cần để trang trí cho phần tử đó Selector trong CSS sẽ giúp ta giải quyết vấn đề này

Selector là một khái niệm nền tảng đối với ngôn ngữ CSS Selector là các phần tử trang được chọn để áp dụng mã nguồn css Hay nói cách khác, selector đại diện cho các phần tử trang web mà chúng ta muốn áp dụng style vào

Cú pháp của ngôn ngữ CSS có 2 thành phần: Selector và Declaration Selector {Declaration}

Declaration bao gồm các cặp thuộc tính `property-value` quy định các định dạng như màu sắc, kích thước, font chữ Declaration có cú pháp như sau:

{property: value; property: value; property: value,…}

CSS quy định rất nhiều property Mỗi property sẽ có chức năng khác nhau

Và mỗi property sẽ có một miền giá trị cho nó

Ví dụ, mã nguồn CSS dưới đây sẽ trang trí cho đoạn văn (paragraph) có kích cỡ chữ là 14pt, và màu chữ là màu xanh (blue)

p {font-size: 14pt; color: blue;}

Trường ĐH Ngân Hàng Tp Hồ Chí Minh

Nguyên tắc ưu tiên và tính kế thừa của CSS

3.3.1 Các khái niệm cơ bản

Style bao gồm kích cỡ, màu sắc, bố cục,… mà ta áp dụng lên các thành phần của trang web

Cascade là thuật ngữ đề cập tới thứ tự áp dụng style trên các phần tử trang của một trang web Thứ tự này rất quan trọng vì trường hợp hai phần tử trang bị xung đột do nhiều style khác nhau cùng áp dụng lên nó (bị áp dụng bởi nhiều style) xảy ra rất thường xuyên, dẫn đến việc trang web hiển thị không như ý Vì vậy, ta cần lưu ý tới việc style nào sẽ được ưu tiên theo thứ tự “xếp tầng” (cơ chế cascade) để nó được áp dụng

3.3.2.1 Dựa trên mức độ quan trọng (importance)

Với cơ chế ưu tiên dựa trên mức độ quan trọng, các style sheet sẽ phụ thuộc vào 3 nguồn sau: User agent, User và Author

User agent: Các trình duyệt (browser) sẽ quy định loại này Hay nói cách khác, đây chính là style mặc định của trình duyệt

User: Trong user agent, các trình duyệt quy định style mặc định Còn trong user, style sẽ được quy định bởi chính người sử dụng (người lướt web) Nói một cách dễ hiểu hơn là người sử dụng sẽ quy định, điều chỉnh style theo ý mình, thông qua phần “cài đặt” (settings) trên mỗi trình duyệt

Author: Đây là nguồn do chính người thiết kế trang web tạo ra

Lưu ý: Thứ tự ưu tiên từ cao đến thấp trong importance lần lượt là author, user, và user agent

3.3.2.2 Dựa trên mức độ cụ thể (specificity) Đây là thuật ngữ có liên quan đến mức độ cụ thể của “selector” (như đã đề cập ở mục 2.1)

Một trang web thường có nhiều phần tử trang Và CSS cho phép ta tìm kiếm những phần tử trang cụ thể để sử dụng style mà ta muốn áp dụng, dựa trên các chỉ định (của ta) Chỉ định nào càng cụ thể, độ ưu tiên càng cao

3.3.2.3 Dựa vào thứ tự mã nguồn (source order)

Cách thức hoạt động này tuân theo quy tắc “style nào được tạo sau sẽ có độ ưu tiên thấp hơn style được tạo trước”

Tính kế thừa xảy ra khi các phần tử con thừa hưởng giá trị style từ phần tử cha

Ngôn ngữ CSS giúp việc tổ chức mã nguồn của trang web trở nên khoa học …

Ở đoạn mã ví dụ trên thì 2 phần tử và

đang là con của phần tử

Lúc này, đang có style là kích thước font chữ 20px và màu chữ là màu xanh Các style này sẽ được áp dụng cho 2 phần tử con của là

Tích hợp mã CSS vào trang web

Ngôn ngữ CSS không tồn tại độc lập mà nó cần kết hợp với ngôn ngữ HTML để tạo ra một trang web hoàn chỉnh Do đó, việc tích hợp mã nguồn CSS vào tài liệu HTML là điều cần thiết Có 3 cách để tích hợp mã nguồn CSS vào tài liệu HTML, đó là:

Internal CSS là một trong những cách tiêu biểu để thêm CSS style vào trang web Internal CSS được đặt trong khu vực thẻ của một trang html, và nó chỉ hoạt động cố định trên trang này Internal CSS có những ưu điểm như: chỉ có một trang chịu ảnh hưởng bởi style sheet, không cần phải upload nhiều files, Classes và IDs đều có thể được dùng bởi Internal style sheet…

 Đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ

 Cặp thẻ được đặt bên trong cặp thẻ

Dưới đây là một ví dụ mà nội dung của thẻ sẽ có màu chữ là màu đỏ

External CSS là cách để thêm một CSS style vào trang web bằng cách liên kết nó với một file CSS ở bên ngoài External style sheet có những ưu điểm nổi bật như: kích thước trang HTML nhỏ hơn, cấu trúc gọn hơn; một file style.css có thể dùng cho nhiều trang; tốc độ load trang nhanh hơn…

Toàn bộ mã CSS được chứa trong file riêng có phần mở rộng css là một ý tưởng được dùng khi một file CSS được áp dụng cho nhiều trang khác nhau

Ta có thể thay đổi cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS Với cách này thì file CSS sẽ được chèn vào văn bản HTML thông qua thẻ .

Lưu ý: Trong file không được chứa mã HTML Khi ghi lại, ta bắt buộc phải ghi lại với phần mở rộng là css

Sử dụng thẻ được đặt trong thẻ , như sau:

Trong đó, giá trị thuộc tính href sẽ là địa chỉ đường dẫn tới tập tin css

Ví dụ, mã nguồn bên dưới sẽ cho kết quả là văn bản “Trường ĐH Ngân Hàng Tp Hồ Chí Minh” có màu chữ là màu đỏ

Mã nguồn tập tin style.css h1{color:red;}

Mã nguồn tập tin trangchu.html

Inline sử dụng thuộc tính “style” trong tất cả các thẻ của HTML để áp dụng ngôn ngữ CSS vào các phần tử trang Với cách thức này, các style chỉ áp dụng cho duy nhất một phần tử trang Vì thế, tính tái sử dụng với kỹ thuật này là thấp nhất nhưng lại có độ ưu tiên cao nhất

Ví dụ dưới đây cũng sẽ thay màu chữ cho văn bản “Trường ĐH Ngân Hàng Tp.Hồ Chí Minh” thành màu đỏ

Các loại selector

3.5.1 Universal selector Đây là loại selector mà tất cả các phần tử trang web sẽ được chọn khi ta sử dụng Tuy nhiên, loại selector này không được khuyến khích sử dụng Vì nó sẽ làm thay đổi toàn bộ style mặc định, phá vỡ tính kế thừa (các phần tử con sẽ không được thừa hưởng các đặc điểm từ phần tử cha), dẫn đến trường hợp tất cả các phần tử sẽ có cùng chung các giá trị style mà ta quy định trong loại selector này

Với ví dụ dưới đây, các phần tử trang sẽ có chung một style là chữ màu đỏ, kích thước font là 16px

*{color:red; font-size: 16px;}

Loại selector này sẽ tìm kiếm dựa trên tên của các thẻ tương ứng trong tài liệu HTML, và áp dụng style vào các phần tử này

In the given example, paragraph elements (paragraphs) within a web page will be styled with red text color and a yellow background color by using the CSS code: p { color: red; background-color: yellow; }.

3.5.3 ID selector Đây là loại selector dựa vào thuộc tính “id” của các phần tử trong trang web để thực hiện áp dụng style Vì mỗi phần tử trong trang web chỉ có một giá trị id duy nhất, nên loại selector này chỉ có tác dụng trên một phần tử trang

Ví dụ dưới đây sẽ thực hiện áp dụng style màu nền đỏ vào phần tử trang có giá trị id là “active”

Active

ID selector chỉ áp dụng cho một phần tử duy nhất trên trang web, trong khi Class selector áp dụng cho nhiều phần tử cùng giá trị thuộc tính class Class selector là một kỹ thuật giúp áp dụng các kiểu CSS cho một nhóm phần tử có cùng đặc điểm chung.

Ví dụ dưới đây sẽ áp dụng style màu nền là vàng cho những thẻ div có giá trị của thuộc tính class là “bg-yellow”

.bg-yellow {background-color: yellow;}

Yellow

Mỗi thẻ HTML đều có các attribute (thuộc tính) Attribute selector sẽ sử dụng giá trị của các thuộc tính để chọn ra những phần tử trang cần áp dụng style

Ví dụ dưới đây sẽ áp dụng style màu nền chữ là màu vàng cho các siêu liên kết có thuộc tính target với giá trị là “_blank” a[target= “_blank”]{background-color:yellow;}

Ngoài cú pháp cơ bản để chọn các phần tử có thuộc tính chính xác như giá trị khai báo (value), attribute selector còn cho phép tìm kiếm giá trị một cách tương đối thông qua kỹ thuật ký tự thay thế Dưới đây là bảng liệt kê một số ký tự thay thế và ý nghĩa của chúng

Bảng 3-1 Bảng liệt kê các ký tự thay thế của attribute selector

STT Kí tự Cú pháp Diễn giải Ví dụ

1 ^ [attribute^= “value”] Chọn những phần tử có attribute có giá trị bắt đầu là

Chọn tất cả phần tử trang có thuộc tính class có giá trị bắt đầu là từ “top”, và áp dụng màu nền là màu vàng cho các phần tử đó

2 $ [attribute$= “value”] Chọn những phần tử có attribute với giá trị kết thúc là

Chọn tất cả phần tử trang có thuộc tính class với giá trị kết thúc là từ “end”, và áp dụng màu nền là màu vàng cho các phần tử đó

3 * [attribute*= “value”] Chọn những phần tử có attribute với giá trị có chứa từ

Chọn tất cả phần tử trang có thuộc tính class với giá trị có chứa từ “te”, và áp dụng màu nền là màu vàng cho các phần tử đó

Thuộc tính selector được sử dụng rộng rãi trong việc áp dụng style cho các thành phần điều khiển biểu mẫu (form control) Câu lệnh dưới đây sẽ thực hiện áp dụng style cho tất cả các ô nhập liệu (textbox) có màu nền xanh nước biển (blue) và màu chữ trắng: `input[type="text"] {background: blue; color: white;}`.

Trình chọn pseudo-element cho phép áp dụng style vào các phần cụ thể của một phần tử trang Ví dụ, để tạo sự khác biệt cho ký tự đầu tiên hoặc dòng đầu tiên của một đoạn văn bản, bạn có thể sử dụng trình chọn loại này.

Tag_name::pseudo-element{declaration}

Bảng 3-2 Bảng liệt kê các pseudo-element phổ biến

STT Pseudo-element Diễn giải Ví dụ

1 ::first-line Chọn dòng đầu tiên của phần tử

Dòng đầu tiên của các đoạn văn bản (trong trang web) sẽ có màu chữ là màu xanh (blue) p::first-line{color: blue;}

2 ::first-letter Chọn kí tự đầu tiên của phần tử

Kí tự đầu tiên của các đoạn văn bản (trong trang) sẽ có kích thước font chữ là 20px p::first-letter{font- size:20px;}

3 ::selection Chọn các phần đang được chọn bởi người dùng

Dùng ::selection để tô màu đỏ phần văn bản đã chọn Cú pháp: p::selection {color:red;}

Pseudo-class selector cũng tương tự như pseudo-element selector, nhưng nó được dùng để quy định các trạng thái của phần tử Ví dụ: Màu chữ sẽ thay đổi khi người dùng đưa chuột tới phần tử, hoặc khi người dùng nhấn chuột trên phần tử,…

Tag_name:pseudo-class{declaration}

Bảng 3-3 Bảng liệt kê một số pseudo-class selector phổ biến

STT Pseudo-class Diễn giải Ví dụ

1 :hover Chọn phần tử đang có chuột trỏ tới

Nếu liên kết đang có chuột trỏ tới thì nó sẽ có màu nền màu vàng a:hover {background:yellow;}

2 :checked Chọn phần tử điều khiển control đang có trạng thái là checked

Các phần tử điều khiển form đang có trạng thái checked sẽ được tô màu nền là vàng input:checked {background:yellow;}

3 :link Chọn các phần tử siêu liên kết chưa lần nào được mở

Các phần tử liên kết chưa được click lần nào sẽ có màu nền là vàng a:link {background:yellow;}

4 :visited Chọn các phần tử siêu liên kết đã được mở

Các phần tử liên kết đã được click sẽ có màu nền là vàng a:visited {background:yellow;}

3.5.8 Kỹ thuật nhóm các selector

Kỹ thuật nhóm selector cho phép hợp nhất nhiều selector, giúp áp dụng chung một bộ mã lệnh CSS để định kiểu Ưu điểm của kỹ thuật này là giúp mã nguồn CSS trở nên cô đọng và dễ quản lý hơn.

Cú pháp: selector1, selector2,… selectorN {declaration}

Các thuộc tính về kiểu chữ, văn bản và danh sách

Như chúng ta đã làm quen với cú pháp của ngôn ngữ CSS, thành phần

Thuộc tính trong CSS (Cascading Style Sheets) là tập hợp các đặc điểm dùng để xác định định dạng, từ đó tạo ra phong cách (style) muốn áp dụng cho các thành phần (selector) khác nhau Ngôn ngữ CSS cung cấp nhiều thuộc tính đã được phân loại theo từng đối tượng Tài liệu này sẽ giới thiệu một số thuộc tính phổ biến nhất trong CSS.

3.6.1 Những thuộc tính về kiểu chữ (font properties)

Khi sử dụng thuộc tính font trong CSS, ta có thể xác định tất cả các style liên quan tới font để hiển thị văn bản Sau đây là các thuộc tính phổ biến về font chữ

Thuộc tính font-family chỉ định phông chữ được sử dụng để hiển thị văn bản như: Arial, Times New Roman, Tahoma, Thuộc tính này cho phép liệt kê nhiều loại font (được phân tách bằng dấu phẩy) để dự phòng trong trường hợp trình khách không tồn tại loại phông được chỉ định Thứ tự ưu tiên theo danh sách từ trái qua phải.

Ví dụ dưới đây sẽ chỉ định cho trang web sử dụng phông Sans-serif, nếu trình khách không tồn tại Sans-serif thì sẽ chọn Helvetica, nếu không có hai loại phông này thì sẽ chọn Arial

body { font-family: Sans-serif, Helvetica, Arial;

Thuộc tính font-style được sử dụng để đặt kiểu phông chữ như: normal, italic, oblique Giá trị mặc định của thuộc tính này là normal

Ví dụ dưới đây sẽ tạo 2 loại combinator selector Một loại dành cho đoạn văn với class tên “normal”, đoạn văn này được áp dụng font-style là kiểu chuẩn mặc định Một loại cho đoạn văn bản với class tên “italic”, được in nghiêng chữ

p.normal {font-style: normal;} p.italic {font-style: italic;}

Thuộc tính font-size trong CSS dùng để thiết lập kích thước chữ cho nội dung văn bản Để thiết lập kích thước chữ với giá trị tuyệt đối, bạn có thể sử dụng các đơn vị như px, em, rem hay %.

Trong CSS, giá trị tuyệt đối của kích thước thường được sử dụng là pixel (1 pixel tương ứng là một điểm ảnh) Việc thiết lập font-size với các giá trị pixel (ví dụ: 14px, 16px, …) là một lựa chọn tốt khi chúng ta cần độ chính xác của pixel

Ví dụ dưới đây sẽ thiết lập kích thước cho văn bản của phần tử trang có class “normal_size” là 13px

.normal_size {font-size: 13px;}

b) Thiết lập font-size với giá trị tương đối Đơn vị đo tương đối được sử dụng dựa trên đơn vị đo của phần tử cha, từ đó tính toán ra đơn vị đo của phần tử đang muốn áp dụng Đơn vị đo tương đối này chính là “em” Đơn vị “em” dựa vào kích thước phông chữ của phần tử cha Khi xác định thuộc tính kích thước phông chữ, 1em bằng với kích thước của phông chữ áp dụng cho phần tử cha (của phần tử).Vì vậy, nếu chúng ta đặt kích thước phông chữ là 20px trên thành phần body, thì 1em = 20px và 2em = 40px.

Tuy nhiên, nếu chúng ta chưa thiết lập kích thước phông chữ ở bất cứ đâu trên trang, thì đó là mặc định của trình duyệt, thường là 16px Do đó, theo mặc định 1em = 16px và 2em = 32px

Ví dụ dưới đây sẽ thiết lập kích thước cho văn bản của các thẻ có kích thước là 32px (với trường hợp trang web mặc định kích thước 1em là 16px)

Trong CSS, thuộc tính font-weight được dùng để xác định độ đậm cho văn bản (trong phần tử trang)

Bảng 3-4 Bảng liệt kê các giá trị phổ biến của thuộc tính font-size

STT Giá trị Diễn giải

1 normal Giá trị mặc định, tương đương với khi xác định là

2 bold Giá trị tương đương với khi xác định là 700px

3 bolder Các chữ cái trong phần tử này sẽ đậm hơn các chữ cái trong phần tử cha

4 lighter Các chữ cái trong phần tử cha sẽ đậm hơn các chữ cái trong phần tử này

5 Số nguyên Các giá trị số này xác định độ đậm của chữ cái, từ độ đậm ít nhất đến đậm nhất Trong đó, giá trị 400 là tương đương với giá trị normal, giá trị 700 là tương đương với giá trị bold

3.6.2 Thuộc tính định dạng văn bản

CSS có 5 thuộc tính phổ biến nhất được dùng cho định dạng văn bản, đó là:

Thuộc tính color được dùng để thiết lập màu của văn bản (màu chữ) Để chỉ ra một màu, CSS có các cách sau:

Cách đầu tiên là chỉ định giá trị cho thuộc tính theo tên màu tiếng Anh Ví dụ, đoạn mã dưới đây sẽ thiết lập màu xanh lam cho các thẻ đoạn văn

.p {color: blue;}

Cách thứ hai là gán giá trị màu dạng hex (bắt đầu bởi # và 6 giá trị hex phía sau) Ví dụ dưới đây sẽ áp dụng màu văn bản là màu xanh (blue) cho các thẻ đoạn văn

p {color: #0000FF;}

Cách gán giá trị màu theo hàm trộn màu rgb(red, green, blue) của CSS: Ví dụ: gán màu văn bản đỏ cho thẻ

: p {color: rgb(255, 0, 0);}

Thuộc tính này quy định nội dung văn bản sẽ được in hoa, in thường, hoặc in hoa kí tự đầu của từ Thuộc tính này có các giá trị sau:

Bảng 3-5 Bảng liệt kê các giá trị của thuộc tính text-transform

1 uppercase In hoa văn bản

2 lowercase In thường văn bản

3 capitalize In hoa kí tự đầu mỗi từ

Thuộc tính “text-align” được dùng để canh lề văn bản (text) theo các hướng được quy định trên trang web “text-align” có 4 giá trị sau:

Bảng 3-6 Bảng liệt kê các giá trị của thuộc tính text-align

1 center Hiển thị văn bản ở giữa

2 left Hiển thị văn bản được canh bên trái

3 right Hiển thị văn bản được canh bên phải

4 justify Hiển thị văn bản được canh đều hai bên trái và phải

Thuộc tính “text-decoration” được dùng để trang trí lại văn bản (text) (hiển thị trên trang web) “text-decoration” có một số kiểu gạch tiêu biểu sau:

Bảng 3-7 Bảng liệt kê các giá trị của thuộc tính text-decoration

1 overline Gạch ngang trên văn bản

2 underline Gạch dưới văn bản

3 line-through Gạch ngang qua văn bản

4 none Không hiển thị nét gạch

Mô hình hộp trong CSS

Trong CSS, mô hình hộp là hình chữ nhật bao bọc xung quanh phần tử HTML Nó bao gồm: lề, đường viền, đệm, và nội dung thực tế

Giải thích các thành phần trong mô hình hộp:

 Nội dung (content): nội dung của hộp, nơi văn bản, hình ảnh, video, xuất hiện

 Đệm (padding): khoảng cách từ nội dung đến đường viền của hình hộp

 Đường viền (border): đường viền bao quanh phần đệm và nội dung

 Lề (margin): khoảng cách từ hình hộp này (tính từ đường viền) tới hình hộp khác

Hình 3-1 Mô hình hình hộp

Như vậy, để điều khiển bên trong hình hộp, ta cần điều chỉnh khoảng cách của các thành phần đệm (padding), đường viền (border), và lề (margin) CSS định nghĩa các thuộc tính cho các thành phần này như sau:

Bảng 3-10 Bảng liệt kê các thuộc tính của các thành phần trong box model

Thành phần Tên thuộc tính Diễn giải

Padding-top Khoảng cách phần đệm bên trên Padding-bottom Khoảng cách phần đệm bên dưới Padding-left Khoảng cách phần đệm bên trái Padding-right Khoảng cách phần đệm bên phải

Border-top Đường viền ở trên Border-bottom Đường viền ở dưới Border-left Đường viền bên trái Border-right Đường viền bên phải

Margin-top Khoảng cách phần lề bên trên Margin-bottom Khoảng cách phần lề bên dưới Margin-left Khoảng cách phần lề bên trái Margin-right Khoảng cách phần lề bên phải

3.7.1 Kích thước của một phần tử

Mặc định, trình duyệt tính kích thước chiều rộng và chiều cao của phần tử chỉ dựa trên thành phần nội dung (content) của phần tử đó Tuy nhiên, nếu chúng ta muốn tính kích thước chiều rộng và chiều cao của một phần tử theo đầy đủ 4 thành phần (nội dung, đệm, đường viền và lề) thì chúng ta có công thức sau:

Tổng chiều rộng của phần tử = chiều rộng + phần đệm trái + phần đệm phải + đường viền trái + đường viền phải + lề trái + lề phải

Tổng chiều cao của phần tử = chiều cao + phần đệm trên cùng + phần đệm đáy + đường viền trên + đường viền dưới + lề trên + lề dưới

Thuộc tính box-sizing giúp ta quy định kích thước chiều rộng và cao của phần tử dựa trên hai công thức trên Thuộc tính này có 2 giá trị sau:

 Content-box (mặc định): với giá trị này thì kích thước phần tử chỉ tính dựa trên kích thước chiều rộng và chiều cao của phần nội dung (content)

 Border-box: với giá trị này thì kích thước phần tử sẽ bao gồm đầy đủ kích thước của 4 thành phần nội dung, đệm, lề và đường viền như hai công thức đã mô tả ở trên

3.7.2 Phần tử khối và dòng

3.7.2.1 Phần tử khối (block element)

Phần tử khối (block element) là thuật ngữ chỉ chung cho các thẻ HTML có chức năng tạo khu vực dành riêng cho phần tử đó hiển thị Hay nói đơn giản là mỗi phần tử khối (block) sẽ được hiển thị trên một dòng riêng biệt HTML có các phần tử dạng khối như

,

Hình bên dưới mô tả cho phần tử khối (block element) dựa trên mã nguồn sau:

Phần tử khối là gì?

Là phần tử tạo một vùng không gian cho riêng nó, tức là nó sẽ bắt đầu tại một dòng mới Sau đây là các đặc điểm của phần tử khối

Chiếm trọn không gian dòng mà phần tử đang tọa lạc

Có thể tùy chỉnh chiều rộng và chiều cao của hình hộp

Phần tử khối là gì?

Là phần tử tạo một vùng không gian cho riêng nó, tức là nó sẽ bắt đầu tại một dòng mới Sau đây là các đặc điểm của phần tử khối

 Chiếm trọn không gian dòng mà phần tử đang toạ lạc

 Có thể tuỳ chỉnh chiều rộng và chiều cao của hình hộp

3.7.2.2 Phần tử nội tuyến (inline element)

Phần tử nội tuyến là thuật ngữ chỉ chung cho các thẻ HTML mà khi hiển thị trên trang web, nội dung của phần tử sẽ nằm chung trên một dòng với các phần tử khác nếu kích thước chiều rộng cho phép HTML có các thẻ inline thông dụng như: , , , , ,

Mã nguồn và kết quả dưới đây sẽ giúp ta hiểu hơn về phần tử nội tuyến:

Phần tử nội tuyến Inline Element là gì?

Hoặc mã nguồn dưới đây sẽ cho hai phần tử trang là hình ảnh nằm cạnh nhau Đây là đặc tính của inline element, chỉ chiếm đủ không gian trên trang web dựa trên kích thước của phần tử

Với các phần tử là inline, ta sẽ không thiết lập được các thuộc tính margin- top (lề trên), margin-bottom (lề dưới) Và các phần tử inline cũng không thể thiết lập được các thuộc tính width và height do tính chất inline element chỉ chiếm đủ kích thước không gian của nó

3.7.3 Cơ chế thả trôi (floating)

Khi một phần tử được sắp xếp vào trang web, nó sẽ luôn theo nguyên tắc "luồng tài liệu" (normal document flow) Theo đó, nếu là phần tử khối, nó sẽ chiếm toàn bộ chiều rộng của dòng hiện tại, còn nếu là phần tử dòng, nó sẽ chỉ chiếm đủ không gian của riêng nó.

Nhưng có nhiều trường hợp, ta cần phần tử khối hiển thị bên cạnh các phần tử khác Ví dụ: văn bản nằm bên phải hình, hai đoạn văn hiển thị cạnh nhau (dạng chia cột),… Để giải quyết vấn đề này, CSS cho chúng ta cơ chế “thả trôi” (floating)

Với cơ chế “thả trôi”, phần tử trang được phép nằm ở vị trí bên trái (left) hoặc bên phải (right) của phần tử trước nó, bất kể phần tử trước nó là dạng khối (block) hay dạng dòng (inline) Cơ chế này được thực hiện thông qua thuộc tính

“float” của mỗi phần tử trang Thuộc tính “float” có 3 giá trị, gồm:

Bảng 3-11 Bảng liệt kê các giá trị của thuộc tính float

STT Giá trị Diễn giải

1 none Không thực hiện cơ chế “thả trôi” mà áp dụng cơ chế

2 left Thực hiện cơ chế “thả trôi” phần tử về phía bên trái phần tử trước nó

3 right Thực hiện cơ chế “thả trôi” phần tử về phía bên phải phần tử trước nó

THIẾT KẾ WEB NGỮ NGHĨA

Giới thiệu trang web ngữ nghĩa

Semantic web (web ngữ nghĩa) là sự mở rộng của trang web (như thêm vào các yếu tố ngữ nghĩa) nhằm giúp máy tính khai thác tốt hơn các thông tin/dữ liệu trên trang web.

Trên Semantic web, tài nguyên được cung cấp sẽ đảm bảo sự chính xác về mặt ngữ nghĩa, và linh hoạt, để máy tính và con người có thể cộng tác làm việc hiệu quả hơn.

Bố cục trang web bằng thẻ table

Ở thời web 1.0, việc bố cục trang web bằng thẻ table rất thông dụng bởi tính đơn giản và trực quan của nó Với kiến thức đã được trình bày chi tiết trong chương 2 “Ngôn ngữ HTML”, ta có thể dễ dàng sắp xếp các phần tử trang dưới dạng cấu trúc bảng Ví dụ bên dưới minh hoạ cho bố cục trang web khi sử dụng bảng có cấu trúc 3 hàng 4 cột

LOGO Liên kết 1 Liên kết 2 Liên kết 3

Tuy nhiên, cùng với sự phát triển của Web 2.0, khi yêu cầu tính tương tác với người dùng cao hơn, việc sử dụng bảng để bố cục trang web sẽ gây khó khăn trong việc thay đổi cấu trúc bảng Một trang web động sẽ thường xuyên cập nhật giao diện Ví dụ, khi ta thêm phần tử trang, hoặc xóa phần tử trang sẽ làm cấu trúc bảng bị thay đổi Việc lập trình sẽ gặp khó khăn khi cấu trúc bảng thay đổi Vì thế, ta có một kỹ thuật khác để giải quyết vấn đề này, đó là sử dụng thẻ div.

Bố cục trang web bằng thẻ div

Div là từ viết tắt của từ division (nghĩa là khu vực) Thẻ div được sử dụng để tạo các khu vực kiểu khối hình chữ nhật trên trang web.

Hay nói cách khác, thẻ div được dùng để nhóm các phần tử lại với nhau trong từng khu vực của trang web Các khu vực đó bao gồm: header (nhóm nội dung ở đầu trang web), global navigation (liên kết giữa các trang trong trang web), page body (thân nội dung của trang), content (gồm text và hình ảnh của trang), sidebar (nội dung phụ chạy dọc hai bên trái phải trang web), footer (nhóm nội dung ở cuối trang web).

Ngoài ra, một số cấu trúc hoặc khu vực lớn mà bên trong chứa nhiều thẻ cũng được khuyên dùng thẻ div để phân nhóm Việc nhóm các phần tử trang bằng thẻ div sẽ giúp cho quá trình định dạng, điều khiển,… gom nhóm dễ dàng hơn rất nhiều Người dùng chỉ cần thêm hoặc bớt đặc tính bằng một dòng có gắn thẻ div là khối nội dung đó sẽ thay đổi như yêu cầu

Hình 4-1 Hình minh họa cho bố cục trang web bằng thẻ div

Dưới đây là hình minh họa mã nguồn cho việc xây dựng bố cục trang web bằng thẻ div

4.4 Bố cục trang web bằng thẻ ngữ nghĩa

Với thẻ div, ta có thể bố cục trang web một cách linh hoạt, toàn diện Tuy nhiên, thẻ div chỉ là một khung chứa hình chữ nhật, và không mang một ngữ nghĩa nào khác Trong khi, với bố cục của trang web, các khu vực trên trang có ngữ nghĩa khác nhau Do đó, HTML5 đã phát sinh một số thẻ có ngữ nghĩa để giúp các trình đọc web có thể dễ dàng hiểu được cấu trúc trang web và lấy được thông tin Điều này rất có ý nghĩa với những người khiếm thị, khi các phần mềm web reader là công cụ hỗ trợ mạnh mẽ, giúp họ có thể tiếp cận với các thông tin trên các trang web Đặc biệt, khi những công nghệ AI phát triển dựa trên dữ liệu lớn (big data), việc trang web có ngữ nghĩa sẽ góp phần làm giàu thêm cho kho dữ liệu

Với bố cục trang web, ta có các thành phần sau:

4.4.1 Khu vực tiêu đề (header) Đây là nơi chứa thông tin tiêu đề của trang, thường được đặt logo, các liên kết trang tĩnh (như “Trang chủ”, “Về chúng tôi”, “Liên hệ”) Nguyên tắc quan trọng khi sử dụng thẻ header là nó phải chứa ít nhất một thẻ tiêu đề (heading) Nếu không, trang web sẽ bị lỗi ngữ nghĩa ở phần header này Lý do của vấn đề này sẽ được giải thích trong phần “document outline”

nội dung tiêu đề

Với là một thẻ tiêu đề được chọn từ đến

Ví dụ dưới đây sẽ tạo một cấu trúc header cho trang web, với bên trái là logo và bên phải là các liên kết trang tĩnh

Trang chủ

Về chúng tôi

Liên hệ

Ngoài ra, thẻ header còn được sử dụng trong các thẻ ngữ nghĩa khác để chứa thông tin tiêu đề cho thẻ ngữ nghĩa đang chứa nó, đóng vai trò quan trọng trong việc cung cấp cho công cụ tìm kiếm bối cảnh và ý nghĩa của nội dung trên trang.

Ta sẽ có ví dụ ở phần thẻ ngữ nghĩa article

4.4.2 Khu vực điều hướng chính (navigation)

Mỗi trang web đều cần có liên kết tới các trang khác trong cùng hệ thống web (internal link), hay trong cùng một trang (fragment ID), hoặc liên kết tới một trang ở bên ngoài (external link) Và mỗi trang sẽ có một khu vực chứa các liên kết chính của trang đó Khu vực này được gọi là khu vực điều hướng (navigation)

Ví dụ, trang web dưới đây có 3 khu vực chứa các liên kết Tuy nhiên, chỉ có một khu vực được gọi là điều hướng (navigation), vì nó chứa các liên kết quan trọng nhất của trang

Hình 4-2 Hình trang web minh họa cho phần khu vực điều hướng

4.4.3 Khu vực nội dung chính (main) Đây là khu vực chứa nội dung chính của trang, bao gồm các văn bản, hình ảnh, hoặc video để truyền tải thông tin cho người đọc Main được tạo ra bởi bộ thẻ

Lưu ý rằng, mỗi trang chỉ có một khu vực nội dung chính (main) duy nhất

Vì thế, nếu ta muốn tạo các khu vực chứa nội dung có thể được tái sử dụng cho các trang khác, ta sẽ sử dụng thẻ section Cách sử dụng thẻ section cũng tương tự như thẻ main Nhưng khác là ta có thể tạo nhiều thẻ section trong cùng một trang

Và thẻ section có thể lồng bên trong nó thẻ section khác Điều này tạo nên một cây phân cấp có cấu trúc rõ ràng

Thẻ main được ra đời sau thẻ section Trước đó thì thẻ section giữ vai trò cho việc chứa nội dung chính của trang Có một số trình duyệt vẫn chưa hỗ trợ thẻ main Vì thế, ta có thể sử dụng thẻ section để đảm bảo tính đa trình duyệt cho trang web

Một điểm cần lưu ý nữa là mỗi thẻ main, hay section đều phải có ít nhất một thẻ heading (từ tới ) để đảm bảo khu vực đó luôn có tiêu đề Đây là cơ sở để trang web có mục lục (document outline)

4.4.4 Khu vực mục tin (article)

Khu vực mục tin (article) là một yếu tố độc lập, cho phép các trang web khác tái sử dụng nội dung Khác với section, article thường là dạng văn bản ngắn, có thể là câu hỏi trả lời, bình luận hoặc bài đăng trên blog Giống như section, article bắt buộc phải có tiêu đề (bao gồm ít nhất một thẻ heading).

Ví dụ dưới đây minh họa cho khu vực mục tin thường được sử dụng trong các trang diễn đàn, hay FAQ

Hình 4-3 Hình minh họa cho khu vực mục tin

4.4.5 Khu vực liên quan (aside) Đây là khu vực chứa nội dung liên quan mật thiết với nội dung chính của trang web Khu vực này nằm xung quanh khu vực nội dung chính Nhưng nó hoàn toàn độc lập với khu vực nội dung chính Cũng như các thẻ section, main, article, thẻ này phải có ít nhất một thẻ heading để làm tiêu đề cho nó

Hình bên dưới là ví dụ minh họa cho khu vực liên quan (aside) được sử dụng Trang web ebay đang giới thiệu một sản phẩm là chiếc điện thoại iPhone 6s+ Ngoài những thông tin về đặc tính sản phẩm, giá cả…, trang còn có các thông tin đánh giá, phản hồi của khách hàng cho sản phầm (Top-rated seller) Khi thiết kế phần nội dung đánh giá và phản hồi này độc lập với khu vực nội dung chính, ebay dễ dàng phân phối nội dung này đến các trang khác trong cùng trang web, hoặc đến trang web khác

Hình 4-4 Hình minh họa cho khu vực liên quan

THIẾT KẾ WEB CÓ TÍNH ĐÁP ỨNG

Giới thiệu về tính đáp ứng

Thiết kế web đáp ứng là phương pháp thiết kế website linh hoạt hiển thị hoàn hảo trên mọi thiết bị có kích thước màn hình khác nhau, từ máy tính để bàn, máy tính bảng đến điện thoại thông minh Đây đang là xu hướng chủ đạo trong thiết kế giao diện website hiện nay, mang lại trải nghiệm tối ưu cho người dùng trên mọi nền tảng truy cập.

RWD sử dụng HTML và CSS để thu nhỏ, ẩn, co giãn, phóng lớn, hay di chuyển nội dung để giao diện web hiển thị tốt trên bất kỳ kích thước màn hình nào Để làm được điều đó, ta cần sử dụng kết hợp các kỹ thuật: flexible grid, responsive image, CSS media query một cách linh hoạt Khi người dùng chuyển từ máy tính xách tay sang iPad, hoặc iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý Nói cách khác, các trang web phải có công nghệ tự động đáp ứng theo thiết bị của người dùng Điều này giúp loại bỏ việc tạo nhiều trang web khác nhau cho từng thiết bị, rút ngắn thời gian, và giảm chi phí cho việc thiết kế trang web.

Khái niệm về khung nhìn (viewport)

Khung nhìn (viewport) là khoảng không gian nhìn thấy được trên một cửa sổ trình duyệt Viewport sẽ khác nhau với các thiết bị khác nhau Viewport của điện thoại thường nhỏ hơn rất nhiều so với Desktop, TV,… Sau đây là hình mô tả cho một viewport

Như vậy, kích thước nội dung của trang web có thể vượt quá kích thước vùng nhìn (viewport) Do đó, trình duyệt sẽ tạo thanh cuộn ngang và dọc, cho phép người dùng xem những phần nội dung nằm ngoài phạm vi của vùng nhìn hiện tại.

Viewport là một trong những khái niệm cốt lõi và quan trọng nhất khi ta muốn làm cho trang web có tính đáp ứng Bởi vì, mỗi trang web cần hiển thị tốt trên mọi viewport

HTML5 có một phương pháp giúp nhà thiết kế web kiểm soát viewport, đó là sử dụng thẻ meta Chúng ta có thể thiết lập meta viewport bằng cách đặt vào trong cặp thẻ , như sau:

● Thẻ viewport thiết lập cho trang web hiển thị tương ứng với kích thước của từng thiết bị khác nhau

● Thuộc tính “widthice-width” có nghĩa là đặt chiều rộng của trang web theo chiều rộng màn hình của thiết bị

● Thuộc tính “initial-scale=1.0” thiết lập mức độ phóng ban đầu khi trang được trình duyệt tải lần đầu, với giá trị là 1 (tương đương với mức độ phóng đại là 100%)

Mã nguồn sau đây là một ví dụ đơn giản có thiết lập viewport:

5.2.2 Một số quy tắc làm việc với viewport

Nội dung trang web phải luôn nằm trong giới hạn kích thước của chiều ngang màn hình Người dùng chỉ cần cuộn dọc từ trên xuống để xem được hết nội dung của trang web Vì vậy, nếu để người dùng phải cuộn ngang, hoặc zoom trang web để xem được toàn bộ nội dung, sẽ dẫn đến trải nghiệm người dùng không tốt

Ta có 2 điều quan trọng cần lưu ý, như sau:

 Không sử dụng các phần tử trang có chiều rộng quá lớn Ví dụ: Nếu ta sử dụng hình ảnh có kích thước chiều rộng quá lớn so với chiều rộng của viewport, trình duyệt sẽ xuất hiện thanh cuộn ngang để người dùng có thể xem được toàn bộ ảnh

 Không để thiết lập kích thước chiều rộng của trang web là một con số cụ thể, mà thay vào đó là kích thước chiều rộng của màn hình thiết bị (widthice-width).

Truy vấn điều kiện (media query)

Như đã đề cập, mỗi thiết bị sẽ có viewport khác nhau Việc đầu tiên cho giải pháp thiết kế có tính đáp ứng là phải xác định trang web đang hiển thị trên viewport của thiết bị nào Sau đó, ta tìm tới mã nguồn CSS tương ứng để áp dụng cho viewport đó Đây là ý tưởng của truy vấn điều kiện (media query)

CSS hỗ trợ ta xác định thiết bị đang truy cập trang web Từ đó, ta có thể chỉ định mã nguồn CSS nào được áp dụng Cú pháp sử dụng media query như sau: mediatype [logic operator (expression) [and (expression)] [, (expression)]]

Bảng 5-1 Bảng giải thích các thành phần trong cú pháp media query

STT Thành phần Diễn giải

1 mediatype Tên thiết bị, gồm: screen (màn hình), print (máy in), speech (phần mềm đọc màn hình), all (tất cả các thiết bị trên)

2 logic operator Là những toán tử logic, gồm: and, not, only Dùng để kết hợp thêm điều kiện với giá trị expression

3 expression Là một biểu thức điều kiện trả ra giá trị đúng hoặc sai

Biểu thức điều kiện này thường là kích thước viewport

Ví dụ dưới đây sẽ thực hiện áp dụng mã nguồn CSS trong file “style- large.css” cho các thiết bị có màn hình với chiều rộng viewport tối thiểu từ 640px trở lên

With an expression, you can combine multiple expressions using the "and" operator For example, this will implement the CSS source code in the file.

“style-low-resol.css” cho các thiết bị có màn hình với chiều rộng viewport từ 600px đến 800px

5.3.1 Sử dụng media query thông qua thẻ link

Ta đã hiểu cách sử dụng media query thông qua thẻ (đặt trong thẻ

), được mô tả chi tiết ở trên Đây là cách đơn giản nhất để thực hiện khai báo truy vấn điều kiện Ngoài ra, ta còn 2 cách khác để thực hiện việc này

5.3.2 Sử dụng media query thông qua từ khoá @import

Kỹ thuật này có cú pháp như sau:

@import(“file_name.css”) media query

Ví dụ dưới đây sẽ thực hiện áp dụng mã nguồn CSS trong file “style- large.css” cho các thiết bị có màn hình với chiều rộng viewport tối thiểu từ 640px trở lên

@import(“style-large.css”) screen and (min-width:640px);

5.3.3 Sử dụng media query thông qua từ khoá @media

Kỹ thuật “sử dụng media query thông qua từ khoá @media” được sử dụng phổ biến hơn 2 kỹ thuật trên Kỹ thuật này có ưu điểm vượt trội là ta sẽ viết từng vùng điều kiện một cách độc lập trong mã nguồn Do đó, mã nguồn sẽ dễ đọc và dễ bảo trì hơn

Ví dụ: Ta muốn tạo 3 vùng điều kiện, như sau:

 Với các thiết bị có màn hình và chiều rộng viewport tối đa là 600px, chúng sẽ có style “màu nền trang web là màu xanh da trời (blue)”

 Với thiết bị có màn hình với chiều rộng viewport trong giới hạn từ 600px đến 800px, chúng sẽ có “màu nền trang web là màu xanh lá cây (green)”

 Với thiết bị là máy in thì “màu nền trang web sẽ là màu đỏ”

Dưới đây là mã nguồn sẽ thực hiện các yêu cầu của ví dụ trên:

@media screen and (max-width: 600px){ html{background-color: blue;}}

@media screen and (min-width: 600px) and (max-width: 800px){ html{background-color:green;}}

@media print{html{background-color: red}}

Ứng dụng media query vào thiết kế mang tính đáp ứng

5.4.1.1 Tìm hiểu về điểm ngắt (breakpoint)

Ta đã hiểu cơ chế của truy vấn điều kiện (media query) Từ đó, ta có thể tạo các vùng điều kiện cho trang web, và áp dụng mã nguồn CSS cho từng thiết bị cụ thể Vì mỗi thiết bị có giới hạn kích thước màn hình khác nhau, nên ta sẽ dựa trên kích thước tối thiểu và tối đa của chiều rộng để xác định trang web đang hiển trị trên thiết bị nào Các chỉ số tối đa và tối thiểu của kích thước chiều rộng được gọi là điểm ngắt (breakpoint) Vì khi chạm tới điểm này, trang web sẽ áp dụng mã nguồn CSS khác cho phù hợp với kích thước viewport (đang hiển thị trên thiết bị đó)

Dựa vào các thiết bị phổ biến thường truy cập trang web, ta có 3 nhóm thiết bị sau:

 Điện thoại thông minh (smartphone): có chiều rộng tối đa là 480px

 Máy tính bảng (tablet): có chiều rộng từ 481px -> 767px

 Laptop & PC: có chiều rộng tối thiểu là 768px

Dựa vào các điểm breakpoint trên, ta sẽ thiết lập ít nhất 3 truy vấn điều kiện (media query) để đảm bảo trang web sẽ hiển thị tốt trên 3 nhóm thiết bị: điện thoại di động, máy tính bảng, máy tính cá nhân (hoặc laptop) Tuy nhiên, ta sẽ ưu tiên cho trang web hiển thị trên một nhóm thiết bị để có cách sắp xếp mã nguồn khai báo truy vấn điều kiện tương ứng Hiện nay có 2 loại ưu tiên, là: hướng điện thoại di động trước, và hướng máy tính cá nhân (hoặc laptop) trước

Với phương pháp desktop-first, giao diện web được ưu tiên thiết kế và code tối ưu cho màn hình máy tính để bàn trước Sau đó, sử dụng các media query để thêm CSS mới, điều chỉnh giao diện và bố cục trang web cho phù hợp với màn hình kích thước nhỏ hơn như máy tính xách tay, máy tính bảng và điện thoại di động.

Hình 5-2 Hình mô tả cho kỹ thuật desktop-first

Dưới đây là ví dụ mã nguồn xử lý theo kỹ thuật desktop-first:

@media screen and (min-width:768px){Mã CSS cho Desktop hoặc Laptop}

@media screen and (min-width:481px) and (max-width:767px)

@media screen and (max-width:480px){Mã CSS cho Smartphone}

Ngược lại với desktop-first thì ở phương pháp này, giao diện web sẽ được thực hiện theo hướng từ thiết bị có màn hình nhỏ (mobile) rồi mới đến các thiết bị có màn hình lớn hơn, lần lượt là tablet, laptop, desktop Tương tự với desktop- first, ta cũng sẽ sử dụng media query của CSS để thực hiện quá trình này Hình minh họa cho quá trình này như sau:

Hình 5-3 Hình mô tả cho kỹ thuật mobile-first

Dưới đây là ví dụ mã nguồn xử lý theo kỹ thuật mobile-first:

@media screen and (max-width:480px){Mã CSS cho Smartphone}

@media screen and (min-width:481px) and (max-width:767px)

@media screen and (min-width:768px){Mã CSS cho Desktop hoặc Laptop}

Hệ thống lưới (grid system)

Thiết kế bố cục web lấy cảm hứng từ trang vở có ô kích thước đều, xếp theo hàng và cột tạo thành lưới Các phần tử trên lưới sẽ xác định kích thước chiếm bao nhiêu ô Hệ thống lưới web đơn giản hơn, tập trung vào số cột mà phần tử chiếm Bố cục trang web gồm các thành phần: header, navigation, main, aside và footer, mỗi thành phần tương ứng với một hàng trong thiết kế bố cục.

Các thành phần header, navigation, footer chiếm hẳn một hàng trong bố cục trang (100% chiều rộng trang web) Vì thế, ta chỉ cần tập trung vào bố cục cho phần main và aside Bởi vì, hai thành phần này thường nằm cùng một hàng Như vậy, việc bố cục trang web khi gặp các điểm breakpoint sẽ trở nên đơn giản, dễ dàng hơn rất nhiều nếu chúng ta áp dụng kỹ thuật hệ thống lưới

5.5.2 Kỹ thuật sử dụng đơn vị phần trăm (%)

Trong CSS, ta thường sử dụng đơn vị px (pixel) làm đơn vị xác định kích thước các phần tử Tuy nhiên, khi ta muốn kích thước của phần tử hay trang web được tính theo tỉ lệ so với phần tử (cha) chứa nó thì đơn vị phần trăm (%) là một giải pháp rất hiệu quả

Cơ chế xử lý khi một phần tử sử dụng đơn vị % rất đơn giản Trình duyệt sẽ dựa trên phần tử cha chứa nó đang có kích thước là bao nhiêu, từ đó, tính theo tỉ lệ phần trăm (%) để xác định kích thước chính xác của phần tử

Ví dụ: Một trang web là phần tử của viewport Nếu ta thiết lập kích thước chiều rộng của trang web là 90%, thì kích thước chiều rộng trang web luôn được tính bằng 90% kích thước của viewport đang hiển thị trang web Khi viewport có chiều rộng là 600px, kích thước chiều rộng của trang web sẽ là 540px

5.5.3 Áp dụng hệ thống lưới vào phân chia bố cục trang web

Dựa theo bố cục đơn giản và phổ biến của một trang web, ta sẽ áp dụng hệ thống lưới với kỹ thuật sử dụng đơn vị phần trăm, như sau: Đầu tiên, ta khảo sát bố cục của một trang web gồm các thành phần: header, main, aside và footer, như hình sau:

Footer Nếu ta áp dụng hệ thống lưới với 6 cột, ta sẽ có kích thước chiều rộng cho mỗi cột là 1/6 (16.67%), như hình mô tả sau

Hình 5-4 Hệ thống lưới 6 cột Áp dụng vào trang web của ta thì phần header, footer sẽ chiếm đủ 6 cột (100%) Hai phần main và aside sẽ chiếm 4 cột (66.67%) và 2 cột (33.33%) tương ứng Với cách thiết kế này, ta sẽ tạo mã nguồn CSS định nghĩa kích thước cho các cột, thông qua các class selector, như sau

.column-1-6{width:16.67%;} // định nghĩa class kích thước của 1 cột

.column-3-6{width:50%;} // định nghĩa class kích thước của 3 cột

.column-6-6{width:100%;} // định nghĩa class kích thước của 6 cột

[class^=column]{float:left;} // cho phép các cột được trôi về phía bên trái

Với bố cục trang web như hình trên, ta có mã nguồn HTML áp dụng hệ thống lưới 6 cột (được định nghĩa ở trên), như sau:

Header

Content

Sidebar

Footer

Với cấu trúc và mã nguồn này, khi ta muốn thay đổi kích thước chiều rộng của content và sidebar, ta chỉ cần sử dụng các class đã được xây dựng cho hệ thống lưới Ví dụ, nếu ta muốn phần content chiếm 3 cột, bằng với sidebar cũng chiếm 3 cột còn lại, ta sẽ thay đổi mã nguồn như sau:

Header

Content

Sidebar

Footer

Với khả năng thiết kế web đáp ứng, kỹ thuật này kết hợp truy vấn điều kiện để thay đổi bố cục trang web khi đạt đến breakpoint cụ thể, đảm bảo hiển thị tối ưu trên mọi thiết bị có kích thước màn hình khác nhau Đây chính là nền tảng cho việc thực hiện các thiết kế trang web có tính đáp ứng cao.

Định dạng
Số trang	139
Dung lượng	4,49 MB