Bài GiảngThiết Kế Website 2021 chuong01

TRƯỜNG ĐẠI HỌC BẠC LIÊU
KHOA CÔNG NGHỆ THÔNG TIN

BÀI GIẢNG

THIẾT KẾ WEBSITE
Chương 1: INTERNET VÀ WORLD WIDE WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

1


1.1. Giới thiệu Internet
 Mạng Internet là mạng thông tin tồn cầu
 Thơng qua mạng Internet chúng ta có thể
sử dụng các dịch vụ:
 Trang tin toàn cầu (WWW - World
Wide Web)
 Thư điện tử (Email)
 Truyền tập tin (FTP – File Transfer
Protocol)
 Các dịch vụ khác.
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Mạng toàn cầu (Internet)

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

Slide

1.2. Mơ hình Internet

Mơ hình Internet (Hình 1)
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hoàng Hôn

3


1.2. Mơ hình Internet

Mơ hình Internet (Hình 2)
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hoàng Hôn

Slide


1.3. Dịch vụ trang tin toàn cầu (World Wide web)
 World Wide web (WWW) được xây dựng dựa
trên siêu văn bản (Hypertext).
 Hypertext là kỹ thuật trình bày thơng tin trên
một trang
 Trong đó có nhiều liên kết đến một trang

thơng tin mới có nội dung đầy đủ hơn.
 Trên một trang thơng tin có thể có nhiều kiểu
dữ liệu khác nhau như văn bản, ảnh, âm
thanh, phim...
 Xây dựng được các trang tin bằng ngơn ngữ
có tên là HTML.

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Dịch vụ WWW

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

5


1.3. Dịch vụ trang tin toàn cầu (World Wide web)
 World Wide web (WWW) được xây dựng dựa
trên siêu văn bản (Hypertext).
 Hypertext là kỹ thuật trình bày thơng tin trên
một trang
 Trong đó có nhiều liên kết đến một trang thơng
tin mới có nội dung đầy đủ hơn.
 Trên một trang thơng tin có thể có nhiều kiểu
dữ liệu khác nhau như văn bản, ảnh, âm
thanh, phim...
 Xây dựng được các trang tin bằng ngơn ngữ có
tên là HTML.
Chương 1: INTERNET VÀ WORLD WIDE

WEB

Dịch vụ WWW

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

6


1.4. Một số khái niệm khác
1.4.1. URL (Uniform Resource Locator)
 URL được dùng để xác định chính xác địa chỉ
của các website.
 URL bao gồm tên của giao thức (thường là
http hoặc ftp), tiếp đến là dấu hai chấm (:) và
hai gạch chéo (//), sau đó là tên miền muốn kết
nối đến.
 Ví dụ: Website của Trường Đại học Bạc Liêu
có URL là “ />
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Website Đại học Bạc Liêu

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hoàng Hôn

7


1.4. Một số khái niệm khác

1.4.1. Siêu liên kết (Hyperlink)
Hyperlink là một phần văn bản (hay hình ảnh) của
trang Web, mà khi bạn nhấp chuột vào đó nó sẽ tự
động thực hiện một trong các thao tác sau đây:
Đưa bạn đến phần khác của trang;
Đưa bạn đến một trang web khác trong cùng
một website;
Đưa bạn đến một trang web khác trong
website khác;
Cho phép bạn tải về (download) một tệp tin;
Chạy một ứng dụng, trình diễn một đoạn
video hoặc âm thanh.
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Hyperlink

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

8


1.4. Một số khái niệm khác
1.4.2. Trình duyệt web (Web Browser)
 Web Browser là một chương trình xem nội dung
trang web
 Web Browser như: Internet Explorer, Mozilla
Firefox, Google Chrome, Cốc Cốc, Netscape
Navigator Communicator, Opera, ....

Web Browser

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

9


1.4. Một số khái niệm khác
1.4.3. Máy chủ Web (Web Server)
 Web Server là máy chủ trong đó nó lưu trữ thơng tin dưới dạng Web
 Trang web có thể chứa âm thanh, hình ảnh, video, văn bản, ...
 Các Web Server được kết nối với nhau thông qua mạng Internet, mỗi Web Server
có một địa chỉ hay URL duy nhất trên Internet.

Mơ hình Client - Server
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

10


1.4. Một số khái niệm khác
1.4.3. Máy chủ Web (Web Server)

Mơ hình Client - Server

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

11


1.4. Một số khái niệm khác
1.4.3. Máy chủ Web (Web Server)

Web Server
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

12


1.4. Một số khái niệm khác
1.4.4. Trang web (Web Page)
 Trang thơng tin truyền tải trên Internet đó là
trang web.
 Những trang web chỉ khác với các dạng văn
bản bình thường ở chỗ trong nó có những mối
kết nối (Links) tới những trang web khác hoặc
các ứng dụng trên Internet.
 Mỗi trang web được lưu trữ dưới dạng một tập
văn bản có phần mở rộng là .htm hay .html

(Hyper Text Markup Language) - tập tin siêu
văn bản.
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Các trang web

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

13


1.4. Một số khái niệm khác
1.4.5. Điểm truy cập web (Web Site)
 Web site là một tập các trang web có liên quan
đến một tổ chức hay cá nhân nào đó
 Nó được lưu trữ trên một web server cụ thể.
 Các trang web nằm trong web site được bố trí
theo một cấu trúc nhất định.
 Trong một web site thường có một trang web
chủ (home page) đó là trang cửa ngõ để người
dùng truy cập vào các trang web khác.

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Website báo Tuổi trẻ

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

14


1.5. Qui trình thiết kế một website
 Bước 1: Thu thập thông tin.
 Bước 2: Lập kế hoạch
 Bước 3: Thiết kế
 Bước 4: Phát triển
 Bước 5: Kiểm tra và chỉnh sửa
 Bước 6: Bảo trì

Qui trình thiết kế website
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

15


1.6. Những lời khuyên
 Hình ảnh xuất hiện trong các trang web sẽ
làm cho nó thêm sinh động, cuốn hút người
dùng.
 Tuy nhiên, chúng ta không nên lạm dụng
việc sử dụng quá nhiều hình ảnh trên trang
web.
 Mỗi hình ảnh phải đảm bảo có ý nghĩa liên
quan đến nội dung muốn trình bày.
Hình trên trang web

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

16


1.6. Những lời khun
 Nội dung thơng tin bố trí trên
trang web nên được sắp xếp
gọn gàng, có hệ thống, cân
đối

Nội dung trên trang web lộn xộn

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

17


1.6. Những lời khuyên
 Nên sử dụng font chữ, cỡ chữ,
kiểu chữ và màu chữ theo một
chuẩn thống nhất

Sử dụng font chữ, màu chữ thống nhất

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

18


1.6. Những lời khuyên
 Tránh lạm dụng quá nhiều
màu sắc.

Trang web nhiều màu sắc
Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

19


1.6. Những lời khuyên
 Cần tạo các hiệu ứng khác
biệt đối với những nội dung
muốn gây sự chú ý cho người
dùng

Hiệu ứng gây chú ý

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

20


KẾT THÚC CHƯƠNG 1

Chương 1: INTERNET VÀ WORLD WIDE
WEB

Giảng viên: Huỳnh Huy Tuấn – Nguyễn Hồng Hơn

21