TRƯỜNG ĐẠI HỌC NHA TRANG
KHOA CÔNG NGHỆ THÔNG TIN – BỘ MÔN HỆ THỐNG THÔNG TIN BÀI GIẢNG

THIẾT KẾ TRANG WEB  Tổng quan về Internet và WEB

 HTML

 CSS

 JavaScript NHA TRANG 2014

1.4.1. IAP (Internet Access Provider) 4
1.4.2. ISP (Internet Service Provider) 4
1.4.3. ICP (Internet Content Provider) 4
2. World Wide Web 5
2.1. Khái niệm 5
2.2. Các thành phần của web 5
2.2.1. Siêu văn bản (HyperText) 5
2.2.2. Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML) 5
2.2.3. Giao thức truyền tin siêu văn bản (HyperText Transfer Protocol – HTTP) 5
2.2.4. Trình duyệt (web browser) 6
2.2.5. URL (Uniform Resource Locator) 6
2.3. Mô hình tương tác Client-Server trong một ứng dụng Web 7
2.3.1. Khái niệm ứng dụng web 7
2.3.2. Mô hình client-server 7
2.4. Một số tổ chức quản lý chuẩn và công nghệ web 8
2.4.1. W3C - The World Wide Web Consortium 9
2.4.2. ECMA - European Computer Manufacturers Association 9
2.4.3. OASIS – Organization for the Advancement of Structured Information Standards 9
CHƯƠNG 1: HYPERTEXT MARKUP LANGUAGE (HTML) 10
1. Giới thiệu HTML 10
2. Đặc điểm của HTML 10
3. Cấu trúc của văn bản HTML 11
3.1. Cấu trúc của HTML element 11
3.2. Cấu trúc của văn bản HTML 13
3.2.1. HTML section 13
3.2.2. Header section 13
3.2.3. Body section 13
4. Các thẻ thuộc HTML element 14
4.1. Phân loại HTML element 14
4.1.1. Element khối (block-level element) 14

4.9.2. Combo box (drop-down menu) 33
4.9.3. TextArea 34
4.10. Các thẻ bổ sung thông tin cho trang web 35
4.10.1. Thẻ <meta> 35
a) Meta Content Type 35
b) Meta Content Language (hoặc Meta Language) 35
c) Meta Description 36
d) Meta Keywords 36
e) Meta Author 36
f) Meta Refresh 36
4.10.2. Thẻ <script> 36
4.10.3. Thẻ <style> 37
4.10.4. Thẻ <link> 37
5. Khai báo chuẩn HTML 38
5.1. Khái niệm 38
5.2. Khai báo 38
5.2.1. HTML 4.01 38
a) HTML 4.01 Strict 38
b) HTML 4.01 Transitional 39
c) HTML 4.01 Frameset 39
5.2.2. XHTML 1.0 39
a) XHTML 1.0 Strict 39
b) XHTML 1.0 Transitional 39
c) XHTML 1.0 Frameset 39
5.2.3. XHTML 1.1 40
5.2.4. HTML5 40
6. XHTML 40
6.1. Khái niệm 40
6.2. Các thay đổi về cú pháp trong XHTML so với HTML 40
7. Giới thiệu HTML5 42

6.1.1. Màu nền 57
6.1.2. Ảnh nền 57
Định dạng background rút gọn 59
6.2. Font 59
6.2.1. Thuộc tính font-family 59
6.2.2. Thuộc tính font-style 59
6.2.3. Thuộc tính font-variant 59
6.2.4. Thuộc tính font-weight 60
6.2.5. Thuộc tính font-size 60
Định dạng font rút gọn 60
6.3. Text 60
6.3.1. Màu chữ (thuộc tính color) 60
6.3.2. Thuộc tính text-indent 60
6.3.3. Thuộc tính text-align 61
6.3.4. Thuộc tính vertical-align 61
6.3.5. Thuộc tính letter-spacing 61
6.3.6. Thuộc tính text-decoration 62
6.3.7. Thuộc tính text-transform 62
6.4. Box model 62
6.4.1. Margin 63
6.4.2. Padding 63
6.4.3. Border 64
a) border-width 64
b) border-color 64
c) boder-style 64
6.4.4. Width & Height 65
a) Thuộc tính width, max-width, min-width 65
b) Thuộc tính height, max-height, min-height 65
6.5. Float & clear 66
6.5.1. Thuộc tính float 66

7.4. Toán tử logic 83
7.5. Toán tử thao tác trên bit 84
7.5.1. Các toán tử logic thao tác bit 84
7.5.2. Các toán tử dịch của thao tác bit 85
7.6. Toán tử điều kiện 85
8. Các cấu trúc điều khiển 86
8.1. Rẽ nhánh if 86
8.2. Rẽ nhánh switch 87
8.3. Cấu trúc lặp for 88
8.4. Cấu trúc lặp while 90
8.5. Các cấu trúc chuyển điều khiển trong vòng lặp 90
8.5.1. Cấu trúc label 90
8.5.2. Cú pháp break 91
8.5.3. Cấu trúc continue 91
8.6. Quản lý lỗi 92
9. Hàm 92
9.1. Khái niệm 92
9.2. Xây dựng hàm tự định nghĩa 93
9.3. Một số hàm thông dụng được hỗ trợ bởi JavaScript 94
9.3.1. alert 94
9.3.2. prompt 94
9.3.3. confirm 95
9.3.4. eval 95
9.3.5. isNaN 95
9.3.6. parseInt 96
9.3.7. parseFloat 96
9.3.8. setTimeout và clearTimeout 96
9.3.9. setInterval và clearInterval 96
10. Đối tượng trong JavaScript 97
10.1. Các đối tượng xây dựng sẵn của JavaScript 98

10.3.5. form 114
a) Thuộc tính của form 114
b) Phương thức của form 114
c) Các thuộc tính trên mảng element 114
11. Xử lý sự kiện 115
11.1. Khái niệm 115
11.2. Xử lý sự kiện cho các thẻ HTML 115
11.3. Một số sự kiện phổ biến 116
11.3.1. Sự kiện trên chuột 116
11.3.2. Sự kiện trên bàn phím 116
11.3.3. Sự kiện trên form 116
11.4. Đăng ký sự kiện 117
12. Làm việc với cookie 118
12.1. Khái niệm 118
12.2. Thiết lập cookie 118
12.3. Đọc cookie 119
TÀI LIỆU THAM KHẢO 120
PHỤ LỤC 121
1. Các thẻ HTML 4.01, XHTML 1.0 121
2. Các thẻ mới trong HTML5 123
3. Thuộc tính CSS2 125
4. Thuộc tính mới trong CSS3 127
BÀI TẬP THỰC HÀNH 129
1. Phần HTML và CSS 129
2. Phần JavaScript 140
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG
Trang 1
CHƯƠNG 0: TỔNG QUAN VỀ INTERNET VÀ WORLD WIDE WEB
Chương này giới thiệu các khái niệm liên quan đến mạng Internet, dịch vụ World Wide Web,
ngôn ngữ siêu văn bản và cách thức hoạt động của 1 trang web.

kết nối vào nó, các mạng này có thể truyền thông với nhau thông qua phương thức truyền gói dữ
liệu (packet switching) và qua kiến trúc mạng mở (open-architecture networking). Kiến trúc mạng
mở nghĩa là các mạng con có thể có giao diện, cấu trúc của riêng nó. Điều này giải thích tại sao
ngày nay chúng ta có thể kết nối Internet bất kể máy tính của mình đang sử dụng hệ điều hành gì.
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG
Trang 2
Khi ngày càng có nhiều người tham gia vào cộng đồng mạng, những nhà phát triển nhận
thấy sự cần thiết phải có một giao diện thân thiện và dễ sử dụng cho mọi đối tượng người dng.
Năm 1991, Đại học Minnesota thiết kế Gopher, một hệ thống menu đơn giản để truy cập đến các
tập tin.
Sự ra đời của giao thức HTTP và HTML đã đánh dấu một bước ngoặt mới trong việc sử
dụng Internet. Tim Berners-Lee là người đã phát triển các giao thức nền tảng cho World Wide
Web (WWW) vào năm 1992. Ông cũng chính là người đã tạo ra ngôn ngữ đánh dấu siêu văn bản
(HTML: Hypertext Markup Language) – ngôn ngữ để viết nên các trang Web. Từ đây, với dịch
vụ World Wide Web, Internet đã trở nên thực sự phổ biến và thích hợp với mọi đối tượng người
dng máy tính.
Về mặt vật l, Internet sử dụng một phần của toàn bộ tài nguyên mạng viễn thông hiện có.
Về mặt kỹ thuật, Internet sử dụng tập giao thức nền tảng gọi là TCP/IP (Transmission Control
Protocol / Internet Protocol). Với TCP trước đây, khi định nghĩa về Internet, IP không phải là một
bộ phận trong thiết kế. Trong quá trình phát triển, Danny Cohen ở Đại học Nam California
(University of Southern California-USC) cho rằng các chức năng hướng kết nối của TCP là không
cần thiết đối với một số kiểu truyền dữ liệu và chúng tạo ra phí tổn phát sinh. Ông đề nghị tách
TCP ra để thỏa mãn yêu cầu "đúng giờ hơn là chính xác". Điều cần thiết là tìm cách lấy dữ liệu
nhanh chóng để chuyển sang hệ thống khác. Như vậy, TCP trở thành TCP và IP.
Ngày nay Internet là một mạng công cộng kết nối hàng trăm triệu người trên thế giới.
Internet, cng với những mặt tốt hoặc xấu của nó mà người ta đang sử dụng hoặc phải đối mặt, đã
trở thành một phần quan trọng của đời sống con người.
1.3. Địa chỉ IP và tên miền
1.3.1. Địa chỉ IP
Ngày nay, mạng Internet được phát triển rộng khắp trên toàn thế giới. Để có thể khai thác

gốc (ROOT) được thể hiện bằng dấu ".". Một số tên miền cấp 1 dng chung phổ biến:
o COM (commercial): mọi đối tượng, cá nhân, doanh nghiệp.
o EDU (education): các tổ chức giáo dục.
o GOV (government): các tổ chức chính phủ.
o ORG (organization): các tổ chức hoạt động trong lĩnh vực chính trị, văn hoá, xã hội.
o NET (network): các tổ chức hoạt động trong lĩnh vực thiết lập và cung cấp các dịch
vụ trên mạng.
o INT (International): các tổ chức quốc tế.
o MIL (military): các tổ chức quân sự.
o Tên miền quốc gia (us, vn, uk, …).
Hệ thống tên miền cấp 1 này không phải là bất biến. Hiện nay ngày càng có thêm nhiều tên
miền cấp 1 được thông qua và cho php sử dụng.
Root
gov
com
mil
net
edu
cnn
products
news


KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG
Trang 5
2. World Wide Web
2.1. Khái niệm
Word Wide Web (được gọi tắt là Web) - là mạng lưới nguồn thông tin cho phép mọi người
khai thác thông tin qua một số công cụ hoặc là chương trình hoạt động dưới các giao thức mạng.
World Wide Web là một trong số các dịch vụ của Internet nhằm giúp cho việc trao đổi thông tin
trở nên thuận tiện và dễ dàng.
2.2. Các thành phần của web
2.2.1. Siêu văn bản (HyperText)
Siêu văn bản là một loại văn bản thông thường nhưng lại có tham chiếu (hyperlink – liên
kết) tới các văn bản khác. Người sử dụng có thể truy cập từ tài liệu này đến tài liệu khác thông qua
các tham chiếu.
Trang web (webpage) là một siêu văn bản được hiển thị trên màn hình máy tính hoặc thiết
bị điện tử (ví dụ như điện thoại di đông) bởi phần mềm ứng dụng trình duyệt (web browser).
Webpage được truy cập trên mạng Internet thông qua địa chỉ gọi là Uniform Resource Locator (URL).
Website là tập hợp các tài liệu web (webpage, file định dạng CSS, các script, hình ảnh, âm
thanh…) có liên quan với nhau, được đặt tại ít nhất một máy phục vụ web (web server)
2.2.2. Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML)
Là ngôn ngữ đánh dấu cơ bản để tạo ra các trang web. Ngôn ngữ HTML định nghĩa các phần
tử đánh dấu để mô tả cấu trúc và nội dung của trang web trên trình duyệt cũng như cách thức kết
nối đến các đối tượng siêu văn bản khác (hình ảnh, âm thanh, …).
Văn bản HTML là các tập tin có phần mở rộng .html hay .htm. Ta có thể tạo các file HTML
bằng bất k bộ xử l văn bản nào.
Hiện nay, phiên bản HTML 4.01 là phiên bản chuẩn mới nhất được công nhận. Ngoài ra
HTML5 là phiên bản đang được phát triển với nhiều tính năng vượt trội so với các phiên bản trước.
Bên cạnh HTML, XHTML (Extensible HyperText Markup Language – Ngôn ngữ đánh dấu
siêu văn bản mở rộng) là một ngôn ngữ đánh dấu có cùng các khả năng như HTML, nhưng có cú
pháp chặt chẽ hơn. Google Chrome Safari
2.2.5. URL (Uniform Resource Locator)
URL là địa chỉ tham chiếu đến 1 tài nguyên trên Internet. Tài nguyên có thể là 1 trang web,
1 hình ảnh, tập tin multimedia,…
URL có cấu trúc phân cấp giống như folder và file trên máy tính.
protocol://host_name[:port_num][/path][/file_name][?query]
 protocol: một trong các giao thức trên Internet, ví dụ: http, ftp, …
 host_name: tên máy chủ
 port_num: cổng giao tiếp. Ví dụ: Dịch vụ World Wide Web với giao thức http sử dụng
cổng 80, nếu là giao thức https thì sử dụng cổng 443.
 path và file_name: đường dn đến tập tin tài nguyên.
 query: giới hạn tài nguyên truy xuất từ tập tin hoặc thao tác trên kết quả (ví dụ như sắp xếp)

KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG
Trang 7
Ví dụ:
URL dạng đầy đủ

URL dạng không đầy đủ
www.google.com.vn
2.3. Mô hình tương tác Client-Server trong một ứng dụng Web
2.3.1. Khái niệm ứng dụng web
Ứng dụng Web là loại ứng dụng Internet cho phép cho phép các máy khách (client) sử dụng
trình duyệt Web để truy cập và xem thông tin hoặc thực hiện tác vụ cụ thể nào đó được cung cấp
bởi máy phục vụ (web server).
Một điểm cần lưu  là tại một thời điểm nào đó có thể có nhiều người sử dụng cng đồng

o Application server
o Database server
o Mail server
…

Chú ý: Phân biệt trang web tĩnh và trang web động

 Trang web tĩnh
+ Trang web tĩnh tương tác yếu với người dùng, nội dung của trang web không bị
thay đổi theo thời gian cho đến khi người lập trình thay đổi code của trang web.
+ Trang web tĩnh thường được viết bằng thuần HTML hoặc XHTML
 Trang web động
+ Trang web động tương tác mạnh với người dùng, nội dung trang web bị thay đổi
tùy theo ngữ cảnh người dùng yêu cầu.
+ Trang web động được xây dựng bằng HTML (XHTML) kết hợp với các ngôn
ngữ kịch bản dành cho server (ASP, PHP, Java,…)
+ Trang web động thường có yêu cầu truy xuất dữ liệu từ database.
2.4. Một số tổ chức quản lý chuẩn và công nghệ web
Để làm cho Internet trở thành nơi tốt hơn cho cả những người phát triển web và người dùng
cuối cùng, cả trình duyệt và những nhà thiết kế web cần thiết phải tuân thủ theo các chuẩn web.
Khi những nhà phát triển tuân theo các chuẩn web, việc phát triển web sẽ được đơn giản hóa. Khi
đó, người phát triển có thể dễ dàng hiểu những cách viết mã khác. Sử dụng các chuẩn web giúp
đảm bảo rằng trang web hiển thị chính xác trên các trình duyệt khác nhau, mà không phải thường
xuyên tốn thời gian viết lại.
Những trang web tuân theo chuẩn sẽ dễ dàng được các c máy tìm kiếm truy cập và lập chỉ
mục hơn, dễ dàng chuyển đổi định dạng hơn, và dễ dàng tiếp cận các mã chương trình (như
JavaSrcipt)

OASIS hướng tới sự an toàn các ứng dụng web bằng việc đưa ra các chuẩn về xác thực, trao
quyền và an toàn dịch vụ web như: Security Assertion Markup Language (SAML), eXtensible
Access Control Markup Language (XACML), Service Provisioning Markup Language (SPML),
Web Services Security,…

KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG
Trang 10
CHƯƠNG 1: HYPERTEXT MARKUP LANGUAGE (HTML)
Chương này giới thiệu ngôn ngữ đánh dấu siêu văn bản HTML 4.01 và XHTML 1.0, cấu
trúc trang web viết bằng HTML (XHTML), các chuẩn của HTML (XHTML).
1. Giới thiệu HTML
Năm 1989, Tim Berners-Lee, một nhà khoa học ở viện thí nghiệm CERN (Centre European
pour la Recherche Nucleaire) - Thụy sỹ có  tưởng là cho phép các nhà nghiên cứu có thể trao đổi
tài liệu bằng mạng điện tử . Từ đó World Wide Web (Web) được hình thành.
Tim Berners-Lee muốn tài liệu trên Web phải được tổ chức lại sao cho người dùng có thể
tham chiếu các tài liệu khác nhau trên mạng thông qua các liên kết ngay trong tài liệu đang được
sử dụng. Ông dựa vào ngôn ngữ Standard Generalized Markup Language (SGML), để phát triển
nên HTML, ngôn ngữ trình bày nội dung tài liệu và các liên kết thông qua hệ thống các thẻ đánh dấu.
HTML đã trải qua các phiên bản gồm HTML phiên bản đầu tiên (1992), HTML 2 (1994),
HTML 3 (1995), HTML 4 (1997). Qua các phiên bản phát triển, HTML ngày càng có nhiều thẻ
mới, tính năng mới cũng như là tính đơn giản hóa ngày càng cao.
HTML 4 đươc phát triển vào năm 1997, nâng cấp 4.01 năm 1999, là phiên bản thành công
nhất được sử dụng phổ biến cho đến hiện nay. HTML 4.x h trợ hiển thị hầu hết ngôn ngữ trên thế
giới dựa trên chuẩn Universal Character Set, thay vì các phiên bản trước chỉ hiển thị theo chuẩn



Chú ý:

 Tên tag trong HTML 4.x không phân biệt chữ hoa và chữ thường
 Một số tag đóng không bắt buộc phải có, tuy nhiên điều này có thể làm cho nội
dung của element thể hiện không đúng cách trên trình duyệt.
 Một số tag không theo cặp – không có tag đóng, còn được gọi là thẻ đơn hoặc thẻ
rng (không có phần nội dung)
Ví dụ: <br> (có tác dụng chèn vào một dòng trống)
 Thuộc tính của element chỉ có trong tag mở. Có những thuộc tính bắt buộc phải có
trong tag.
Ví dụ: tag <img> bắt buộc phải có thuộc tính src để khai báo đường dn của ảnh
<IMG src=" /img/mypic.jpg">
 Trong phần nội dung của element, nhiều dấu cách (space) liền nhau chỉ được
xem như 1 dấu cách, gõ Enter để xuống dòng cũng xem như gõ 1 dấu cách
(trừ thẻ <pre>)


Ký tự
Ý nghĩa
Mã thể hiện
trong văn bản HTML
Mã thể hiện
bằng số

một khoảng trắng
&nbsp;
&#160;
<
nhỏ hơn
&lt;
&#60;
>
lớn hơn
&gt;
&#62;
&
dấu và
&amp;
&#38;
"
ngoặc kép
&quot;
&#34;
'
ngoặc đơn
&apos;
&#39;

&divide;
&#247;
KHOA CÔNG NGHỆ THÔNG TIN  ĐẠI HỌC NHA TRANG
Trang 13
3.2. Cấu trúc của văn bản HTML
Một văn bản HTML thường có cấu trúc cơ bản sau
<html>
<head>
<title>…</title>
…
</head>
<body>
…
</body>
</html>
3.2.1. HTML section
Được bắt đầu bởi tag <HTML> và kết thúc bởi </HTML>
Cặp tag này định nghĩa phạm vi của văn bản HTML.
3.2.2. Header section
Được bắt đầu bởi tag <HEAD> và kết thúc bởi </HEAD>
Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dng
để tìm kiếm và nhận diện trang web, …. Những thông tin này không được hiển thị trên trang web.
Thẻ head có thể bị lược bỏ nếu ta không cần mô tả về trang hiện tại.
3.2.3. Body section
Được bắt đầu bởi tag <BODY> và kết thúc bởi </BODY>
Phần này chứa nội dung của trang web xuất hiện trên trình duyệt được thể hiện bởi các phần
tử HTML.

Chú ý:
Để có thể đặt chú thích trong trang web, ta có thể dng cặp <! và >

bắt buộc phải ở trong thẻ <form>
 Thẻ tạo bảng <table> : xác định bảng.
 Thẻ trích dẫn <blockquote> : được dng để xác định một đoạn văn bản có  nghĩa trích dn.
 Thẻ tạo dòng kẻ ngang <hr> : chèn một dòng có đường kẻ ngang trong văn bản
 Thẻ xác định danh sách <dl>, <dt>, <dd> : Sử dụng cho danh sách có các mục và có
nội dung mô tả cho các mục.
 Thẻ danh sách có thứ tự <ol>, <li> : Được sử dụng cho danh sách có thứ tự.
 Thẻ danh sách không có thứ tự <ul>, <li> : Được sử dụng cho danh sách không có thứ tự.
4.1.2. Element dòng (inline element)
Nội dung của element sẽ tiếp tục ở trên dòng hiển thị của trình duyệt.
Những element thuộc nhóm inline nên được bao ngoài bởi nhóm các element block, vì các
element block sẽ lo nhiệm vụ dàn trang web, còn các element thuộc nhóm inline chỉ để hiển thị
nội dung cho văn bản.
Những element thuộc nhóm inline có thể được lồng vào nhau nhưng không thể sử dụng
element block lồng trong element inline.

Trích đoạn Cú pháp break Phương thức của form Đối tượng mảng (Array) Đối tượng trình duyệt Làm việc với cookie

---