Giáo trình thiết kế web và quản trị website (nghề ứng dụng phần mềm trình độ cao đẳng)

UDPM-CĐ-MĐ20-TKQTWEBSITE
TUYÊN BỐ BẢN QUYỀN
Tài liệu này thuộc loại sách giáo trình nên các nguồn thơng tin có thể được phép
dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu
lành mạnh sẽ bị nghiêm cấm.

1


LỜI GIỚI THIỆU
Chương trình khung quốc gia nghề Quản trị mạng máy tính đã được xây dựng trên
cơ sở phân tích nghề, phần kỹ thuật nghề được kết cấu theo các môđun, môn học. Để
tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn
giáo trình kỹ thuật nghề theo các mơđun, môn học đào tạo nghề là cấp thiết hiện nay.
Thiết kế và quản trị website là mô đun đào tạo nghề được biên soạn theo hình thức
tích hợp lý thuyết và thực hành. Trong q trình thực hiện, nhóm biên soạn đã tham
khảo nhiều tài liệu thiết kế và lập trình web trong và ngồi nước, kết hợp với kinh nghiệm
trong thực tế sản xuất.
Mặc dầu có rất nhiều cố gắng, nhưng không tránh khỏi những khiếm khuyết, rất
mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hồn thiện hơn.
Cần Thơ, ngày 17 tháng 06 năm 2018
Tham gia biên soạn
1. Chủ biên Nguyễn Phát Minh

2


MỤC LỤC
TRANG
LỜI GIỚI THIỆU ............................................................................................................ 2

MỤC LỤC ....................................................................................................................... 3
GIÁO TRÌNH MÔN HỌC/MÔ ĐUN ............................................................................ 5
BÀI 1: TỔNG QUAN VỀ DỊCH VỤ WORLD WIDE WEB ........................................ 7
Mã bài: MĐ 20 - 01 ......................................................................................................... 7
1. Một số dịch vụ quan trọng trên Internet ................................................................. 7
2. Cấu trúc và hoạt động của dịch vụ WWW ........................................................... 10
3. Lịch sử phát triển các hệ thống WebServer-WebBrowser ................................... 14
BÀI 2: TẠO CÁC TRANG HTML .............................................................................. 17
Mã bài: MĐ 20 - 02 ....................................................................................................... 17
1. Tạo và thực thi trang web HTML ......................................................................... 17
2. Cấu trúc trang web HTML.................................................................................... 22
3. Định dạng văn bản ................................................................................................ 23
4. Địa chỉ tương đối và tuyệt đối .............................................................................. 26
5. Siêu liên kết .......................................................................................................... 26
6. Âm thanh - Hình ảnh ............................................................................................ 29
7. Bảng biểu .............................................................................................................. 32
8. Tạo Form .............................................................................................................. 34
9. Kiểm tra ................................................................................................................ 35
BÀI 3: THIẾT KẾ WEBSITE VỚI DREAM WEAVER ............................................ 36
Mã bài: MĐ 20 - 03 ....................................................................................................... 36
1. Tạo thư mục chứa bộ web ..................................................................................... 37
2. Tạo mới một trang web ......................................................................................... 37
3. Lưu một trang web ................................................................................................ 38
4. Định dạng trang web. ............................................................................................ 38
5. Xem trang web trên trình duyệt ............................................................................ 39
6. Tạo bảng trong trang web ..................................................................................... 40
7. Chèn hình vào trang web ...................................................................................... 42
8. Chèn ảnh động flash, video clip vào trang web. ................................................... 44
9. Tạo menu cho trang web. ...................................................................................... 44
10. Tạo liên kết cho trang web. ................................................................................. 50

11. Cách tạo Template .............................................................................................. 50
3


12. Tạo trang web mới từ template ........................................................................... 53
13. Đưa website lên hosting ...................................................................................... 54
BÀI 4: LẬP TRÌNH WEB VỚI NGÔN NGỮ PHP...................................................... 58
Mã bài: MĐ 20 - 04 ....................................................................................................... 58
1. Tổng quan về PHP................................................................................................. 58
2. Cài đặt webserver .................................................................................................. 59
3. Nền tảng của PHP ................................................................................................. 65
4. Sử dụng biến Form ............................................................................................... 76
5. Sử dụng một số đối tượng trên PHP...................................................................... 77
6. Kiểm tra ................................................................................................................. 77
BÀI 5: XUẤT BẢN VÀ QUẢN TRỊ WEBSITE ......................................................... 78
Mã bài: MĐ 20 - 05 ....................................................................................................... 78
1. Đăng kí website miễn phí trên internet ................................................................. 78
2. WordPress là gì? .................................................................................................... 80
3. WordPress.com và WordPress.org khác nhau như thế nào? ................................. 81
5.4. Cài Đặt WordPress ............................................................................................. 81
5. Các Chức Năng Chính Trong WordPress ............................................................. 88
TÀI LIỆU THAM KHẢO ............................................................................................. 99

4


GIÁO TRÌNH MƠN HỌC/MƠ ĐUN
Tên mơn học/mơ đun: THIẾT KẾ WEB VÀ QUẢN TRỊ WEBSITE
Mã môn học/mô đun: MĐ 20
Vị trí, tính chất, ý nghĩa và vai trị của mơn học/mơ đun:

_

_

Vị trí: là mơ đun được bố trí giảng dạy sau các mơn cơ sở nghề, Lập trình giao diện,
Lập trình cơ sở dữ liệu, Hệ quản trị cơ sở dữ liệu.
Tính chất: là mơ đun bắt buộc thuộc chun mơn nghề của chương trình đào tạo
Cao đẳng (ứng dụng phần mềm).

Ý nghĩa và vai trị của mơn học/mơ đun:
Mục tiêu của môn học/mô đun:

_

_

Kiến thức:
o Sinh viên hiểu rõ mơ hình, cấu trúc và ngun lý hoạt động của các website;
o Hiểu rõ cấu trúc một trang HTML và tính năng, cú pháp của các thẻ HTML;
o Hiểu rõ các đặc điểm và tính năng cơ bản của phần mềm thiết kế web
DreamWeaver như: định dạng văn bản, âm thanh, hình ảnh, liên kết,....;
o Hiểu được các kỹ thuật lập trình trên web với ngơn ngữ PHP: Kết nối cơ sở
dữ liệu, tương tác cơ sở dữ liệu,...;

_

_

Kỹ năng:
o Xây dựng được các website có thẩm mỹ, trong đó có các ứng dụng phục vụ

các mục tiêu tương tác dữ liệu cụ thể, có khả năng liên kết đến các trang web
hay tài nguyên khác;
o Xuất bản được website lên internet và quản trị website;
Về năng lực tự chủ và trách nhiệm:
o Nghiêm túc, tỉ mỉ trong việc tiếp nhận kiến thức. Chủ động, tích cực trong
thực hành và tìm kiếm nguồn bài tập liên quan.

Nội dung của môn học/mô đun:
Số
TT

Thời gian
Tên các bài trong mô đun

Tổng
số

Lý
thuyết

Thực
hành,

Kiểm tra*

Bài tập

(LT hoặc
TH)

1

Bài 1: Tổng quan về dịch vụ World
Wide Web

2

2

0

0

2

Bài 2: Tạo các trang HTML

24

11

12

1

3

Bài 3: Thiết kế website với cơng cụ
DreamWeaver

36

12

22

2

4

Bài 4: Lập trình website với PHP

42

12

28

2

5


5

Bài 5: Quản trị website

16

8

8

0

Tổng cộng

120

45

70

5

6


BÀI 1: TỔNG QUAN VỀ DỊCH VỤ WORLD WIDE WEB
Mã bài: MĐ 20 - 01
Giới thiệu:
Bài học này nhằm giới thiệu sơ lược về lịch sử của World Wide Web (www), URL, về
giao thức HTTP và ngôn ngữ phổ biến được dùng bởi World Wide Web là HTML
(Hyper Text Markup Language).
Mục tiêu:
 Hiểu được môi trường hoạt động của các website;
 Hiểu được cấu trúc và các nguyên lý hoạt động của website;
 Mô tả mạch lạc được các mô hình hoạt động WWW, FTP, Email;
Nghiêm túc, tích cực trong việc tiếp nhận kiến thức. Chủ động, tích cực tìm kiếm các
nguồn tài liệu liên quan.

Nội dung chính:

1. Một số dịch vụ quan trọng trên Internet
1.1. Dịch vụ truyền file FTP
Dịch vụ truyền tệp (FTP) là một dịch vụ cơ bản và phổ biến cho phép chuyển các tệp
dữ liệu giữa các máy tính khác nhau trên mạng. FTP hỗ trợ tất cả các dạng tệp, trên thực
tế nó khơng quan tâm tới dạng tệp cho dù đó là tệp văn bản mã ASCII hay các tệp dữ
liệu dạng nhị phân. Với cấu hình của máy phục vụ FTP, có thể quy định quyền truy
nhập của người sử dụng với từng thư mục dữ liệu, tệp dữ liệu cũng như giới hạn số
lượng người sử dụng có khả năng cùng một lúc có thể truy nhập vào cùng một nơi lưu
trữ dữ liệu.
1.2. Dịch vụ thư điện tử Email
Dịch vụ thư điện tử là một dịch vụ thông dụng nhất của Internet. Nó cho phép bạn gửi
một thơng điệp tới một hoặc một nhóm người qua mạng Internet. Ngồi việc gửi thơng
điệp dưới dạng văn bản, bạn cịn có thể đính kèm các tệp tin cùng với thơng điệp. Dịch
vụ thư điện tử được sử dụng phổ biến do có các ưu điểm sau:
•
Tốc độ cao và khả năng chuyển tải trên tồn cầu: Có thể nói đây là một trong
những ưu điểm hàng đầu của hệ thống thư điện tử. Bạn có thể gửi thư cho bất kỳ người
nào gần như ngay lập tức. Người nhận cũng có thể nhận thư ở bất kỳ đâu, miễn là nơi
đó có kết nối Internet.
•
Giá thành thấp: Giá thành của việc gửi thông tin bằng thư điện tử gần như không
đáng kể bởi bạn chỉ cần trả chi phí cho việc sử dụng Internet là bạn đã có khả năng sử
dụng các hệ thống thư điện tử miễn phí trên tồn cầu và từ đó liên lạc đến khắp mọi
nơi. Nếu so sánh về mặt giá thành với hệ thống thư tín thơng thường, nhất là gửi thư
quốc tế thì việc gửi bằng hệ thống thư điện tử rẻ và tiện dụng hơn rất nhiều lần.
•
Linh hoạt về mặt thời gian: Nếu bạn có người quen ở Mỹ và bạn muốn gọi điện
cho người đó lúc 12 giờ trưa, bạn có thể không nhận được câu trả lời (do các cơ quan ở

Mỹ đã nghỉ), hoặc có thể bạn sẽ đánh thức họ vào lúc nửa đêm, rất phiền toái. Tuy
nhiên, nếu sử dụng thư điện tử thì bạn có thể gửi vào bất cứ lúc nào và người nhận cũng
7


có thể đọc thư vào lúc nào họ muốn. Để có thể sử dụng thư điện tử, mỗi người dùng
phải có một tài khoản. Tài khoản này có thể được đăng ký miễn phí hoặc được các nhà
cung cấp dịch vụ cấp. Cấu trúc chung của một địa chỉ thư điện tử như sau:
Tênđăngký@tênmiền
Ví dụ địa chỉ thư: , Tên đăng ký: nva, nve
Ký tự @ phân tách tên đăng ký và tên miền, ký tự này buộc phải có trong mọi địa chỉ
thư điện tử. Tên miền: topica.edu.vn, neu-edutop.edu.vn là địa chỉ website của tổ chức
mà người dùng đăng ký dịch vụ thư điện tử. Hệ thống thư điện tử được chia làm hai
phần: UA (Mail User Agent) và MTA (Message Transfer Agent). MUA thực chất là
một hệ thống làm nhiệm vụ tương tác trực tiếp với người dùng cuối, giúp họ nhận bản
tin, soạn thảo bản tin, lưu các bản tin và gửi bản tin. Nhiệm vụ của MTA là định tuyến
bản tin và xử lý các bản tin đến từ hệ thống của người dùng sao cho các bản tin đó đến
được đúng hệ thống đích.

Hình 1.10. Cấu trúc hệ thống thư điện tử
1.3. Dịch vụ Telnet
Telnet là một dịch vụ Internet cho phép người dùng ngồi trên một thiết bị đầu cuối có
thể thơng qua kết nối mạng truy nhập đến một thiết bị từ xa để điều khiển nó bằng câu
lệnh như là đang ngồi tại máy ở xa. Một máy trạm có thể thực hiện đồng thời nhiều
phiên telnet đến nhiều địa chỉ IP khác nhau. Telnet hoạt động theo phiên, mỗi phiên là
một kết nối truyền dữ liệu theo giao thức TCP với cổng 23. Telnet hoạt động theo mơ
hình khách/chủ
(Client/Server), trong đó Client là một phần mềm chạy trên máy của người dùng, phần
mềm này sẽ cung cấp giao diện hiển thị để người dùng gõ lệnh điều khiển. Phần Server
là dịch vụ chạy trên máy từ xa lắng nghe và xử lý các kết nối và câu lệnh được gửi đến

từ máy trạm tại chỗ. Dịch vụ Telnet thường được sử dụng để điều khiển và cấu hình từ
8


xa cho các thiết bị, chẳng hạn bộ định tuyến (Router) và bộ chuyển mạch (Switch). Để
kết nối từ xa đến một thiết bị nào đó, câu lệnh được sử dụng là: Telnet IP_address Trong
đó:
•

Telnet là tên lệnh.

•

IP_address là địa chỉ IP của thiết bị.
1.4. Dịch vụ WWW
World Wide Web hay Web là một trong những dịch vụ phổ biến nhất của Internet. Dịch
vụ này cho phép bạn truy nhập đến các trang thông tin siêu văn bản (trang web) được
đặt tại nhiều vị trí khác nhau trên Internet. Dịch vụ này hoạt động theo mơ hình
Khách/Chủ (Client/Server). Trong đó máy chủ web là máy tính trên Internet có chạy
phần mềm Web server. Máy chủ web lưu trữ nội dung thông tin (các trang web), nhận
và trả lời các yêu cầu từ máy khách web. Máy khách web là máy tính của người dùng
có chạy trình duyệt web (như Internet Explorer, Netscape Navigator, Firefox …). Máy
khách web gửi yêu cầu và hiển thị thông tin trả lời từ máy chủ web.
Dịch vụ web sử dụng giao thức HTTP (Hyper Text Transfer Protocol): Giao thức truyền
siêu văn bản.

Hình 1.9. Mơ hình hoạt động của một dịch vụ Web Để truy nhập đến một trang web
nào đó, người dùng gõ địa chỉ trang web vào thanh địa chỉ của trình duyệt web.
Ví dụ, để truy nhập tới trang web của Chương trình đào tạo cử nhân theo phương thức
Elearning

(NEU-EDUTOP), bạn gõ: ,

1.5. Bộ định vị tài nguyên URL
URL, viết tắt của Uniform Resource Locator (Định vị Tài nguyên thống nhất)[1],
được dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên
kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ,
chính là URL, còn được gọi là địa chỉ mạng hay là liên kết mạng (hay ngắn gọn là liên
kết).
Về kỹ thuật, URL là một dạng của URI, nhưng trong nhiều tài liệu kỹ thuật và các
cuộc thảo luận bằng lời nói, URL thường được sử dụng như một từ đồng nghĩa với
URI, và điều này không bị coi là một vấn đề.[2]
9


2. Cấu trúc và hoạt động của dịch vụ WWW
2.1. Kiến trúc WWW
World Wide Web (gọi tắt là Web hay WWW)
• Là một dịch vụ của Internet, cho phép bạn truy nhập tới nguồn thông tin đồ sộ của
Internet. Nguồn thông tin này được tổ chức dưới dạng các trang web có sự liên kết chặt
sẽ với nhau.
• Mỗi trang web là một tài liệu siêu văn bản. Tài liệu này có thể chứa văn bản, âm
thanh, hình ảnh… Được mã hố đặc biệt, sử dụng ngơn ngữ đánh dấu siêu văn bản –
HTML (HyperText Markup Languages). Ngôn ngữ này cho phép tác giả của một tài
liệu nhúng các liên kết siêu văn bản (còn được gọi là các siêu liên kết – hyperlink)
vào trong tài liệu. Các liên kết siêu văn bản là nền móng của World Wide Web.
• Khi đọc một trang web, có thể nhấp chuột vào một từ hay một hình ảnh được mã hố
như một liên kết siêu văn bản và sẽ lập tức chuyển tới một vị trí khác nằm bên trong
tài liệu đó hoặc tới một trang Web khác. Trang thứ hai có thể nằm trên cùng máy tính
với trang đầu, hoặc có thể nằm bất kì nơi nào trên Internet.
• Một tập hợp các trang Web có liên quan được gọi là WebSite. Mỗi WebSite được lưu

trữ trên trên một máy phục vụ Web, vốn là các máy chủ Internet lưu trữ hàng ngàn
trang Web riêng lẻ. Việc sao chép một trang lên một Web Server được gọi là tải (hoặc
nạp) lên (uploading).

10


Hình 1.7. Hình ảnh của một trang Web
• Web cung cấp thông tin rất đa dạng bao gồm văn bản, hình ảnh, âm thanh, video.
Hiện nay các trang Web sử dụng để phân phối tin tức, các dịch vụ giáo dục, thông tin,
danh mục sản phẩm, cùng nhiều thứ khác. Các trang Web tương tác cho phép các độc
giả tra cứu cơ sở dữ liệu, đặt hàng các sản phẩm và các thơng tin, gửi số tiền thanh
tốn bằng thẻ tín dụng… Máy chủ Web (web server) Để cung cấp dịch vụ Web
cho người sử dụng, chúng ta cần có một máy chủ web đặt tại một địa chỉ nào đó trên
Internet. Máy chủ web là một máy tính mà trên đó cài đặt phần mềm phục vụ Web,
đơi khi người ta cũng gọi chính phần mềm đó là Web Server.
• Tất cả các Web Server đều hiểu và chạy được các file *.htm và *.html, tuy nhiên mỗi
Web Server lại phục vụ một số kiểu file chuyên biệt chẳng hạn như IIS của Microsoft
dành cho *.asp, *.aspx...; Apache dành cho *.php...; Sun Java System Web Server
của SUN dành cho *.jsp... Trình duyệt Web (web browser) Trình duyệt Web là một
phần mềm ứng dụng được cài đặt trên máy tính của người sử dụng. Phần mềm này
cho phép người dùng tìm các tài liệu siêu văn bản trên Web rồi mở các tài liệu đó trên
máy tính người sử dụng.
2.2. Web tĩnh và Web động
Web tĩnh là những website không có hệ thống quản lý nội dung (xem bài cms) và
người dùng khơng thể chỉnh sửa được hoặc có thể chỉnh sửa, thay đổi dữ liệu được.
Hiện nay web tĩnh hầu như ít tồn tại hoặc chỉ tồn tại với những công ty chuyên về thiết
kế website, họ sử dụng web tĩnh bởi họ có kiến thức và dễ dàng chỉnh sửa nội dung khi
cần.
Web tĩnh được làm từ gì?

Về kiến thức cơ bản thì web tĩnh thường được xây dựng từ CSS, HTML,
JAVASCRIPT (DHTML), hiện nay có thêm cơng nghệ HTML5 & CSS3. Có thể bạn
nhìn một web nào đó nhìn rất lung lay, đẹp và nội dung có thể thay đổi nhưng chưa
chắc nó là web động bởi vì người ta có thể sử dụng DHTML để thay đổi nội dung (tại
client).
Nếu bạn chạy trên máy tính của bạn thì với web tĩnh bạn có thể đặt tại đâu cũng chạy
được vì bản chất nó chỉ là một file bình thường.
Ưu điểm của web tĩnh:
Về giao diện Designer có thẻ thiết kế theo kiểu mới lạ
 Tốc độ truy cập nhanh bởi nó chỉ là những file HTML
 Chi phí đầu tư thấp bởi bạn khơng phải trả tiền nhiều cho Coder
 Thân thiện với bộ máy tìm kiếm bởi bạn có thể đặt tên file tùy ý (ten-file.html,
tieu-de-tin-tuc.html)
Nhược điểm của web tĩnh:





Khó quản lý nội dung
Khó nâng cấp bảo trì
11


Mỗi khi thay đổi phải vào file HTML, CSS hoặc JAVASCRIPT để chỉnh sửa
Khi nào nên sử dụng web tĩnh?


Nếu bạn là doanh nghiệp muốn tự mình làm website thì bạn có thể học các kiến
thức căn bản và tự làm một Web tĩnh cho mình

 Nội dung website ít khi cập nhật và ít nên bạn muốn tiết kiệm chi phí
 Website bạn nhỏ và bạn th ln người chuyên về web để quản trị
Trên thực tế thì mình thấy hiện nay chỉ có các cơng ty thiết kế web họ mới làm web
tĩnh bởi vì họ có khả năng chỉnh sửa được chứ khách hàng thì họ khơng có khả năng
đó. Hiện nay có các trang web ONE PAGE có các hiệu ứng slide khá độc nên cũng có
thể họ sử dụng web tĩnh hoặc tĩnh một phần trong đó.


Ngược lại với web tĩnh, web động là những website có hệ thống quản lý nội dung và
người dùng có thể chỉnh sửa nội dung được. Ví dụ như trang vnexpress.net hay
24h.com.vn thì đó là những web động bởi vì họ có thể đăng tin mới, chỉnh sửa tin mới
và chỉnh sửa danh mục menu, ...
Web động được làm từ gì?
Web động sử dụng các cơng nghệ như HTML, CSS, HTML5, CSS3, JAVASCRIPT,
... và điều đặc biệt là có sử dụng một ngơn ngữ lập trình server như PHP, một hệ quản
trị cơ sở dữ liệu như MySQL, vì vậy web động phải chạy trong máy chủ. Nếu đặt trên
máy tính của bạn thì bạn phải cài các Web server ảo như vertrigo, Xampp, wampp, ...
Ưu điểm của web động:
Dễ dàng quản lý nội dung
 Dễ dàng nâng cấp và bảo trì
 Có thể xây dụng được web lớn
 Thường sử dụng tương tác với người dùng cao
 Hiện nay vẫn SEO tốt bởi ta có thể sử dụng chức năng Rewrite URL để chuyên
URL thân thiện
Nhược điểm của web động:


Chi phí xây dựng cao
 Nếu web lớn có thể cần thêm nhân sự chuyên ngành
Khi nào nên sử dụng web động?



Bạn làm website thương mại điện tử bán hàng
 Bạn làm web giới thiệu sản phảm công ty
 Bạn làm web tin tức, blog cá nhân
 Web bạn tầm cỡ lớn
Nhưng chung quy lại thì hiện nay đa số bạn nên chọn giải pháp làm web động sẽ tốt
hơn.


12


2.3. WebServer- WebBrowser
Khái niệm web server thực tế vẫn còn khá xa lạ với nhiều người, chính vì thế khi nghe
đến nhiều người vẫn luôn thắc mắc web server là gì? Đây là tên gọi dành cho một loại
máy chủ có dung lượng lớn, tốc độ cao có cơng dụng lưu trữ các thông tin trên internet
như một ngân hàng dữ liệu bao gồm các website đã được thiết kế và các thơng tin, tài
khoản… có liên quan.
Xét ở mức độ cơ bản nhất, toàn bộ các website cần một chương trình máy tính, phân
phối các trang web khi có yêu cầu từ người dùng. Chiếc máy tính chạy chương trình này
là web server. Khi một người dùng sử dụng máy tính để truy cập một website, họ nhập
và gửi yêu cầu tới internet về việc xem một trang web.
Điều này có thể thực hiện được là vì mỗi máy tính/ thiết bị kết nối internet đều được
định danh với một địa chỉ nhận dạng duy nhất IP (viết tắt của từ Internet Protocol – giao
thức internet). Thông qua địa chỉ này, các máy tính có thể tìm kiếm nhau.
Mỗi trang web tương ứng có một địa chỉ duy nhất là URL (viết tắt của từ Uniform
Resource Locator). Khi người dùng sử dụng máy tính (máy khách) nhập URL của
website vào trình duyệt web. Ví dụ: nhập: vào trình duyệt. Máy
khách sẽ gửi yêu cầu truy cập đến IP của Web server sẽ nhận được yêu cầu về việc xem

nội dung trang web của Long Vân thông qua qua giao thức http – giao thức được thiết
kế để gửi các file đến trình duyệt web và các giao thức khác. Web server sẽ sẽ gửi nội
dung web (bài viết, hình ảnh, video,…) đến máy khách thơng qua đường truyền internet.
Mỗi web server đều có một địa chỉ IP hoặc cũng có thể có một domain name. Bất kỳ
máy tính nào cũng có thể trở thành web server bởi việc cài đặt lên nó một chương trình
phần mềm server software và sau đó kết nối vào Internet.
Trình duyệt Web là một chương trình phần mềm được viết để nhận, gửi, hiển thị,
tương tác với các nội dung từ trên World wide web (hay cịn gọi là WWW vào đây để
tìm hiểu thêm về WWW là gì). Trình duyệt Web cịn có tên gọi trong tiếng Anh
là Web Browser.
Trình duyệt đầu tiên trên thế giới được ra đời vào năm 1990 bởi Sir Tim Berners-Lee
và có tên gọi là WorldWideWeb. Sau này được đổi tên là Nexus (Cái này là tên gọi
trình duyệt web đầu tiên, khơng phải dịng điện thoại Nexus do google bán đâu nha.)
Hiện nay thì trên thế giới đang có những trình duyệt Web được nhiều người sử dùng
là:








Trình duyệt Chrome do Google phát triển. Đây là trình duyệt mà cá nhân
mình đánh giá cao nhất. Với hệ thống tiện ích mở rộng (extension) phong
phú
Trình duyệt Internet Explorer hay cịn gọi là trình duyệt IE do Microsoft
phát triển được tích hợp sẵn vào hệ điều hành Windows.
Trình duyệt Mozilla Firefox hay thường gọi là Firefox do Mozilla phát triển.
Trình duyệt Opera do Opera Software phát triển. Hiện nay thì đã có tích hợp

thêm VPNrất thích hợp cho việc truy cập các trang web bị cấm truy cập mà
khơng cần phải cài đặt hay chỉnh chọt gì nhiều.
Trình duyệt Safari do Apple phát triển.

13




Và các trình duyệt Web khác với thị phần người sử dụng ít hơn như
Maxthon, UC, ….

3. Lịch sử phát triển các hệ thống WebServer-WebBrowser
3.1. WebServer
6/8/1991 là một ngày đáng nhớ bởi đó là thời điểm mã máy tính "non nớt" cho www
được đăng trên alt.hypertext để mọi người có thể tải và tìm hiểu nó. Cũng bắt đầu từ
hơm ấy công nghệ web được thế giới biết đến.
Jeff Groff, người cùng tham gia viết mã với Berners-Lee, cho biết ý tưởng tạo dựng web
thực ra được hình thành rất đơn giản: "Chúng tôi luôn nghĩ rằng người sử dụng không
cần phải xoay sở với những vấn đề kỹ thuật phức tạp". Web giống như một tấm khăn
trải giường với nhiệm vụ cố che phủ sự rắc rối của những dữ liệu được lưu hành trên
Internet.
Paul Kunz, nhà khoa học đã thiết lập máy chủ web đầu tiên ở châu Âu vào tháng
12/1991, cho biết đầu thập niên 90, máy tính giống như những "ốc đảo" thơng tin. Một
lần đăng nhập chỉ có thể truy cập tài nguyên của một hệ thống. Chuyển sang máy tính
khác đồng nghĩa với việc họ phải đăng nhập thêm lần nữa và phải sử dụng những bộ
lệnh khác nhau để truy xuất dữ liệu.
Web đã lôi kéo sự chú ý của Kunz khi ông chứng kiến Berners-Lee trình diễn khả năng
hoạt động của web trên hệ thống IBM. Sau đó, Kunz đã thiết lập máy chủ web, cho phép
các chuyên gia vật lý rà soát hơn 200.000 dữ liệu dễ dàng hơn bao giờ hết.

Tuy nhiên, dù các nhà vật lý đã bị web quyến rũ, đa số mọi người lại không nhận biết
được khả năng tiềm ẩm của nó. Kunz cho rằng điều này là do nhiều tổ chức cũng đang
thực hiện ý tưởng tương tự. Cơng nghệ nổi tiếng nhất khi đó là Gopher của Đại học
Minnesota (Mỹ), cũng với tham vọng hóa giải sự phức tạp của những máy tính kết nối
Internet. Gopher được ra mắt vào mùa xuân năm 1991 và lưu thông Gopher cao hơn hẳn
so với lưu thông web trong vài năm tiếp theo.

Sự phát triển của công nghệ web so với Gopher. Nguồn: MIT
Trong thời gian đó, Berners-Lee, Jeff Groff và đồng nghiệp cũng tích cực giới thiệu
phát minh của họ tại các hội thảo, cuộc gặp gỡ...
Dự án www chỉ thực sự thăng hoa khi chuyên gia Marc Andreessen thuộc Đại học
Illinois (Mỹ) giới thiệu trình duyệt web máy tính đầu tiên vào tháng 4/1993. Trình duyệt
14


Mosaic đã q thành cơng và một số tính năng vẫn được coi là quy ước trong công nghệ
web ngày nay. Cũng vào năm 1993, Đại học Minnesota thu phí Gopher khiến người ta
bắt đầu phải tìm đến các giải pháp thay thế.
Ngoài ra, theo Ed Vielmetti, nhà nghiên cứu thuộc Đại học Michigan, ngay từ những
năm đầu, web đã chứng minh được tính hữu ích với người sử dụng thơng thường. Mọi
người có thể sử dụng các trang web để tự bộc lộ mình, điều mà những cơng nghệ khác
khơng cho phép (hình thức mới hiện nay của nó chính là blog).
Cuối năm 1994, lưu thơng web rốt cuộc cũng vượt qua Gopher và từ đó chưa bao giờ bị
tụt lại. Hiện nay, gần 100 triệu website đã xuất hiện và người ta gần như đồng nhất công
nghệ web với Net.
Kunz cho biết ý tưởng hình thành www là để tạo điều kiện cho mọi người vừa đọc vừa
đóng góp nội dung. Những cơng cụ mới như site chia sẻ ảnh, mạng xã hội, blog, các
trang wiki... đang dần hồn thành lời hứa ban đầu của nhóm chun gia phát triển web.
Và như thế, theo Kunz, web bây giờ mới chỉ bắt đầu những bước đi đầu tiên
3.2. WebBrowser

Lịch sử của các trình duyệt Web bắt đầu vào cuối thập niên 1980, khi một loạt các
công nghệ đặt nền móng cho các trình duyệt Web đầu tiên, WorldWideWeb, do Tim
Berners-Lee vào năm 1991. Sự phát triển này dựa trên các cơng nghệ phần mềm và
phần cứng hiện có, ngồi ra cũng mở ra nhiều công nghệ mới bắt đầu tư đây.
Ted Nelson và Douglas Engelbart phát triển khái niệm siêu văn bản trước khi BernersLee và CERN khá lâu. Web browser đã trở thành cốt lõi của World Wide Web.
Berners-Lee thừa nhận sự đóng góp của Engelbart.
Việc giới thiệu trình duyệt Mosaic NCSA Web vào năm 1993 – một trong
những trình duyệt web với giao diện đồ họa đầu tiên – đã dẫn tới sự bùng nổ trong
việc dùng web. Marc Andreessen, người lãnh đạo của đội Mosaic tại NCSA, sớm bắt
đầu cơng ty riêng của mình, đặt tên là Netscape, và phát hành các phiên bản
Mosaic Netscape Navigator vào năm 1994, và sau đó nhanh chóng trở thành trình
duyệt phổ biến nhất thế giới, chiếm 90% của tất cả các sử dụng Web đỉnh cao của nó.
Microsoft đã đáp trả bằng trình duyệt Internet Explorer của mình trong năm
1995 (cũng bị ảnh hưởng nhiều từ Mosaic), và đầu cuộc chiến trình duyệt đầu tiên.
Bằng việc kết hợp Internet Explorer với Windows, Microsoft đã có thể tận dụng
ưu thế của nó trong thị trường hệ điều hành để quản lý thị trường trình duyệt Web;
Internet Explorer sử dụng đạt vị trí trên 95% người dùng vào năm 2002. Internet
Explorer chiếm 60% người sử dụng trình duyệt vào Tháng Tư năm 2010 theo thống kê
của Net Applications.
Opera đầu tiên xuất hiện vào năm 1996; mặc dù nó đã khơng bao giờ đạt được
sử dụng rộng rãi, chiếm 2% thị phần trình duyệt vào tháng tư năm 2010, tuy nhiên
Opera chiếm một phần đáng kể của thị trường đang phát triển nhanh là trình duyệt
Web điện thoại di động, Oepra được cài đặt sẵn trên trên 40.000.000 điện thoại. Opera
cũng có sẵn trên một số hệ thống nhúng khác, bao gồm video game console Wii của
Nintendo.

15


Năm 1998, Netscape triển khai Mozilla Foundation trong một nỗ lực để sản xuất một

trình duyệt cạnh tranh bằng cách sử dụng mơ hình phần mềm mã nguồn mở. Đó là
trình duyệt sau nay phát triển thành Firefox, sau đó thì trình duyệt này được phát triển
khá tốt trong khi vẫn còn trong giai đoạn beta, ngay sau khi phát hành Firefox 1.0 vào
cuối năm 2004, Firefox (mọi phiên bản) đã chiếm 7,4% thị phần sử dụng trình duyệt.
Và đến tháng tư năm 2010, Firefox đã có một thị phần 25%.
Safari của Apple đã phát hành phiên bản beta đầu tiên vào tháng một năm 2003; vào
tháng 10 năm 2009, đã chi phối thị phần của trình duyệt web dựa trên việc phát triển từ
các ứng dụng của Apple, chiếm dưới 5% thị trường trình duyệt tồn bộ vào tháng
4 năm 2010. Nó được xem như là cơng cụ cho web (cịn được gọi là WebKit) để trình
diễn các tính năng và là nền tảng được ứng dụng nhiều trên thiết bị di động, bao gồm
cả hệ điều hành iPhone, Google Android, Nokia S60 và Palm WebOS.
Vào tháng 9 năm 2008, Google bắt đầu nhảy vào cuộc chiến các trình duyệt bằng trình
duyệt web Google Chrome. Đến tháng 4 năm 2010, Google Chrome đã chiếm 7% thị
phần.

16


BÀI 2: TẠO CÁC TRANG HTML
Mã bài: MĐ 20 - 02
Giới thiệu:
Ngày nay, việc thiết kế một trang web là khá đơn giản, công việc này được hỗ trợ bởi
rất nhiều công cụ đồ họa, môi trường thiết kế khác nhau. Chúng ta có thể tìm hiểu thêm
về cách thiết kế, tạo giao diện cho một trang web bằng cách tìm kiếm tài liệu hướng dẫn
cũng như phần mềm hỗ trợ trên mạng internet. Trong bài học này giới thiệu, hướng dẫn
một số kỹ năng thiết kế giao diện cho trang web sử dụng các thẻ đánh dấu định dạng
chuẩn HTML.
Mục tiêu:
 Sinh viên hiểu được cấu trúc cơ bản của một trang web HTML, cấu trúc thư mục
của một website;

 Hiểu được tác dụng và cú pháp của các thẻ HTML;
 Viết được một số trang web qui mô nhỏ với các thẻ HTML; Thực thi được các trang
HTML đó;
 Truy cập và chỉnh sửa được các đoạn mã HTML trong các trang web đã có theo các
yêu cầu;
 Nghiêm túc, tỉ mỉ, khoa học trong việc tiếp thu các kiến thức lý thuyết. Tích cực, tỉ
mỉ trong thực hành.
Nội dung chính:

1. Tạo và thực thi trang web HTML
Tạo trang HTML
Chúng ta có thể soạn thảo tài liệu HTML bằng các trình soạn thảo chuyên nghiệp như
Microsoft WebMatrix hay Sublime Text; tuy nhiên, trong quá trình học thiết kế trang
web bằng ngôn ngữ HTML, chúng ta nên dùng những trình soạn thảo văn bản đơn
giản như Notepad hay Notepad++ (trong hệ điều hành Windows) hay TextEdit (trong
hệ điều hành Mac) vì tính đơn giản và đồng thời rèn luyện cho chúng ta tính cẩn thận,
tỉ mỉ, kiên nhẫn – là những thái độ quan trọng trong quá trình học thiết kế web. Các
đoạn mã minh hoạ trong giáo trình này sẽ được soạn thảo bằng Notepad++.
Để tạo một trang HTML, chúng ta tuân theo 3 bước sau:
Bước 1: Mở Notepad++ (nếu chưa có phần mềm này trên máy tính, có thể download
miễn phí tại />Bước 2: Viết mã HTML.
Ví dụ đoạn mã HTML đơn giản sau:
1
2
3
4

<!DOCTYPE html>
<html>
<body>

Thiết kế website

17


5

Đây là trang web đầu tiên của tôi.

6
</body>
7
</html>
Viết trong Notepad++ sẽ có giao diện như sau:

+ Bước 3: Lưu đoạn mã HTML vừa soạn thảo thành tập tin HTML (chú ý phần tên tập
tin và phần mở rộng) bằng cách vào mục File > Save As (hay chọn icon Save nếu
chưa lưu trước đó) như sau:

Sau khi chọn Save As sẽ hiện ra hộp thoại Save As như sau:

18


Gõ tên tập tin (ví dụ như myfirstpage) với phần mở rộng là html hay htm trong
mục File name; chọn All types (*.*) trong mục Save as type; và chọn vị trí lưu tập tin
trong mục Save in, cụ thể như sau:

19


Sau khi lưu, nội dung tập tin HTML trong Notepad++ sẽ trông như sau:

– Mở trang HTML đầu tiên bằng trình duyệt web (web browser) như Firefox,
Chrome hay Internet Explorer như sau:
+ Nhấp chuột phải vào tập tin HTML vừa tạo;
+ Chọn mục Open with và chọn trình duyệt web dùng để hiển thị trang HTML.
Ví dụ mở trang HTML vừa tạo (myfirstpage.html) bằng trình duyệt web Chrome như
hình sau:
20


Kết quả chúng ta có:

Chú ý


Chúng ta thấy lỗi font chữ xuất hiện ở đây. Vì sao lại như thế chúng ta sẽ tìm
hiểu và khắc phục trong những bài sau.

21




Để chỉnh sửa lại nội dung của tập tin HTML, chúng ta nhấp chuột phải vào tập
tin, chọn Open withvà chọn trình soạn thảo văn bản (Notepad++).



Cách học HTML tốt nhất là xem mã HTML từ các trang web, cụ thể với một
số trình duyệt web phổ biến, việc xem mã HTML của một trang web như sau:
o

Với Chrome: nhấp chuột phải chọn View page source.

o

Với IE: nhấp chuột phải chọn View source.

o

Với Firefox: nhấp chuột phải chọn View page source.

o

Với Safari: nhấp chuột phải chọn Show page source.

2. Cấu trúc trang web HTML
HTML là một ngôn ngữ đánh dấu mô tả các tài liệu web (web pages).
+ HTML là viết tắt của Hyper Text Markup Language
+ Là một tập hợp các thẻ đánh dấu
+ Tài liệu HTML được mô tả bằng các thẻ HTML
+ Mỗi thẻ HTML mô tả nội dung tài liệu khác nhau
Cấu trúc cơ bản của một trang HTML như sau:

Diễn giải:
+ Khai báo DOCTYPE định nghĩa kiểu tài liệu là HTML
+ Thẻ <HTML> và </ HTML> mô tả một tài liệu HTML
+ Thẻ <HEAD> và </ HEAD> cung cấp thông tin về tài liệu như: diễn giải ý nghĩa
trang web, từ khóa ...
+ Thẻ <BODY> và </ BODY> mô tả nội dung trang cần hiển thị (tất cả nội dung cần
hiển thị sẽ nằm trong cặp thẻ này)

22


Tạo một trang HTML cơ bản
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

My First Heading

My first paragraph.

</body>
</html>

3. Định dạng văn bản
3.1. Các thẻ định dạng khối
3.1.1. Thẻ p
Thẻ <P> được sử dụng để định dạng một đoạn văn bản.
Cú pháp:
<P>Nội dung đoạn văn bản</P>
3.1.2. Các thẻ định dạng đề mục h1/h2/h3/h4/h5/h6
HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt
logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể
ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point.
Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. Thông thường văn bản ở đề mục cấp
5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường.
Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:
<H1> ... </H1>

Định dạng đề mục cấp 1

<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>

Định dạng đề mục cấp 2
Định dạng đề mục cấp 3
Định dạng đề mục cấp 4
Định dạng đề mục cấp 5
Định dạng đề mục cấp 6

3.1.3 Thẻ xuống dịng br
Thẻ này khơng có thẻ kết thúc tương ứng (</BR>), nó có tác dụng chuyển sang dòng
mới. Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện
liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi
như một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ <BR>
23


3.1.4 Thẻ pre
Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ <PRE>.
Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào,
ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ <PRE> sẽ có ý nghĩa
chuyển sang dịng mới (trình duyệt sẽ không coi chúng như dấu cách) Cú pháp:
<PRE>Văn bản đã được định dạng</PRE>
3.2. Các thẻ định dạng danh sách

Cú pháp:
<UL>
<LI> Mục thứ nhất
<LI> Mục thứ hai
</UL>
Có 4 kiểu danh sách:
_
_

_

Danh sách không sắp xếp ( hay không đánh số) <UL>
Danh sách có sắp xếp (hay có đánh số) <OL>, mỗi mục trong da nh sách
được sắp xếp thứ tự.
Danh sách thực đơn <MENU>

Danh sách phân cấp <DIR>
Với nhiều trình duyệt, danh sách phân cấp và danh sách thực đơn giống danh sách
khơng đánh số, có thể dùng lẫn với nhau. Với thẻ OL ta có cú pháp sau:
_

<OL TYPE=1/a/A/i/I>
<LI>Muc thu nhat
<LI>Muc thu hai
<LI>Muc thu ba
</OL>
trong đó:
TYPE =1

Các mục được sắp xếp theo thứ tự 1,

2, 3...
=a
Các mục được sắp xếp theo thứ tự a,
b, c...
=A
Các mục được sắp xếp theo thứ tự A,
B, C...
=i
Các mục được sắp xếp theo thứ tự i,
ii, iii...
Các mục được sắp xếp theo thứ tự I,
=I
II, III...
Ngồi ra cịn thuộc tính START= xác định giá trị khởi đầu cho danh sách.
24


Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi
mục trong danh sách. Thuộc tính này có thể nhận các giá trị : disc (chấm trịn đậm);
circle (vịng trịn); square (hình vng).
3.3. Các thẻ định dạng ký tự
Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm,
gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.
<B> ... </B>
<STRONG> ... </STRONG>

In chữ đậm

<I> ... </I>
<EM> ... </EM>

In chữ nghiêng

<U> ... </U>

In chữ gạch chân

<DFN>

Đánh dấu đoạn văn bản giữa hai thẻ này là
định nghĩa của một từ. Chúng thường được
in nghiêng hoặc thể hiện qua một kiểu đặc
biệt nào đó.
In chữ bị gạch ngang.

<S> ... </S>
<STRIKE> ... </STRIKE>
<BIG> ... </BIG>

<SMALL> ... </SMALL>

<SUP> ... </SUP>
<SUB> ...
</SUB>
<BASEFONT>

In chữ lớn hơn bình thường bằng cách tăng
kích thước font hiện thời lên một. Việc sử
dụng các thẻ <BIG>lồng nhau tạo ra hiệu
ứng chữ tăng dần. Tuy nhiê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ẻ <BIG> 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. Việc sử
dụng các thẻ <SMALL>lồng nhau tạo ra
hiệu ứng chữ giảm dần.
Tuy nhiê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ẻ <SMALL>
sẽ không có ý nghĩa.
Định dạng chỉ số trên (SuperScript)
Định dạng chỉ số dưới (SubScript)
Định nghĩa kích thước font chữ được sử dụng cho
đến hết văn bản. Thẻ này chỉ có một tham số
size= xác định cỡ chữ. Thẻ <BASEFONT>
khơng có thẻ kết thúc.

25