CHƯƠNG 1. TỔNG QUAN VỀ THIẾT KẾ WEB......................................

4
1.1 Các khái niệm cơ bản trong môi trường web.........................................4
1.2 Lịch sử phát triển của WWW................................................................5
1.3 Tổ chức W3C.........................................................................................5
1.4 Các thế hệ web.......................................................................................5
1.5 Mô hình máy khách – máy chủ (client – server)...................................6
CHƯƠNG 2. NGÔN NGỮ HTML................................................................8
2.1 Giới thiệu về ngôn ngữ HTML..............................................................8
2.2 Các phiên bản của HTML......................................................................8
2.3 Cấu trúc ngôn ngữ HTML.....................................................................9
2.4 Cú pháp ngôn ngữ HTML...................................................................10
2.5 Các loại thẻ đối tượng..........................................................................10
2.6 Thẻ siêu liên kết (hyperlink)................................................................12
2.7 Thẻ bảng (table)...................................................................................12
2.8 Các loại thẻ điều khiển biểu mẫu (form control).................................14
CHƯƠNG 3. NGÔN NGỮ CSS...................................................................15
3.1 Giới thiệu.............................................................................................15
3.2 Cú pháp của ngôn ngữ CSS.................................................................16
CHƯƠNG 4. THIẾT KẾ WEB NGỮ NGHĨA...........................................17
4.1 Giới thiệu trang web ngữ nghĩa...........................................................17
4.2 Bố cục trang web bằng thẻ table..........................................................17
CHƯƠNG 5. THIẾT KẾ WEB CÓ TÍNH ĐÁP ỨNG..............................19
5.1 Giới thiệu về tính đáp ứng...................................................................19
5.2 Khái niệm về khung nhìn (viewport)...................................................19
TÀI LIỆU THAM KHẢO............................................................................22
 DANH MỤC TỪ VIẾT TẮT
STT Ký hiệu chữ viết tắt Chữ viết đầy đủ
1 ARPANET Advanced Research Projects Agency Network
2 CSS Cascading Style Sheets
3 DNS Domain Name System
4 FTP File Transfer Protocol
5 HTML HyperText Markup Language
6 HTTP HyperText Transfer Protocol
7 IP Internet Protocol
8 ISP Internet Service Provider
9 RWD Responsive web design
10 SMTP Simple Mail Transfer Protocol
11 TCP/IP Transmission Control Protocol/Internet Protocol
12 URL Uniform Resource Locator
13 WWW World Wide Web
14 W3C World Wide Web Consortium
 DANH MỤC BẢNG
Bảng 2-1 Bảng các định dạng video được hỗ trợ...........................................11
Bảng 2-2 Bảng các thuộc tính của thẻ form...................................................15
DANH MỤC HÌNH ẢNH
Hình 1-1 Mô hình hoạt động của trang web....................................................4
Hình 2-1 Cấu trúc tài liệu HTML....................................................................8
Hình 2-2 Tài liệu HTML biểu diễn dạng cây..................................................8
Hình 2-3 Giao diện trang web khi trình duyệt hiển thị....................................9
Hình 2-4 Ví dụ một biểu mẫu đăng ký trên web............................................14
Hình 5-1 Viewport.........................................................................................20
 CHƯƠNG 1. TỔNG QUAN VỀ THIẾT KẾ WEB

Trong chương này, người học sẽ được tìm hiểu các khái niệm cơ bản trong
lĩnh vực internet & web, lịch sử hình thành internet & web. Ngoài ra, người học
còn được tìm hiểu về tổ chức W3C, là tổ chức đứng đầu thế giới quy định các
chuẩn về web.
Nội dung:
 Các khái niệm cơ bản trong môi trường web
 Lịch sử phát triển web
 Các thế hệ web
 Mô hình hoạt động của trang web
 Giới thiệu về tổ chức W3C
1.1 Các khái niệm cơ bản trong môi trường web
Internet
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 (World Wide Web)
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ủ (server)
Máy chủ là nơi cài đặt phần mềm web server để lưu trữ và quản lý trang
web. Nó phục vụ cho các máy khách có nhu cầu truy cập tới trang web đang được
lưu trữ. Ngoài ra, máy chủ còn cung cấp các dịch vụ quản trị web và cơ sở dữ liệu
cho người quản trị web để thực hiện công việc quản trị trang web.
Trang chủ (home page)
Trang chủ là trang chính của một trang web. Mặc định khi người dùng nhập
tiên miền trang web thì trang chủ sẽ được truy cập và hiển thị trên trình duyệt cho
người dùng xem. Từ trang chủ này, người dùng có thể truy cập đến những trang
con khác trong trang web đó.
 1.2 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.
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.
1.3 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.)
1.4 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:
1.4.1 Web 1.0
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.
1.4.2 Web 2.0
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.
 1.4.3 Web 3.0
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.
1.4.4 Web 4.0
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.
1.5 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.
Lưu ý:
 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.
 CHƯƠNG 2. NGÔN NGỮ HTML

Trong chương 1, chúng ta đã được giới thiệu về lịch sử phát triển web, mô
hình hoạt động máy khách – máy chủ, và cơ chế hoạt động của mô hình này. Qua
chương 2, chúng ta sẽ tìm hiểu về ngôn ngữ HTML. Tài liệu HTML chính là nội
dung được hồi đáp từ máy chủ đến trình duyệt, và trình duyệt dựa vào nội dung này
để hiển thị trang web cho người dùng.
Nội dung:
 Giới thiệu về ngôn ngữ HTML
 Cấu trúc ngôn ngữ HTML
 Cú pháp ngôn ngữ HTML
 Các loại thẻ văn bản và danh sách
 Các loại đường dẫn
 Các loại thẻ đối tượng
 Các loại thẻ siêu liên kết
 Các loại thẻ bảng
 Các loại thẻ biểu mẫu
2.1 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.
Một tài liệu HTML là một tài liệu thuần văn bản (plain text), và nhờ vào bộ
quy tắc đánh dấu văn bản (markup) được quy định bởi ngôn ngữ HTML để chỉ thị
cho trình duyệt thông dịch và hiển thị tài liệu này thành trang web cho người dùng
xem .
2.2 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:
2.3 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-2 Cấu trúc tài liệu HTML

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-3 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-4 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.
2.4 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 PropertiesList>Object</TagName>
2.4.1 PropertiesList
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ẻ.
<TagName property1=“value1” property2=“value2” …>
Ví dụ: Tạo một bảng dữ liệu có độ rộng là 200px và có viền xung quanh.
<table width=“100px” border=“1”>
2.4.2 Object
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ụ: <h1>Chào mừng đến với
môn TKWeb</h1>.
2.5 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).
 2.5.1 Hình ảnh
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.
2.5.1.1 Ảnh nội dung
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:
<img src = “path” alt = “chú thích ảnh”/>
2.5.1.2 Ảnh nền
Dạng hình ảnh thứ hai là ảnh nền (background image). Loại ảnh này chỉ có
tác dụng mỹ thuật cho trang web, và không mang ý nghĩa truyền tải nội dung hay
thông điệp cho người xem. Để tạo ảnh nền chúng ta sẽ tìm hiểu chi tiết trong
chương 3.
2.5.2 Phim (video)
Thẻ video dùng để hiển thị và điều khiển phim trên trang web. Điều này có
nghĩa là trình duyệt cần hỗ trợ một trình điều khiển phim (video player). Đa số các
trình duyệt hiện tại đều có hỗ trợ, và người dùng không cần phải cài đặt thêm các
plugin bên ngoài.
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-1 Bảng các định dạng video được hỗ trợ

Định dạng Giá trị thuộc tính type

MP4 type= “video/mp4”
Ogg type = “video/ogg”
WebM type = “video/webm”
2.5.3 Thẻ khung (frame)
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.
<frameset cols = “150, *”>
<frame src = “banner.html” name = “top”>
<frameset cols = “150, *”>
<frame src = “menu.html” name = “left”>
<frame src = “home.html” name = “main”>
</frameset>
</frameset>
2.6 Thẻ siêu liên kết (hyperlink)
2.6.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.
2.6.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).
2.7 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.7.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ê
 Chú thích bảng (caption)
 Hình 2.10 Ví dụ cấu trúc đầy đủ của một bảng dữ liệu
2.7.2 Cú pháp tạo bảng
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:
 <table></table>: thẻ tạo một cấu trúc bảng
 <thead></thead>: thẻ tạo một cấu trúc tiêu đề bảng
 <tbody></tbody>: thẻ tạo một cấu trúc thân bảng dữ liệu
 <tfoot></tfoot>: thẻ tạo một cấu trúc chân bảng
 <tr></tr>: tạo một dòng dữ liệu
 <td></td>: tạo một ô dữ liệu
2.7.3 Kỹ thuật trộn các ô dữ liệu lại với nhau
Trộn các ô theo chiều ngang:
Để trộn các ô theo chiều ngang, ta sử dụng thuộc tính colspan ngay bên
trong thẻ mở <td> (ô bắt đầu thực hiện việc trộn). Ví dụ, đoạn mã nguồn bên dưới
sẽ thực hiện việc trộn 2 ô lại với nhau, là ô thuộc hàng 1 cột 1 và ô thuộc hàng 1 cột
2.
<table>
<tr>
<td colspan=“2”>Hàng 1 cột 1 và hàng 1 cột 2</td>
<td>Hàng 1 cột 3</td>
</tr>
<tr>
<td>Hàng 2 cột 1</td>
<td>Hàng 2 cột 2</td>
<td>Hàng 2 cột 3</td>
 </tr>
</table>
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
2.8 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-5 Ví dụ một biểu mẫu đăng ký trên web

 2.8.1 Thẻ biểu mẫu (form)
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:
<form name= “FormName” action=“” method= “post/get”>
<!-- Nội dung bên trong -->
</form>
Bảng 2-2 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.
CHƯƠNG 3. NGÔN NGỮ CSS

Trong chương 2, chúng ta đã hiểu rõ chức năng chính của HTML là tạo ra
cấu trúc, bố cục trang web. Như vậy, làm sao ta có thể trang trí trang web để đáp
ứng tính mỹ thuật như ngày nay? Qua chương 3 này, chúng ta sẽ tìm hiểu cách
trang trí trang web với ngôn ngữ CSS.
Nội dung:
 Giới thiệu về ngôn ngữ CSS
 Nguyên tắc ưu tiên của CSS
 Tích hợp mã nguồn CSS vào trang web
 Các thuộc tính về kiểu chữ, văn bản và danh sách
 Tìm hiểu mô hình hộp
 Thuộc tính background
 3.1 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.
3.1.1 Lịch sử hình thành
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).
3.1.2 Lợi ích khi sử dụng CSS
CSS giúp tách rời việc cấu trúc hóa trang web và trình bày trang web thành
hai công việc độc lập nhau. Từ đó, mã nguồn HTML sẽ đơn giản hơn, và có tính
thẩm mỹ cao.
3.2 Cú pháp của ngôn ngữ CSS
3.2.1 Selector là gì?
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.
3.2.2 Cú pháp
Cú pháp của ngôn ngữ CSS có 2 thành phần: Selector và Declaration.
Selector {Declaration}
Declaration bao gồm một tập hợp các cặp property (thuộc tính), và value
(giá trị), quy định các định dạng về màu sắc, kích thước, font chữ,… Declaration có
cú pháp như sau:
{property: value; property: value; property: value,…}
 CHƯƠNG 4. THIẾT KẾ WEB NGỮ NGHĨA

Trong chương 2 và 3, chúng ta đã hiểu rõ cách thiết kế trang web toàn diện
thông qua hai ngôn ngữ HTML và CSS. Tuy nhiên, khi sự phát triển của web ngày
càng mạnh mẽ, yêu cầu về các trang web giàu tính ngữ nghĩa cũng ngày càng cao.
Trong chương 4 này, chúng ta sẽ tìm hiểu cách thiết kế trang web ngữ nghĩa dựa
trên phiên bản HTML5.
Nội dung:
 Giới thiệu trang web ngữ nghĩa
 Bố cục trang web bằng thẻ table
 Bố cục trang web bằng thẻ div
 Bố cục trang web bằng các thẻ ngữ nghĩa
 Kiểm tra và đánh giá trang web
4.1 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.
4.2 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

BANNER CHÍNH

MENU

NỘI DUNG

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.
 CHƯƠNG 5. THIẾT KẾ WEB CÓ TÍNH ĐÁP ỨNG

Ngày nay, trên thế giới đã xuất hiện nhiều loại thiết bị điện tử có kích thước
màn hình (hiển thị) khác nhau. Đặc biệt là sự phát triển của điện thoại thông minh,
máy tính bảng đã đề ra một yêu cầu cần thiết cho các trang web, đó là phải hiển thị
tốt trên các thiết bị điện tử này. Việc một trang web có thể hiển thị tốt trên các thiết
bị điện tử khác nhau, được gọi là trang web có tính đáp ứng.
Trong chương này, chúng ta sẽ tìm hiểu nguyên lý để tạo ra một trang web
có thể hiển thị tốt trên các thiết bị có màn hình khác nhau. Từ đó, chúng ta sẽ rèn
luyện kỹ năng để thành thạo trong việc thiết kế web có tính đáp ứng.
Nội dung:
 Giới thiệu trang web có tính đáp ứng
 Khái niệm về viewport
 Tìm hiểu về truy vấn điều kiện
 Hệ thống lưới
5.1 Giới thiệu về tính đáp ứng
Thiết kế web có tính đáp ứng (Responsive Web Design, viết tắt là RWD) là
cách thiết kế để trang web có thể hiển thị tốt trên mọi màn hình của các thiết bị
khác nhau, như Desktop, Tablet, Smart phone. Đây là cách thiết kế web cực kỳ phổ
biến, và đang là xu hướng chính để thiết kế giao diện trang web.
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.
5.2 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.
 Hình 5-6 Viewport
Như vậy, nội dung của trang web hoàn toàn có thể lớn hơn so với kích thước
của viewport. Điều này dẫn tới việc trình duyệt sẽ xuất hiện thanh cuộn ngang và
dọc để người dùng có thể xem những phần bị khuất bởi viewport 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.
5.2.1 Cách thiết lập 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ẻ <head>, như sau:
<meta name="viewport" content="width=device-width, initial-
scale=1">
 Thẻ <meta> 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 “width=device-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%).
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ị
(width=device-width).
 TÀI LIỆU THAM KHẢO

Tiếng Việt:
1. Jeremy Osborn – Nhóm AGI Creative, HTML5 & CSS3, NXB Bách
Khoa Hà Nội (2017).
2. Charles Wyke-Smith, Định kiểu web với CSS, NXB Tri Thức (2018)
3. Jason Cranford Teague, Kỹ thuật Typography trên Web linh động –
NXB Tri Thức (2018)
Tiếng Anh:
1. Ikram Hawramani (2018), HTML & CSS For Complete Beginners,
Stewards Publishing.
2. Brian Jenkins (2019), “Javascript Programming”, Independently
Published.
3. Mark Myers (2015), A smarter way to learn HTML & CSS, Amazon.
4. Karol Krol (2019), “WordPress 5 Complete: Build beautiful and
feature-rich trang webs from scratch”, Amazon.
Trang web:
1. W3C, https://www.w3.org/
2. W3Schools, https://www.w3schools.com/