1

TRƯỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI
KHOA VĂN HÓA, THÔNG TIN VÀ XÃ HỘI NỘI DUNG HỌC PHẦN
THIẾT KẾ TRANG WEB Giảng viên: Phạm Quang Quyền Hà Nội, 8-2014
2 BỘ NỘI VỤ
TRƢỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Thực
hành,
Bài tập
1
Chương 1: Khái quát chung về
website và mạng máy tính
05
05
0
2
Chương 2: Công nghệ web và
ngôn ngữ html
10
05
05
3
Chương 3: Thực hành thiết kế web
30
10
20

Cộng
45
20
25
9. Mục tiêu của học phần:
- Kiến thức: Cung cấp cho sinh viên những kiến thức cơ bản về công nghệ
web : webserver, web browser, ngôn ngữ HTML,… Cung cấp kiến thức về mô
hình website trong thư viện và công cụ để thiết kế website.
- Kỹ năng:

- 13. Thang điểm đánh giá: 10.
- 14. Nội dung chi tiết học phần:
CHƢƠNG 1
KHÁI QUÁT CHUNG VỀ WEBSITE VÀ MẠNG MÁY TÍNH
(5 tiết lý thuyết)
1.1. Lịch sử phát triển công nghệ web
Ngày 6-8-1991, Tim Berners Lee công bố chương trình web. Dự án “World Wide
Web” được Tim giới thiệu tại newsgroup alt.hypertext.
Ông cho biết dự án nhắm tới việc tạo ra các liên kết giữa các tài liệu bằng cách sử
dụng “siêu văn bản” (hypertext) cùng với internet.
4

Ngày 12-12-991: Máy chủ đầu tiên ngoài châu Âu online
Paul Kunz, một nhà khoa học thuộc trung tâm Stanford Linear Accelerator Center
(SLAC), sau chuyến thăm phòng thí nghiệm Cern (nơi Berners Lee làm việc) quyết
định lập một máy chủ cho Bắc Mỹ. Đây là việc làm cần thiết để đưa web ra khắp thế
giới. Máy chủ của SLAC dùng các phần mềm do chính Berners Lee phát triển.
Tháng 11-1992: Đã có 26 máy chủ web online
Ngày 22-4-1993: Trình duyệt Mosaic cho Windows ra đời
Mosaic là trình duyệt web đầu tiên chạy trên hệ điều hành Windows,
được phát triển tại Trung tâm quốc gia về ứng dụng siêu máy tính
(National Center for Supercomputing Applications) Hoa Kỳ. Với trình
duyệt này, công chúng có thể tiếp cận web dễ dàng và thân thiện hơn.
Ngày 30-4-1993: Cern công bố World Wide Web miễn phí cho tất cả mọi người
Tim Berners Lee đã thuyết phục được Cern “cho không” công nghệ web và các mã
chương trình để mọi người đều có thể sử dụng và cùng tham gia phát triển. Đây là
một trong những nguyên nhân chủ yếu giúp cho web phát triển nhanh chóng và mạnh
mẽ.
Tháng 5-1993: Viện công nghệ Massachusetts tung ra công nghệ mới, lần đầu tiên
đưa một tờ báo lên web.

Ngày 15-12-1995: Alta Vista, công cụ tìm kiếm đa ngôn ngữ đầu tiên ra
mắt người sử dụng Internet.
Ngày 4-7-1996: Hotmail khai trương đúng ngày quốc khánh Hoa Kỳ.
Tháng 8-1996: Số website đạt 342.081
Tháng 5-1997: BBC News mở một website về cuộc bầu cử trong năm.
Tháng 6-1997: Tên miền business.com được bán với giá 150.000USD (80.000 bảng)
Ngày 17-12-1997: Jorn Barger đưa ra khái niệm weblog, sau này rút gọn thành blog.
Ngày 1-3-1998: Kozmo.com khai trương
Được thành lập bởi Joseph Park và Yong Kang, Kozmo.com quyên góp được 280
triệu USD, trong đó 60 triệu từ Amazon.com và tuyên bố sẽ chuyển phát miễn phí bất
kì thứ gì trong vòng 1g, từ DVD đến… cà phê. Website này sập tiệm vào tháng 4-
2001 khi “bong bóng .com” … xì hơi.
Tháng 9-1998: Gã khổng lồ Google mở cửa văn phòng đầu tiên của
mình tại một gara ở California.
Ngày 19-10-1998: Open Diary, blog community đầu tiên ra đời.
Tháng 5-1999: Shawn Fanning, một sinh viên ở Boston thành lập
Napster.
Đây là chương trình P2P (peer to peer) đầu tiên được sử dụng rộng rãi, bắt đầu từ
chương trình Fanning viết từ khi còn học trung học để chia sẻ file mp3 với bạn bè.
Napster ngay lập tức thu hút được đông đảo người dùng Internet và cả… các công ty
kinh doanh âm nhạc, những người coi P2P là phạm pháp.
Ngày 16-8-1999: Everquest trở thành game nhập vai trực tuyến nhiều người chơi
(MMORPG) đầu tiên.
Ngày 19-8-1999: MySpace khai trương. Đây là một trong những website đầu tiên về
lưu trữ trực tuyến. Website này được thành lập bởi Tom Anderson, Chis DeWolfe và
một nhóm lập trình viên. Hiện nay MySpace có gần 100 triệu người sử dụng và có cả
hệ thống tin nhắn, blog âm nhạc, ảnh,…
Tháng 11-1999: Boo.com trở thành site đầu tiên kinh doanh thời trang.
Ngày 10 -1-2000: AOL mua lại Time Warner, một trong những vụ sát nhập lớn nhất
trong lịch sử.

Ngày 12-4-2006: Google khai trương một dịch vụ thu hẹp ở Trung Quốc mang tên
Gu Ge
Năm 2006: Đã có…92.615.362 website.

1.2. Cơ sở hạ tầng mạng máy tính
1.2.1. Phần cứng
- Máy chủ
- Máy trạm
- Các thiết bị mạng
1.2.2. Phần mềm
- Web server
- Quản trị webserver
- WebBrowser
1.3. Mô hình mạng máy tính
1.3.1. Một số mô hình vật lý của mạng
- Mạng hình sao Tim Berners Lee được
phong tước hiệp sĩ
7

- Mạng tuyến tính
- Mạng dạng vòng
1.3.2. Một số mô hình logic của mạng
- Mạng client/server
- Mạng ngang hàng (peer to peer)
1.3.3. Địa chỉ trong môi trường mạng
- Địa chỉ IP (LAN/WAN/loopback)
- Địa chỉ tên miền

khi nhìn lâu.
* Kém tương phản: Đó là những gam màu có độ tương đồng như chữ màu vàng đặt
trên nền trắng, chữ đỏ thẫm đặt trên nền đen.

Điểm nhấn:
8

Điều này rất quan trọng, với một website được thiết kế đẹp thì điểm nhấn
của websiteluôn là nơi được ngƣời thiết kế tính toán kỹ lưỡng. Không thể đánh giá
một website đẹpnếu nó cứ trơn tuồn tuột từ trên xuống dưới như một lá đơn được. Vì
vậy trong hội họa thường dùng từ "truồi truội" để chỉ một tác phẩm không có điểm
nhấn, không có sự thu hút, không có "eyes catching"

Không gian:
Một website đẹp mang đến cho người xem một cảm giác mới mẻ về không gian mà
người xem có thể cảm nhận thấy rõ ràng nhất. Đó có thể là một không gian nhiều ánh
sáng, nhiều màu xanh của lá cỏ. Hay một không gian trang trọng trong một nhà hát.

Tất cả điều này có thể đã bị bỏ quên trong phần lớn các sản phẩm thiết kế web ở Việt
Nam. Đó là hệ quả của việc sử dụng màu sắc tùy tiện, gam màu tùy tiện và các mảng
màu không có được giai điệu nhịp nhàng.

Ai đó có thể vẽ được một hình mẫu đẹp, một chi tiết tinh xảo, nhưng nếu đặt vào
trong một không gian không hợp lý thì tự nó sẽ chuốc lấy thất bại. Giống như nền văn
hóa Cồng chiêng của người dân tộc vùng Tây Nguyên vậy, chúng ta không thể thấy
những cái cồng hay cái chiêng đẹp khi nó đặt trong một không gian bảo tàng hay một
căn phòng sang trọng.

Mà cái đẹp của nó chỉ có thể thấy và cảm nhận trong cái không gian mà nó vốn được
sinh ra, là buôn làng, là trong nhà rông với không gian văn hóa Tây Nguyên.

2.2.3. Google Chrome
2.3. Giới thiệu webserver
2.3.1. Apache
Đây là chương trình webserver được sử dụng phổ biến nhất. Cách sử dụng đơn
giản nhất là dùng gói cài đặt XAMPP
XAMPP la mot ung dung de chay Webserver tren may tinh cua ban ma khong can
phai mua hosting va domain.
Co the coi day la mot chuong trinh giup ban thuc hanh ve phat trien Web phuc vu
hoc tap va giai tri.
XAMPP là viết tắt của X + Apache + Mysql + PHP + Perl
Chữ X là cross (platform ) ám chỉ dùng được cho cả 4 hệ điều hành khác nhau:
Windows, Linux, Solaris và MAC .
2.3.2. Nginx
Nginx (phát âm "engine x") là một chương trình server HTTP, một reverse
proxy cũng như IMAP/POP3 proxy server miễn phí, mã nguồn mở, có hiệu năng cao.
Nginx được tác giả Igor Sysoev viết cho rambler.ru , trang web được truy cập nhiều thứ 2
trên nước Nga, đã chạy ổn định trong vòng hơn hai năm rưỡi. Igor cung cấp mã nguồn
dưới giấy phép kiểu BSD. Hiện Nginx được sử dụng từ 1% đến 4% số lượng tên miền
toàn thế giới (Nguồn 1, 2). Mặc dù còn ở giai đoạn Beta, Nginx được biết đến bởi sự ổn
định cao, nhiều tính năng, cấu hình đơn giản và tiết kiệm tài nguyên.
2.3.3. Wamp
WAMP là một từ viết tắt của "Windows, Apache, MySQL và PHP". Khi bạn tải
về WAMP cũng có nghĩa là bạn chỉ cần tải về một chương trình để cài đặt ba điều khác
nhau. WAMPs thuận tiện vì nó cho phép bạn tải về và cài đặt tất cả các gói bạn cần để
lưu trữ nội dung web động. Nếu không, bạn sẽ phải tải về ba gói riêng biệt.
Nguồn bài viết: />rieng-cua-ban-tren-windows-wamp.html#ixzz35qyQlZiw
Link gốc:
2.4. Phân loại website
Việc phân loại website không có mục đích quan trọng nào, chỉ đơn giản phân
loại website để một mặt nào đó biết website này đang làm gì, đang cung cấp giá trị gì cho

Landing page hay Microsite” dành cho các chiến dịch tiếp thị, trình diễn sản phẩm hay
các website chính thức của doanh nghiệp nhằm mục đích coi website là phương tiện
online marketing để quảng bá hình ảnh thương hiệu công ty hay sản phẩm đối với người
dùng internet.

Đặc điểm của loại này là cần phải có thiết kế độc quyền, đẹp, nặng về trình diễn,
có thể thêm hiệu ứng đa phương tiện để đem lại hiệu quả hình ảnh ấn tượng nhất. Những
website này cần phải được thiết kế bởi những công ty thiết kế web uy tín vì website đó
chính là bộ mặt doanh nghiệp hay hình ảnh thương hiệu. Website loại này chiếm 80%
nhu cầu thiết kế web hiện nay và chi phí cũng khá bình dân và chấp nhận được với hầu
hết các doanh nghiệp

Loại thứ ba là “Web vệ tinh” dành cho doanh nghiệp đã có nhiều website chính và
muốn phát triển các website vệ tinh khác nhằm phân khúc thị trường cho sản phẩm hay
làm SEO cho các dịch vụ riêng biệt.
Đặc điểm website này là đơn giản, tập trung vào các nội dung chính và cung cấp
thông tin rõ ràng, code được tối ưu hóa tốt để dễ dàng làm SEO. Website loại này có thể
sử dụng mã nguồn mở hay web mẫu có sẵn để giảm chi phí triển khai, tuy nhiên cũng cần
phải được các chuyên gia về Seo tư vấn để chọn chiến lược tốt nhất. Loại website này
chiếm 10% nhu cầu hiện nay và chi phí cũng ở mức thấp nhất và thường gọi là web giá
rẻ.
11

2.5. Bố cục cơ bản của trang web
2.5.1. Outline
Cấu trúc chung của trang, thường gồm các thành phần:
- Banner
- Button
- Navigation
- Location Bar

Ví dụ, một tấm ảnh kỹ thuật số 3.1 megapixel được lưu theo định dạng JPEG với mức
nén ảnh thấp sẽ chiếm khoảng 600KB không gian ổ cứng. Ngược lại, cũng chính bức ảnh
đó nếu được lưu dưới định dạng không nén TIFF sẽ chiếm khoảng 9MB không gian lưu
trữ.

Mối liên hệ giữa độ phân giải với kích thước của ảnh
Ảnh càng lớn thì không chỉ càng chiếm dụng nhiều không gian lưu trữ mà còn hiển thị
càng lớn trên màn hình của bạn hoặc khi in nó ra. Ví dụ, một bức ảnh 5 megapixel sẽ
12

chứa nhiều pixel hơn theo chiều ngang cũng như theo chiều dọc so với một bức ảnh chỉ
có 3 megapixel, do đó nó sẽ chiếm nhiều chỗ hơn trên màn hình khi xem với kích thước
đầy đủ (full size) của nó. Tuy nhiên, một bức ảnh được lấy trực tiếp từ máy ảnh kỹ thuật
số với kích thước như vậy sẽ là quá rộng đối với hầu hết máy in và quá lớn với các
website. Điều đó có nghĩa là bạn cần thu nhỏ bức ảnh lại (downsample) trên máy tính.
Khi bạn thu nhỏ bức ảnh bằng một ứng dụng biên tập ảnh, thực ra nó sẽ loại bỏ bớt các
pixel khỏi bức ảnh để làm nó nhỏ lại. Quá trình này sẽ làm giảm chất lượng bức ảnh đến
một mức nào đó. Thực ra, quá trình loại bỏ bớt dữ liệu (remove data hay downsample)
luôn tốt hơn quá trình thêm dữ liệu (add data hay resample) để làm tấm ảnh lớn hơn.
Phân biệt giữa Pixels Per Inch và Dots Per Inch
Mặc dù thường được dùng thay thế cho nhau, tuy nhiên, về mặt kỹ thuật, pixels per inch
(PPI) và dots per inch (DPI) không phải là một.
PPI chỉ số lượng pixel có trên 1 inch của một bức ảnh số hoặc màn hình máy tính. PPI
tuy không ảnh hưởng đến chất lượng thực sự của bản thân bức ảnh nhưng nó có thể ảnh
hưởng đến việc hiển thị bức ảnh đó trên trang web hoặc bản in.
DPI, ở một khía cạnh khác, lại chỉ độ phân giải của các bản in mà máy in có thể tạo ra.
Đây là một đặc tính vật lý của máy in. Mỗi dot của máy in đều có kích thước vật lý xác
định. Máy in sử dụng các dot mực để hiển thị hình ảnh; máy in tạo ra càng nhiều dot trên
một inch vuông thì chất lượng bản in càng cao. Các dòng máy in cấp thấp có DPI thấp
trong khi các dòng máy in cấp cap sẽ có DPI cao. Ví dụ, một máy in hỗ trợ 1200DPI có

<html>
<head>
</head>
<body>
</body>
</html>

2.7. Định dạng dữ liệu thiết kế web
2.7.1. Định dạng ảnh thiết kế giao diện web
- PNG : (Portable Net Graphics) là định dạng ảnh có nhiều đặc điểm giống GIF ngoại trừ
phần động (Có thể nén để đưa lên net, hỗ trợ lưu ảnh transparancy) nhưng do có dải tần
màu rộng hơn, có thể đến 16 triệu màu, nên ngày càng được sử dụng rộng rãi trên WWW
với các ảnh có chất lượng như ảnh chụp.
- JPG : là định dạng ảnh nén hiệu quả (Joint Photographic Experts Group), có thể nén ảnh
đến vài chục lần, tuy nhiên chất lượng lượng ảnh sẽ suy giảm tỉ lệ thuận với hệ số nén
(Compression) dựa trên nguyên tắc loại bỏ những thông số màu để giảm thông tin cho
file dựa trên xu hướng nhận thức về màu sắc của mắt người. Do vậy, JPG còn được gọi là
định dạng ảnh nén chịu thiệt. Thường được dùng để lưu ảnh chụp, tất nhiên tuỳ theo nhu
cầu mà chọn độ nén thích hợp để bảo toàn chất lượng. Các Lab đều dùng định dạng này
với hệ màu RGB để xuất ảnh.
- TIFF : (Tagged Image File Format) là định dạng chủ yếu để lưu trữ ảnh, bao gồm cả đồ
thị lẫn hình ảnh. Đầu tiên được xấy dựng bởi hãng Aldus kết hợp với Microsoft để dùng
cho kỹ thuật in PostScript. TIFF là định dạng thông dụng cho các ảnh có dãi tần màu
rộng và sâu, phát triển song song với các máy quét ảnh do đó ngày càng trở thành 1 định
dạng hữu dụng được dùng trong in ấn nhờ vừa bảo toàn được thông tin, vừa có thể chấp
nhận các kỹ thuật nén LZW, ZIP có thể làm giảm đáng kể dung lượng.
- GIF : (Graphis Interchange Format : Định dạng trao đổi hình ảnh) là 1 định dạng ảnh
quản lý không quá 256 màu cho 1 ảnh tĩnh cũng như từng khuôn hình cho các ảnh động,
được dùng rộng rãi trên WWW do dùng kỹ thuật nén bảo toàn LZW làm giảm kích thước
file mà không làm thất thoát dữ liệu. Do giới hạn về màu sắc nên thường được dùng cho


Câu hỏi chƣơng 2
1. Trình bày sơ lƣợc về hệ điều hành mạng. Phân tích ƣu và nhƣợc của một
số trình duyệt cơ bản.
2. So sánh các webserver: Apache, nginx, wamp.
3. So sánh website tĩnh và động.
4. Thiết kế bố cục của website thƣ viện.
5. Trình bày và lấy ví dụ cụ thể cấu trúc của ngôn ngữ HTML cơ bản.
6. Phân tích định dạng dữ liệu thiết kế web.
CHƢƠNG 3
THỰC HÀNH THIẾT KẾ WEB
3.1. Thiết kế cấu trúc website
3.1.1. Thiết kế banner
3.1.2. Thiết kế icon
3.2. Thiết kế web tĩnh bằng Microsoft front page
3.2.1. Khái niệm, chức năng của Front Page
3.2.2. Các bước thiết kế web tĩnh trên Front Page
3.3. Cài đặt các thành phần để thiết kế website động
3.3.1. Cài đặt server
3.3.2. Cài đặt joomla
3.3.3. Xuất bản website joomla
Câu hỏi chƣơng 3
15

1. Phân tích cấu trúc website thƣ viện.
2. Phân tích cấu trúc của front page.
3. Trình bày các thành phần để thiết kế web động.
4. Thiết kế web tĩnh trên phần mềm Front Page với các thành phần sau:
- Banner động định dạng gif.
- Button 3D định dạng gif.