Bài giảng phân tích ứng dụng web

Phát triển ứng dụng Web
Tài liệu lưu hành nội bộ
- Cơ bản về phát triển ứng dụng Web
- Triển khai hệ thống Web
- Layout HTML & CSS
- Ngôn ngữ lập trình PHP & MySQL
- Phân tích thiết kế cơ sở
- Phân tích thiết kế HĐT
- Mô hình MVC
2014
Ths. Nguyễn Quang Hiệp
BM Công nghệ lập trinh và ứng dụng
8/1/2014
MỤC LỤC
2
CHƯƠNG 1: TỔNG QUAN VỀ PHÁT TRIỂN ỨNG DỤNG WEB
1.1 Các khái niệm cơ bản
1.1.1 Mạng máy tính
Mạng máy tính hay hệ thống mạng được thiết lập khi có từ 2 máy vi tính trở
lên kết nối với nhau để chia sẻ tài nguyên: máy in, máy fax, tệp tin, dữ liệu
Các thành phần của mạng có thể bao gồm:
Các hệ thống đầu cuối kết nối với nhau tạo thành mạng, có thể là các máy tính
hoặc các thiết bị khác. Nói chung hiện nay ngày càng nhiều các loại thiết bị có khả
năng kết nối vào mạng máy tính như điện thoại di động, PDA, tivi,
Môi trường truyền mà các thao tác truyền thông được thực hiện qua đó. Môi
trường truyền có thể là các loại dây dẫn (dây cáp), sóng điện từ (đối với các mạng
không dây).
Giao thức truyền thông là các quy tắc quy định cách trao đổi dữ liệu giữa các
thực thể.
1.1.2 Giao thức
Giao thức (protocol) là tập luật quy định cách thức truyền thông giữa các hệ

thống máy tính. Các giao thức cở bản hay sử dụng trong phát triển công nghệ web
bao gồm:
- HTTP (HyperText Transfer Protocol - Giao thức truyền tải siêu văn bản) là một
trong những giao thức chuẩn về mạng Internet, được dùng để liên hệ thông tin
giữa Máy cung cấp dịch vụ (Web server) và Máy sử dụng dịch vụ (Web client) là
giao thức Client/Server dùng cho World Wide Web-WWW.
- HTTPS: HTTPS là viết tắt của "Hypertext Transfer Protocol Secure", Nó là một
sự kết hợp giữa giao thức HTTP và giao thức bảo mật SSL hay TLS cho phép trao
đổi thông tin một cách bảo mật trên Internet. Giao thức HTTPS thường được
dùng trong các giao dịch nhạy cảm cần tính bảo mật cao.
- FTP thường được dùng để trao đổi tập tin qua mạng lưới truyền thông dùng giao
thức TCP/IP. Máy chủ FTP, dùng chạy phần mềm cung cấp dịch vụ FTP, gọi là
trình chủ, lắng nghe yêu cầu về dịch vụ của các máy tính khác trên mạng lưới.
Máy khách chạy phần mềm FTP dành cho người sử dụng dịch vụ, gọi là trình
khách. Một khi hai máy đã liên kết với nhau, máy khách có thể xử lý một số thao
tác về tập tin, như tải tập tin lên máy chủ, tải tập tin từ máy chủ xuống máy của
mình, đổi tên của tập tin, hoặc xóa tập tin ở máy chủ v.v.
- SMTP (Giao thức truyền tải thư tín đơn giản) là một chuẩn truyền tải thư điện tử
qua mạng Internet. Trước khi một thông điệp được gửi, người ta có thể định vị
một hoặc nhiều địa chỉ nhận cho thông điệp - những địa chỉ này thường được
kiểm tra về sự tồn tại trung thực của chúng. SMTP định nghĩa tất cả những gì cần
3
làm với email. Nó xác định cấu trúc của các địa chỉ tới, yêu cầu tên miền và bất
cứ điều gì liên quan đến email. SMTP cũng xác định các yêu cầu cho Post Office
Protocol (POP) và truy cập Internet Message Protocol (IMAP) máy chủ, do đó
email được gửi đúng cách.
1.1.3 Địa chỉ IP
Địa chỉ IP (IP là viết tắt của từ tiếng Anh: Internet Protocol - giao thức Internet)
là một địa chỉ đơn nhất mà những thiết bị điện tử hiện nay đang sử dụng để nhận diện
và liên lạc với nhau trên mạng máy tính bằng cách sử dụng giao thức Internet.

Địa chỉ IP đang được sử dụng hiện tại là (IPv4) có 32 bit chia thành 4 Octet
(mỗi Octet có 8 bit, tương đương 1 byte) cách đếm đều từ trái qua phải bít 1 cho đến
bít 32, các Octet tách biệt nhau bằng dấu chấm (.) và biểu hiện ở dạng thập phân đầy
đủ là 12 chữ số.
Ví dụ một địa chỉ Internet: 146.123.110.224
Địa chỉ IP tương lai được sử dụng là IPv6 có 128 bit dài gấp 4 lần của IPv4.
Địa chỉ Ipv6 được cấu thành bởi 8 nhóm, mỗi nhóm gồm 4 kí tự hexa.
Ví dụ một địa chỉ Internet: 2001:0db8:85a3:0042:0000:8a2e:0370:7334

1.1.4 Tên miền
Mục đích chính của tên miền là để cung cấp một hình thức đại diện, hay nói
cách khác, dùng những tên dễ nhận biết, thay cho những tài nguyên Internet mà đa số
được đánh địa chỉ bằng số. Cách nhìn trừu tượng này cho phép bất kỳ tài nguyên nào
(ở đây là website) đều có thể được di chuyển đến một địa chỉ vật lý khác trong cấu
trúc liên kết địa chỉ mạng, có thể là toàn cầu hoặc chỉ cục bộ trong một mạng intranet.
Việc dịch từ tên miền sang địa chỉ IP (và ngược lại) do hệ thống DNS trên toàn cầu
thực hiện.
Tên miền được tạo thành từ các nhãn không rỗng phân cách nhau bằng dấu
chấm (.); những nhãn này giới hạn ở các chữ cái ASCII từ a đến z (không phân biệt
hoa thường), chữ số từ 0 đến 9, và dấu gạch ngang (-), kèm theo những giới hạn về
chiều dài tên và vị trí dấu gạch ngang. Đó là dấu gạch ngang không được xuất hiện ở
đầu hoặc cuối của nhãn, và chiều dài của nhãn nên trong khoảng từ 1 đến 63 và tổng
chiều dài của một tên miền không được vượt quá 255. (RFC 1034)
4
1.1.5 Máy chủ
Figure Mô hình Client server
Server còn được định nghĩa như là một máy tính nhiều người sử dụng
(multiuser computer). Vì một server phải quản lý nhiều yêu cầu từ các client trên
mạng cho nên nó hoạt động sẽ tốt hơn nếu hệ điều hành của nó là đa nhiệm với các
tính năng hoạt động độc lập song song với nhau như hệ điều hành UNIX,

WINDOWS Server cung cấp và điều khiển các tiến trình truy cập vào tài nguyên
của hệ thống. Các ứng dụng chạy trên server phải được tách rời nhau để một lỗi của
ứng dụng này không làm hỏng ứng dụng khác. Tính đa nhiệm đảm bảo một tiến trình
không sử dụng toàn bộ tài nguyên hệ thống. Vai trò của server. Như chúng ta đã bàn ở
trên, server như là một nhà cung cấp dịch vụ cho các clients yêu cầu tới khi cần, các
dịch vụ như cơ sở dữ liệu, in ấn, truyền file, hệ thống Các ứng dụng server cung cấp
các dịch vụ mang tính chức năng để hỗ trợ cho các hoạt động trên các máy clients có
hiệu quả hơn. Để đảm bảo tính an toàn trên mạng cho nên server này còn có vai trò
như là một nhà quản lý toàn bộ quyền truy cập dữ liệu của các máy clients, nói cách
khác đó là vai trò quản trị mạng. Có rất nhiều cách thức hiện nay nhằm quản trị có
hiệu quả, một trong những cách đang được sử dụng đó là dùng tên Login và mật khẩu
1.1.6 Máy khách
Client Trong mô hình client/server, ta còn định nghĩa một máy client là một
máy trạm mà chỉ được sử dụng bởi 1 người dùng. Máy client có thể sử dụng các hệ
điều hành bình thường như Win9x, DOS, OS/2, WIN7, WIN8… Máy khách trong mô
hình phát triển ứng dụng web được trang bị những phần mềm trình duyệt đề có thể
duyệt và tương tác với hệ thống web trên máy chủ (server) Ví dụ: Firefox, chrome,
5
Internet explorer, opera… Việc tồn tại quá nhiều trình duyệt cũng gây khó khăn cho
các lập trình viên trong việc xây dựng web để có tính tương thích cao. Ngoài ra tại
máy khách cũng có thể được cài đặt những phần mềm đặc biết để kết nối tới server và
thực hiện nhưng thao tác về file, dữ liệu hoặc email. Ví dụ như các phần mềm FTP,
email…
1.1.7 Trang web, website, World Wide Web
World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là một không
gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính
nối với mạng Internet.
Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản
(hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng một
chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản. Chương

trình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sử dụng yêu
cầu (thông tin trong ô địa chỉ được gọi là tên miền (domain name)), rồi sau đó chương
trình sẽ tự động gửi thông tin đến máy chủ (web server) và hiển thị trên màn hình máy
tính của người xem. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên
mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ
trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được
gọi là duyệt Web.
Website còn gọi là trang web, trang mạng, là một tập hợp trang web, thường
chỉ nằm trong một tên miền hoặc tên miền phụ trên World Wide Web của Internet.
Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP
hoạc HTTPS. Website có thể được xây dựng từ các tệp tin tĩnh HTML (website tĩnh)
hoặc vận hành, chạy trên máy chủ có sự tương tác với người sử dụng (website động).
1.2 Phân loại trang web
1.2.1 Web tĩnh
Là hệ thống web được xây dựng dựa trên thuần túy văn bản hoặc HTML. Nội
dung của site sẽ không thây đổi được trừ khi người quản trị website can thiệp trực tiếp
vào mã nguồn của web.
1.2.2 Web động
Là hệ thống web được xây dựng dựa trên các công nghệ giúp cho người dùng
có thể tương tác với web site. Nội dung của site có thể bị thay đổi bời người dùng mà
không cần phải can thiệp trực tiếp vào mã nguồn của web. Ta thường sử dùng một số
công nghệ để lập trình sự tương tác này như ASP, PHP, JSP Và thường một hệ quản
trị cở sở dữ liệu sẽ được sử dụng để lưu trữ dữ liệu trên web động.
6
1.2.3 Web thế hệ mới
Web 1.0 là hình thức xuất bản nội dung lên Internet 1 chiều, thời kỳ cực
thịnh của chúng là những năm 1995 - 2004.
Web 2.0 là thế hệ thứ 2 của web, nó cung cấp nhiều ứng dụng hơn cho người sử
dụng, các thông tin và dữ liệu được cập nhật hàng ngày. Trong đó người sử dụng có
thể tham gia đóng góp, chia sẻ thông tin , làm phong phú cho trang web một cách dễ

dàng.
Để phân biệt có những dấu hiệu sau:
Mức độ Web 1.0 Web 2.0
Mức độ tập trung Tập trung một nơi Phân tán nhiều nơi
Mức độ tương tác Dành cho cá nhân Dành cho cá nhân , tập thể, xã hội
Mức độ nội dung Cung cấp nội dung
Cung cấp các dịch vụ và hệ giao tiếp
lập trình ứng dụng (APIs)
Mức độ sử dụng Đọc được Đọc được, viết được
Mức độ liên kết Truyền phát giữa các hệ thống Đồng bộ giữa các hệ thống
Mức độ hệ thống
Hệ thống bao gồm cấu trúc, nội dung tạo ra
đã có tính toán trước
Tự sản sinh, tự đề xuất
Mức độ dữ liệu Tĩnh Động
Mức độ truy xuất Cứng nhắc, không linh hoạt Quan hệ mềm dẻo, lỏng
7
1.3 Các bước chính trong quá trình phát triển website
Xây dựng danh sách yêu cầu người dùng, quá trình này đảm bảo mọi yêu cầu
của người sử dụng đều đước tính đến và lưu lại.
Phân tích và thiết kế hệ thống, Hệ thống sẽ được xây dựng dựa trên một số
công nghệ, ngôn ngữ thiết kế hiện tại như UML. Hệ thống sẽ được mô hình hóa và lưu
trữ dười dạng tài liệu và các sơ đồ thiết kế.
Triển khai thực hiện xây dựng hệ thống, hế thống sẽ được xây dựng dựa trên
các công nghệ đã được lựa chọn ví dự như PHP&MySQL, và được phát triển theo các
bản thiết kế đã được xây dựng từ bước trước.
Kiểm thử và bảo trì hệ thống, hệ thống sau khi được xây dựng sẽ được kiểm
thử với danh sách thử đã được đặt ra khi thiết kế hệ thống. Hệ thống sẽ được bảo trì
liên tục theo yêu cầu hoặc định kỳ.
1.4 Công bố website trên Internet

Quá trình công bố web site trên mạng internet bao gồm các bước sau :
- Chuẩn bị hệ thống web sẵn sàng cái đặt, như đã được xây dựng ở bước trên.
- Chuẩn bị về hosting và domain. Quá trình lựa chọn domain cần tìm phải đơn
giản, dể hiểu và gần gũi với nội dung website. Hệ thống hosting cần phải hộ trợ
các đặc tính về công nghệ cho phù hợp với hệ thống web đã xây dựng(vd: nếu
bạn xây dựng web trên nền java bạn cần server hỗ trợ JSP ).
- Config server để phù hợp chạy web. Ta cần config hoặc tạo một số yêu cầu cần
thiết của server cho phù hợp với hệ thống web. Ví dụ tạo trước CSDL rỗng.
- Thực hiện cài đặt hệ thống web. Quá trình này đôi khi đòi hỏi cần cài đặt cả hệ
thống file và hệ thống CSDL.
- Công bố site trên internet. Site sau khi hoạt động sẽ được quảng cáo trên mạng
internet cũng như trong đời sống để thu hút người sử dụng. Ta cũng cần một số
những thủ thuất để tối ưu hóa hệ thống để công cụ tìm kiếm tìm tới site tốt hơn
(SEO).
8
CHƯƠNG 2: KHÁO SÁT VÀ THIẾT KẾ WEBSITE
2.1 Khảo sát hệ thống
2.1.1 Tìm tác nhân hệ thống
Đây là bước nhà phát triển cần tìm ra tất cả các tác nhân của hệ thống và thực
hiện phân nhóm theo đối tượng sử dụng. Từng nhóm sẽ hình thành tác nhân, đây
chính là đối tượng chính sẽ sử dụng hệ thống web do vậy quá trình tìm hiểu và thu
thập thông tin cần cực kỳ chi tiết và rõ ràng. Sau khi hoàn thành bước này ta cần trả
lời được câu hỏi: Ai là người sử dụng hệ thống?
Ví dụ: Một hệ thống bán hàng trực tuyến có thể có: khách hàng, quản trị viên,
quản lý kho, nhà cung cấp.
2.1.2 Thu thập thông tin về các trường hợp sử dụng của từng tác nhân
Với từng tác nhân đã tìm được ở bước trên ta cần xem họ sẽ có những yêu cầu gì
về chức năng đối với hệ thống, các chức năng này cần sát với yêu cầu người sử dụng.
Sau khi hoàn thành quá trình thu thập này ta sẽ trả lời được câu hỏi: Các tác nhân sử
dụng hệ thống vào những việc gì ?

Ví dụ:
Khách hàng có thể: xem danh mục hàng, xem chi tiết từng mặt hàng, xem thông
tin cửa hàng, đặt hàng.
Quản trị viên có thể: thực hiện quản lý thông tin cửa hàng, thêm sửa xóa các mặt
hàng…
2.1.3 Thu thập thông tin về chi tiết các chức năng
Sau khi đã liệt kê được hết các chức năng (trường hợp sử dụng) của hệ thống,
người thu thập thông tin dự án tại bước này cần làm rõ từng chức năng một đã tìm
được. Nên thu thập và tổ chức việc mô tả chức năng này theo từng bước nhỏ. Sau khi
hoàn thành quá trình thu thập này ta sẽ trả lời được câu hỏi: Các tác nhân sử dụng
từng chức năng của hệ thống đó như thế nào?
Ví dụ:
1. Khách hàng sau khi vào trang chủ
2. Click vào trang phản hồi
3. Điền thông tin và form phản hồi
4. Click gửi thông tin
9
2.2 Thiết kế web (Design Website)
2.3 Site Structure
Như ta đã biết một hệ thống website được xây dựng dựa trên nhiều trang (web
page). Những trang web này thể hiện những chủ đề chính của hệ thống và cần được tổ
chức lại để tạo nên một kiến trúc chung cho toàn bộ website. Một kiến trúc hợp lý sẽ
giúp cho người sử dụng dễ dàng và nhanh chóng truy cập tới các thông tin mà họ
muốn tìm.
Để có thể xây dựng nên một kiên trúc hợp lý ta cần thực hiện các bước sau:
Figure Topic, chức năng và mối quan hệ giữa chúng.
Xây dựng các chủ đề và chức năng chính cho toàn bộ hệ thống website. Sau đó
xác định mối quan hệ giữa chúng.
Figure Tổ chức site structure.
Thực hiện tối ưu và sắp xếp các chủ đề và chức năng theo dạng cây. Chú ý

nhưng điểm sau: Không nên xây dựng kiến trúc quá dàn trải mà nên phân nhóm, nếu
không site sẽ trở nên quá rộng đồi với người sử dụng (hình 3 bên trái). Không để liên
kết của các chủ đề và chức năng quá sâu, nếu không người sử dụng sẽ càm thấy chán
nản khi tìm thông tin của mình vì nó mất quá nhiều thời gian và thao tác (hình 3 bên
phải).
10
Việc tổ chức hớp lý sẽ tạo được xương sống quá toàn bộ site.( site map)
11
2.4 Wireframe
Wireframe là một kịch bản đồ họa: như một loạt các hình minh họa, hình ảnh
hiển thị theo thứ tự để giúp hình dung ra một vần đề nhanh chóng. Khi xây dựng một
trang web ta thường hình dung ra các khối thông tin (block), các khối này khi sắp xếp
với nhau sẽ hình thành nên một trang.
Thường Wireframe được bắt đầu bằng trang chủ, đây là trang quan trọng nhất
của toàn bộ hệ thống website. Khi thiết kế site, ta chỉ có khoảng 3 tới 5 giây để thu hút
khách do vậy trang web phải thật đơn giản, nếu nó phức tạp và rối thì sẽ gây khó khăn
cho ngưởi sử dụng.
Ví dụ về Wireframe trang chủ
12
Wireframe trang danh mục sản phẩm
13
Trang chi tiết sản phẩm:
14
CHƯƠNG 3: HTML
3.1 Giới thiệu chung về HTML
HTML là ngôn ngữ đánh dấu siêu văn bản được sử dụng để xây dựng web.
Trong các thành phần của web thì đây thành phần cơ bản nhất. Cho dù trang web có
sử dụng PHP, ASP hay JAVA để lập trình, nhưng nếu muốn hiển thị nội dung lên
trình duyệt ta đều cần hiểu về cách trình bày văn bản HTML. Đây chính là định dạng
mà trình duyệt web có thể đọc được và hiển thị nội dung theo nó.

Thậm chí ta có sử dụng những CMS (Content Management System) như
Joomla, Drupal, Wordpress… thì đầu ra cuối cùng vẫn sẽ là HTML. Cho nên hiểu và
biết cách vận hành HTML là rất cần thiết cho bất kì nhà phát triển hệ thống web nào.
• HTML là chữ viết tắt của Hyper Text Markup Language hay tiếng Việt gọi
là Ngôn ngữ đánh dấu siêu văn bản.
• HTML không phải là ngôn ngữ lập trình, mà là một ngôn ngữ đánh dấu
( hiển thị) bao gồm tập các thẻ hiển thị (HTML Tag).
• HTML dùng các HTML tags để miêu tả trình bày một trang web.
• Một file HTML chứa những thẻ HTML
• Những thẻ HTML sẽ hướng dẫn trình duyệt web trình bày thành phần của
một trang web
• Một file HTML phải có phần mở rộng là .html hoặc .htm
• Một file HTML có thể được tạo ra bởi trình soạn thảo văn bản đơn giản
như Notepad
3.2 Trình bày tài liệu trong HTML
2.2.1 Thẻ thể hiện cấu trúc thẻ HTML
• HTML tags là những từ khóa được bao bởi dấu nhỏ hơn (<)và dấu lớn hơn (>) :
<từ khóa>. Ví dụ: <html>, <a>, <b>….
• HTML tags thông thường phải đi cùng một cặp gồm thẻ đóng và thẻ mở như:
<html> </html>
• Các tag đầu tiên trong một cặp là thẻ bắt đầu, các thẻ thứ hai là thẻ kết thúc
• Thẻ Bắt đầu và thẻ kết thúc còn được gọi là thẻ mở và thẻ đóng
• Thẻ đóng kết thúc bằng dấu / (</tenthe>)
• Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở
• Một số thẻ chỉ có thẻ mở mà không có thẻ đóng (như các thẻ <img>, <br />,
<hr />)
Ví dụ đầu tiên về html
<html>
<head>
15

<title> This is my first page </title>
</head>
<body>
<h1>My first heading</h1>
<p> My <b>first</b> paragraph </p>
</body>
</html>
Cách thực hiện để chạy một file HTML, lưu file lại với tên là
"myfirstpage.html" vào desktop. Sau đó đóng trình soạn thảo Notepad hoặc Simple
Text lại và tìm đến file myfirstpage.html ở desktop rồi nhấp đúp vào trình duyệt sẽ
hiển thị nội dung của trang.
3.2.1 Thẻ meta
Thẻ meta là thẻ thông tin cho một văn bản HTML. Thẻ này sẽ không hiển thị
đối với người sử dụng, nó sẽ được ẩn và thể hiện một nội dung nào đó cho phép các
ứng dụng có thể đọc và hiểu thông qua từng nội dung của thẻ. Thẻ Meta phải nằm
trong thẻ HEAD của văn bản HTML.
Một số ví dụ về thẻ Meta:
Thẻ miêu tả trang
<meta name="description" content="Free Web tutorials on HTML and
CSS" />
Thẻ định nghĩa kiểu của văn bản HTML
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />
Thẻ định nghĩa từ khóa
<meta name="keywords" content="HTML, CSS, XML, XHTML,
JavaScript" />
3.2.2 Thẻ định dạng khối
Thẻ định dạng khối trong HTML, được sử dụng để định nghĩa một đoạn văn
bản, một tiêu đề hay một định dạng có sẵn.
<P></P>

<H1></H1>,<H2></H2>, ,<H6></H6>
16
<PRE></PRE>
Thẻ P: Được dùng để định dạng đánh dấu một đoạn văn bản.
Thẻ H1, H2…: Được dùng để đánh dấu đề mục trong văn bản.
Thẻ Br: định dạng xuống dòng văn bản.
Thẻ Pre: Được dùng để giới hạn đoạn văn bản được định dạng sẵn.Văn bản đặt trong
thẻ này sẽ được thể hiện giống như khi chúng được đánh vào.
3.2.3 Thẻ định dạng danh sách
Danh sách trong HTML được xây dựng dựa trên một thẻ định nghĩa loại danh
sách và thẻ định dạng phần tử của danh sách đó:
- Danh sách không theo thứ tự (Unorder list- UL)
- Danh sách theo thứ tự (Ordered List – OL).
- Một hoặc nhiều thể phần tử trong danh sách (List Item – LI).
Cấu trúc:
<! Thẻ này mang tính chất liệt kê, không thứ tự. >
<UL>
<LI> Mục thứ nhất</LI>
<LI> Mục thứ hai</LI>
</UL>
<! Thẻ mày mang tính đánh số các danh mục >
<OL TYPE=“1/a/A/i/I”>
<LI> Mục thứ nhất</LI>
<LI> Mục thứ hai</LI>
</OL>
3.2.4 Các kí tự đặc biệt
Ðôi khi trong trang Web của bạn có các ký tự đặc biệt, chẳng hạn như ký tự
không phải là tiếng Anh, một dấu nhấn HTML quy định việc hiển thị các ký tự đó
như sau
&XXXX;

Trong đó XXXX là tên mã cho các ký tự đặc biệt đó. Bạn có thể xem Danh
sách các ký tự đặc biệt này để biết thêm chi tiết. Trong trang Web của bạn nhiều lúc
phải hiển thị các ký tự như dấu lớn hơn (>) hoặc dấu nhỏ hơn (<), dấu và (&) , mà
17
các ký tự này trùng với ký hiệu của một tag. Ðể hiển thị các ký tự này, HTML cung
cấp cho ta các ký hiệu thay thế như sau:
&lt; thay cho <
&gt; thay cho >
&amp; thay cho &
3.2.5 Liên kết
• Một trang website bao gồm rất nhiều trang web (web page), các web
page liên kết lại với nhau để tạo lên website.
• Liên kết trong HTML được định nghĩa bằng cặp thẻ <a>
Ví dụ:
<a href="" target="_blank">Google pages</a>
Các thuộc tính (Attribute) của thẻ <a>
1. href: quy định địa chỉ (url) mà liên kết trỏ tới
2. target: (đích) thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu:
_self (trang hiện tại), _blank (cửa sổ mới), . .
3.2.6 Bảng
Bảng trong HTML được định nghĩa bởi thẻ <table>. Một bảng được chia thành
các hàng (row, định nghĩa bởi <tr>), và mỗi hàng được chia thành các cột (column,
định nghĩa bởi <td>). Ngoài ra bảng còn có các thẻ khả để định nghĩa các thành phần
như heading <th>, body <tbody>… giúp cho qua trình thể hiện bảng được rõ ràng
hơn.
Khi xây dựng bảng, hãy nhớ quy tắc sau: bắt đầu từ ô cao nhất bên trái, tiếp
theo xây dựng các ô của hàng đầu tiên, sau đó chuyển xuống hàng thứ hai, xây dựng
các phần tử của hàng thứ 2
> > > > > >
|

|
> > > > > >
Ðể tìm hiểu về các tag cơ bản của bảng, trước hết ta xét ví dụ sau.
<table border =”1”>
<tr>
<td> Hàng 1 cột 1 </td>
<td> Hàng 1 cột 2 </td>
<td> Hàng 1 cột 3 </td>
</tr>
<tr>
<td> Hàng 2 cột 1 </td>
18
<td> Hàng 2 cột 2 </td>
<td> Hàng 2 cột 3 </td>
</tr>
</table>
Trong tag <table> ta thấy thuộc tính border có giá trị là 1, điều này nghĩa là vẽ 1
đường viền quanh bảng với độ dày là 1 điểm.
Mỗi hàng được xác định bởi <tr> và </tr> viết tắt của table row.
Mỗi ô được định nghĩa bởi <td> và </td> viết tắt của table data.
Ðể căn chỉnh lề trong mỗi ô, bạn thêm các thuộc tính sau vào tag <td>.
Chỉnh lề theo chiều ngang
<td align = left> sắp xếp về bên trái
<td align = right> sắp xếp về bên phải
<td align = center> sắp xếp vào giữa
Các hàng và cột
Bảng mà bạn tạo ở trên mới chỉ là bảng đơn giản với ba hàng và ba cột đều
nhau.
Bạn hãy chú ý các bảng sau.

Bảng 1
Bảng 2
19
Bảng 3
Ðể tạo được những bảng như trên, chúng ta sử dụng các thuộc tính colspan và
rowspan trong tag <td> </td>
Thuộc tính colspan=x có tác dụng mở rộng cột của bảng, ví dụ trong bảng 1 để
mở rộng ô thứ 2 của hàng 1 ra rộng bằng hai cột bình thường ta đặt:
<td colspan = 2>Hàng 1 cột 2-3</td>
Thuộc tính rowspan có tác dụng mở rộng hàng của bảng, trong bảng 2 để mở
rộng ô thứ 2 của hàng 2 ra rộng bằng 2 hàng bình thường ta đặt:
<td rowspan = 2>Hàng 2-3 cột 2</td>
Ðiều khiển xuống hàng trong một ô.
Trong một ô, nếu muốn giữ dòng văn bản trên một dòng, tức là không cho nó
xuống hàng thì thêm thuộc tính nowrap vào trong tag <td> hoặc <th>.
Thêm đầu đề vào bảng (caption)
20
Ngay sau tag <table>, bạn gõ vào tag <catpion> tựa đề của bảng, và kết thúc
bằng tag đóng </caption>
<table border="1">
<caption>Tựa đề của bảng </caption >
<tr>
<td>Cột 1 - dòng 1</td>
<td>Cột 2 - dòng 1</td>
</tr>
<tr>
<td>Cột 1 - dòng 2</td>
<td>Cột 2 - dòng 2</td>
</tr>
</table>

Trong tag <caption> bạn thấy có thuộc tính valign="top", nghĩa là tạo tựa đề ở
trên đỉnh của bảng. Nếu valign="bottom" thì tựa để của bảng sẽ ở đáy bảng.
3.3 Multimedia
3.3.1 Hình ảnh
Hình ảnh khi sử dụng trong web được sử dụng thẻ <img> cách sử dụng như sau.
Code:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
Trong đó:
- src là đường dẫn tới file ảnh, có thể là đường dẫn tương đối và đường dẫn tuyệt đối.
- alt là text được sử dụng thay thế cho file ảnh khi ảnh không thể load.
- width và height là 2 thông số về chiều rộng và chiều cao của ảnh.
21
3.3.2 Âm thanh
Quá trình thể hiện âm thanh trong HTML khá phức tạp. Có khá nhiều cách thể
hiện, thông thường ta có nhưng cách sau, sử dụng player trung gian để chạy file audio
trên trình duyệt, sử dụng code của HTML5 để chạy file audio… Mỗi cách có ưu và
nhược điểm riêng.
Sử dụng plugin:
<embed height="50px" width="100px" src="song.mp3" />
<object height="50px" width="100px" data="song.mp3" />
Trong đó:
- src/data là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc
tương đối.
- height/width là chiều cao và chiều rộng của player.
Sử dụng HTML5
<audio controls="controls">
<source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
</audio>
Trong đó:

- src là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc tương
đối.
- type là loại media được chay tương ứng với src.
Sử dụng kết hợp cả hai, với cách sử dụng này player cua HTML5 sẽ được gọi nếu
không thể chạy được file đó, plugin của trình duyệt sẽ được gọi để chạy file.
<audio controls="controls" height="50px" width="100px">
<source src="song.mp3" type="audio/mpeg" />
<source src="song.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="song.mp3" />
</audio>
Trong đó:
- src là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc tương
đối.
- type là loại media được chạy tương ứng với src.
22
3.3.3 Video
Quá trình thể hiện video trong HTML cũng tương tự như audio, ta có thể sử
dụng plugin và sử dung code HTML5
Sử dụng plugin:
<embed height="50px" width="100px" src="intro.swf" />
<object height="50px" width="100px" data=" intro.swf " />
Trong đó:
- src/data là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc
tương đối.
- height/width là chiều cao và chiều rộng của player.
Sử dụng HTML5
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />

</video>
Trong đó:
- src là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc tương
đối.
- type là loại media được chay tương ứng với src.
- height/width là chiều cao và chiều rộng của player.
Sử dụng kết hợp cả hai, với cách sử dụng này player cua HTML5 sẽ được gọi nếu
không thể chạy được file đó, plugin của trình duyệt sẽ được gọi để chạy file.
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</embed>
</object>
</video>
Trong đó:
23
- src là đường dẫn của file, sử dụng đường dẫn tuyệt đối hoặc tương
đối.
- type là loại media được chạy tương ứng với src.
- height/width là chiều cao và chiều rộng của player.
3.3.4 Flash
Sử dụng thẻ object và plugin từ flash player để chạy.
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase=" />pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
</object>

Trong đó:
- Param là hệ thống các tham biến được xây dựng để truyền tham số
vào player.
- Param có name =”src” trỏ tới file flash.
- height/width là chiều cao và chiều rộng của player.
3.4 Khung-Frames
Sử dụng thẻ iframe để đưa nội dung của một site khác vào site hiện tại
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Trong đó:
- src là đường dẫn của trang muôn thêm vào.
3.5 Forms
3.5.1 Giới thiệu
HTML Form được sử dụng để truyền dữ liệu tới server. Form trong html có
thể chứa nhiều các thẻ input để dịnh nghĩa dữ liệu. ví dụ: textfield, checkboxes, radio-
button, submit button, select list, textarea, fieldset, legend, label….
- Thẻ định nghĩa form:
<form action=”diachifileguithongtintoi.php” method=”get”>
.
input elements
24
.
</form>
3.5.2 Các thành phần của form
- Thẻ định nghĩa dữ liệu text:
<form action=”diachifileguithongtintoi.php” method=”get”>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
- Thẻ định nghĩa dữ liệu là kiểu mật khẩu:
<form action=”diachifileguithongtintoi.php” method=”get”>

Password: <input type="password" name="pwd" />
</form>
- Thẻ định nghĩa dữ liệu là kiểu lựa chọn radio:
<form action=”diachifileguithongtintoi.php” method=”get”>
<input type="radio" name="sex" value="male" /> Nam<br />
<input type="radio" name="sex" value="female" /> Nữ
</form>
- Thẻ định nghĩa dữ liệu là kiểu lựa chọn checkbox:
<form action=”diachifileguithongtintoi.php” method=”get”>
<input type="checkbox" name="vehicle" value="Bike" /> Tôi có oto<br />
<input type="checkbox" name="vehicle" value="Car" /> Tôi có xe máy
</form>
- Thẻ định nghĩa nút bấm submit:
<form action=”diachifileguithongtintoi.php” method=”get”>
<input type="checkbox" name="vehicle" value="Bike" /> Tôi có oto<br />
<input type="checkbox" name="vehicle" value="Car" /> Tôi có xe máy
<input type="submit" value="Submit" />
</form>
3.5.3 Một số thuộc tính của form và Input
Một số thuộc tính của thẻ FORM:
Thuộc tính Giá trị Giải thích
accept MIME_type
Chỉ rõ những kiểu file có thể upload
thông qua form
25