Giáo trình thiết kế web (nghề quản trị mạng trình độ cao đẳng)

QTM-CĐ-MĐ17-TKTWEB

TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin có thể được phép
dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu
lành mạnh sẽ bị nghiêm cấm.

1


LỜI GIỚI THIỆU
Chương trình khung quốc gia nghề Quản trị mạng máy tính đã được xây dựng trên
cơ sở phân tích nghề, phần kỹ thuật nghề được kết cấu theo các môđun, môn học. Để
tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn
giáo trình kỹ thuật nghề theo các mơđun, môn học đào tạo nghề là cấp thiết hiện nay.
Thiết kế web là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý
thuyết và thực hành. Trong q trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài
liệu thiết kế và lập trình web trong và ngoài nước, kết hợp với kinh nghiệm trong thực
tế sản xuất.
Mặc dầu có rất nhiều cố gắng, nhưng khơng tránh khỏi những khiếm khuyết, rất
mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn.
Xin chân thành cảm ơn!
Cần Thơ, ngày 17 tháng 06 năm 2018
Tham gia biên soạn
1. Chủ biên Nguyễn Phát Minh

2


MỤC LỤC

TRANG
LỜI GIỚI THIỆU ............................................................................................................ 2
MỤC LỤC ....................................................................................................................... 3
TRANG .......................................................................................................................... 3
GIÁO TRÌNH MƠN HỌC/MƠ ĐUN ............................................................................ 6
Tên mơn học/mơ đun: THIẾT KẾ WEB .................................................................... 6
Mã môn học/mô đun: MĐ 17 ....................................................................................... 6
BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML............................................. 7
Mã bài: MĐ 17 - 01 ......................................................................................................... 7
1. Lịch sử World Wide Web (www) ........................................................................... 7
1.1. Giới thiệu về World Wide Web (www) ............................................................ 7
1.2. Giới thiệu về URL: ............................................................................................ 7
1.3. Giới thiệu về HTTP ........................................................................................... 9
2. Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) ............................... 9
3. Trang và văn bản trên trang ................................................................................... 10
4. Ngôn ngữ đặc tả Script .......................................................................................... 11
4.1. Khai báo biến: ................................................................................................. 11
4.2. Toán tử: ........................................................................................................... 11
4.3. Các cấu trúc điều kiện ..................................................................................... 12
4.4. Các cấu trúc lặp ............................................................................................... 13
4.5. Khai báo hàm và thủ tục: ................................................................................. 13
4.6. Một số hàm thông dụng trong ASP: ................................................................ 13
5. CSS (Cascading Style Sheets) ............................................................................... 14
5.1. Cú pháp CSS ................................................................................................... 14
5.2. Các thuộc tính trong CSS ................................................................................ 15
5.3. Sử dụng CSS trong trang HTML .................................................................... 15

Bài tập thực hành của học viên .......................................................................... 16
BÀI 2: THIẾT KẾ WEB TĨNH .................................................................................... 18
Mã bài: MĐ 17 - 02 ....................................................................................................... 18
1. Tổng quan: ............................................................................................................. 18

2. Trang và văn bản trên trang ................................................................................... 18
2.1. Tạo tiêu đề ....................................................................................................... 19
2.2. Một số thẻ trình bày và định dạng văn bản: .................................................... 19
2.3. Các thuộc tính của thẻ trình bày trang............................................................. 20
3. Bảng biểu (Table) và trang khung (Frame) ........................................................... 20
3.1. Bảng biểu ......................................................................................................... 20
3.2. Khung – Frames .............................................................................................. 22
4. Multimedia trên trang Web .................................................................................... 26
4.1. Đặt màu nền..................................................................................................... 26
4.2. Màu chữ của văn bản....................................................................................... 26
4.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK ................ 26
4.4. Thuộc tính và mã màu ..................................................................................... 26
4.5. Nạp hình ảnh làm nền cho trang văn bản ........................................................ 27
4.6. Chèn ảnh - thẻ <IMG…> ................................................................................ 27
5. Các yếu tố động trên trang ..................................................................................... 28

3


5.1. Đưa âm thanh vào tài liệu ................................................................................ 28
5.2. Đưa Video vào tài liệu ..................................................................................... 29
6. Khung nhập (Form) ............................................................................................... 30
6.1. Form ................................................................................................................. 30
6.2. Các thành phần trong FORM ........................................................................... 31
7. Liên kết – Link ...................................................................................................... 35
7.1. Thẻ neo và mối liên kết.................................................................................... 35
7.2. Thuộc tính HREF ............................................................................................. 35
7.3. Liên kết ra ngoài – External Links .................................................................. 35
7.4. Địa chỉ tuyệt đối ............................................................................................... 35
7.5. Địa chỉ tương đối ............................................................................................. 36

7.6. Liên kết nội tại – Internal Link ........................................................................ 36
7.7. Siêu liên kết – Hyperlink ................................................................................. 36
BÀI 3: XÂY DỰNG WEB ĐỘNG .............................................................................. 40
Mã bài: MĐ 17 - 03 ....................................................................................................... 40
1.Tổng quan về ASP.Net và ADO.Net: .................................................................... 40
1.1. Tổng quan về ngơn ngữ ASP.Net: ................................................................... 40
1.2 Mơ hình ADO.Net ............................................................................................ 49
2. Các đối tượng ASP.Net: ........................................................................................ 50
2.1. ASP.Net Web Server Controls: ....................................................................... 50
2.2. Các đối tượng trong ASP.NET ........................................................................ 57
2.3. Biến và các cấu trúc điều khiển: ...................................................................... 65
2.4. Thủ tục và hàm ................................................................................................. 72
3. Các đối tượng ADO.Net:....................................................................................... 74
3.1. Các đối tượng trong ADO.Net ......................................................................... 74
3.2. Các lớp SqlClient trong mơ hình ADO.Net ..................................................... 75
3.3. Các điều khiển dữ liệu ASP.Net ...................................................................... 93
TÀI LIỆU THAM KHẢO ........................................................................................... 134

4


GIÁO TRÌNH MƠN HỌC/MƠ ĐUN
Tên mơn học/mơ đun: THIẾT KẾ WEB
Mã mơn học/mơ đun: MĐ 17
Vị trí, tính chất, ý nghĩa và vai trị của mơn học/mơ đun:
_
Vị trí: Mơ đun được bố trí sau khi sau khi sinh viên học xong các môn học Hệ quản
trị Cơ sở dữ liệu, Cơ sở dữ liệu, được đào tạo cho trình độ cao đẳng nghề quản trị
mạng máy tính.
_

Tính chất: Là mô đun đào tạo nghề bắt buộc.
_
Ý nghĩa và vai trị của mơn học/mơ đun:
Mục tiêu của mơn học/mơ đun:
- Về kiến thức:
- Định hướng được kết cách thiết kế Web site;
- Có khả năng sử dụng dụng các thẻ HTML;
- Về kỹ năng:
- Thiết kế được giao diện ;
- Lập trình cơ bản website;
- Sử dụng thành thạo các công cụ thiết kế Web;
- Xây dựng được các ứng dụng Multimedia;
- Cài đặt, cấu hình được dịch vụ IIS;
- Có khả năng kết hợp với cơ sở dữ liệu để tạo ra các trang Web động.
- Về năng lực tự chủ và trách nhiệm:
- Bố trí làm việc khoa học đảm bảo an toàn cho người và phương tiện học
tập.
Nội dung của môn học/mô đun:
Thời gian
Số
Tên các bài trong mô đun
Tổng
Lý
Thực
Kiểm
TT
số
thuyết
hành
tra*

1

Tổng quan về www – ngôn ngữ
HTML

5

2

3

2

Thiết kế web tĩnh

25

10

13

60

18

40

90

30

56

Thiết kế web động
3
Cộng

5

2
2
4


BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML
Mã bài: MĐ 17 - 01
Giới thiệu:
Bài học này nhằm giới thiệu sơ lược về lịch sử của World Wide Web (www),
URL, về giao thức HTTP và ngôn ngữ phổ biến được dùng bởi World Wide Web là
HTML (Hyper Text Markup Language).
Mục tiêu:
- Trình bày được lịch sử của WWW;
- Trình bày được cấu trúc của một trang HTML và các thẻ HTML cơ bản, cách
bố trí, xử lý và ứng dụng file CSS;
- Thực hiện thiết kế được giao diện;
- Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên trang.
- Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script.
- Thực hiện các thao tác an tồn với máy tính.
Nội dung:

1. Lịch sử World Wide Web (www)

Mục tiêu: Trình bày được lịch sử của WWW.

1.1. Giới thiệu về World Wide Web (www)
Ngày nay người ta dùng máy tính như một cơng cụ rất hữu ích để truy cập
Internet, chủ yếu là tìm kiếm thơng tin. Thơng tin này có thể là văn bản, hình ảnh, âm
thanh hay thơng tin đa phương tiện…
Nhu cầu tìm kiếm thơng tin ngày càng nhiều đã đưa ra vấn đề: làm thế nào dễ
dàng sử dụng máy tính truy cập Internet như một cơng cụ phục vụ đắc lực cho việc tra
cứu, tìm kiếm thơng tin trên mạng thơng tin rộng lớn nhất tồn cục.
Vấn đề trên trở nên dễ dàng hơn bởi ý tưởng siêu văn bản (Hypertext) – văn bản
thông minh nhà tin học Ted Nelson đề xuất vào năm 1965. Đến 1989, dự án chính thức
được thực hiện bởi một kỹ sư trẻ người Anh tên là Tim Berners – Lee.
World Wide Web (www) là một mạng các tài nguyên thông tin. WWW dựa trên
3 cơ chế để các tài nguyên trở nên sẵn dùng cho người xem càng rộng rãi nhất càng tốt,
đó là:
- Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên WWW
(như các URL).
- Các giao thức, để truy cập tới các tài nguyên qua WWW (như HTTP).
- Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML).
1.2. Giới thiệu về URL:
Mọi tài nguyên sẵn dùng trên WWW – tài liệu HTML, ảnh, video clip, chương
trình v..v.. - có một địa chỉ mà có thể được mã hóa bởi một URL.

6


URL được xem là một con trỏ dùng với mục đích đơn giản là xác định vị trí tài
nguyên của môi trường Internet. Thông qua các URL mà Web Browser có thể tham

chiếu đến một Web Server hoặc các dịch vụ khác trên Internet và ngược lại.
Các URL thường gồm 3 phần:
- Việc đặt tên của các cơ chế dùng để truy cập tài nguyên.
- Tên của máy tính lưu trữ (tổ chức) tài nguyên.
- Tên của bản thân tài nguyên, như một đường dẫn.
Ví dụ: URL xác định trang W3C Technical Reports là />URL này có thể được đọc như sau: Có một tài liệu sẵn dùng theo giao thức HTTP,
đang lưu trong máy www.w3.org, có thể truy cập theo đường dẫn “/TR”. Các cơ chế
khác ta có thể thấy trong các tài liệu HTML bao gồm “mailto” đối với thư điện tử và
“ftp” đối với FTP.
Ví dụ sau đây chỉ tới hộp thư (mailbox) của người dùng:
Mọi góp ý, xin gửi thư tới
<A ref=”mailto:”>Joe Cool</A>
Các định danh đoạn (fragment identifiers): Một số URL chỉ tới việc định vị một
tài nguyên. Kiểu này của URL kết thúc với “#” theo sau bởi một dấu hiệu kết nối (gọi là
các định danh đoạn). Ví dụ, đây là một URL đánh dấu một móc tên là section_2:
/>Các URL tương đối: khơng theo cơ chế đặt tên. Đường dẫn của nó thường tham
chiếu tới một tài nguyên trên cùng một máy chứa tài liệu hiện tại. Các URL tương đối
có thể gồm các thành phần đường dẫn tương đối (như “..” nghĩa là một mức trên trong
cấu trúc được định nghĩa bởi đường dẫn), và có thể bao gồm các dấu hiệu đoạn.
Ví dụ của giải pháp URL tương đối, giả sử chúng ta có URL gốc:
“ />URL tương đối trong đánh dấu dưới đây cho một liên kết siêu văn bản:
<A href=”suppliers.html”>Suppliers</A>
sẽ mở rộng thành URL đầy đủ
“ />trong khi URL tương đối trong việc đánh dấu cho một ảnh dưới đây
<IMG src=”../icons/logo.gif” alt=”logo”>
sẽ mở rộng thành URL đầy đủ “ />Các URL được dùng để:
- Liên kết tới tài liệu hoặc tài nguyên khác.
- Liên kết tới kiểu dạng bên ngoài hoặc kịch bản (script).

7

1.3. Giới thiệu về HTTP
Web Browser và Web Server giao tiếp với nhau thông qua một giao thức được
gọi là HTTP. Sự kết nối HTTP qua 4 giai đoạn:

Hình 1.1: Sự kết nối HTTP
- Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa chỉ URL.
- Internet và số cổng (ngầm định là 80) được đặc tả trong URL.
- Thực hiện yêu cầu: Web Browser gửi thông tin tới Web Server để yêu cầu phục
vụ. Việc gửi thông tin ở đây là gửi phương thức GET dùng cho việc lấy một đối tượng
từ Server, hay POST dùng cho việc gửi dữ liệu tới một đối tượng trên Server.
- Phản hồi: Web Server gửi một phản hồi về Web Browser nhằm đáp ứng yêu
cầu của Web Browser.
- Kết thúc kết nối: Khi kết thúc quá trình trao đổi giữa Web Browser và Web
Server thì sự kết nối chấm dứt. Và như vậy mối liên hệ giữa Client và Server chỉ được
tồn tại trong quá trình trao đổi với nhau, điều này có lợi điểm rất lớn là giảm được lưu
thông trên mạng.

2. Nhập môn ngôn ngữ HTML (Hyper Text Markup Language)
bản.

Mục tiêu: Trình bày được cấu trúc của một trang HTML và các thẻ HTML cơ

Ngôn ngữ phổ biến dùng bởi World Wide Web là HTML (Hyper Text Markup
Language). Nó được dùng cho các mục đích sau:
- Phổ biến các tài liệu trực tuyến với các heading, văn bản, bảng, danh sách,
ảnh,..v.v…
- Truy tìm thơng tin trực tuyến theo các liên kết siêu văn bản bằng việc kích vào
một nút.

- Thiết kế các định dạng cho việc kiểm soát các giao dịch (transaction) với các
thiết bị từ xa, đối với người dùng trong việc tìm kiếm thơng tin, tạo các sản phẩm, đặt
hàng,.v.v…
- Bao gồm spread-sheets, video clips, sound clips, và các ứng dụng trực tiếp khác
trong các tài liệu của họ.
HTML đánh dấu văn bản dưới dạng các thẻ (Tag). Cấu trúc thẻ HTML có dạng
như sau:

8


- Thẻ đóng: <Tag> văn bản chịu tác động </Tag>
Trong đó:
+ <Tag>: bắt đầu hiệu ứng thẻ.
+ </Tag>: kết thúc hiệu ứng thẻ.
Ví dụ: <b> văn bản này được in đậm</b>
sẽ cho kết quả ở trình duyệt là:
văn bản này được in đậm
- Thẻ mở:

<Tag> văn bản chịu tác động

Ví dụ: Đoạn 1

Đoạn 2
sẽ cho kết quả là:
Đoạn 1
Đoạn 2
- Về quy tắc các thẻ có thể lồng lẫn nhau nhưng vẫn phải đảm bảo đúng cú pháp
của thẻ đó.

3. Trang và văn bản trên trang

Mục tiêu: Biết cách tổ chức được thông tin trong trang chủ và bố trí văn bản trên
trang; Thực hiện thiết kế được giao diện.
Trang web có hai đặc trưng cơ bản:
- Siêu văn bản (hypertext): bao gồm các văn bản, hình ảnh tĩnh, hình ảnh động, âm
thanh, màu sắc và các thành phần khác.
- Siêu liên kết (hyperlink): có nhiều mối liên kết đa dạng với các trang và các thành
phần khác ở bất cứ một website nào trên phạm vi toàn cầu.
Website là tập hợp của rất nhiều webpage có cùng chủ đề tại một địa chỉ nhất định.
Trong một website, người ta có thể “đi lại” giữa các webpage bằng con đường hyperlink.
Các loại trang chủ yếu của website:
- Trang chủ, trang gốc (Master page): với mỗi website có một trang chủ. Là nơi
thể hiện rõ chủ đề của site thông qua cách bố trí danh mục tin, cách trang trí mỹ thuật nổi
bật…
- Trang nội dung (content page): là trang chứa nội dung của một mục tin. Ngoài ra
trên trang cũng có các danh mục tin con theo chủ đề của mục tin cha, các link để liên kết
tới các trang khác.
- Trang đầu (home page, start page): là trang xuất hiện ngay sau khi khởi động
trình duyệt. Có thể là trang chủ hoặc không nhưng không phải là trang đặc biệt.
- Trang đặc biệt (special page): là trang xuất hiện trên nền trang đầu ngay khi khởi
động trình duyệt web. Trang này có thể có hoặc khơng, có thời gian tồn tại ngắn với nội
dung thông báo, đưa những tin đặc biệt, muốn mọi người quan tâm trước tiên.

9


Một trang web thường gồm một vài trang màn hình.

4. Ngôn ngữ đặc tả Script

Mục tiêu: Ghi nhớ các lệnh điều khiển của ngôn ngữ đặc tả Script.

Script hay kịch bản, theo thuật ngữ lập trình, là chương trình chạy với chế độ thông
dịch trên máy khách (client) hay máy chủ (server) nhằm tạo ra các ứng dụng web (web
base application). Xét trên phương diện:
- Client-side : các script bổ sung vào trang web cho phép tạo ra các trang web
tương tác, có những hiệu ứng động dựa vào mơ hình đối tượng trình duyệt (BOM:
browser object model)
- Server-side: sử dụng các đối tượng liên quan để chạy các script trên server.
Có nhiều loại ngơn ngữ đặc tả như JavaScript, VBScript, Jscript,.., trong tài liệu
này chỉ giới thiệu sơ lược về ngôn ngữ đặc tả VBScript nhằm giúp các học viên tham khảo
thêm khi thực hiện lập trình chức năng cho web.
4.1. Khai báo biến:
VB Script khai báo biến thông qua từ khóa dim, biến trong VBScript khơng cần
xác định kiểu, các biến không cấu trúc được xem là biến vơ hướng, có thể chứa và tự
chuyển đổi hầu hết các kiểu dữ liệu.
Hằng được khai báo bằng từ khóa Const. Ví dụ:
Const p = 3.14
Mảng được định nghĩa và truy xuất thông qua chỉ số
- Dim x,y,z
- Dim a(10) ‘Khai báo mảng một chiều a có 10 phần tử’
- Dim b(5,10) ‘Khai báo mảng hai chiều b’
- Redim a(20) ‘Khai báo lại mảng a tăng thêm 10 phần tử vẫn giữ lại giá
trị 10 phần tử đầu’
4.2. Toán tử:
VBScript cho phép sử dụng các toán tử xử lý chuỗi, so sánh và các phép gán, tính
tốn số học như sau:
Tốn tử
Tên gọi
Ví dụ

^
Mũ
2^3 = 8
+
Cộng
x+y
trừ
*
Nhân
/
Chia
\
Chia phần ngun
7\3 (kết quả: 2)
Mod
Chia lấy dư
7 mod 3 (kết quả: 1)
& hoặc +
Cộng chuỗi
“he” & “llo” (kết quả: “hello”)
=
bằng
>
lớn hơn
<
nhỏ hơn

10

<>
khác
>=
lớn hơn hoặc bằng
<=
nhỏ hơn hoặc bằng
Not, And, Or, Xor
Toán tử logic
4.3. Các cấu trúc điều kiện
4.3.1. Lệnh If .. then và If … then … else
Cú pháp:
If1 <biểu thức logic> then
<khối lệnh1>
End if

If(x>2)and(y<3)or(z>x)then

If2 <biểu thức logic> then
<khối lệnh 1>
Else
<khối lệnh 2 >
End if

Chức năng:
- Ở lệnh 1 khối lệnh 1 được thực hiện nếu <biểu thức logic> trả về giá trị True.
- Ở lệnh 2 khối lệnh 1 được thực hiện nếu <biểu thức logic> trả về giá trị True,
ngược lại khối lệnh 2 sẽ được thực hiện.
Ví dụ:
<% If Trim(Request.Form("Go"))="Tim kiem" then
tloai=Request.Form("tuloai")

Else
tloai = request.QueryString("tloai")
End if
%>
4.3.2. Lệnh Select case
Cú pháp:
Select Case <tham số>
Case <giá trị 1>
<khối lệnh 1>
…
Case Else
<khối lệnh>
End select
Chức năng: lệnh này cho phép lựa chọn nhiều trường hợp để ra quyết định thực
thi. Mệnh đề Case Else trong cú pháp dùng cho trường hợp tất cả các phép so sánh của
mệnh đề Case là không xảy ra.
Ví dụ:
<% Select Case tuoi
Case 1,2,3,4,5
Msgbox “bạn là nhi đồng”
Case 6,7,8,9,10
Msgbox “bạn là thiếu nhi”
…………
Case Else
Msgbox “bạn là người lớn”
End select
%>

11

4.4. Các cấu trúc lặp
4.4.1. Lệnh Do ..Loop Until
Cú pháp:
Do
<khối lệnh>
Exit Do
Loop Until <Biểu thức điều kiện>
Chức năng: thực hiện <khối lệnh> trong khi <Biểu thức điều kiện> đúng hoặc
cho đến khi điều kiện trở nên đúng. Lưu ý là điều kiện có thể kiểm tra tại điểm bắt đầu
hoặc kết thúc của vòng lặp, điều khác biệt ở đây là <khối lệnh>sẽ thực hiện ít nhất một
lần nếu điều kiện kiểm tra được đặt ở cuối. Có thể thốt khỏi Do…Loop bằng lệnh Exit
Do.
Ví dụ:
<%Do
Msgbox “hãy đến trường”
If ngay = “chu nhat” then
Exit do
End if
Loop until ngay = “thu bay”
%>
4.4.2. For…next:
Cú pháp:
For gán-biến-chạy = giá trị đầu To giá trị cuối
<khối lệnh>
Next
Chức năng: thực hiện khối lệnh với số lần lặp xác định.
4.4.3. For Each….next:
Cú pháp:
For Each phần-tử In Tập-hợp

<khối lệnh>
Next
Chức năng: lặp lại một đoạn mã cho mỗi phần tử trong mảng hay tập hợp.
4.4.4.. While…Wend:
Cú pháp:
While <biểu thức điều kiện>
<khối lệnh>
Wend
Chức năng: thực hiện khối lệnh trong khi biểu thức điều kiện còn đúng.
4.5. Khai báo hàm và thủ tục:
Bạn dùng cú pháp Sub..End Sub để khai báo thủ tục trong VBScript. Cú pháp
Funtion…End Funtion để khai báo hàm. Để thực hiện triệu gọi 1 thủ tục, sử dụng lệnh
Call.
4.6. Một số hàm thông dụng trong ASP:
4.6.1. Hàm xử lý văn bản:
- TRIM(xâu as string): Bỏ khoảng trắng hai đầu kí tự
- LEFT(Xâu as string, n as interger): Lấy bên trái xâu n kí tự.
- RIGHT(Xâu as string, n as interger): Lấy bên phải xâu n kí tự.

12


- LCASE(Xâu as string) : Chuyển xâu về chữ thường
- UCASE(Xâu as string) : Chuyển xâu về chữ hoa
- MID(xâu as string, n1, n2): Lấy n2 kí tự trong xâu bắt đầu từ vị trí n1.
- CSTR(Biến): Hàm chuyển đổi biến thành kiểu string
Hàm JOIN/SPLIT(Xâu as string, kí tự ngăn cách): Sẽ Nối/Cắt xâu thành
một/nhiều đoạn bằng cách xác định kí tự ngăn cách ở trên và cho các đoạn đó lần lượt
vào một mảng.
Ví dụ:

<%

x=”Hà Nội; Hải Phịng; TPHCM”
y=split(x,”;”)
Response.write y(0)
‘y(0)=”Hà Nội”

%>
4.6.2. Các hàm xử lý số:
- SQR (n): Căn bậc 2 của n.
- INT (n): Lấy phần nguyên n
- MOD : phép chia lấy dư.
- Round (số, n): Làm tròn số với n chữ số thập phân.
- RND (): Trả về số ngẫu nhiên bất kì trong khoảng [0,1]

5. CSS (Cascading Style Sheets)

Mục tiêu: Biết cách tạo, bố trí, xử lý và ứng dụng file CSS.
CSS là các Style dùng định nghĩa cách trình duyệt hiển thị các đối tượng HTML.
Các Style này được lưu trong Style. Nhiều định nghĩa Style cho cùng một loại đối tượng
sẽ được sử dụng theo lớp.
5.1. Cú pháp CSS
Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị:
Đối tượng {thuộc tính: giá trị}
Trong đó:
+ Đối tượng thường là các tag HTML cần định nghĩa cách hiển thị.
+ Thuộc tính là thuộc tính hiển thị của đối tượng đó.
+ Giá trị là cách mà bạn muốn một thuộc tính hiển thị như thế nào.
+ Các cặp thuộc tính: giá trị sẽ được phân cách nhau bởi dấu “;”
Ví dụ:

Để định nghĩa Style cho thẻ p

13


p{

text-align: center;

color: black;

font-family: arial }

5.2. Các thuộc tính trong CSS
5.2.1. Thuộc tính Class
Với thuộc tính Class, bạn có thể định nghĩa nhiều Style khác nhau cho cùng một
đối tượng. Ví dụ, bạn muốn có hai Style cho cùng một tag <P>, nếu tag <P> nào có
class=right sẽ canh lề bên phải, class=center sẽ canh giữa:
p.right {text-align: right}
p.center {text-align: center}
Trong trang HTML:

Đoạn này sẽ được canh phải.

Bạn cũng có thể bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất cả các
thành phần có Class mà bạn định nghĩa.
Ví dụ:
.center { text-align: center;

color: red}

Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa:

Tiêu đề này sẽ được canh giữa.

5.2.2. Thuộc tính ID
Thuộc tính ID có thể dùng định nghĩa Style theo hai cách:
- Tất cả các thành phần HTML có cùng một ID.
- Chỉ một thành phần HTML nào đó có ID được định nghĩa.
Ví dụ: Style dùng cho tất cả các thành phần HTML có ID là "intro".
#intro {

font-size:110%;

font-weight:bold;

color:#0000ff;}

Ví dụ: Style chỉ dùng cho thành phần <P> nào có ID là "intro" trong trang Web.
p#intro {

font-size:110%;

font-weight:bold;

color:#0000ff;}

5.3. Sử dụng CSS trong trang HTML
5.3.1. Dùng file CSS riêng

File CSS độc lập nên dùng khi Style được áp dụng cho nhiều trang. Mỗi trang sử
dụng Style định nghĩa trong file CSS sẽ phải liên kết đến file đó bằng tag <link> đặt
trong phần HEAD:

14


<head>
<link rel="stylesheet" type="text/css" href="tên_file.css" />
</head>
Ví dụ: một file CSS – Style.css
hr {color: sienna}
p {margin-left: 20px}
5.3.2. Định nghĩa các style trong phần HEAD
Các Style định nghĩa trong phần HEAD có thể dùng cho nhiều thành phần HTML
trong trang Web đó. Bạn sử dụng tag <Style> để định nghĩa Style:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif”)}
</head>
Ghi chú: Trình duyệt thường bỏ qua các tag HTML mà nó khơng biết, do đó để
các trình duyệt khơng hỗ trợ CSS khơng hiển thị phần định nghĩa Style, bạn nên đặt
trong tag ghi chú của HTML: <!-- … -->
5.3.3. Dùng Style cho một thành phần HTML cụ thể
Style cho một tag HTML cụ thể gần như không tận dụng được các lợi điểm của
CSS ngoại trừ cách hiển thị đối tượng. Bạn dùng thuộc tính Style để định nghĩa Style
cho thành phần HTML.

Đây là đoạn văn bản

15


Bài tập thực hành của học viên
Câu 1: URL là gì? Trình bày chức năng của giao thức HTTP?
Câu 2: Nêu đặc điểm của siêu văn bản (HTML).
Câu 3: Định nghĩa CSS và trình bày các cách chèn CSS vào một trang. Cho ví dụ
minh họa.
Gợi ý trả lời
Câu 1: Tham khảo mục 1 (1.2, 1.3) trong bài.
Câu 2: Tham khảo mục 2 trong bài.
Câu 3: Tham khảo mục 5 trong bài.

16


BÀI 2: THIẾT KẾ WEB TĨNH
Mã bài: MĐ 17 - 02
Giới thiệu:
Ngày nay, việc thiết kế một trang web là khá đơn giản, công việc này được hỗ
trợ bởi rất nhiều công cụ đồ họa, môi trường thiết kế khác nhau. Chúng ta có thể tìm
hiểu thêm về cách thiết kế, tạo giao diện cho một trang web bằng cách tìm kiếm tài liệu
hướng dẫn cũng như phần mềm hỗ trợ trên mạng internet. Trong bài học này giới thiệu,
hướng dẫn một số kỹ năng thiết kế giao diện cho trang web sử dụng các thẻ đánh dấu
định dạng chuẩn HTML.
Mục tiêu:
- Mô tả được các chế độ hiển thị một trang Web;

- Có khả năng đưa một File vào Web;
- Có khả năng tạo được các bảng biểu và các Frame;
- Tạo được ứng dụng bảng liên kết trang Web;
- Xây dựng được các ứng dụng Multimedia;
- Sử dụng tốt các công cụ hỗ trợ thiết kế Web;
- Thực hiện các thao tác an tồn với máy tính
Nội dung:

1. Tổng quan:

Mục tiêu: Mô tả được các chế độ hiển thị một trang Web.

Ngôn ngữ đánh dấu siêu văn bản HTML chỉ rõ một trang web được hiển thị như
thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử HTML, ta có thể:
- Điều khiển hình thức và nội dung của trang.
- Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử
dụng các liên kết được chèn vào tài liệu HTML.
- Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý giao
dịch,…
- Chèn các đối tượng multimedia, các thành phần ActiveX khác,..
Trong chương này đề cập đến các yếu tố về trang văn bản, cách trình bày trang
khung, cách nhúng, chèn một đối tượng multimedia, hướng dẫn cách định dạng trang
web bằng css,..đó là các yếu tố căn bản để hình thành nên một webpage dạng tĩnh (trang
web không kết nối với cơ sở dữ liệu).

2. Trang và văn bản trên trang

Mục tiêu: Đề cập đến cách trình bày văn bản, đánh dấu, định dạng văn bản trên
trang web.

17


2.1. Tạo tiêu đề
Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của
văn bản như Chương, Mục,... cũng cần có đề mục rõ ràng khác với phần thân để người
đọc theo dõi cho thuận tiện.
Có 6 mức tiêu đề trong HTML. Cách thể hiện các tiêu đề phụ thuộc vào trình
duyệt nhưng thơng thường thì:

Tiêu đề mức 1 Thẻ định nghĩa có dạng: <H1>...</H1>
Ví dụ: <H1>Tiêu đề 1</H1>
cho ta tiêu đề tương ứng Tiêu đề 1
….

Tiêu đề mức 6 Thẻ định nghĩa có dạng: <H6>...</H6>
Ví dụ: <H6>Tiêu đề 6</H6> cho ta tiêu đề tương ứng Tiêu đề 6
2.2. Một số thẻ trình bày và định dạng văn bản:
Các thành phần trình bày trang để định dạng cả một đoạn văn bản và phải nằm
trong phần thân của tài liệu. Có nhiều thẻ được sử dụng nhưng trong tài liệu này chỉ
trình bày một số thẻ chính: định dạng phần địa chỉ (<ADDRESS>), đoạn văn bản (<P>),
xuống dịng (<BR>), căn chính giữa (<CENTER>), đường kẻ ngang (<HR>), đoạn văn
bản đã định dạng sẵn (<PRE>), trích dẫn nguồn tài liệu (<BLOCKQUOTE>)
Đoạn văn bản
Thẻ này dùng để xác định một đoạn văn bản. Thẻ <P> (Paragraph) có thể dùng
kèm thuộc tính để ấn định cách trình bày đoạn văn bản.
<P align=”left|center|right”>...</P>
Một đoạn văn bản rỗng là một dòng trắng.
Chú ý: một số thẻ khác như các thẻ tiêu đề <H1>,...,<H6>, dòng kẻ ngang <HR>,
danh sách, bảng biểu,... đã kèm ln việc xuống dịng thành một đoạn văn bản mới.

Không cần dùng thêm thẻ <P> trước và sau các thẻ này.
Xuống dòng
Thẻ này dùng để xuống dịng mới. Bắt buộc xuống dịng tại vị trí gặp từ khóa
này. Dịng mới được căn lề như dịng được bẻ tự động khi dịng đó q dài
Thẻ định nghĩa dạng:
<BR>
Nếu khơng muốn chèn một dịng trắng mà chỉ đơn thuần muốn xuống dịng mới
thì cần sử dụng thẻ <BR> (Break). Thẻ Break khơng cần có thẻ đóng kèm theo.
Đường kẻ ngang
Thẻ này tạo ra đường kẻ ngang (Horizontal Rule) ngăn cách giữa các phần trong
tài liệu.
Thẻ định nghĩa dạng:
<HR>
<HR width=n%|n(pixel) size=n align=left|center|righ noshade>
Ví dụ:
<HR>
<ADDRESS>February 8, 1995, CERN</ADDRESS>
Kết quả thu được:

Căn chính giữa
Thẻ dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản.

18


Thẻ định nghĩa dạng:
<CENTER>...</CENTER>
Thẻ này cũng có tác dụng xuống dịng khi kết thúc đoạn văn bản.
2.3. Các thuộc tính của thẻ trình bày trang
Thuộc tính ALIGN của thẻ Paragraph

Thẻ <P> dùng để xác định một đoạn văn bản (như trình bày ở phần trước). Dưới
đây ta tìm hiểu kỹ thêm một số các thuộc tính kèm theo (ALIGN) của nó. Có thể căn lề
trái (left - mặc định), căn giữa (center) hoặc căn lề phải (right).

Căn lề trái: <P ALIGN=LEFT>…</P>

Căn giữa:
<P ALIGN=CENTER>…</P>

Căn lề phải: <P ALIGN=RIGHT>…</P>
Thuộc tính Clear của thẻ xuống dịng
Thẻ xuống dịng <BR> cũng có 3 thuộc tính kèm theo như sau:
<BR CLEAR=ALL>
<BR CLEAR=LEFT>
<BR CLEAR=RIGHT>
Các thẻ được sử dụng khi chèn hình ảnh, để các dịng chữ xuất hiện bên dưới,
bên trái hay bên phải của hình.
Các kiểu đường kẻ ngang khác nhau
Như ở phần trên đã giới thiệu, thẻ <HR> tạo một đường kẻ ngang chạy suốt chiều
rộng cửa sổ màn hình. Các đường kẻ này có thể được thay đổi độ đậm (mảnh), ngắn,
dài, căn lề trái, căn lề phải,… bằng cách sử dụng các thuộc tính của chúng.
<HR WIDTH=n% SIZE=n ALIGN=LEFT|RIGHT NOSHADE>
Trong đó:
Thẻ, thuộc tính
Miêu tả
Chèn dịng kẻ ngang suốt chiều rộng cửa sổ màn hình
<HR>
Thay đổi độ dài của đường kẻ, chiếm n% độ rộng cửa sổ
màn hình. Nếu khơng có % đằng sau thì độ dài tính theo đơn
WIDTH = n%

vị pixcel
Thay đổi độ đậm hay mảnh của đường kẻ. n là số pixcel
SIZE = n
Căn lề trái|phải. Đường kẻ ngang mặc định được căn chính
ALIGN=LEFT|RIGHT
giữa
Khơng có bóng mờ, đường kẻ thành màu đen
NOSHADE

3. Bảng biểu (Table) và trang khung (Frame)

Mục tiêu: Có khả năng tạo được các bảng biểu và các Frame.

3.1. Bảng biểu
Mã lệnh tạo bảng
Giới hạn bảng:
>…</asp:Table>
Định nghĩa một hàng:
Định nghĩa một ơ:
Các thuộc tính về bảng
Thẻ/Thuộc tính
CELLSPACING=n
CELLPADDING=n
BackImageUrl="URL"

Table

runat="server"

“thuộc

tính”..

<asp:TableRow>…</asp:TableRow>
<asp:TableCell>…</asp:TableCell>
Ý nghĩa

TABLE - Bắt đầu bảng
BORDER - Đặt khung nổi 3D xung quanh bảng. Đặt
BORDER=0 sẽ làm mất biên bao quanh.

19


Runat =”server” >

CELLSPACING - Đặt độ dày của dòng kẻ ngang trong
bảng.
CELLPADDING - Đặt kích thước của một ơ.
BackImageUrl="URL" - Đặt ảnh nền của bảng.
“URL” - địa chỉ ảnh nền

<asp:TableRow>

Bắt đầu một dòng của bảng – Table row.

<asp:TableCell>

Bắt đầu một ô của bảng (bắt đầu cột trong một bảng).

Caption

Tạo tiêu đề cho bảng

CaptionAlign

Căn lề cho tiêu đề của bảng

CellPadding

Tạo khoảng cách giữa các ô và nội dung của ô trong bảng

CellSpacing
GridLines
None / Horizontal/
Vertical/Both

Tạo khoảng cách giữa các ô trong bảng
Tạo viền kẻ theo khung của bảng.

HorizontalAlign
Center/Justify/ Left/NotSet
(Default)/Right

Căn lề cho bảng

Rows

Tập hợp nhiều hàng trong bảng

</ASP: TABLE>

Kết thúc bảng

Ví dụ: CellPadding, GridLines, HorizontalAlign
<form runat=server>
HorizontalAlign="Center">
<asp:TableRow>
<asp:TableCell>1</asp:TableCell>
<asp:TableCell>2</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>3</asp:TableCell>
<asp:TableCell>4</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Table>
</form>
Kết quả thu được bảng như sau:

20


3.2. Khung – Frames
HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình duyệt
thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác
nhau.

Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau
để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn khung
bên phải hiển thị tài liệu tương ứng.
3.2.1. Trang trí khung
Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu trúc
khác trang thơng thường, khơng có khung.
Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và
FRAMESET thay cho BODY.
Thành phần FRAMESET tổ chức các khung trong cửa sổ trình duyệt. Nó cũng có
thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt không hỗ trợ frame.
Các thành phần thông thường khác vốn nằm trong BODY không được xuất hiện
trước thẻ mở FRAMESET. Nếu khơng, thành phần FRAMESET sẽ bị bỏ qua.
Ví dụ:
Dưới đây là một ví dụ đơn giản.
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="frame1.html">
<FRAME src="frame2.gif">
</FRAMESET>
<FRAME src="frame3.html">
<NOFRAMES>
<P>This frameset document contains:
</NOFRAMES>
</FRAMESET>
Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây.

21


Hình 2.1. Kết quả chạy đoạn code ví dụ

Khi trình duyệt khách khơng hỗ trợ khung thì các khung sẽ không được hiển thị
mà thành phần NOFRAMES sẽ được xử lí.
3.2.2. Các thuộc tính FRAMESET
Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt thành
các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được định nghĩa
bằng thẻ FRAME.
rows = Danh sách các độ cao của các khung
Danh sách gồm nhiều phần tử, cách nhau dấu phẩy. Mỗi phần tử xác định độ cao
(số dòng) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh sách có bấy
nhiêu phần tử.
Chiều cao thể hiện bằng
- Số pixel
- Tỷ lệ phần trăm chiều cao màn hình
- Tỷ lệ phần chiều cao cịn lại.
Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang.
cols = Danh sách các độ rộng của các khung.
Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc.
Thuộc tính rows thiết lập việc chia khung theo chiều ngang trong một frameset.
Nếu không định nghĩa, thì các cột trong khung sẽ chiếm tồn bộ chiều cao vùng hiển
thị.
Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset.
Nếu không định nghĩa, thì các dịng trong khung sẽ chiếm tồn bộ chiều rộng vùng hiển
thị.
Phối hợp hai thuộc tính sẽ tạo ra ơ lưới các khung.
Các ví dụ.
1- Chia màn hình thành hai nửa: nửa trên và nửa dưới:

22

<FRAMESET rows="50%, 50%">
...the rest of the definition...
</FRAMESET>
2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của
phần còn lại và cột thứ 3 chiếm 75% của phần độ rộng còn lại.
<FRAMESET cols="1*,250,3*">
...the rest of the definition...
</FRAMESET>
3- Tạo lưới gồm 2 x 3 = 6 khung.
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...the rest of the definition...
</FRAMESET>
4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của
chiều cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel. Dấu sao có nghĩa
là hai khung thứ 3, thứ 4 chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*", gấp
đơi khung thứ 3 (vì "*" tương đương với 1*).
Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4 lần
lượt là: 300, 400, 100, 200 pixel !.
<FRAMESET rows="30%,400,*,2*">
...the rest of the definition...
</FRAMESET>
Chia khung lồng nhau và thành phần FRAME
Việc chia khung có thể lồng nhau nhiều mức.
Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia
thành 2 phần trên và dưới.
<FRAMESET cols="33%, 33%, 34%">
...contents of first frame...
<FRAMESET rows="40%, 50%">
...contents of second frame, first row...
...contents of second frame, second row...

</FRAMESET>
...contents of third frame...
</FRAMESET>
Thẻ FRAME định nghĩa một khung hình cụ thể (trong nhiều khung hình của
frameset).

23


Các thuộc tính:
name = Tên của khung: Có thể dùng tên này để làm đích của mối siêu liên kết.
src = URI : Trỏ đến trang tài liệu sẽ hiển thị trong khung.
noresize : Không cho phép co giãn lại kích thước
scrolling = auto|yes|no : Thiết lập thanh cuộn.
 auto: Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định.
 yes: Ln có thanh cuộn.
 no: Ln khơng có thanh cuộn.
frameborder = 1|0
Thiết lập đường biên.
 1: Có đường biên giữa khung đang xét với các khung kề nó. Đây là giá trị
mặc định.
 0: Khơng có đường biên giữa khung đang xét với các khung kề nó.
marginwidth = số pixel
Thiết lập độ rộng lề chiều rộng = khoảng trống giữa phần hiển thị nội dung và
biên trái, biên phải. Giá trị mặc định tuỳ theo bộ duyệt.
marginheight = số pixel
Thiết lập độ rộng lề chiều cao = khoảng trống giữa phần hiển thị nội dung và biên
trên, biên dưới. Giá trị mặc định tuỳ theo trình duyệt.
Lưu ý: Nội dung trong một frame không được thuộc về chính trang tài liệu định
nghĩa frameset.

3.2.3. Thiết lập Target, thẻ NOFRAME và IFRAME
Thiết lập Target
Thuộc tính target là để xác định tệp tài liệu HTML sẽ hiển thị trong khung.
target = tên khung đích.
Thiết lập tên của khung mà tài liệu sẽ mở ra trong khung đó.
Thuộc tính này dùng với các thành phần tạo mối liên kết: (A, LINK), image map
(AREA), và FORM.
Thẻ NOFRAMES
Thành phần NOFRAMES thiết lập nội dung cần hiển thị khi trình khách khơng
hỗ trợ frame hoặc đã tắt chức năng hiển thị frame.
Thành phần NOFRAMES đặt ở phần cuối của thành phần FRAMESET.
Nhúng frame - thẻ IFRAME
Thành phần IFRAME cho phép người thiết kế chèn một frame vào giữa một khối
văn bản text và hiển thị một tài liệu HTML khác bên trong.
Thuộc tính SRC thiết lập tài liệu nguồn để hiển thị trong frame.
Các thuộc tính:
name = tên. để tham chiếu trong tài liệu
width = Độ rộng của inline frame.
height = Độ cao của inline frame.
Ví dụ: