Bài giảng Thiết kế Web - Chương I: Giới thiệu

ế web Khoa CNTT 39
1Thiết kế web Khoa CNTT 1
Thiết kế web
Thời gian: 
- Lý thuyết: 30 tiết
- Thực hành: 30 tiết
- Tự học: 15 tiết
Khoa Công nghệ thông tin
GV: TS. Vũ ðức Lung
lungvd@uit.edu.vn
Thiết kế web Khoa CNTT 2
ðiểm ñánh giá

 ðiểm chuyên cần: 10%

 ðiểm làm ñồ án môn học: 30%
– Sinh viên chia thành nhóm 3-5 người
– ðăng ký với lớp trưởng, Danh sách gồm: stt 
nhóm, Họ & tên SV, MSSV, e-mail của trưởng 
nhóm (buổi sau lớp trưởng nộp lại)

 ðiểm thi cuối kỳ: 60%
Thiết kế web Khoa CNTT 3
Mục tiêu môn học 

 Nắm vững các khái niệm căn bản của quá trình 
thiết cài ñặt và triển khai một ứng dụng web

 Thiết kế trang Web và cài ñặt một ứng dụng 
Web hoàn chỉnh bằng HTML,CSS,JavaScript và 
PHP

 Triển khai và khai thác ứng dụng web trên
Internet
Thiết kế web Khoa CNTT 4
Nội dung môn học
Chương 1 : Giới thiệu.
Chương 2 : Các bước thiết kế web
Chương 3: Ngôn ngữ HTML
Chương 4: CSS
Chương 5: Web Form
Chương 6: Thết kế trang web ñộng với 
JavaScript
Chương 7: Thiết kế web với PHP
Thiết kế web Khoa CNTT 5
Các kiến thức tiên quyết

 Lập trình cơ bản C, C++ hoặc Java

 Các kiến thức cơ bản về CSDL

 Thiết kế, ứng dụng MS Access, MS SQL 
Server hoặc MySQL
Thiết kế web Khoa CNTT 6
Tài liệu tham khảo
1. Jennifer Niederst Robbins. Web Design in a Nutshell (A 
Desktop Quick Reference), Third Edition, 2006.
2. Jeffrey Veen. The Art & Science of Web Design, 2001.
3. Lê Minh Hoàng. Tự học thiết kế web, NXB “Lao ðộng”, 
tập I&II, 2007.

 Các trang Web tham khảo:
– www.w3schools.com
– www.php.net
– www.w3.org
– www.javascript.internet.com
2Thiết kế web Khoa CNTT 7
Chương I: Giới thiệu

 Lịch sử:
– Mạng Internet xuất phát từ mạng ARPANET của Mỹ 
(1969) - mạng giữa các trường ðH
– 1989 - Tim Berners Lee phát minh ra giao thức World 
Wide Web (tại phòng TN vật lý phân tử-Geneva), sau 
ñó Hypertext Markup Language - HTML
– 1990 – Tim viết trình duyệt (Web Browser) và Web 
server ñầu tiên (info.cern.ch)
– Việt nam có Internet vào tháng 11/1997
– ðến nay, có khoảng hơn 30 tỉ trang web thuộc hơn 
100 triệu website
Thiết kế web Khoa CNTT 8
Các thành phần của web

Web là gì?
– Là các dịch vụ phân tán cung cấp thông tin 
multimedia dựa trên hypertext

Các thành phần của web
– Web Page
– Web site
– Uniform Resource Locator (URL)
– Web Server, Web Browser
Thiết kế web Khoa CNTT 9
Webpage - Website

Web page:
– Là một trang web
– Có thể viết bằng các ngôn ngữ khác nhau 
nhưng kết quả trả về client là trang HTML

Web site: 
Là 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): 
Là hệ thống các Web Site trên toàn thế giới ñược truy 
cập thông qua mạng Internet.
Thiết kế web Khoa CNTT 10
URL-Uniform Resource Locator

URL-Uniform Resource Locator: (Chuỗi 
ñịnh vị tài nguyên)

Dạng:
giaothức://ñịa_chỉ_máy_chủ:cổng/ñường_dẫn_ñến_tài_nguyên

Ví dụ: 
Thiết kế web Khoa CNTT 11
Webserver – Web Browser

Web server:
– Là máy chủ chuyên cung cấp dịch vụ web
– Giao thức sử dụng ñể khai thác dịch vụ 
web là http hoặc https

Web browser:
– Là chương trình chạy trên client ñể khai 
thác DV web của server
– Một số web browser thông dụng: Internet 
Explorer (IE), Nescape (NS), Mozilla 
Firefox,...
Thiết kế web Khoa CNTT 12
ðịnh hướng 

 Khi nào thì bắt ñầu? Bắt ñầu từ 
ñâu?

 Cần học những gì ñể thiết kế web?
- Thiết kế ñồ họa, Thiết kế giao diện
- Thiết kế thông tin
- Tạo các trang web với HTML
- Lập trình và quá trình tạo mã kịch bản
- Truyền thông ña phương tiện
3Thiết kế web Khoa CNTT 13
Phần mềm trợ giúp
Thiết kế ñồ họa
- Adobe Photoshop
- Adobe ImageReady
- Macromedia Fireworks
- Adobe Illustrator
- JASC Paint Shop Pro
Multimedia
- Macromedia Flash
- Adobe LiveMotion
- Apple Quicktime
- Apple Final Cut Pro
- Adobe Premier
PHP
PHP ZendStudio
ASP.NET
Visual Studio.NET 
Web Matrix
Thiết kế web Khoa CNTT 14
Ngôn ngữ lập trình web
Cần học những gì?
- HTML
- JavaScript
- DHTML
- XML
- PHP
- Perl
- ASP (ASP.NET)
- JSP
- ????
Thiết kế web Khoa CNTT 15
Hoạt ñộng của trang web

 Internet và Web

 ðịa chỉ trang web - URL
Server name
203.162.39.106
Protocol Directory File namePort
Thiết kế web Khoa CNTT 16
Cách hiển thị trang web
a) Request/ Response
Thiết kế web Khoa CNTT 17
Cách hiển thị trang web
b) Client-side model
Thiết kế web Khoa CNTT 18
Cách hiển thị trang web
c) Server-side model
4Thiết kế web Khoa CNTT 19
Các triết lý xây dựng web
- Mục ñích của Website cần thiết kế
- Xác ñịnh ñối tượng ñộc giả của Website
- Thiết lập các chủ ñề 
- Thiết kế các khối thông tin chủ yếu sẽ 
cung cấp
Thiết kế web Khoa CNTT 20
Các triết lý xây dựng web (tt)
ðộc giả 
(Web surfer)
- ðộc giả mới và ðộc giả không 
thường xuyên
- ðộc giả chuyên nghiệp và ñộc 
giả thường xuyên
- Sự hiểu biết
- Trình ñộ
- Sở thích
- Kinh nghiệm
- ðộc giả trong nước
- ðộc giả nước ngoài
Thiết kế web Khoa CNTT 21
Các triết lý xây dựng web (tt)
Các bước trong tổ chức thông tin
- Chia thành các ñơn vị logic, cắt ñoạn thông tin
- Thiết lập hệ thống cấp bậc theo tầm quan trọng và tính 
tổng quát
- Tạo cấu trúc quan hệ giữa chúng
- Phân tích sự thành công về chức năng và thẩm mỹ 
của hệ thống
Thiết kế web Khoa CNTT 22
Bố trí các trang web
Hệ thống phân cấp
Thiết kế web Khoa CNTT 23
Bố trí các trang web (tt)
Các mối quan hệ-liên kết
Không nên xây dựng một website như sau
Thiết kế web Khoa CNTT 24
Bố trí các trang web (tt)
Website quá nông, chỉ một mức liên 
kết => không có liên kết, trật tự
5Thiết kế web Khoa CNTT 25
Bố trí các trang web (tt)
Website quá sâu => mở nhiều thư mục mới tới 
ñích
Thiết kế web Khoa CNTT 26
Bố trí các trang web (tt)
Một cấu trúc hợp lý
Thiết kế web Khoa CNTT 27
Bố trí các trang web (tt)
4 kiểu cấu trúc: Nối tiếp, ô lưới, phân cấp, mạng nhện
Thiết kế web Khoa CNTT 28
Bố trí các trang web (tt)
- Trang chủ 
- Menu ñồ họa hay text? Ai sẽ là ñộc giả 
của trang web ? (ñồ họa – www.kodak.com , text –
www.w3schools.com )
- Menu và các submenu
- Thời gian quản lý
- Các tiêu chuẩn thiết kế
Thiết kế web Khoa CNTT 29
Các khái niệm cơ bản

 Mạng máy tính 

 Giao thức

 ðịa chỉ IP

 Tên miền 

 Client/Server

 Cổng dịch vụ

 URL

 Một số khái 
niệm khác
Thiết kế web Khoa CNTT 30
Mạng máy tính – Computer Network

 Là hệ thống các máy tính ñược kết nối với nhau 
nhằm trao ñổi dữ liệu.

 Phân loại mạng theo phạm vi:
– Local Area Network (LAN)
– Wide Area Network (WAN)
– Metropolitan Area Network (MAN)
– Global Area Network (GAN)
– Internet

Mạng Internet: Là mạng của các mạng máy tính, 
có quy mô trên toàn thế giới
6Thiết kế web Khoa CNTT 31
Giao thức – Protocol

Giao thức – Protocol: Là tập hợp các qui 
tắc ñược thống nhất giữa hai máy tính 
nhằm thực hiện trao ñổi dữ liệu ñược 
chính xác.

Một số giao thức ví dụ:
– Giao thức TCP/IP
– Giao thức HTTP
– Giao thức FTP
–
Thiết kế web Khoa CNTT 32
ðịa chỉ IP – IP address

 Nhiệm vụ: Phân biệt các máy khác nhau trên mạng

 Khuôn dạng: Có ñộ dài 32 bít (4 số 1 byte) xxx.yyy.zzz.ttt (0 < 
xxx, yyy, zzz, ttt <255). Ví dụ: 203.162.18.59

 ðịa chỉ IP ñược chia thành 4 lớp A, B, C, D, mỗi ñịa chỉ gồm hai 
phần: Network address và host address

 ðể biết IP: ping www.intel.com
Thiết kế web Khoa CNTT 33
Tên miền - Domain Name

 IP dùng ñể liên lạc giữa các máy tính trong mạng 
nhưng không thân thiện với con người.

 Tên miền là tên của các máy phục vụ trên mạng sao 
cho thân thiện với con người

 Người ta dùng máy chủ DNS ñể chuyển ñổi qua lại 
giữa ñịa chỉ IP và tên miền.

 Tên miền ñược chia thành nhiều cấp, phân cách bởi 
dấu chấm "."
VD: www.lhu.edu.vn
– Là ñịa chỉ máy chủ thuộc trường ðH Lạc Hồng, có ñịa chỉ IP 
là 210.245.110.213, là tên miền cấp 2
Thiết kế web Khoa CNTT 34
Client/Server

 Máy chủ - server: Chứa dữ liệu và tài nguyên, dịch vụ 
ñể cho các máy tính khác có thể khai thác và truy cập 
(máy phục vụ).

 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
– File server
– Application server
– Mail server
– Web server
– 

 Máy khách - client: Là máy tính dùng ñể kết nối và 
khai thác các tài nguyên trên máy chủ

 Việc kết nối của client với server và việc khai thác dịch 
vụ của server tạo nên mô hình Client/Server

 Một máy tính vừa có thể là server vừa là client
Thiết kế web Khoa CNTT 35
Cổng dịch vụ - Service Port

Một máy server có thể cung cấp nhiều dịch 
vụ -> Cần có cơ chế ñể client khai thác ñúng 
dịch vụ cần thiết

Mỗi dịch vụ trên máy tính nằm ở những vị trí 
khác nhau (cổng dịch vụ), máy khách truy 
cập và khai thác dịch vụ thông qua các cổng 
này.

Hai dịch vụ khác nhau phải ñược chạy trên 
những cổng khác nhau

Mỗi một dịch vụ thường chiếm những cổng 
mặc ñịnh (ftp: 21; http: 80)
Thiết kế web Khoa CNTT 36
Các dịch vụ cơ bản

 ðăng tải các thông tin 

Thư ñiện tử – Email (Electronic mail):
– Là dịch vụ trao ñổi các thông ñiểm qua mạng viễn 
thông 
– Sử dụng giao thức SMTP/POP3 ñể gởi/nhận 
email
– ðịa chỉ email có dạng : user_name@domainame
– ðược quản lý bởi Mail Server
– Phân biệt Webmail, Mail Client

Truyền, tải tập tin – FTP 

 Trò chuyện – Chat,...
7Thiết kế web Khoa CNTT 37
Web tĩnh và web ñộng

Trang web tĩnh:
– Chứa nội dung cố ñịnh HTML
– Không cho phép NSD tương tác, cập nhật
– Một trang web chứa các hình ảnh chuyển 
ñộng chưa hẳn là trang web ñộng

Trang web ñộng
– Kết hợp HTML và mã lệnh
– Mã lệnh ñược thực thi trên server, gửi kết quả 
là HTML về NSD
– Có khả năng tương tác với NSD
Thiết kế web Khoa CNTT 38
So sánh 

Trang Web tĩnh: 
- Có nội dung không thay ñổi trên Browser, chỉ thay ñổi 
khi nhà thiết kế thay ñổi nội dung trình bày
- Thường có tên mở rộng là .html, .htm bao gồm các thẻ 
HTML

Trang Web ñộng:
- Có thể thay ñổi nội dung trình bày trên Browser khi 
người sử dụng triệu gọi chúng
- Thường ñược xây dựng từ ASP, JSP, PHP, 
ASP.NET
Thiết kế web Khoa CNTT 39