Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 1: HTML

1Phát triển ứng dụng Web – Web Programming
Chương 1: HTML
Ths. Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM
Phần 1. Tổng quan về thiết kế 
& lập trình Web
31.1. Mạng, giao thức
• Mạng máy tính (Computer Network) Hệ thống
các máy tính được kết nối với nhau nhằm
trao đổi dữ liệu.
• Giao thức (Protocol)
– Tập hợp các quy tắc được thống nhất giữa các
máy tính trong mạng nhằm thực hiện trao đổi dữ
liệu được chính xác
– Ví dụ: TCP/IP, HTTP, FTP,
41.2. Địa chỉ IP: IP Address
• Xác định một máy tính trong mạng dựa trên giao
thức TCP/IP. Hai máy tính trong mạng có 2 địa chỉ
IP khác nhau
• Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255)
• Ví dụ: 222.255.77.2
• Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ loopback) là
địa chỉ của chính máy tính đang sử dụng dùng để
thử mạng
51.3. Tên miền (Domain Name)
• Là tên được “gắn” với 1 địa chỉ IP.
• Máy chủ DNS thực hiện việc “gắn” (ánh xạ)
• Ở dạng văn bản nên thân thiện với con người
• Được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). 
Đánh số cấp lần lượt từ phải sang trái bắt đầu từ 1.
• Cấp lớn hơn là con của cấp nhỏ hơn
• Ví dụ: fit.hcmup.edu.vn gắn với 222.255.77.2 trong đó:
– vn: Nước Việt Nam (Cấp 1)
– edu: Tổ chức giáo dục (Cấp 2)
– hcmup: Tên cơ quan (Cấp 3)
– fit: đơn vị nhỏ trong cơ quan (Cấp 4)
• Đặc biệt: Tên localhost được gắn với 127.0.0.1
61.4. Máy chủ-máy phục vụ: Server
• Là máy tính chuyên cung cấp tài nguyên, dịch 
vụ cho máy tính khác.
• Thường được cài các phần mềm chuyên dụng 
để có khả năng cung cấp
• Một máy chủ có thể dùng cho một hay nhiều 
mục đích. Tên máy chủ thường gắn với mục 
đích sử dụng. Ví dụ:
– File server
– Application server
– Mail server
– Web server
– 
• Thực tế: các máy chủ có cấu hình cao, khả 
năng hoạt động ổn định
71.5. Máy khách: Client
• Máy khai thác dịch vụ của máy chủ
• Với mỗi dịch vụ, thường có các phần mềm
chuyên biệt để khai thác
• Một máy tính có thể vừa là client vừa là
server
• Một máy tính có thể khai thác dịch vụ của
chính nó.
81.6. Cổng dịch vụ: Service Port
• Là số [0; 65535] xác định dịch vụ của máy
chủ
• 2 dịch vụ khác nhau chiếm các cổng khác
nhau
• Mỗi dịch vụ thường chiếm các cổng xác
định, ví dụ:
– Web (http): 80
– Web (https): 443
– FTP: 21
91.7. Địa chỉ tài nguyên: URL (Uniform Resource Locator)
• Tài nguyên: file trên mạng
• URL: Xác định vị trí và cách khai thác file
• protocol://host_name[:port_num][/path][/file_name]
• giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file
• Ví dụ: 
• Trong trường hợp mặc định, nhiều thành phần có thể bỏ 
qua:
– Giao thức, cổng: Được trình duyệt đặt mặc định
– Tên file: được máy chủ đặt mặc định
protocol server name port directory/file name on the server
Các giao tác chuẩn trên Web
Browser
DNS server
URL
Origin
server
1. DNS 
lookup
2. TCP connection
3. HTTP request
4. HTTP response
optional parallel connections
11
1.8. Trang web, web site, World Wide 
Web
• Trang web (Web page):
– Là một trang nội dung
– Có thể được viết bằng nhiều ngôn ngữ khác
nhau nhưng kết quả trả về client là HTML
• Web site: Tập hợp các trang web có nội 
dung thống nhất phục vụ cho một mục 
đích nào đó
• World Wide Web (WWW): Tập hợp các 
web site trên mạng internet.
12
1.9. Web server, Web browser
• Web server:
– Máy phục vụ web
– Một số phần mềm web server chuyên 
dụng:
• Apache: mã nguồn mở
• Internet Information Services (IIS): Sản 
phẩm của Microsoft
• Web Browser:
– Phần mềm chạy trên client để khai 
thác dịch vụ web
– Một số Web browser:
• Nescape
• Mozilla Firefox
• Internet Explorer (IE): tích hợp sẵn 
trong windows
• ... 
Seven major browser components:
Browsers:
13
14
2. Phân loại trang web
• Web tĩnh:
– Dễ phát triển
– Tương tác yếu
– Sử dụng HTML
– Người làm web tĩnh thường dùng các công cụ trực quan 
để tạo ra trang web
• Web động:
– Khó phát triển hơn
– Tương tác mạnh
– Sử dụng nhiều ngôn ngữ khác nhau
– Thường phải viết nhiều mã lệnh
Dựa vào công nghệ 
phát triển, có 2 loại
15
3. Các bước chính trong phát triển 
website
• Đặc tả yêu cầu
• Phân tích
• Thiết kế (dữ liệu, giao diện, xử lý)
• Lập trình
• Kiểm thử
16
3. Các bước chính trong phát triển 
website
• Đặc tả yêu cầu
– Web để làm gì?
– Ai dùng?
– Trình độ người dùng?
– Nội dung, hình ảnh?
• Phân tích
– Mối liên quan giữa các 
nội dung?
– Thứ tự các nội dung?
17
3. Các bước chính trong phát triển 
website
• Thiết kế
– Sơ đồ cấu trúc website
– Giao diện
– Tĩnh hay động
– CSDL
– Nội dung từng trang
– Liên kết giữa các trang
• Lập trình
– Cấu trúc thư mục
– Các module dùng chung
– 
18
3. Các bước chính trong phát triển 
website
• Kiểm thử
– Kiểm tra trên nhiều 
trình duyệt
– Kiểm tra trên nhiều 
loại mạng
– Kiểm tra tốc độ
– Kiểm tra các liên kết
– Thử các lỗi bảo mật
– 
19
4. Công bố website trên 
Internet
Để công bố Website trên Internet, ta cần các 
điều kiện cần thiết sau:
4.1. Xây dựng website
4.2. Đăng ký tên miền
4.3. Hosting
4.4. Duy trì website
4.5. Phát triển website
4.6. Quảng bá website
20
4.1. Xây dựng website
• Loại thông tin
– Web tĩnh, động
– Portal
• Giá thành
– Web tĩnh: Tính theo các kiểu trang
• Trang đơn giản: 70 – 150.000đ/trang
• Trang hiệu ứng hình ảnh tốt: 150 – 400.000đ/trang
– Web động: Tính theo các mục, các khối chức năng
• Thiết kế CSDL
• Các chức năng phía user: đưa tin, phân loại, tìm kiếm
• Các chức năng phía Admin: Đăng nhập, xem/thêm/sửa/xóa tin 
bài, báo cáo, thống kê
• Từ 5 triệu trở lên. (Thông dụng: 10-30 triệu)
21
4.1. Xây dựng website
• Có nên đăng ký tên miền, thiết kế và duy trì
website hay không?
• Nếu có, đăng ký tên miền với tên thế nào, thể
loại gì, theo hệ thống của Việt Nam hay theo các
hệ thống tên miền bên ngoài
• Có tự Host website của mình không?
• Để phục vụ website, có các phương án dành
cho?
– Nhân sự
– Kinh phí
– Cơ chế tổ chức, hoạt động
– Quy trình làm việc
22
4.2. Đăng ký tên miền
• Xác định tên
– Tên tiếng Việt
– Tên giao dịch tiếng Anh
– Tên viết tắt
• Xác định nơi đăng ký
• Đăng ký tên miền càng sớm càng tốt
– Thủ tục đơn giản, nhanh chóng
– Kinh phí rẻ
• Việt Nam: 450.000 – 480.000/năm
• Nước ngoài: 8 – 12USD
4.3. Hosting
• Xác định môi trường vận hành của website
– Máy chủ Windows
• Support ASP, PHP, SQL Server, MySQL
• Đắt hơn máy chủ Linux
– Máy chủ Linux
• Support PHP, JSP, MySQL
• Rẻ hơn máy chủ Windows
• Xác định dung lượng thực tế của website, khả 
năng sẽ mở rộng
• Xác định băng thông, các dịch vụ đảm bảo an 
toàn, an ninh, backup dữ liệu
23
24
4.4. Duy trì website
• Cập nhật thông tin
– Web tĩnh:
• Upload Webpage thông qua Web Browser
• Upload Webpage thông qua FTP program 
(Cute FTP, FTP Voyager, )
– Web động
• Form cập nhật CSDL nếu Site có kết nối 
CSDL
25
4.5. Phát triển website
• Các chiến lược marketing
– Sử dụng thư điện tử
– Đầu tư quảng cáo 1 đợt trên các 
phương tiện truyền thông (Báo, đài, 
Tivi)
– Quảng cáo trên mạng xã hội (!!!luật!!!)
• Liên kết với các site cùng loại
– Trao đổi banner
– Giới thiệu lẫn nhau.
26
4.6. Quảng bá website
• Quảng bá Website
– Đăng ký Website vào các máy tìm kiếm trong nước và 
thế giới (search engine)
• Vietnam Searchengine: Panvietnam, vinaseek
• Global Searchengine: google, altavista, hotboot
– Nâng cao vị trí của Website trong hệ thống xếp hạng 
Website thế giới.
• Google rank (the important of website: 1-10)
• Alexa rank: Traffic ranking of website.
• Nâng tầm phát triển Website
– Tự động hoá dần các chức năng của Website.
– Biến Website thành một môi trường kinh doanh thực sự 
hiệu quả 24/24 trên Internet.
7 luật trong thiết kế Website 
27
1. Sử dụng công nghệ thiết kế Web vừa đủ
• Công nghệ Web đưa ra nhiều lựa chọn và nhiều công cụ
để xây dựng Web sites;
• Việc thêm công nghệ vào có thể cản trở sự thực thi của
website hay gây khó chịu cho người sử dụng
– Ví dụ: Sử dụng Flash để trình diễn logo của 1 site.
– Khi sử dụng công nghệ mới thì có làm tăng giá trị của
Web site hay chỉ thêm cái mới lạ vào website?
7 luật trong thiết kế Website 
28
2. Tuân thủ các qui ước thiết kế
• Qui ước thiết kế có thể là màu sắc, hình dạng, kiểu mẫu,
bố cục, phông chữ và chúng đều bao hàm những ẩn ý
muốn truyền tải.
• Ví dụ:
– Hình tam giác màu vàng trong tín hiệu giao thông mang ý
nghĩa “cảnh báo”.
– Các trình duyệt web đầu tiên đã dùng màu xanh nhạt và
định dạng gạch chân cho các text hyperlink.
– Nếu bạn muốn tới trang chủ của một website, trước tiên
bạn sẽ nhìn về phía trái trên cùng của màn hình để nhìn
thấy Logo hoặc nút bấm có từ “ trang chủ”.
7 luật trong thiết kế Website 
29
3. Người sử dụng là người đánh giá cuối cùng
– Website cần tạo sự thoải mãi, đáp ứng yêu cầu của
người sử dụng nên khi thiết kế cần theo ý kiến của
người sử dụng
4. Crossover experience is something a designer 
needs to always strive for
– Người thiết kế Web chuyên nghiệp cần phải hiểu
người sử dụng cần gì và biết cách áp dụng các kỹ
thuật, kiến thức mỹ thuật vào việc thiết kế
7 luật trong thiết kế Website 
30
5. Sự khiêm tốn là phương pháp tốt nhất
– Người thiết kế không ngừng học hỏi, nghiên cứu, tìm
hiểu các công nghệ thiết kế Web hiện đại sao cho
đáp ứng yêu cầu của xã hội và tăng kinh nghiệm
cũng như hiểu biết cho chính bản thân mình.
6. Không thể làm hài lòng với tất cả mọi người
– Mặc dù không thể làm hài lòng tất cả mọi người trên
thế giới nhưng người thiết kế cần phải biết Website
do mình thiết kế dành cho đối tượng nào và cố gắng
làm thỏa mãn các đối tượng đó.
7 luật trong thiết kế Website 
31
7. Tuân theo các chuẩn và các kỹ thuật thiết kế Web
– Các chuẩn và các kỹ thuật liên tục thay đổi đòi hỏi
người thiết kế luôn luôn cập nhập thường áp dụng
những kỹ thuật và chuẩn mới nhất mà ảnh hưởng tới
tương lai.
– Ví dụ: CSS3, HTML5, 
Phần 2: HTML
33
Nội dung phần 2
1. Ví dụ đầu tiên về trang web
2. Giới thiệu chung về HTML
3. Đặc điểm của HTML
4. Trình bày văn bản trong HTML
5. Multimedia
6. Form trên trang web
7. Frame
34
1. Ví dụ đầu tiên – Cấu trúc
Lập trình web
Chào mừng bạn đến với HTML!
1. VD đầu tiên về trang web – Cấu trúc
• Thử nghiệm:
– Mở trình duyệt web (IE)
– Vào File/Open, chọn file Welcome.HTML vừa
ghi
– Nhấn OK → Có kết quả như hình bên
• Thay đổi:
– Quay lại Notepad, sửa lại nội dung trang web
rồi ghi lại
– Chuyển sang IE, nhấn nút Refresh (F5) →
thấy kết quả mới 35
36
2. Giới thiệu chung về HTML
• HTML = HyperText Markup Language 
ngôn ngữ đánh dấu siêu văn bản, là ngôn 
ngữ dùng để viết trang web. 
• Do Tim Berner Lee phát minh và được 
W3C (World Wide Web Consortium) đưa 
thành chuẩn năm 1994.
Lịch sử phát triển
37
HTML5 is about 
semantics and devices 
mobile web information 
architecture/semantics
HTML5 W3C Final Recommendation : Oct 28th, 2014
Foundations of HTML:
38
Open Web Technology Stack:
39
3. Đặc điểm của HTML
• HTML sử dụng các thẻ (tags) để định
dạng dữ liệu
• HTML không phân biệt chữ hoa, chữ
thường
• Các trình duyệt thường không báo lỗi cú
pháp HTML.
• Khi viết sai cú pháp thì trình duyệt sẽ hiển
thị không đúng với dự định.
• Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý
nghĩa khác nhau.
3. Đặc điểm của HTML
• Một thẻ có thể có các thuộc tính nhằm bổ sung
tác dụng cho thẻ
• Mỗi thuộc tính có tên thuộc tính (tên_TT)
• Viết thẻ có thuộc tính:
• Chú ý:
– Có thể thay đổi thứ tự, số lượng các thuộc tính mà
không gây ra lỗi cú pháp
– Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là
khác nhau. Chỉ giống nhau ở các thẻ, thuộc tính cơ
bản.
– Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường
()
41
3. Đặc điểm của HTML
• Có 2 loại thẻ: thẻ đóng và thẻ mở
• Cách viết thẻ:
– Thẻ mở: 
Ví dụ: , , 
– Thẻ đóng tương ứng: 
Ví dụ: , 
Chú ý:
• Luôn có thẻ mở nhưng có thể không có thẻ đóng
tương ứng. Ví dụ: không có thẻ đóng
• Các thẻ có thể lồng nhau, nhưng không đan xen
lẫn nhau.
Ví dụ
43
3. Đặc điểm của HTML
• Tập tin HTML có phần mở rộng (đuôi) là
.HTM hoặc .HTML là tập tin thuần văn bản
(plain text)
• Có thể soạn thảo file HTML bằng bất cứ
trình soạn thảo “văn bản thuần” nào
(Notepad, EditPlus, Notepad++, )
• Trình hỗ trợ soạn thảo HTML (trực quan,
code):
– Adobe Dreamweaver CS6
– 
44
45
4. TRÌNH BÀY TÀI LIỆU TRONG HTML
4.1 Thẻ thể hiện cấu trúc tài liệu
4.2 Thẻ META
4.3 Thẻ định dạng khối
4.4 Thẻ định dạng danh sách
4.5 Thẻ định dạng ký tự
4.6 Liên kết
4.7 Bảng
4.8 Một số lưu ý
46
4.1. Thẻ thể hiện cấu trúc tài liệu
47
4.1. Thẻ thể hiện cấu trúc tài liệu
• : Định nghĩa phạm vi của
văn bản HTML
• : Định nghĩa các mô tả về
trang HTML. Thông tin trong tag này không
được hiển thị trên trang web
• : Mô tả tiêu đề trang web
• : Xác định vùng thân của
trang web, nơi chứa các thông tin
HTML5 Doctype
• Dùng để chỉ rõ tài liệu theo chuẩn gì 
(HTML5/XHTML5)
48
49
4.2. Thẻ META
• Đặt ở giữa 
• Thường dùng quy định thuộc tính cho
trang web
• Có tác dụng lớn với Search Engine
• Có 2 cách viết thẻ :
<META HTTP-EQUIV="name" 
CONTENT="content">
50
4.2. Thẻ META
• 
• 
• 
• <META NAME="author" CONTENT="author's 
name">
• <META HTTP-EQUIV="refresh" 
CONTENT="delay;url=new url">
Một số thẻ Meta thông dụng
51
4.2. Thẻ META
Tự động chuyển hướng trang web
• Tự động chuyển hướng trang web sang
trang web khác (url) sau một khoảng thời
gian t (tính theo giây)
• Cú pháp
52
4.3. Thẻ định dạng khối tài liệu
DIV
Thẻ được sử dụng để
đóng khối văn bản.
P
Thẻ được sử dụng để định
dạng một đoạn văn bản.
H1,H2,H3,,H6
Xác định 1 trong 6 cấp của tựa
đề (heading)
BR Ngắt dòng
PRE
Văn bản nằm trong thẻ này sẽ
được trình bày như nguyên thủy
của nó khi gõ vào.
53
HTML – thẻ 
• Chức năng
–Xác định khối văn bản
–Chia tài liệu thành những khối riêng biệt.
–Hỗ trợ canh lề, định dạng style
• Thuộc tính
align, class, dir, id, lang, 
nowrap, onClick, onDblClick, 
onKeyDown, onKeyPress, onKeyUp, 
onMouseDown, onMouseMove, 
onMouseOut, onMouseOver, onMouseUp, 
title
54
4.4. Thẻ định dạng danh sách
• OL
– Danh sách được sắp xếp thứ
tự
– Hỗ trợ thuộc tính start cho
phép chọn giá trị khởi đầu
• UL
– Danh sách không sắp xếp
– Thẻ có thuộc tính TYPE
có các giá trị
• disc (chấm tròn đậm);
• circle (vòng tròn);
• square (hình vuông)
Mục 1
Mục 2
Mục 3
Mục 1
Mục 2
Mục 3
55
4.4. Thẻ định dạng danh sách
56
4.4. Thẻ định dạng danh sách
57
4.5. Thẻ định dạng ký tự
In chữ đậm
 In chữ nghiêng
 In chữ gạch chân
 In chữ bị gạch ngang.
 ... 
In chữ lớn hơn kích thước font hiện thời lên
một. Các thẻ lồng nhau tạo ra hiệu ứng
chữ tăng dần. Đối với mỗi trình duyệt có giới
hạn về kích thước đối với mỗi font chữ, vượt
quá giới hạn này, các thẻ sẽ không có ý
nghĩa.
 ... 
In chữ nhỏ hơn bình thường bằng cách giảm
kích thước font hiện thời đi một. Tương tự như
thẻ BIG
 ... Định dạng chỉ số trên (SuperScript)
 ... Định dạng chỉ số dưới (SubScript)
58
4.6. Liên kết
• Thuộc tính:
– href=“đích liên kết”: Nếu trong cùng web nên sử dụng
đường dẫn tương đối.
– target=“tên cửa sổ đích”, tên cửa sổ phân biệt chữ
hoa/thường
• name: tải trang web vào frame có tên name
• _blank: tải trang web vào cửa sổ mới
• _parent: tải trang web vào cửa sổ cha của nó
• _self: tải trang web vào chính cửa sổ hiện hành
• _top: tải trang web vào cửa số cao nhất
59
4.6. Liên kết
• Lưu ý:
– Liên kết với địa chỉ e-mail thì đặt
href=“mailto:địa_chỉ_e-mail”
– Thực hiện lệnh JavaScript khi kích chuột vào thì đặt
href=“javascript:lệnh”
• Liên kết đến trang khác
– Thuộc tính href=“url của trang khác”
– Khi click vào liên kết sẽ chuyển đến trang khác
• Liên kết trong cùng một trang
– Thuộc tính href=“#id của thẻ trong trang”
– Khi click và liên kết sẽ chuyến đến thẻ có “id” được
ghi trong thuộc tính id của thẻ.
60
4.6. Liên kết
• Địa chỉ URL phân làm 2 loại :
– Địa chỉ tuyệt đối: Là vị trí tuyệt đối so với Mạng 
Internet
– Địa chỉ tương đối: Là vị trí tương đối so với trang 
web hiện hành đang chứ liên kết.
61
4.7 Bảng - Cấu trúc của 1 bảng
Bảng gồm nhiều dòng, một dòng
gồm nhiều ô, và chỉ có ô mới
chứa dữ liệu của bảng.
62
4.7 Bảng
STT Tên thẻ Mô tả - Ví dụ
1  Khởi tạo 1 bảng
2  Tạo 1 dòng (thẻ phải nằm trong 
thẻ )
3  Tạo 1 ô tiêu đề (thẻ phải nằm 
trong thẻ )
4  Tạo 1 ô dữ liệu (thẻ phải nằm 
trong thẻ )
• Tổng số thẻ và bằng số ô của bảng. Dòng có bao
nhiêu ô thì có bấy nhiêu thẻ và/hoặc nằm trong
cặp thẻ  tương ứng.
• Để có được một ô trống trong bảng (ô không có dữ liệu) thì
cần đặt nội dung ô là:  
63
4.7. Bảng
• Thuộc tính của thẻ :
– border=“số”: kích thước đường viền. Đặt bằng 0 (mặc 
định): không có đường viền.
– width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. 
Có thể đặt theo 2 cách:
• n: (n là số) Quy định độ rộng, cao là n pixels
• n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng 
chứa bảng.
– cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp
– cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô
– bgcolor=“màu”: màu nền của bảng
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền 
cho bảng, sử dụng đường dẫn tương đối nếu có thể.
4.7. Bảng
• Thuộc tính của thẻ ,:
– bgcolor=“màu”: màu nền của ô
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô. 
Nên sử dụng đường dẫn tương đối nếu có thể.
– width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể đặt 
theo 2 cách:
• n: (n là số) Quy định độ rộng, cao là n pixels
• n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.
– align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang: 
left, right, center, justify.
– valign=“căn_lề_đứng”: cách căn chỉnh dữ liệu trong ô theo chiều 
đứng: top, middle, bottom.
– colspan=“số”: số cột mà ô này chiếm (mặc định là 1)
– rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1)
– nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng
65
4.8. Một số lưu ý
• Lưu ý:
– Mọi khoảng trống, dấu xuống dòng trong HTML được thể
hiện trên trang web là 1 khoảng trống duy nhất
– Để gõ một số ký tự đặc biệt ta phải sử dụng mã:
• Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự
trống):  
• Dấu nhỏ hơn (): < >
• Dấu ngoặc kép (“): "
• Ký hiệu : ©
• 
• Ghi chú trong HTML:
66
5. Multimedia
5.1 Hình ảnh
5.2 Âm thanh
67
5.1. Hình ảnh
• : Không có thẻ đóng
• Các thuộc tính của tag :
– align: left, right, center
– src : Đường dẫn đến file hình ảnh
– alt : Chú thích cho hình ảnh
– position: Top, Bottom, Middle
– border : Độ dày nét viền quanh ảnh (default=0)
– width: độ rộng
– height: độ cao
• Đặt ảnh nền cho trang web
– 
68
5.2. Âm thanh
• : Không có tag đóng
• Thuộc tính của tag 
– src : Đường dẫn đến file âm thanh
– loop : Số lần lặp (bằng -1 : Lặp vô hạn)
• thường đặt trong tag của 
trang web.
• Ví dụ: 
Lưu ý
• Một số thẻ về Multimedia trình bày riêng 
trong phần HTML5 Video/Audio (buổi kế 
tiếp)
69
70
6. FORM TRONG TRANG WEB
1. Giới thiệu về Form
2. Các thành phần của Form
3. Một số thuộc tính của form và thẻ input
4. Gởi dữ liệu bằng phương thức 
POST/GET
71
6.1. Giới thiệu về Form
• Được dùng để nhận dữ liệu từ phía người dùng
• Giúp gởi yêu cầu của người dùng đến trang xử
lý trong ứng dụng web
• Tag dùng để chứa các thành phần khác
của form
• Những thành phần nhập liệu được gọi là Form
Field
– text field
– password field
– multiple-line text field
– 
72
6.1. Giới thiệu về Form
• Là container chứa các thành phần nhập liệu khác.
• Các thuộc tính của 
– NAME: tên FORM
– ACTION: chỉ định trang web nhận xử lý dữ liệu từ
FORM này khi có sự kiện click của button SUBMIT.
– METHOD: Xác định phương thức chuyển dữ liệu
(POST,GET)
73
6.1. Giới thiệu về Form
<form Name=“Dangnhap”
Action=“./admin/xlDangnhap.php”
Method=“POST” >
Dangnhap.html
74
6.2. Các thành phần của Form – Nội 
dung
• Text field
• Password field
• Multiple-line text field
• Hidden Text field
• Pull-down menu (Combo box, List box)
• Check box
• Radio button
• File Form Control
• Submit Button, Reset Button, Generalized Button
• Label
• Field Set
• Tiện ích form
75
6.2. Thành phần của Form – Text field
• Dùng để nhập một dòng văn bản
• Ví dụ: 
<input type=“text” name=“txtName” 
value=“This is one line text with 301” 
size=“20” maxlength=“30”>
76
6.2. Thành phần của Form – Password field
• Dùng để nhập mật khẩu
• Ví dụ: 
<input type=“password” name=“txtPass” 
value=“123456asdfgh” 
size=“20” maxlength=“30”>
77
6.2. Thành phần của Form – Multiline text
• Dùng để nhập văn bản nhiều dòng
• Ví dụ: 
This is a text on multiline.
78
6.2. Thành phần của Form – Hidden text
• Dùng để truyền 1 giá trị của thuộc tính value 
khi form được submit
• Không hiển thị ra trên màn hình
79
6.2. Thành phần của Form – Pull-down
Xem code 
ở slide tiếp
80
6.2. Thành phần của Form – Combo box
combo box:
Window Media 10
Jet Audio 9
Windows XP
Windows XP SP2
Windows Vista
Office 2007
List box: 
81
6.2. Thành phần của Form – Checkbox
Check box group: 
Anh văn: 
Hoa: 
Nhật: 
82
6.2. Thành phần của Form – Radio
Radio Button Group : 
Nam: 
Nu: 
Lưu ý: trường hợp hai radio 
không cùng tên.
83
6.2. Thành phần của Form – File
• Sử dụng để upload file lên server
<form name=“frmMain” method=“POST” enctype=“multipart/form-data”
action=“xuly.php”>
84
6.2. Thành phần của Form – Submit
• Nút phát lệnh và gởi dữ liệu của form đến trang
xử lý.
• Mỗi form chỉ có một nút submit và nút này được
viền đậm
<form name=“frmMain” method=“POST” enctype=“multipart/form-data”
action=“xuly.php”>
85
6.2. Thành phần của Form – Reset
• Dùng để trả lại giá trị mặc định cho các 
control khác trong form
<form name=“frmMain” method=“POST” enctype=“multipart/form-data”
action=“xuly.php”>
86
6.2. Thành phần của Form – Button
87
6.2. Thành phần của Form – LABEL
88
6.2. Thành phần của Form – Fieldset
 Subject 
 English
Mathematics
Graph Theory
Ghi chú
• Phần HTML5 Form sẽ được trình bày ở 
buổi tiếp theo.
89
90
6.3. Các tiện ích của form và input
• Accesskey=char
– Tạo phím nóng cho form fields.
– Áp dụng cho tất cả form fields.
– Cách nhấn Alt + char
– Tránh các phím tắt của browser.
• Title = string
– Tạo tooltip cho form fields.
– Áp dụng cho tất cả form fields.
• Autocomplete = ON/OFF
– Gợi ý tự động khi nhập liệu.
– Áp dụng cho tất cả tag form, input.
91
6.4. Gởi dữ liệu bằng phương thức 
POST/GET
• Các đối số của Form được ghi kèm theo 
vào đường dẫn URL của thuộc tính Action 
trong tag 
• Khối lượng dữ liệu đối số được truyền đi 
của Form bị giới hạn bởi chiều dài tối đa 
của một URL trên Address bar. 
• Chiều dài tối đa của một URL là 2048 
bytes
GET
6.4. Gởi dữ liệu bằng phương thức 
POST/GET
92
Anh văn: 
Hoa: 
Nhật: 
GET
93
6.4. Gởi dữ liệu bằng phương thức 
POST/GET
• Các đối số của Form được truyền “ngầm”
bên dưới
• Khối lượng dữ liệu đối số được truyền đi
của Form không phụ thuộc vào URL 
Không bị giới hạn
• Chỉ sử dụng được phương thức truyền
POST khi Action chỉ định đến trang web
thuộc dạng xử lý trên Server
POST
94
6.4. Gởi dữ liệu bằng POST/GET
POST
95
7. Khung (iframe)
• Cho phép chia một trang web làm nhiều
phần, mỗi phần chứa nội dung của 1 trang
web khác
• Trình duyệt có thể không hỗ trợ khung
96
7. Khung (Frame)
• Tạo trang web chứa các khung và chèn:
• Một số thuộc tính của 
– height and width
<iframe src="demo_iframe.htm" width="200" 
height="200">
– Remove the Border: style="border:none"
– Use iframe as a Target for a Link
ABC 
97
7. Khung (Frame)
• Tạo 1 khung có nội dung là 1 trang web nào 
đó: 
– Thuộc tính:
•src=“Địa chỉ của trang chứa nội dung”
•name=“tên khung”
•noresize: Không được thay đổi kích thước
• Thẻ mặc định
– Thuộc tính
•target=“Cửa sổ mặc định”
•href=“Địa chỉ gốc mặc định”
98
Tham khảo
Bài giảng này tham khảo:
• Slide bài giảng “Thiết kế và lập trình Web”, 
ĐH KHTN TpHCM, version 2007.
• Slide bài giảng “Thiết kế Web”, Đào Việt 
Cường, Khoa CNTT, ĐH Sư Phạm Hà 
Nội.
99
Câu hỏi và thảo luận
?