Giáo trình lập trình Web với Servlet và JSP - Đặng Thanh Dũng

TS ĐẶNG THANH DŨNG

GIÁO TRÌNH

LẬP TRÌNH WEB
VỚI SERVLET VÀ JSP


TS Đặng Thanh Dũng

Giáo trình

LẬP TRÌNH WEB
VỚI SERVLET VÀ JSP

NHÀ XUẤT BẢN ĐẠI HỌC QUỐC GIA
THÀNH PHỐ HỒ CHÍ MINH – 2016


LỜI NĨI ĐẦU
Với sự phát triển mạnh mẽ của cơng nghệ web và số lượng các ứng
dụng web, các kiến thức và kỹ năng về lập trình web là rất quan trọng
cho một kỹ sư công nghệ thông tin. Cùng với ASP.Net, JSP là một trong
những công nghệ web động phía server phổ biến nhất hiện nay. Do
chương trình đào tạo tại Khoa Công nghệ Thông tin, Trường Đại học Sư
phạm Kỹ thuật Thành phố Hồ Chí Minh trong những năm gần đây đặt
nặng trên nền ngôn ngữ Java, bắt đầu từ năm 2013, nội dung mơn Lập
trình web đã tập trung trang bị cho sinh viên tại khoa các kiến thức và kỹ
năng cơ bản về lập trình web dùng các cơng nghệ dựa trên ngơn ngữ
Java, trong đó JSP chiếm phần lớn. Giáo trình này được biên soạn dành
cho sinh viên Khoa Công nghệ Thông tin Trường Đại học Sư phạm Kỹ

thuật Thành phố Hồ Chí Minh với mục tiêu cung cấp cho người học các
kiến thức cần thiết để có thể hồn thành một ứng dụng web tương đối
phức tạp sử dụng công nghệ Servlet và JSP.
Tác giả đã tham khảo một số tài liệu, kết hợp với kinh nghiệm làm
việc thực tế để biên soạn giáo trình này. Nội dung được trình bày cơ
đọng, dễ hiểu kèm theo các bước hướng dẫn thực hành tương đối chi tiết
giúp cho người học hình thành được kỹ năng thực hành, đồng thời có
mức độ hiểu tương đối sâu sắc cơ sở lý thuyết. Nhằm giúp sinh viên nắm
được các thuật ngữ gốc tiếng Anh, trong giáo trình này, tác giả sử dụng
các thuật ngữ này, đồng thời cung cấp giải thích hoặc thuật ngữ tiếng
Việt tương đương trong ngoặc đơn.
Trong quá trình biên soạn, chắc chắn giáo trình cịn nhiều thiếu sót.
Tác giả rất mong nhận được ý kiến đóng góp của q thầy/cơ và các em
sinh viên, để giáo trình sẽ hồn thiện hơn trong các lần tái bản kế tiếp.
TÁC GIẢ
Đặng Thanh Dũng

3


4


MỤC LỤC
LỜI NÓI ĐẦU .......................................................................................... 3
DANH MỤC BẢNG BIỂU.................................................................... 11
DANH MỤC HÌNH ẢNH ..................................................................... 13
Chương 1: CƠ BẢN VỀ HTML VÀ CSS ............................................ 17
1.1. HTML............................................................................................. 17
1.1.1. HTML element ..................................................................... 17

1.1.2. HTML attribute ..................................................................... 17
1.1.3. Một số tag cơ bản .................................................................. 18
1.2. CSS ................................................................................................. 24
1.2.1. HTML động (Dynamic HTML - DHTML) .......................... 24
1.2.2. Gắn CSS vào một trang HTML ............................................ 25
1.2.3. Cấu trúc của luật CSS (CSS rule) ......................................... 25
1.2.4. Gom nhóm các luật CSS ....................................................... 25
1.2.5. Chú giải trong CSS ............................................................... 26
1.2.6. Lớp giả (pseudo class) .......................................................... 28
1.2.7. Phần tử giả (pseudo element) ................................................ 28
1.2.8. Layout properties và Box model ........................................... 29
1.3. CƠ BẢN VỀ CSS3 ........................................................................ 29
Chương 2: CƠ BẢN VỀ JAVASCRIPT, JQUERY VÀ AJAX ......... 32
2.1. JAVASCRIPT.................................................................................. 32
2.1.1. Tổng quan về JavaScript ........................................................ 32
2.1.2. Thêm JavaScript vào HTML .................................................. 32
2.1.3. Các hàm, sự kiện và biến trong JavaScript ............................ 33
2.1.4. Document Object Model (DOM) ........................................... 34

5


2.2. JQUERY VÀ AJAX ......................................................................... 35
2.2.1. JQuery .................................................................................... 35
2.2.2. AJAX ...................................................................................... 38
2.2.3. AJAX trong jQuery ................................................................ 40
Chương 3: SƠ LƯỢC VỀ SERVLET VÀ JSP ................................... 42
3.1. SERVLET ......................................................................................... 42
3.1.1. Servlet là gì? ........................................................................... 42
3.1.2. Ví dụ về Servlet code ............................................................ 43

3.1.3. Ưu điểm của Servlet so với CGI (Common Gateway
Interface) ............................................................................... 44
3.2. JSP .................................................................................................. 46
3.2.1. JSP là gì? ............................................................................... 46
3.2.2. Ví dụ về JSP code ................................................................. 47
Chương 4: CÀI ĐẶT VÀ CẤU HÌNH SERVER ................................ 48
4.1. TẢI VÀ CÀI ĐẶT SDK (JAVA SOFTWARE
DEVELOPMENT KIT) ................................................................. 48
4.2. TẢI SERVER ................................................................................. 49
4.3. CẤU HÌNH SERVER .................................................................... 50
4.4. CẤU HÌNH APACHE TOMCAT.................................................. 51
4.5. KIỂM TRA VIỆC CÀI ĐẶT VÀ CẤU HÌNH TOMCAT ............ 52
4.6. CẤU HÌNH MACROMEDIA JRUN ............................................. 53
4.7. CẤU HÌNH CAUCHO RESIN ...................................................... 54
Chương 5: CƠ BẢN VỀ SERVLET .................................................... 55
5.1. CẤU TRÚC CỦA MỘT SERVLET .............................................. 55
5.2. SERVLET XUẤT RA PLAIN TEXT ĐƠN GIẢN ....................... 56
5.3. SERVLET XUẤT RA HTML ....................................................... 57
5.4. SERVLETS PACKAGING............................................................ 59
6


5.5. CÁC UTILITIES HỖ TRỢ VIỆC TẠO FILE HTML ................... 60
5.6. CHU KỲ SỐNG CỦA SERVLET ................................................. 62
5.6.1. Phương thức service.............................................................. 63
5.6.2. Các phương thức doGet, doPost, doXXX............................. 63
5.6.3. Phương thức init.................................................................... 64
5.6.4. Phương thức destroy ............................................................. 67
5.7. SINGLETHREADMODEL INTERFACE .................................... 67
5.8. GỠ LỖI SERVLET ........................................................................ 68

Chương 6: XỬ LÝ YÊU CẦU TỪ CLIENT – FORM DATA........... 69
6.1. VAI TRÒ CỦA FORM DATA ...................................................... 69
6.2. ĐỌC FORM DATA TỪ SERVLET .............................................. 70
6.2.1. Đọc giá trị của tham số (một giá trị): getParameter .............. 70
6.2.2. Đọc giá trị của tham số (chứa nhiều giá trị):
getParameterValues .............................................................. 70
6.2.3. Tìm tham số theo tên: getParameterNames và
getParameterMap .................................................................. 70
6.2.4. Đọc form data dạng thô và parse các file được
upload: getReader hoặc getInputStream .............................. 71
6.3. XỬ LÝ SÓT DỮ LIỆU VÀ DỮ LIỆU BỊ THAY ĐỔI ................. 71
6.3.1. Sử dụng giá trị mặc định ....................................................... 71
6.3.2. Hiển thị lại form .................................................................... 72
6.3.3. Đọc
input
trong
tập
nhiều
ký
tự:
setCharacterEncoding ........................................................... 73
6.4. LỌC CÁC KÝ TỰ ĐẶC BIỆT ...................................................... 73
Chương 7: SỬ DỤNG JDBC VỚI SERVLET .................................... 76
7.1. CÀI ĐẶT JDBC DRIVER ............................................................. 76
7.2. CÁC BƯỚC LÀM VIỆC VỚI JDBC ............................................ 77

7


Chương 8: TỔNG QUAN VỀ CÔNG NGHỆ JSP ............................. 80

8.1. SỰ CẦN THIẾT CỦA JSP ............................................................ 81
8.2. CÀI ĐẶT TRANG JSP .................................................................. 81
8.2.1. Thư mục JSP trong TomCat (mặc định) ............................... 82
8.2.2. Thư mục JSP trong Jrun (mặc định) ..................................... 82
8.2.3. Thư mục JSP trong Resin (mặc định) ................................... 82
8.3. CÚ PHÁP JSP ................................................................................ 82
8.3.1. HTML Text ........................................................................... 82
8.3.2. HTML Comments ................................................................. 83
8.3.3. Template Text ....................................................................... 83
8.3.4. JSP Comment ........................................................................ 83
8.3.5. JSP Expression ...................................................................... 83
8.3.6. JSP Scriptlet .......................................................................... 83
8.3.7. JSP Declaration ..................................................................... 83
8.3.8. JSP Directive......................................................................... 83
8.3.9. JSP Action............................................................................. 84
8.3.10. JSP Expression Language Element ....................................... 84
8.3.11. Custom Tag (Custom Action) ............................................... 84
8.3.12. Escaped Template Text ......................................................... 84
Chương 9: JSP SCRIPTING ELEMENT ........................................... 85
9.1. TẠO TEMPLATE TEXT............................................................... 85
9.2. GỌI JAVA CODE TỪ JSP ............................................................ 85
9.3. GIỚI HẠN SỐ LƯỢNG JAVA CODE TRONG TRANG
JSP .................................................................................................. 86
9.4. JSP EXPRESSIONS ...................................................................... 87
9.4.1. Biến được định nghĩa trước .................................................. 87
9.4.2. Cú pháp XML cho JSP expression ....................................... 88
9.4.3. Ví dụ JSP expression ............................................................ 88
8

9.5. SO SÁNH SERVLET VỚI JSP ..................................................... 89
9.6. JSP SCRIPTLETS .......................................................................... 90
9.6.1. Sự tương ứng giữa JSP/Servlet ............................................. 91
9.6.2. Cú pháp XML cho scriptlet .................................................. 91
9.6.3. Ví dụ Scriptlet ....................................................................... 91
9.7. JSP DECLARATIONS .................................................................. 93
9.7.1. Sự tương ứng giữa JSP/Servlet ............................................. 93
9.7.2. Cú pháp XML cho JSP declaration....................................... 94
9.7.3. Ví dụ về JSP declaration ....................................................... 94
Chương 10: WEB SERVICE ................................................................ 96
10.1. SƠ LƯỢC VỀ WEB SERVICE ..................................................... 96
10.1.1. Các thành phần của Web service .......................................... 96
10.1.2. Các phương pháp cài đặt ....................................................... 96
10.2. CÀI ĐẶT ECLIPSE ....................................................................... 97
10.2.1. Axis2 plug-in ........................................................................ 97
10.2.2. WTP plug-in ......................................................................... 97
10.2.3. soapUI plug-in ...................................................................... 98
10.3. TẠO WEB SERVICE .................................................................... 98
10.3.1. Các bước để tạo một web service ......................................... 98
10.3.2. Thiết lập máy chủ ứng dụng (application server) ................. 98
10.3.3. Tạo một project ..................................................................... 98
10.3.4. Viết code cho một logic service .......................................... 102
10.3.5. Tạo Web service và Web client .......................................... 106
10.4. KIỂM THỬ WEB SERVICE ....................................................... 111
Chương 11: SERVICE-ORIENTED ARCHITECTURE ................ 114
11.1. SOA LÀ GÌ?................................................................................. 114
11.2. TẠI SAO LẠI DÙNG SOA ......................................................... 114
9

11.3. KIẾN TRÚC DỊCH VỤ ............................................................... 115
11.4. SOAP, WSDL, UDDI .................................................................. 117
11.5. WS-I BASIC PROFILE ............................................................... 117
11.6. J2EE VÀ .NET ............................................................................. 118
11.7. CHẤT LƯỢNG DỊCH VỤ .......................................................... 118
Chương 12: BOOTSTRAP ................................................................. 121
12.1. CÁC BƯỚC CƠ BẢN ĐỂ TẠO MỘT TRANG WEB CÓ
SỬ DỤNG BOOTSTRAP ............................................................ 121
12.2. BOOSTRAP GRIDS .................................................................... 123
12.3. BOOTSTRAP TABLE ................................................................. 125
12.4. BOOTSTRAP FORM .................................................................. 125
TÀI LIỆU THAM KHẢO ................................................................... 127

10


DANH MỤC BẢNG BIỂU
Bảng 2.1 - Ví dụ về hàm và sự kiện trong JavaScript ............................. 34
Bảng 2.2 - Một số đối tượng DOM và phần tử HTML tương ứng .......... 34
Bảng 2.3 - Các ví dụ về cú pháp jQuery .................................................. 37
Bảng 2.4 - Ví dụ về sử dụng jQuery trong trang HTML ......................... 37
Bảng 2.5 - Ví dụ hàm callback ................................................................ 38
Bảng 2.6 - Ví dụ về AJAX....................................................................... 39
Bảng 3.1 - Ví dụ code servlet .................................................................. 44
Bảng 3.2 - Store.jsp ................................................................................. 47
Bảng 5.1 - ServerTemplate.java .............................................................. 55
Bảng 5.2 - HelloWorld.Java .................................................................... 56
Bảng 5.3 - HelloServlet.java .................................................................... 58
Bảng 5.4 - coreservlets/HelloServlet2.java ............................................. 59
Bảng 5.5 - Cấu trúc file HTML ............................................................... 60

Bảng 5.6 - coreservlets/ServletUtilities.java ........................................... 61
Bảng 5.7 - coreservlets/HelloServlet3.java ............................................. 61
Bảng 5.8 - Ví dụ cài đặt phương thức doPost gọi doGet ......................... 63
Bảng 5.9 - Định nghĩa phương thức init() ............................................... 64
Bảng 5.10 - coreservlets/LotteryNumbers.java ....................................... 65
Bảng 5.11 - Cài đặt SingleThreadModel interface .................................. 68
Bảng 6.1 - ServletUtility.java .................................................................. 74
Bảng 7.1 - Ví dụ cách dùng JDBC .......................................................... 78
Bảng 8.1 - OrderConfirmation.jsp ........................................................... 80
Bảng 9.1 - Các phương pháp gọi Java code từ JSP ................................. 86
Bảng 9.2 - Expression.jsp ........................................................................ 88
Bảng 9.3 - Ví dụ về JSP Expression/Scriptlet ......................................... 91
Bảng 9.4 - Ví dụ về servlet Expression/Scriptlet ..................................... 91
11


Bảng 9.5 - BCCorlor.jsp .......................................................................... 92
Bảng 9.6 - Ví dụ về JSP declaration ........................................................ 93
Bảng 9.7 - Ví dụ về Servlet code: declaration ......................................... 94
Bảng 9.8 - AccessCounts.jsp ................................................................... 94
Bảng 10.1 - Tạo một business logic....................................................... 102
Bảng 12.1 - Một trang web đơn giản có sử dụng Bootstrap .................. 122

12


DANH MỤC HÌNH ẢNH
Hình 1.1 - Cấu trúc của tag <a> hay phần tử <a> ................................... 17
Hình 1.2 - Các attribute của phần tử <input> .......................................... 17
Hình 1.3 - Ví dụ về các heading .............................................................. 18

Hình 1.4 - Ví dụ về thẻ

..................................................................... 19
Hình 1.5 - Tác dụng của thẻ <PRE> ........................................................ 19
Hình 1.6 - Minh họa cách dùng order list ................................................ 20
Hình 1.7 - Minh họa cách dùng font chữ và màu chữ ............................. 20
Hình 1.8 - Minh họa cách dùng thẻ <a> .................................................. 21
Hình 1.9 - Minh hoạ thẻ <image> ........................................................... 22
Hình 1.10 - Minh họa cách dùng thẻ <table> .......................................... 22
Hình 1.11 - Minh họa cách dùng các thuộc tính border,
cellspacing, và cellpadding ................................................... 23
Hình 1.12 - Minh họa cách dùng thuộc tính TR và TD ........................... 23
Hình 1.13 - Minh họa cách dùng thẻ <TR> và <TD> ............................. 24
Hình 1.14 - Vai trị của CSS trong trang web .......................................... 24
Hình 1.15 - Cấu trúc của một luật CSS và ví dụ...................................... 26
Hình 1.16 - Gom nhóm 3 luật CSS có cùng selector h1 .......................... 26
Hình 1.17 - Gom nhóm các luật CSS có cùng declaration ...................... 26
Hình 1.18 - Chú giải trong CSS ............................................................... 26
Hình 1.19 - Ví dụ về cách dùng CSS để định dạng một trang
HTML ................................................................................... 27
Hình 1.20 - Ví dụ về cách sử dụng CSS để định dạng trang
HTML ................................................................................... 27
Hình 1.21 - Ví dụ cách dùng lớp giả........................................................ 28
Hình 1.22 - Ví dụ về phần tử giả trong CSS ............................................ 28
Hình 1.23 - Layout properties .................................................................. 29
13


Hình 1.24 - Minh họa Box model ............................................................ 29
Hình 1.25 - Áp dụng box-shadow cho phần tử DIV................................ 30
Hình 1.26 - Ví dụ về radial gradient ........................................................ 30
Hình 1.27 - Ví dụ về linear gradient (qua phải) ....................................... 30

Hình 1.28 - Ví dụ về tác dụng của text-shadow ...................................... 31
Hình 1.29 - Ví dụ về tác dụng của hiệu ứng rotate() .............................. 31
Hình 1.30 - Minh họa tác dụng của hiệu ứng rotateX() ........................... 31
Hình 3.1 – Vai trị của Servlet/JSP .......................................................... 42
Hình 3.2 – Kết quả thực thi đoạn code .................................................... 44
Hình 4.1 - Trang chủ Jrun ........................................................................ 54
Hình 5.1 - Kết quả của http://localhost/servlet/HelloWorld .................... 57
Hình 5.2 - Kết quả của http://localhost/servlet/HelloServlet ................... 58
Hình 5.3 - Kết quả của
http://localhost/servlet/coreservlets.HelloServlet2 ............... 60
Hình 5.4 - Kết quả của
http://localhost/servlet/coreservlets.HelloServlet3 ............... 62
Hình 5.5 - Kết quả của servlet Lottery Numbers ..................................... 66
Hình 7.1 - Chương trình Java và các thành phần của JDBC ................... 77
Hình 8.1 - Kết quả của OrderConfirmation.jsp ....................................... 80
Hình 9.1 - Kết quả của Expression.jsp dùng Jrun và bỏ qua tham
số request testParam.............................................................. 89
Hình 9.2 - Kết quả của Expression.jsp dùng Resin và chỉ định
giá trị cho tham số request testParam là “testing” ................ 89
Hình 9.3 - Kết quả mặc định của BGColor.jsp ........................................ 92
Hình 9.4 - Kết quả BGCorlor.jsp khi gán giá trị c0c0c0 cho
tham số bgColor .................................................................... 92
Hình 9.5 - Kết quả BCColor.jsp khi gán giá trị màu X11 với tên
gọi papaywhip cho tham số bgColor .................................... 93
14


Hình 9.6 - Vào trang AccessCounts.jsp sau khi nó được request
9 lần trước đó bởi cùng một client ........................................ 95
Hình 10.1 - Hai phương pháp cài đặt web service................................... 97

Hình 10.2 - Project Explore – Java EE perspective ................................. 99
Hình 10.3 - Cửa sổ tạo project ................................................................. 99
Hình 10.4 - Cửa sổ thiết lập Dynamic Web Project .............................. 100
Hình 10.5 - Cửa sổ chọn Project Facets ................................................ 100
Hình 10.6 - Cửa sổ cấu hình Web module............................................. 101
Hình 10.7 - Hộp thoại thay đổi project perspective tương thích ........... 101
Hình 10.8 - Dynamic project ................................................................. 102
Hình 10.9 - Gọi phương thức helloName .............................................. 103
Hình 10.10 - Cửa sổ tạo item mới cho Java Resource ........................... 104
Hình 10.11 - Cửa sổ tạo một Java class ................................................. 104
Hình 10.12 - Khởi tạo class Hello ......................................................... 105
Hình 10.13 - Project Hellosau khi biên dịch.......................................... 105
Hình 10.14 - Cửa sổ chọn Web service ................................................. 106
Hình 10.15 - Khởi tạo cấu hình Web service ........................................ 107
Hình 10.16 - Chọn class cài đặt service ................................................. 108
Hình 10.17 - Cấu hình web service ....................................................... 109
Hình 10.18 -Window Firewall khóa Eclipse ......................................... 110
Hình 10.19 - Client được khởi tạo trong Eclipse ................................... 110
Hình 10.20 - Gọi phương thức helloName ............................................ 112
Hình 10.21 - Kết quả web service ......................................................... 112
Hình 11.1 - Chuỗi cung cấp ứng dụng ................................................... 115
Hình 11.2 - Ví dụ về kiến trúc dịch vụ .................................................. 116
Hình 11.3 - Một cơ sở hạ tầng SOA điển hình ...................................... 117
Hình 12.1 - Các cột có kích thước khác nhau ........................................ 123
Hình 12.2 - Bootstrap table .................................................................... 125
15


Hình 12.3 - Bảng với lớp .table-striped ................................................. 125
Hình 12.4 – Vertical form ...................................................................... 126

Hình 12.5 - Inline form .......................................................................... 126
Hình 12.6 - Horizontal form .................................................................. 126

16


Chương 1
CƠ BẢN VỀ HTML VÀ CSS
1.1. HTML
HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu
(Markup), sử dụng các thẻ (tag) và các phần tử (element) để điều khiển
sự hiển thị của các tài liệu và các thông tin nói chung, truy xuất và đọc
các tài liệu online, đồng thời tạo các form online dùng để thu thập thông
tin về người dùng và tạo ra các giao dịch. Sau đây tác giả sẽ trình bày
ngắn gọn các thành phần của một trang HTML.
1.1.1. HTML element
Mỗi phần tử trong HTML bao gồm một cặp tag: tag mở (open tag
hoặc start tag) và tag đóng (end tage), các thuộc tính (attribute) và giá trị
của các thuộc tính (value). Hình 1.1 mơ tả cấu trúc của một tag.

Hình 1.1 - Cấu trúc của tag <a> hay phần tử <a>
1.1.2. HTML attribute
Attribute cung cấp các thông tin mô tả thêm về phần tử như Hình
1.2. Tất cả các attribute phải nằm trong start tag, và phải viết dưới dạng:
name=“value”.

Hình 1.2 - Các attribute của phần tử <input>

17

Attribute

Mô tả

Value

Class

Classname

Xác định classname cho phần tử

Id

Id

Xác định id duy nhất cho phần tử

Style

Style_definition

Xác định inline style cho phần tử

Title

Tooltip_text

Xác định thông tin thêm cho phần tử

1.1.3. Một số tag cơ bản
Heading
Được dùng để định nghĩa các mức đề mục cho tài liệu. Có sáu mức
đề mục.
<H1 ...> text H1 </H1> -- cỡ chữ lớn nhất
<H2 ...> text H2</H2>
<H3 ...> text H3</H3>
<H4 ...> text H4</H4>
<H5 ...> text H5</H5>
<H6 ...> text H6</H6> -- cỡ chữ nhỏ nhất.
Hình 1.3 trình bày một trang HTML có sử dụng 6 heading và hiển
thị của trang này trên trình duyệt.

Hình 1.3 - Ví dụ về các heading

18


Paragraph
Thẻ <P> được dùng để định nghĩa một đoạn văn như Hình 1.4.

Hình 1.4 - Ví dụ về thẻ

Preformatted
Thẻ <PRE> được dùng để hiển thị nội dung như nó được nhập vào
trang HTML, tức giữ cố định font chữ được nhập và các khoảng trắng, ký
tự xuống dịng. Hình 1.5 minh họa tác dụng của thẻ <PRE>.

Hình 1.5 - Tác dụng của thẻ <PRE>
Order list

Chúng ta dùng danh sách thứ tự để liệt kê các nội dung, như được
minh họa trong Hình 1.6.

19


Hình 1.6 - Minh họa cách dùng order list
Font và màu
Chúng ta dùng thẻ <font> và thuộc tính color để xác định font và
màu chữ như được minh họa trong Hình 1.7.

Hình 1.7 - Minh họa cách dùng font chữ và màu chữ

20


Hyperlink
Được dùng để link trang này với trang khác. Cú pháp của thẻ này
như sau:
<A HREF =“URL”>Content></A>

Hình 1.8 - Minh họa cách dùng thẻ <a>
Image tag
Dùng để hiển thị hình ảnh trên trang web. Cú pháp của thẻ này như
sau:
align =“...”/>
Trong đó:
 SRC là attribute bắt buộc, được dùng để xác định URL của hình.
 Width, height là chiều rộng và chiều cao của hình, được đo bằng

pixels hoặc phần trăm của một trang hoặc một frame.
 Images sẽ được điều chỉnh (scale) để khớp với không gian được
cho phép.

21


Hình 1.9 - Minh hoạ thẻ <image>
The table
Hình 1.10 minh hoạ cách dùng thể <table>.

Hình 1.10 - Minh họa cách dùng thẻ <table>
22


Hình 1.11 minh họa cách dùng các thuộc tính border, cellspacing,
và cellpadding trong thẻ <table>.

Hình 1.11 - Minh họa cách dùng các thuộc tính border, cellspacing,
và cellpadding
Chúng ta có thể dùng các thuộc tính của thẻ <TR> và <TD> để làm
việc với dòng và cột của các bảng như được minh họa trong Hình 1.12.

Hình 1.12 - Minh họa cách dùng thuộc tính TR và TD
HTML form
Chúng ta có thể dùng HTML form để thu thập thông tin từ người
dùng và gửi về server. Hình 1.13 mơ tả cách dùng thẻ <FORM>.
23

Hình 1.13 - Minh họa cách dùng thẻ <TR> và <TD>

1.2.

CSS

Trong phần này, tác giả sẽ tóm tắt các kiến thức cơ bản về CSS
(Cascading Style Sheet) và CSS3 để giúp sinh viên có thể dùng được
CSS trong các tài liệu HTML.
1.2.1. HTML động (Dynamic HTML - DHTML)
Thuật ngữ DHTML được dùng để chỉ trang HTML có kết hợp với
CSS và các ngơn ngữ script (ví dụ JavaScript) giúp trang HTML có khả
năng đáp ứng được các tác động của người dùng, và vì vậy, trang HTML
trở nên sống động hơn. DHTML có thể được thực hiện bằng cách tập
trung dùng các CSS. Tập tin CSS là một tập tin văn bản với tên file mở
rộng là .css. Tập tin này chứa một tập các lệnh hoặc các luật quy định
cách hiển thị các phần tử HTML.

Hình 1.14 - Vai trị của CSS trong trang web
Hình 1.14 mơ tả vai trò của CSS trong các website.
24


1.2.2. Gắn CSS vào một trang HTML
Có 3 cách để gắn CSS vào một trang HTML.
 Inline Style Sheet: CSS không được khai báo trong header của
trang HTML mà được nhúng trược tiếp vào trong tag.
Ví dụ:

Some Text

 Internal Style Sheet: CSS được khai báo trong phần header của
trang HTML. Loại này thích hợp cho trường hợp dùng CSS cho

một trang. Ví dụ:
<head>
<style type=“text/css”> h1 {color: red)
</style>
</head>

 External Style Sheet: CSS được chứa trong một tập tin riêng và
liên kết tập tin này với trang HTML bằng cách dùng tag <link>.
Loại này thường được sử dụng để định dạng nhiều trang HTML.
rel="stylesheet"
href="css/styles.css" />

type="text/css“

Trong trường hợp muốn thêm thơng tin định dạng ngồi thơng tin
đã được mơ tả trong tag <link>, ta có thể dùng @import như sau:

1.2.3. Cấu trúc của luật CSS (CSS rule)
Một luật CSS bao gồm một selector và một declaration. Một
declaration bao gồm các cặp thuộc tính – giá trị. Một selector thường là
một phần tử HTML. Các cặp thuộc tính – giá trị cho biết cách thức hiển
thị các phần tử HTML. Hình 1.15 minh hoạ cấu trúc của một luật CSS và
ví dụ về luật CSS định dạng phần tử

.
1.2.4. Gom nhóm các luật CSS
Chúng ta có thể gom nhóm các luật CSS có cùng selector và khác
declaration như Hình 1.16.

25