Bài giảng Thiết kế Web - Bài 2: Cơ bản về HTML

owspan=“số”: gộp các hàng lại với nhau
– Align: căn theo chiều ngang (left, center, right)
– Valign: căn theo chiều dọc (top, middle, bottom)
• Để loại bỏ bớt ô trong cột, đơn giản loại bỏ đi 
thẻ khai báo ô đó
54
8/2/2010
28
55
3.2. Các thẻ tạo bảng
• Ví dụ: Tạo bảng sau
3.2. Các thẻ tạo bảng
56
• Cách thực hiện
– Xác định kích thước các ô: n%
– Hàng 1: 
• Ô 1 và ô 2 có colspan=2; ô 3 có rowspan=3
• Align=“center”
• Valign=“top”
– Hàng 2, 3: 
• Align=“center”
• Valign=“middle”
8/2/2010
29
57
3.3. Thẻ liên kết
• Siêu liên kết (hyperlink) cho phép bạn chuyển 
từ trang này sang trang khác, tải tập tin về 
máy…
• Tạo liên kết đến
– Một phần khác của cùng tài liệu
– Một tài liệu khác
– Một phần của tài liệu khác
3.3. Thẻ liên kết
58
8/2/2010
30
3.3. Thẻ liên kết
59
60
3.3. Thẻ liên kết
• Tạo siêu liên kết
– Điểm cung cấp liên kết (hypermedia) 
– Địa chỉ của tài liệu được kết nối
• Địa chỉ
– Sử dụng địa chỉ IP hoặc URL
– Có 2 dạng URL
• URL tuyệt đối: địa chỉ đầy đủ đến file
• URL tương đối: URL thiếu một hay nhiều phần
8/2/2010
31
61
3.3. Thẻ liên kết
• Cú pháp tạo liên kết
Hypertext
• Hay
Hypertext
• Protocol: http, gopher, ftp, gopher
62
3.3. Thẻ liên kết
• Liên kết ngoài
– Là liên kết đến một tài liệu khác
• Tài liệu được liên kết nằm trong cùng một thư 
mục => chỉ cần xác định tên tài liệu
Ví dụ: Homepage
• Tài liệu được liên kết thuộc thư mục khác
=> sử dụng đường dẫn tuyệt đối hoặc tương đối
– Đường dẫn tuyệt đối: “C:/MyFolder/MyFile.htm”
– Đường dẫn tương đối: “../MyFolder/MyFile.htm”
8/2/2010
32
63
3.3. Thẻ liên kết
• Liên kết trong
– Cho phép người sử 
dụng chuyển đến các 
phần khác nhau của 
một tài liệu
• Ví dụ
64
3.3. Thẻ liên kết
• Đặt tên chủ đề (điểm neo-Anchor)
Hypertext
• Liên kết
Hypertext
• Liên kết đến một vị trí nào đó trong tài liệu khác
Hypertext
8/2/2010
33
65
3.3. Thẻ liên kết
• Sử dụng Email
– Mong muốn người dùng gửi thư cho bản thân
3.3. Thẻ liên kết
66
8/2/2010
34
3.4. Các thẻ đa phương tiện
• 3.4.1. Chèn ảnh
• 3.4.2. Chèn flash
• 3.4.3. Chèn âm thanh
• 3.4.4. Chèn video
67
68
3.4.1. Chèn ảnh
• Cấu trúc
Hypertext
Thuộc tính Ý nghĩa
BORDER Viền ảnh
ALIGN Căn lề ảnh so với văn 
bản xung quanh
WIDTH Độ rộng ảnh
HEIGHT Chiều cao ảnh
ALT Chú thích cho ảnh
8/2/2010
35
69
3.4.1. Chèn ảnh
• Một số định dạng ảnh phổ biến
– GIF: định dạng sử dụng phổ biến nhất trong tài 
liệu HTML. Hỗ trợ 256 màu
– JPEG: ảnh nén, hỗ trợ 16 triệu màu
– PNG: ảnh không mất mát thông tin
3.4.1. Chèn ảnh
70
Can o duoi
Can o giua
Can o dinh
8/2/2010
36
3.4.1. Chèn ảnh
71
72
3.4.2. Chèn Flash
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000" 
codebase="
wave/cabs/flash/swflash.cab#version=6,0,29,0" 
width="32" height="32">
<embed src="ten_file.swf" quality="high" 
pluginspage="
player" type="application/x-shockwave-flash" 
width="32" height="32">
8/2/2010
37
73
3.4.3. Chèn âm thanh
• Âm thanh nền: 
– Thuộc tính:
• src=“địa chỉ file âm thanh”
• loop=“n”: số lần lặp. -1: mặc định: mãi mãi.
<BGSOUND src="new_mail_1.wav" 
loop="2">
74
• Trình duyệt Firefox, IE, Opera...
<embed src=“ten_file" 
height=“chieu_cao" width=“do_rong” 
type="application/x-mplayer2" 
autostart="0” loop="0”>
3.4.3. Chèn âm thanh
8/2/2010
38
75
3.4.4. Video
• Cú pháp
<EMBED src=“ten_file" 
height=“chieu_cao" 
width=“do_rong">
3.5. Các thẻ tạo khung
76
8/2/2010
39
3.5. Các thẻ tạo khung
• Mục đích
– Chia trang web thành nhiều vùng riêng biệt, mỗi 
vùng hiển thị một nội dung riêng
– Mỗi vùng có thể được tạo, sửa đổi, cuộn một cách 
độc lập
77
78
3.5. Các thẻ tạo khung
• Tạo trang web chứa các khung:
– Thay thẻ … bằng:
các khung
nội dung trong trường hợp trình duyệt 
không hỗ trợ khung
8/2/2010
40
79
3.5. Các thẻ tạo khung
• Một số thuộc tính của 
– rows = “n1, n2, … nk” hoặc
cols = “n1, n2, … nk”
Quy định có k dòng (hoặc cột), độ rộng dòng (cột) 
thứ i là ni. ni là số, có thể thay bằng *: phần còn 
lại
– frameborder = yes hoặc no
– framespacing = “n”: Khoảng cách giữa 2 
khung
80
3.5. Các thẻ tạo khung
• Tạo 1 khung có nội dung là 1 trang web nào 
đó: 
– Thuộc tính:
• src=“Địa chỉ chứa nội dung”
• name=“tên khung”
• noresize: Không được thay đổi kích thước
• scrolling: thuộc tính cuộn (Auto/Yes/No)
8/2/2010
41
81
<FRAME src="Le Thanh Huong.htm" 
scrolling="true" />
<FRAME src="Image.html" 
scrolling="auto" />
3.5. Các thẻ tạo khung
3.5. Các thẻ tạo khung
82
8/2/2010
42
83
<FRAME src="Color.html" 
scrolling="true" />
<FRAME src="Image.html" 
scrolling="auto" />
3.5. Các thẻ tạo khung
3.5. Các thẻ tạo khung
84
8/2/2010
43
4. Các thẻ tạo biểu mẫu
85
86
4. Các thẻ tạo biểu mẫu
• Giới thiệu về các đối tượng điều khiển: nhập 
dữ liệu, nút lệnh…
• Giới thiệu thẻ form tạo biễu mẫu chứa các đối 
tượng trên
8/2/2010
44
4. Các thẻ tạo biểu mẫu
• 4.1. Form
• 4.2. Textbox
• 4.3. Hidden
• 4.4. Checkbox
• 4.5. Option Button
• 4.6. Button
• 4.7. ComboBox
• 4.8. ListBox
• 4.9. TextArea
87
88
4. Các thẻ tạo biểu mẫu
• Cho phép người sử dụng nhập dữ liệu 
trên trang web. Dữ liệu này có thể 
được gửi về server để xử lý.
• Người sử dụng nhập dữ liệu thông qua 
các điều khiển (controls).
• Có nhiều loại control.
8/2/2010
45
89
4. Các thẻ tạo biểu mẫu
• Tất cả các điều khiển đều có tên được quy định 
qua thuộc tính name.
• Các điều khiển từ số 2 đến số 6 được định 
nghĩa nhờ thẻ và thuộc tính type sẽ 
xác định là điều khiển nào sẽ được tạo ra.
90
4.1. Form
• Sử dụng để chứa mọi đối tượng khác
• Một số thuộc tính quan trọng như method, action.
• Thẻ tạo form: …
• Các thuộc tính:
– name=“tên_form”
– action=“địa chỉ nhận dữ liệu xử lý”
– method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị:
• GET (mặc định)
• POST
8/2/2010
46
91
4.2. Textbox
• Sử dụng để nhập các văn bản ngắn 
(trên 1 dòng) hoặc mật khẩu
• Thẻ: 
• Thuộc tính:
– name=“tên_hộp”: quan trọng
– type=“text”:Ô nhập văn bản thường
– type=“password”: ô nhập mật khẩu
– value=“giá trị mặc định”
4.3. Hidden
• Là thẻ Input dạng Text nhưng không hiển thị 
trên trang Web
• Mục đích
– Chuyển dữ liệu giữa các trang Web
• Thẻ 
• Thuộc tính
– name=“tên_đối_tượng”
– value =“giá_trị_mặc_định”
92
8/2/2010
47
93
4.4. Checkbox
• Cho phép chọn nhiều lựa chọn trong một 
nhóm lựa chọn được đưa ra bằng cách 
đánh dấu (“tích”).
• Thẻ: : mỗi ô nhập cần 1 thẻ
• Thuộc tính:
– name=“tên_đối_tượng”: quan trọng
– type=“checkbox”
– value=“giá trị”: đây là giá trị chương trình sẽ 
nhận được nếu NSD chọn ô này.
– checked: nếu có thì nút này mặc định được 
chọn
94
4.5. Option Button (Radio Button)
• Cho phép chọn một lựa chọn trong một 
nhóm lựa chọn được đưa ra.
• Trên 1 form có thể có nhiều nhóm lựa chọn 
kiểu này.
• Thẻ: : Mỗi ô cần 1 thẻ
• Thuộc tính:
– name=“tên_đối_tượng”: quan trọng. 
– type=“radio”
– value=“giá trị”: đây là giá trị chương trình sẽ 
nhận được nếu NSD chọn ô này.
– checked: nếu có thì nút này mặc định được chọn
8/2/2010
48
95
4.6. Button
• Sử dụng để NSD ra lệnh thực hiện công việc.
• Trên web có 3 loại nút:
– submit: Tự động ra lệnh gửi dữ liệu
– reset: đưa mọi dữ liệu về trạng thái mặc định
– normal: người lập trình tự xử lý
• Thẻ: 
• Thuộc tính:
– name=“tên_đối_tượng”
– type=“submit”: nút submit
– type=“reset”: nút reset
– type=“button”: nút thông thường (normal)
– value=“tiêu đề nút”
96
4.7. Combo Box
• Bao gồm một danh sách có nhiều phần tử.
Tại một thời điểm chỉ có 1 phần tử được chọn
• Thẻ tạo hộp danh sách:
Danh sách phần tử
• Thuộc tính:
– name=“tên_đối_tượng”: quan trọng
• Thẻ tạo 1 phần tử trong danh sách:
Tiêu đề phần tử
• Thuộc tính:
– value=“giá trị”: giá trị chương trình nhận 
được nếu phần tử được chọn
– selected: nếu có thì phần tử này mặc định 
được chọn
8/2/2010
49
97
4.8. Listbox
• Tương tự như ComboBox, tuy nhiên có thể 
nhìn thấy nhiều phần tử cùng lúc, có thể lựa 
chọn nhiều phần tử
• Thẻ: …
• Thuộc tính: tương tự của combo tuy nhiên có 2 
thuộc tính khác:
– size=“số dòng”
– multiple: cho phép lựa chọn nhiều phần tử 
cùng lúc
• Thẻ … tương tự của combo 
box
98
4.9. TextArea
• Cho phép nhập văn bản dài trên 
nhiều dòng.
• Thẻ:
Nội dung mặc định
• Thuộc tính:
– name=“tên_đối_tượng”: quan trọng
– rows=“số dòng”
– cols=“số cột”
8/2/2010
50
99
5. Một số thẻ HTML đặc biệt
• Thẻ Meta
• Thẻ Script
• Thẻ Marquee
100
5.1. Thẻ meta
• Thẻ :
– Đặt ở giữa …
– Thường dùng quy định thuộc tính cho trang web
– Tác dụng: font, tìm kiếm, chuyển trang…
– 2 cách viết thẻ :
<META NAME="name" 
CONTENT="content“>
<META HTTP-EQUIV="name“
CONTENT="content“>
8/2/2010
51
101
5.1. Thẻ meta
• Thẻ meta với font
<meta http-equiv="Content-Type“ 
content="text/html;charset=utf-
8">
102
5.1. Thẻ meta
• Thẻ meta cho phép tìm kiếm
• Khai báo các từ khóa để các Search Engineer 
tìm kiếm: author, keywords,…
• Ví dụ
<meta name="keywords" 
content="Do Ba Lam, Information 
system">
8/2/2010
52
103
5.1. Thẻ meta
• Thẻ meta tự động chuyển URL
<META http-equiv="refresh" 
content="2; url=Film.html">
This page will automatically go 
to Film.html
104
5.1. Thẻ meta
• 
• 
• <META NAME="author" CONTENT="author's 
name">
• <META HTTP-EQUIV="refresh" 
CONTENT="delay;url=new url">
• <META HTTP-EQUIV="Content-Type" 
CONTENT="text/html; charset=utf-8">
8/2/2010
53
5.2. Thẻ script
• Muốn kiểm soát các hành động của người 
dùng
• Khai báo các phương thức xử lý phía Client
=> Client Script: JavaScript và VBScript
• Cú pháp
lệnh;
105
5.3. Thẻ marquee
• Khai báo dòng chữ chuyển động theo các 
hướng khác nhau => Quảng cáo
106
<MARQUEE direction="right" 
scrollamount="5">
HaNoi-DaNang-Hue-Tp HoChiMinh
8/2/2010
54
6. Trắc nghiệm
• Nguồn: w3schools.com
• File
Quiz.doc
107
108
Câu hỏi