DANH MỤC TỪ VIẾT TẮT

Ký hiệu chữ
STT Chữ viết đầy đủ
viết tắt
Advanced Research Projects
1 ARPANET
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
Simple Mail Transfer
10 SMTP
Protocol
Transmission Control
11 TCP/IP
Protocol/Internet Protocol
12 URL Uniform Resource Locator
13 WWW World Wide Web
14 W3C World Wide Web Consortium
 MỤC LỤC
CHATER I TỔNG QUAN VỀ THIẾT KẾ WEB........................................4
I.1 Các khái niệm cơ bản trong môi trường web.........................................4
I.1.1 Internet.............................................................................................4
I.1.2 WWW (World Wide Web)..............................................................4
I.1.3 Máy chủ (server)..............................................................................4
I.1.4 Trang chủ (home page)....................................................................4
I.2 Lịch sử phát triển của WWW.................................................................5
I.3 Tổ chức W3C.........................................................................................5
I.4 Các thế hệ web.......................................................................................5
I.4.1 Web 1.0...........................................................................................5
I.4.2 Web 2.0...........................................................................................5
I.4.3 Web 3.0...........................................................................................6
I.4.4 Web 4.0...........................................................................................6
I.5 Mô hình máy khách – máy chủ (client – server)....................................6
CHATER II NGÔN NGỮ HTML.................................................................8
II.1 Giới thiệu về ngôn ngữ HTML.............................................................8
II.2 Các phiên bản của HTML.....................................................................8
II.3 Cú pháp ngôn ngữ HTML...................................................................10
II.3.1 PropertiesList...............................................................................10
II.3.2 Object...........................................................................................10
II.4 Các loại thẻ đối tượng.........................................................................11
II.4.1 Hình ảnh.......................................................................................11
II.4.2 Ảnh nội dung................................................................................11
II.4.3 Ảnh nền........................................................................................11
II.4.4 Phim (video).................................................................................11
II.4.5 Liên kết tới tài liệu khác...............................................................12
II.4.6 Liên kết trong cùng một tài liệu...................................................12
II.5 Thẻ bảng (table)..................................................................................12
II.5.1 Cấu trúc bảng dữ liệu...................................................................13
 II.5.2 Cú pháp tạo bảng..........................................................................13
II.5.3 Kỹ thuật trộn các ô dữ liệu lại với nhau.......................................13
II.6 Các loại thẻ điều khiển biểu mẫu (form control)................................14
II.6.1 Thẻ biểu mẫu (form)....................................................................15
CHATER III NGÔN NGỮ CSS...................................................................17
III.1 Giới thiệu...........................................................................................17
III.2 Cú pháp của ngôn ngữ CSS...............................................................17
CHATER IV THIẾT KẾ WEB NGỮ NGHĨA...........................................19
IV.1 Giới thiệu trang web ngữ nghĩa.........................................................19
IV.2 Bố cục trang web bằng thẻ table........................................................19
CHATER V THIẾT KẾ WEB CÓ TÍNH ĐÁP ỨNG...............................21
V.1 Giới thiệu về tính đáp ứng..................................................................21
V.2 Khái niệm về khung nhìn (viewport)..................................................21
V.2.1 Cách thiết lập viewport................................................................22
V.2.2 Một số quy tắc làm việc với viewport..........................................23
 MỤC LỤC ẢNH
Ảnh. 1Mô hình hoạt động của trang web...................................................................7
Ảnh. 2 Cấu trúc tài liệu HTML................................................................................10
Ảnh. 3 Tài liệu HTML biểu diễn dạng cây..............................................................11
Ảnh. 4 Giao diện trang web khi trình duyệt hiển thị...............................................11
Ảnh. 5 Ví dụ một biểu mẫu đăng ký trên web.........................................................16
Ảnh. 6 Viewport......................................................................................................23

MỤC LỤC BẢNG

Bảng. 1 Bảng các định dạng video được hỗ trợ.......................................................13
Bảng. 2 Bảng các thuộc tính của thẻ form...............................................................16
 CHATER I 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
I.1 Các khái niệm cơ bản trong môi trường web
I.1.1 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.
I.1.2 WWW (World Wide Web)
(1) 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).
I.1.3 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
CHATER I TỔNG QUAN VỀ THIẾT KẾ WEB........................................5
I.1 Các khái niệm cơ bản trong môi trường web.........................................5
I.1.1 Internet.............................................................................................5
I.1.2 WWW (World Wide Web)..............................................................5
I.1.3 Máy chủ (server)..............................................................................5
 I.1.3.a Trang chủ (home page)...............................................................................................7
I.2 Lịch sử phát triển của WWW.................................................................7
I.3 Tổ chức W3C.........................................................................................7
I.4 Các thế hệ web.......................................................................................7
I.4.1 Web 1.0...........................................................................................8
I.4.2 Web 2.0...........................................................................................8
I.4.3 Web 3.0...........................................................................................8
I.4.4 Web 4.0...........................................................................................8
I.5 Mô hình máy khách – máy chủ (client – server)....................................8
CHATER II NGÔN NGỮ HTML...............................................................10
II.1 Giới thiệu về ngôn ngữ HTML...........................................................11
II.2 Các phiên bản của HTML...................................................................11
II.3 Cú pháp ngôn ngữ HTML...................................................................13
II.3.1 PropertiesList...............................................................................13
II.3.2 Object...........................................................................................13
II.4 Các loại thẻ đối tượng.........................................................................14
II.4.1 Hình ảnh.......................................................................................14
II.4.2 Ảnh nội dung................................................................................14
II.4.3 Ảnh nền........................................................................................14
II.4.4 Phim (video).................................................................................14
II.4.5 Liên kết tới tài liệu khác...............................................................15
II.4.6 Liên kết trong cùng một tài liệu...................................................15
II.5 Thẻ bảng (table)..................................................................................15
II.5.1 Cấu trúc bảng dữ liệu...................................................................16
II.5.2 Cú pháp tạo bảng..........................................................................16
II.5.3 Kỹ thuật trộn các ô dữ liệu lại với nhau.......................................16
II.6 Các loại thẻ điều khiển biểu mẫu (form control)................................17
II.6.1 Thẻ biểu mẫu (form)....................................................................18
CHATER III NGÔN NGỮ CSS...................................................................20
III.1 Giới thiệu...........................................................................................20
 III.2 Cú pháp của ngôn ngữ CSS...............................................................20
III.2.1.a Selector là gì?..........................................................................................................20
III.2.1.b Cú pháp..................................................................................................................20
CHATER IV THIẾT KẾ WEB NGỮ NGHĨA...........................................22
IV.1 Giới thiệu trang web ngữ nghĩa.........................................................22
IV.2 Bố cục trang web bằng thẻ table........................................................22
CHATER V THIẾT KẾ WEB CÓ TÍNH ĐÁP ỨNG...............................24
V.1 Giới thiệu về tính đáp ứng..................................................................24
V.2 Khái niệm về khung nhìn (viewport)..................................................24
V.2.1 Cách thiết lập viewport................................................................25
V.2.2 Một số quy tắc làm việc với viewport..........................................26
.
I.2 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 đó.
I.3 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.
I.4 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.
I.5 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:
I.5.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.(W3C Index)
I.5.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.
I.5.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.
I.5.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.
I.6 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ủ.

Ảnh. 1Mô 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.

CHATER II 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
II.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 .
II.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:
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.
 Ảnh. 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.

Ảnh. 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.
 Ảnh. 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.
II.3 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>
II.3.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”>
II.3.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>.
II.4 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).
II.4.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.
II.4.2 Ả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”/>
II.4.3 Ả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.
II.4.4 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. 1 Bảng các định dạng video được hỗ trợ

Định
Giá trị thuộc tính type
dạng
MP4 type= “video/mp4”
Ogg type = “video/ogg”
WebM type = “video/webm”
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>
Thẻ siêu liên kết (hyperlink)
II.4.5 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.
II.4.6 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).
II.5 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.
II.5.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

II.5.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
II.5.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
II.6 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.
 Ảnh. 5 Ví dụ một biểu mẫu đăng ký trên web

II.6.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 Bảng các thuộc tính của thẻ form

Tên
STT thuộc Diễn giải
tính
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 metho Chấp nhận một trong 2 giá trị
d 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.
CHATER III 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
III.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.
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).
Lợi ích khi sử dụng CSS(MacDonald & Dubé, 2015)
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.
III.2 Cú pháp của ngôn ngữ CSS
III.2.1.a 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.
III.2.1.b 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,…}
CHATER IV 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
IV.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.
IV.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.
 Liên kết Liên kết Liên
LOGO
1 2 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.
CHATER V 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
V.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.
V.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.

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

MacDonald, N. E., & Dubé, E. (2015). Unpacking vaccine hesitancy among

healthcare providers. EBioMedicine, 2(8), 792-793.
W3C Index.). https://www.w3.org/