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ủ
Trang 1KHOA 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
Trang 2LỜI NÓI ĐẦU
Bài giảng Thiết kế trang web được biên soạn làm tài liệu tham khảo hữu ích cho sinh viên Ngành Công nghệ Thông tin học tập và nghiên cứu Trong bài giảng này, nội dung được viết theo hướng trang bị cho người học kiến thức nền tảng về kỹ thuật, kỹ năng xây dựng, thay đổi giao diện, điều khiển hoạt động trang web theo các chuẩn khác nhau
Các chủ đề chính của bài giảng bao gồm
Bên cạnh phần lý thuyết còn có các bài tập thực hành kèm theo để người học luyện tập, vận dụng những kiến thức đã học vào thực tế, tăng cường khả năng tự học, đáp ứng được yêu cầu đổi mới phương pháp học tập theo học chế tín chỉ
Dù có nhiều cố gắng trong công tác biên soạn nhưng bài giảng chắc chắn sẽ có ít nhiều sai sót Chúng tôi mong nhận được các ý kiến đóng góp của các đồng nghiệp cũng như của sinh viên
để hoàn thiện bài giảng trong những lần xuất bản tiếp theo
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN HỆ THỐNG THÔNG TIN
Trang 3MỤC LỤC
CHƯƠNG 0: TỔNG QUAN VỀ INTERNET VÀ WORLD WIDE WEB 1
1 Internet 1
1.1 Khái niệm 1
1.2 Lịch sử 1
1.3 Địa chỉ IP và tên miền 2
1.3.1 Địa chỉ IP 2
1.3.2 Tên miền (Domain name) 3
1.4 Nhà cung cấp dịch vụ Internet 4
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
Trang 43.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.1.2 Element dòng (inline element) 14
4.2 Các thẻ cơ bản 15
4.2.1 Thẻ heading 15
4.2.2 Thẻ Paragraph 16
4.2.3 Thẻ <div> 16
4.2.4 Thẻ <span> 17
4.2.5 Thẻ ngắt dòng <br> 17
4.2.6 Đường kẻ ngang 17
4.2.7 Các thẻ định dạng văn bản 19
4.3 Liên kết 22
4.3.1 Liên kết địa chỉ tuyệt đối 22
4.3.2 Liên kết địa chỉ tương đối 22
4.3.3 Liên kết nội tại 23
4.4 Bảng biểu (Table) 23
4.5 Danh sách (List) 25
4.5.1 Danh sách không đánh số thứ tự 25
4.5.2 Danh sách đánh số thứ tự 26
4.5.3 Danh sách định nghĩa 27
4.6 Hình ảnh 28
4.7 Multimedia 28
4.8 Khung (frame) 28
4.9 Biểu mẫu (form) 30
4.9.1 Thẻ <input> 31
a) Text & password 31
b) Radio button 31
c) Checkbox 32
d) Hidden 32
Trang 5f) Image 33
g) File 33
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
CHƯƠNG 2: CASCADING STYLE SHEET (CSS) 43
1 Giới thiệu CSS 43
Trang 63 Cú pháp CSS 43
3.1 Selector 43
3.1.1 Universal selector 44
3.1.2 Type selector 44
3.1.3 Id selector 45
3.1.4 Class selector 45
3.1.5 Descendant selector 46
3.1.6 Child selector 46
3.1.7 Adjacent sibling selector 46
3.1.8 Attribute selector 47
3.1.9 Pseudo elements và Pseudo classes 48
a) Pseudo elements 48
b) Pseudo classes 48
3.2 Property 49
3.3 Value 50
4 Đơn vị CSS 50
4.1 Đơn vị đo chiều dài 50
4.2 Đơn vị màu sắc 51
5 Nhúng mã CSS vào file HTML 51
5.1 Kiểu thuộc tính (Inline Style) 51
5.2 Kiểu tập hợp nhúng bên trong tài liệu HTML (Internal Style Sheet) 52
5.3 Liên kết ngoài (External Style Sheet) 53
5.3.1 Sử dụng thẻ <link> 53
5.3.2 Sử dụng @import 54
5.4 Mức độ ưu tiên giữa các cách nhúng CSS vào tài liệu HTML 57
6 Các định dạng CSS cơ bản 57
6.1 Background 57
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
Trang 76.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
6.5.2 Thuộc tính clear 67
6.6 Position 68
6.7 Lớp (Layers) 69
7 Giới thiệu CSS3 70
CHƯƠNG 3: JAVASCRIPT 71
1 Giới thiệu JavaScript 71
2 Đặc điểm của JavaScript 71
3 Mục đích sử dụng JavaScript 72
4 Nhúng mã JavaScript vào file HTML 72
Trang 84.2 Dùng file chứa mã JavaScript 74
4.3 Dùng biểu thức JavaScript làm giá trị thuộc tính xử lý sự kiện 74
4.4 Thẻ <noscript> 75
5 Khai báo cơ bản trong JavaScript 76
5.1 Biến 76
5.1.1 Khai báo 76
5.1.2 Quy tắc đặt tên biến 76
5.1.3 Phạm vi của biến 76
5.2 Hằng 77
6 Các kiểu dữ liệu trong JavaScript 78
6.1 Kiểu số nguyên 78
6.2 Kiểu số thực (kiểu số dấu chấm động) 78
6.3 Kiểu Logical (hay boolean) 79
6.4 Kiểu chuỗi (String) 79
6.5 Kiểu null 80
6.6 Kiểu undefined (không xác định) 80
7 Toán tử trong JavaScript 80
7.1 Toán tử gán 80
7.2 Toán tử số học 81
7.3 Toán tử so sánh 82
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
Trang 98.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.1.1 Đối tượng String 98
a) Thuộc tính 98
b) Phương thức 98
10.1.2 Đối tượng mảng (Array) 101
a) Thuộc tính 101
b) Phương thức 101
10.1.3 Đối tượng Date 103
10.1.4 Đối tượng Math 104
a) Thuộc tính 105
b) Phương thức 105
10.1.5 Đối tượng Number 106
10.2 Đối tượng do người dùng tự định nghĩa 107
10.2.1 Xây dựng đối tượng 107
10.2.2 Sử dụng đối tượng 107
10.2.3 Phát triển kế thừa 108
10.2.4 Bổ sung thuộc tính hoặc phương thức cho đối tượng 108
Trang 1010.3.1 window 109
a) Thuộc tính 109
b) Phương thức 109
10.3.2 location 110
a) Thuộc tính 110
b) Phương thức 110
10.3.3 history 111
10.3.4 document 111
a) Thuộc tính 111
b) Phương thức 111
c) Thay đổi nội dung của Element 112
d) Thay đổi giá trị thuộc tính của Element 113
e) Thay đổi định dạng của Element 113
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
Trang 114 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
Trang 12CHƯƠ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
1 Internet
1.1 Khái niệm
Internet là một liên mạng máy tính toàn cầu được hình thành từ các mạng nhỏ hơn, liên kết hàng triệu máy tính trên thế giới thông qua cơ sở hạ tầng viễn thông Internet là mạng của các mạng máy tính Trong mạng này, các máy tính và thiết bị mạng giao tiếp với nhau bằng một ngôn ngữ thống nhất Đó là bộ giao thức TCP/IP (Transmision Control Protocol – Internet Protocol)
1.2 Lịch sử
Internet có khởi thủy là ARPANET, một dự án do Bộ Quốc phòng Hoa Kỳ khởi xướng vào năm 1969 Mạng ARPANET khởi đầu là mạng kết nối giữa Bộ Quốc phòng Hoa Kỳ với các nhà thầu nghiên cứu khoa học và quân sự lại với nhau, trong đó phần lớn là các trường đại học đang tiến hành các nghiên cứu khoa học được tài trợ
Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn có thể hoạt động khi một phần của nó
bị phá hủy Nếu một trong những liên kết mạng bị phá hủy do chiến tranh hay thiên tại thì lưu thông trên đó có thể được tự động chuyển sang các liên kết khác
Vào đầu năm 1980 giao thức TCP/IP được phát triển và nhanh chóng trở thành giao thức mạng chuẩn được dùng trên mạng ARPANET Hệ điều hành được dùng trên mạng lúc này là BSD UNIX cũng được tích hợp để sử dụng giao thức TCP/IP Hệ điều hành này nhanh chóng trở thành một công cụ hữu hiệu để phát triển mạng máy tính
Với các công nghệ mới này số lượng mạng máy tính đã phát triển nhanh chóng ARPANET thành công vang dội và mọi trường đại học tại Hoa Kỳ đều muốn gia nhập vào mạng này Với việc
mở rộng đối tượng tham gia vào mạng, ARPANET bắt đầu trở nên khó quản lý hơn Do đó nó đã được chia làm hai mạng: MILNET dành cho mục đích quân sự và ARPANET mới, với quy mô nhỏ hơn, dành cho các mục đích phi quân sự
ARPANET nhanh chóng trở nên quá tải do sự phát triển của số lượng các máy tính kết nối vào mạng này cũng như băng thông mà các máy tính này đòi hỏi Quỹ Khoa học Quốc gia Hoa Kỳ (National Science Foundation - NSF) đã lập nên mạng NSFNET vào năm 1986, một mạng riêng và nhanh hơn nhiều của mình NSF đã thiết lập một chuỗi các mạng khu vực nhằm liên kết những người sử dụng trong từng khu vực với nhau, cũng như kết nối các mạng khu vực này với NSFNET NSFNET đã dần thay thế cho ARPANET và sau này trở thành mạng Internet
Internet được thiết kế dựa trên ý tưởng là có thể có nhiều mạng hoàn toàn độc lập với nhau 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ì
Trang 13Khi 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
và sử dụng các dịch vụ và ứng dụng trên mạng Internet chúng ta cần phải xác định được vị trí của máy tính cung cấp dịch vụ và ứng dụng
Vị trí của các máy tính trên mạng được xác định bởi địa chỉ IP Địa chỉ IP là một con số 32 bit để định danh đối tượng nhận và gửi thông tin trên Internet Nói một cách khác địa chỉ IP dùng
để xác định một máy tính trong mạng Internet dựa trên giao thức TCP/IP
Địa chỉ IP đang được sử dụng hiện tại là thế hệ địa chỉ IPv4 có 32 bit chia thành 4 Octet, mỗi Octet có 8 bit, tương đương với 1 byte được đếm từ trái qua phải từ bit 1 đến bit 32, các Octet
tách biệt nhau bằng dấu chấm "." và biểu hiện ở dạng thập phân đầy đủ là 12 chữ số
Ví dụ: địa chỉ IP 10001100101110100101000100000001 sẽ được ký hiệu thành 140.186.81.1
Hiện nay một số quốc gia đã đưa vào sử dụng địa chỉ IPv6 nhằm mở rộng không gian địa chỉ và sử dụng những ứng dụng và tính năng mới của IPv6, địa chỉ IPv6 gồm 128 bit dài gấp 4 lần
Trang 141.3.2 Tên miền (Domain name)
Một điều dễ nhận thấy là địa chỉ IP khó nhớ và gây nhiều trở ngại trong việc truy cập đến các tài nguyên trên mạng
Tim Beners-Lee đã xây dựng hệ thống tên miền (Domain Name System – DNS) để khắc phục trở ngại này Hệ thống DNS được sinh ra để gán cho mỗi địa chỉ IP dạng số một tên dạng chữ tương ứng, dễ nhớ Các tên dạng chữ này được gọi là tên miền Các tên miền này thường có ý nghĩa liên quan đến các dịch vụ được cung cấp
Hệ thống tên miền trên mạng Internet có nhiệm vụ chuyển đổi tên miền sang địa chỉ IP và ngược lại từ địa chỉ IP sang tên miền
Ví dụ: Địa chỉ IP của tên miền www.google.com là 74.125.31.147
Hệ thống tên miền được phân bố theo cấu trúc hình cây, tên miền cấp cao nhất là tên miền 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 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
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
Second level domain
Top level domain
Sub domain
Trang 151.4 Nhà cung cấp dịch vụ Internet
Để có thể khai thác và sử dụng các dịch vụ Internet, cần có các nhà cung cấp dịch vụ Internet
Có thể liệt kê như sau:
1.4.1 IAP (Internet Access Provider)
IAP là nhà cung cấp dịch vụ đường truyền để kết nối với Internet (còn gọi là IXP – Internet Exchange Provider)
Nếu hiểu Internet như một siêu xa lộ thông tin thì IAP là nhà cung cấp phương tiện để đưa người dùng vào xa lộ Nói cách khác IAP là kết nối người dùng trực tiếp với Internet IAP có thể thực hiện cả chức năng của ISP nhưng ngược lại thì không Một IAP thường phục vụ cho nhiều ISP khác nhau
1.4.2 ISP (Internet Service Provider)
ISP là nhà cung cấp dịch vụ Internet cấp quyền truy cập Internet qua mạng viễn thông và các dịch vụ như: Email, Web, FTP, Telnet, Chat Để có thể truy nhập và sử dụng các dịch vụ của Internet, người sử dụng phải đăng ký với nhà cung cấp dịch vụ này
ISP được cấp cổng truy cập vào Internet bởi IAP
1.4.3 ICP (Internet Content Provider)
ICP là nhà cung cấp dịch vụ nội dung thông tin Internet, cung cấp các thông tin về: kinh
tế, giáo dục, thể thao, chính trị, quân sự,… (thường xuyên cập nhật thông tin mới theo định kỳ) đưa lên mạng
Trang 162 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
2.2.3 Giao thức truyền tin siêu văn bản (HyperText Transfer Protocol – HTTP)
Hypertext Transfer Protocol (HTTP) là 1 giao thức để truyền thông tin trên Internet Mục tiêu ban đầu của giao thức này là cung cấp cách thức để gửi và nhận các trang HTML Giao thức này cung cấp cách thức để xử lý các yêu cầu và kết quả phản hồi giữa máy khách (client) và máy chủ (server) Giữa máy khách và máy chủ có thể có nhiều thiết bị trung gian, chẳng hạn như proxy
và gateway
Hypertext Transfer Protocol Secure (HTTPS) là một sự kết hợp giữa giao thức HTTP và giao thức bảo mật SSL (Secure Socket Layer) hay TLS (Transport Layer Security) Thông tin truyền tải giữa máy khách và máy chủ được mã hóa.cho phép trao đổi thông tin một cách bảo mật trên Internet
Trang 172.2.4 Trình duyệt (web browser)
Là một phần mềm để hiển thị các trang web viết bằng HTML cho người dùng Trình duyệt
là cầu nối liên lạc giữa người dùng với máy chủ web Thông qua trình duyệt, người dùng gửi yêu cầu đến máy chủ dịch vụ web Máy chủ dịch vụ web sẽ gửi kết quả trả về trình duyệt để hiển thị cho người dùng
Một số trình duyệt thông dụng hiện nay: Internet Explorer (IE), FireFox, Google Chrome, Safari, Opera
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]
cổng 80, nếu là giao thức https thì sử dụng cổng 443
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)
Trang 182.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 thời truy cập một trang web hoặc cùng thực hiện một tác vụ, như vậy có nghĩa là mọi ứng dụng Web đều có khả năng quản lý và phục vụ đa phiên
Về phía Server, máy phục vụ web khởi chạy một ứng dụng web tương ứng để xử lý yêu cầu của người sử dụng, kết quả là ứng dụng web sinh ra một trang HTML trả lại cho trình duyệt, sau
Trang 19đó trình duyệt sẽ hiển thị kết quả cho người dùng Trong mô hình tương tác này, cả hai (Client & Server) cùng sử dụng chung một giao thức truyền thông siêu văn bản HTTP
Một máy phục vụ thường được cài các phần mềm chuyên dụng và có thể dùng cho một hay nhiều mục đích
+ 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)
Trang 20Một số tổ chức quản lý các chuẩn web:
2.4.1 W3C - The World Wide Web Consortium
W3C là một tổ chức quốc tế phi chính phủ thiết lập các chuẩn cho World Wide Web Được thành lập năm 1994 bởi nhà sáng lập và lãnh đạo hiện nay Tim Berners-Lee, người sáng tạo ra HTTP và HTML
Mỗi chuẩn của W3C đi qua bốn giai đoạn: Phác thảo (Working Draft), Chỉnh sửa cuối cùng (Last Call), Chuẩn đủ tư cách ứng cử (Candidate Recommendation), Trình chuẩn (Proposed Recommendation) trước khi được gọi là Chuẩn chính thức (Recommendation) Các nhà công
nghiệp phần mềm được tự quyết định có theo tiêu chuẩn hay không Thông thường, nhiều trong
số họ theo các tiêu chuẩn này
Việc tuân thủ chuẩn W3C sẽ giúp:
và tối ưu hóa cho từng trình duyệt
đó, trang web sẽ được hiển thị tốt hơn trên các thiết bị này
2.4.2 ECMA - European Computer Manufacturers Association
ECMA thành lập năm 1961, nhằm mục đích đáp ứng nhu cầu chuẩn hóa ngôn ngữ máy tính
và các mã đầu vào/đầu ra
ECMA không phải là một tổ chức chuẩn hóa chính thức, mà là một hiệp hội các công ty phối hợp với các tổ chức chính thức khác như International Organization for Standardization (ISO) và the European Telecommunications Standards Institute (ETSI)
Với các nhà phát triển web, chuẩn quan trong nhất là ECMAScript, một dạng chuẩn hóa của JavaScript
2.4.3 OASIS – Organization for the Advancement of Structured Information Standards
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,…
Trang 21CHƯƠ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 ISO-8859-1 HTML 4.x còn có thêm một số tính năng quan trọng sau:
ngoài vào Hỗ trợ các sự kiện client-script như onclick, onchange… cho các thẻ
kết với các style được khai báo trong CSS
Cùng với sự phát triển của công nghệ web thì HTML dần bộc lộ một số nhược điểm (mặc
dù không phải là nghiêm trọng) do cấu trúc không chặt chẽ, việc hiển thị trên các trình duyệt cũng như trên các thiết bị di động không thống nhất Để có thể khắc phục những hạn chế của HTML, tháng 2/2000, W3C giới thiệu ngôn ngữ XHTML (Extensible HyperText Markup Language) XHTML cũ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
2 Đặc điểm của HTML
thành phần của văn bản Trong các phần tử HTML, cách thức dữ liệu hiển thị trên trình
duyệt được mô tả thông qua một ký hiệu đánh dấu gọi là tag, hoặc "thẻ HTML" Khi một
trang web được tải về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để hiển thị nội dung
kích thước của cửa sổ hiển thị: cửa sổ rộng bề ngang thì sẽ thu ngắn hơn, cửa sổ hẹp bề ngang thì sẽ được kéo dài ra để hiển thị cho hết nội dung Độ dài của văn bản HTML thực
sự không bị hạn chế
các file HTML bằng bất kỳ bộ xử lý văn bản nào
Trang 223 Cấu trúc của văn bản HTML
3.1 Cấu trúc của HTML element
Một element cơ bản bao gồm tag (thẻ) mở, nội dung của element, tag đóng Ngoài ra element
còn có thể có các thuộc tính cung cấp thêm thông tin element
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)
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>)
[Tag đóng]
Trang 23 Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn (<) cho biết điểm bắt đầu của một thẻ HTML Để có thể gõ được những ký tự đặc biệt đó,
ta phải gõ mã của chúng để thay thế
Mã các ký tự phải được viết thường nếu văn bản HTML theo một chuẩn nào đó
Ví dụ: <p>Phương trình: x × y < z </p>
Không giống như ngôn ngữ lập trình, nếu ta mắc lỗi cú pháp hoặc lỗi logic HTLM thì trình duyệt sẽ không có một thông báo lỗi nào báo cho biết mà vẫn trình bày trang web nhưng theo cách không như mong muốn
bằng số
Trang 243.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
Đượ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
Trang 254 Các thẻ thuộc HTML element
4.1 Phân loại HTML element
Các element được phân loại: element khối (block-level element) và element dòng (inline element)
Chú ý: Sự phân loại này chỉ tính cho các element nằm trong thẻ <BODY>
4.1.1 Element khối (block-level element)
Nội dung của element khi hiển thị trên trình duyệt sẽ bắt đầu và kết thúc bằng một dòng mới
để phân cách với các element khác
Một số element khối cơ bản có các thẻ:
Thẻ định dạng tiêu đề <hx> : gồm các thẻ từ <h1> cho đến <h6>, được sử dụng để định
nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết được tiêu đề của một nội dung
trang HTML, thẻ này chỉ có thể chứa các thẻ thuộc nhóm inline, gồm: <input>, <img>, <a>,
<button>,
vùng trang web do nó chứa được tất cả các thẻ khác Với thẻ <div> kết hợp với định dạng CSS, chúng ta có thể bố cục trang web một cách linh động và thay thế cách bố cục bằng tạo bảng
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ẻ 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
Trang 26Một số element inline tiêu biểu có các thẻ sau
Thẻ heading thuộc block-level element dùng để tạo các tiêu đề, đầu đề cho trang web
Có 6 thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6 theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất)
Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường: h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất Tuy nhiên thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để
Trang 274.2.2 Thẻ Paragraph
Thẻ <p> thuộc block-level element dùng để định nghĩa đoạn văn bản
Thẻ <p> chỉ có thể chứa inline element (nếu có)
Ví dụ:
<html>
<body>
<p>Thẻ paragraph được dùng để định nghĩa đoạn văn bản</p>
<p>Đây là 1 thẻ thuộc block-level element</p>
Thẻ <div> thường được dùng để nhóm các thành phần nội dung thành một khối để định dạng
bằng css do có thể chứa các block-element và inline element bất kỳ
Trang 28Dưới đây là những thuộc tính của thẻ này:
align
left center right
Được dùng để sắp xếp vị trí cho thành phần <hr />
Không khuyến khích sử dụng, sử dụng thuộc
tính text-align của css để thay thế
Trang 29Thuộc tính Giá trị Mô tả
noshade noshade
Xác định một đường line thẳng, rõ nét, không phải bóng mờ
Không khuyến khích sử dụng, sử dụng thuộc tính
text-decoration của css để thay thế
Xác định chiều cao của thành phần <hr />
Không khuyến khích sử dụng, sử dụng thuộc
tính font-size của css để thay thế
Không khuyến khích sử dụng, sử dụng thuộc
tính width của css để thay thế
Trang 304.2.7 Các thẻ định dạng văn bản
<b> Tô đậm văn bản Nên dùng <strong> thay cho thẻ này
<strong> Tô đậm văn bản
<big> Định nghĩa văn bản có size lớn hơn bình thường
<i> Làm cho văn bản nghiêng
<em> Định nghĩa văn bản được nhấn mạnh (emphasized)
<small> Định nghĩa văn bản có size nhỏ hơn bình thường
<sub> Định nghĩa chỉ số dưới
<sup> Định nghĩa chỉ số trên
<ins> Định nghĩa văn bản được "thêm vào"
<del> Định nghĩa văn bản đã bị xóa
<s> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho thẻ này
<strike> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho thẻ này
<u> Gạch dưới văn bản
Ví dụ:
<html>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<i>This text is italic</i><br>
<em>This text is emphasized</em><br>
<small>This text is small</small><br>
This text contains<sub>subscript</sub><br>
This text contains<sup>superscript</sup><br>
This text contains <ins>inserted</ins> text<br>
This text contains <del>deleted</del> text<br>
This text contains <s>deleted</s> text<br>
This text contains <strike>deleted</strike> text<br>
This text contains <u>underlined</u> text<br>
</body>
</html>
Chú ý: Các thẻ định dạng văn bản trên thông thường được thay thế bởi định dạng CSS
Trang 31Thẻ Ý nghĩa
It preserves both spaces
and line breaks
Trang 32Ví dụ:
<html>
<body>
<p><abbr title="World Wide Web Consortium">W3C</abbr>
là tổ chức quản lý các chuẩn Web
Trang 334.3 Liên kết
Một trong những đặc trưng cơ bản của văn bản HTML là nó chứa liên kết tới các văn bản
khác hoặc một phần nội dung khác nằm trong văn bản đó Để tạo liên kết chúng ta dùng thẻ <a>
và thuộc tính href của nó
Cú pháp
<a href="URL">Text_liên_kết</a>
Ví dụ:
<a href="https://www.google.com.vn/">Tìm kiếm</a>
Để quy định cửa sổ trình duyệt mở tài nguyên được liên kết, ta dùng thuộc tính target
Ví dụ:
<a href="https://www.google.com.vn/" target="_blank">Tìm kiếm</a>
<a href="mailto:abc@yahoo.com">Link tới email abc@yahoo.com</a>
4.3.1 Liên kết địa chỉ tuyệt đối
Với liên kết này thì giá trị URL của thuộc tính target được khai báo đầy đủ: giao thức, tên miền, đường dẫn tới tài nguyên
Ví dụ:
<a href="https://www.google.com.vn/">Tìm kiếm</a>
Liên kết địa chỉ tuyệt đối thường được dùng để tham chiếu đến tài liệu nằm ngoài máy chủ của trang web
4.3.2 Liên kết địa chỉ tương đối
Nếu liên kết đến tài liệu thuộc cùng máy chủ của trang web thì ta sử dụng địa chỉ tương đối
là đường dẫn tới tài liệu tham chiếu
Ví dụ:
<a href="doc1.html">Link đến doc1.html</a>
<a href=" /B/doc2.html">Link đến doc2.html</a>
Trang 344.3.3 Liên kết nội tại
Liên kết nội tại thường được dùng tham chiếu đến 1 phần nội dung của trang web Để làm được điều này ta thực hiện các bước sau:
Ví dụ:
<a name="C1"/>Chapter 1</a>
Các thuộc tính trên có thể được điều chỉnh bởi CSS
Trang 37Theo mặc định, mỗi mục thuộc mức thứ nhất của danh sách không đánh số thứ tự bắt đầu
bằng một chấm tròn (disc) Để thay đổi biểu tượng liệt kê ta sử dụng thuộc tính TYPE
Cú pháp:
<OL TYPE=A|a|I|i|1>
hoặc
Nếu muốn đánh số thứ tự bắt đầu từ 1 đơn vị xác định, ta dùng thuộc tính START cho thẻ <ol>
<OL START=n> (với n là thứ tự trong dãy đánh số)
Ví dụ:
<ol TYPE="A" START="3">
<li>Bò beefsteak</li>
<li TYPE="a">Salad trộn</li>
<li>Nước trái cây ép</li>
</ol>
Trang 394.6 Hình ảnh
Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>
Thẻ <img> có 2 thuộc tính cần thiết là src và alt, trong đó:
có sẵn)
Cú pháp:
<img src="url" alt="alternate_text" />
Ví dụ:
<p><img src="image/win8.gif" alt="Windows 8" /></p>
Chú ý: Ta có thể kết hợp giữa thẻ liên kết <a> và thẻ <img> để có được hình ảnh liên kết
<object data="myVideo.mpg" width="320" height="290">
<param name="autoplay" value="true" />
Trang 40Thẻ <frameset> có 2 thuộc tính cơ bản COLS và ROWS dùng để xác định kích thước các
frame của nó Giá trị của cols và rows có thể là px (pixels), pt (points), % hoặc *
Ví dụ: <frameset cols="*,3*"> -> frameset này có 2 frame, trong đó frame
thứ 2 có độ rộng (cols) gấp 3 lần độ rộng của frame thứ 1
Thẻ <frame> có các thuộc tính cơ bản sau