Giáo trình Thiết kế web (Nghề: Thiết kế đồ họa - Cao đẳng): Phần 1 - Trường Cao đẳng Cơ điện Xây dựng Việt Xô

BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN
TRƢỜNG CAO ĐẲNG CƠ ĐIỆN XÂY DỰNG VIỆT XÔ
KHOA CÔNG NGHỆ THÔNG TIN VÀ NGOẠI NGỮ

GIÁO TRÌNH

MƠN HỌC: THIẾT KẾ WEB
NGHỀ: THIẾT KẾ ĐỒ HOẠ
TRÌNH ĐỘ CAO ĐẲNG


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.


LỜI NĨI ĐẦ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ế web 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à ngoà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.

Ninh Bình 2019
Biên Soạn
Thạc sỹ: Phạm Anh Đức


MỤC LỤC
Bài 1: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ ............................................. 9
1. Internet và dịch vụ Internet ........................................................................... 9
1.1. Internet. .............................................................................................. 9
1.2. Lợi ích của Internet ............................................................................ 9
1.3. Dịch vụ Internet.................................................................................. 9
2. Giới thiệu về WWW.................................................................................... 11
3. Quy trình xây dựng Website ....................................................................... 12
4. Web page, Website ...................................................................................... 12
5. Trình duyệt Web.......................................................................................... 13
5.1. Khái niệm trình duyệt Web .............................................................. 13
5.2. Các trình duyệt Web ......................................................................... 13
5.3. Một số thao tác cơ bản với trình duyệt Web .................................... 13
Bài 2: GIAO DIỆN WEB .............................................................................. 21
1. Các loại giao diện Website .......................................................................... 21
2. Bố cục giao diện Web ................................................................................. 21
3. Xây dựng giao diện Web theo yêu cầu ............................................... 22
Bài 3: CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ ........................................... 22
1. Giới thiệu HTML ........................................................................................ 23
2. Các thẻ cơ bản trong HTML ....................................................................... 23
2. 1. Các thẻ khung. ................................................................................. 23
2.2. Thẻ định dạng văn bản ..................................................................... 23
2.3. Thẻ căn chỉnh nội dung .................................................................... 25

2.4. Liên kết ............................................................................................. 25
2.5 Thẻ ảnh .............................................................................................. 25
2.6 Bảng................................................................................................... 26
2.7 Form .................................................................................................. 26
3. Giới thiệu CSS ........................................................................................... 34
4.Các lệnh cơ bản trong CSS .......................................................................... 37
4.1. Background ...................................................................................... 38
4.2. Định dạng chữ. ................................................................................. 41
4.3. Các lệnh CSS khác. .......................................................................... 45
Bài 4: MÃ NGUỒN MỞ ............................................................................... 63
1. Giới thiệu mã nguồn mở ............................................................................. 64
1.1. Khái niệm mã nguồn mở. ................................................................. 64
4: Quản trị nội dung Website Wordpress ........................................................ 69
4.1. Làm việc với AdminCP ...................................................................... 69
4.2. Cài đặt Plugin cho WordPress ....................................................... 71
4.3. Cài đặt Themes cho WordPress ..................................................... 74
4.4. Chỉnh giao diện bằng CSS trong Theme ..................................... 79
4.5.Tuỳ chỉnh header va background .................................................... 82
4.6. Hướng dẫn viết bài mới Wordpress .................................................. 82
4.7.Cách tạo menu trong Wordpress .................................................... 86


4.9. Hướng dẫn tạo trang mới (Add new pages) ................................. 90
4.12. Hướng dẫn Widget Wordpress .................................................. 102
4.15. Tối ưu hoá tìm kiếm (SEO) .......................................................... 111
4.18. 21 website để tìm theme miễn phí ......................................... 127
Bài 5: XUẤT BẢN VÀ DUY TRÌ WEBSITE ........................................... 128
1. Đăng ký tên miền, hosting. ....................................................................... 128
1.1. Tên miền – domain......................................................................... 128
1.2. Hosting. .......................................................................................... 128

1.3. Đăng ký dịch vụ ............................................................................. 128
2. Cài đặt Website lên Server ........................................................................ 128
2.1. Xác nhận thông tin server. ............................................................. 128
2.2. Đưa mã nguồn lên server. .............................................................. 128
3. Phát triển Website. .................................................................................... 128
3.1. Kiểm tra và thử nghiệm nội dung .................................................. 128
3.2. Phát triển nội dung. ........................................................................ 128
4. Bảo mật Website ....................................................................................... 128
4.1. Hiểm họa đối với Website. ............................................................. 128
4.2. Các giải pháp. ................................................................................. 128


MƠ ĐUN: Thiết kế Web
Mã mơ đun: MĐ 38
Vị trí tính chất mơ đun:
- Vị trí: Mơ đun được bố trí sau khi sinh viên học xong các mơn học
chung, các môn cơ sở chuyên ngành đào tạo chuyên môn nghề.
- Tính chất: Là mơ đun chun mơn nghề
Mục tiêu mơ đun:
- Về kiến thức
+ Trình bày được cấu trúc của một Website;
+ Trình bày được quy trình xây dựng và phát triển Website;
+ Trình bày được các vấn đề liêu quan đến an toàn và bảo mật Website.
- Về kỹ năng: Tạo được Website dựa trên các ngôn ngữ HTML, CSS,
Javascrip, XML...;
- Về năng lực tự chủ và trách nhiệm
+ Bố trí làm việc khoa học đảm bảo thời gian xây dựng và vận hành
Website.
+ Cần cù, chủ động trong học tập, đảm bảo an toàn trong học tập.
Nội dung mô đun:

1. Nội dung tổng quát và phân phối thời gian:
Thời gian
Thực
Số
hành, thí
Tên chƣơng mục
Tổng
Lý
Kiểm tra
TT
nghiệm,
số
thuyết
thảo luận,
Bài tập
Bài 1: Các định nghĩa và
3
3
thuật ngữ
1. Internet và dịch vụ Internet
0.5
0.5
1.1. Internet.
1.2. Lợi ích của Internet.
1.3. Dịch vụ Internet.
2. Giới thiệu về WWW
0.5
0.5
2.1. Dịch vụ WWW.
2.2. Giao thức trong WWW.

1
0.5
0.5
3. Quy trình xây dựng Website
4. Web page, Website
0.5
0.5
4.1. Web page.
4.2. Website.
5. Trình duyệt Web
0.5
0.5
5.1. Khái niệm trình duyệt
Web.
5.2. Các trình duyệt Web
5.3. Một số thao tác cơ bản với


trình duyệt Web
6: Phần mềm trong thiết kế
Web
Bài 2: Giao diện Web
1. Các loại giao diện Website
2

2. Bố cục giao diện Web
3. Xây dựng giao diện Web
theo yêu cầu
Bài 3: Ngôn ngữ HTML CSS
1. Giới thiệu HTML

2. Các thẻ cơ bản trong HTML
2.1. Các thẻ khung.
2.2. Thẻ định dạng văn bản.
2.3. Thẻ căn chỉnh nội dung.
2.4. Liên kế - Link.
2.5. Ảnh – Img
2.6. Bảng – Table
3 2.7. Biểu mẫu – Form
2.8. Multimedia, video...
3.Giới thiệu CSS
4.Các lệnh cơ bản trong CSS
4.1. Định dang khung.
4.2. Định dạng chữ.
4.3. Sắp xếp các khối.
5. Xây dựng giao diện Web tử
file .PSD
6. Xây dưng Web chuẩn SEO

4

Bài 4: Mã nguồn mở
1. Giới thiệu mã nguồn mở
1.1. Khái niệm mã nguồn mở.
1.2. Các loại mã nguồn mở
2.Web server
2.1. Khái niệm Web server.
2.2. Tác dụng Web Server.
2.3. Cài đặt Web server.
3. Cài đặt Wordpress
3.1. Giới thiệu Wordpress

3.2. Cài đặt Wordpress
4: Quản trị nội dung Website

0.5

0.5

16

4

1

1

3

1

2

12

2

10

41

11

28

2

0.5

0.5

14

4

9

1

0.5

0.5

12

3

9

10

2

7

4

1

3

23

8

14

0.5

0.5

3

1

2

2

1

1

6

2

4

12

1

1


5

Wordpress
4.1. Tạo danh mục.
4.2. Tạo bài viết.
4.3. Quản lý bài viết, quản lý
ảnh.
4.4. Quản lý người dùng.
4.5. Quản lý bố các thành phần
khác
5. Cấu trúc mã nguồn
Wordpress
6: Theme Wordpress
6.1. Thay đổi Theme
Wordpress
6.2. Tìm và cài đặt Theme

Wordpress
6.3. Chỉnh sửa Theme
Wordpress
7: Plugin Wordpress
7.1. Tác dụng của Plugin
Wordpress
7.2. Các Plugin cơ bản
Bài 5: Xuất bản và duy trì
Website
1. Đăng ký tên miền, hosting.
1.1. Tên miền – domain.
1.2. Hosting.
1.3. Đăng ký dịch vụ
2. Cài đặt Website lên Server
2.1. Xác nhận thông tin server.
2.2. Đưa mã nguồn lên server.
3. Phát triển Website.
3.1. Kiểm tra và thử nghiệm
nội dung
3.2. Phát triển nội dung.
4. Bảo mật Website
4.1. Hiểm họa đối với Website.
4.2. Các giải pháp.
Cộng

3

1

2

6

1

4

2.5

1.5

1

7

3

4

0.5

0.5

2

1

1

3

1

2

1.5

0.5

1

90

29

58

1

3


Bài 1
CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ
Mã bài: MĐ 21 – 01.
1. Internet và dịch vụ Internet
1.1. Internet.
Internet là một hệ thống thơng tin tồn cầu có thể được truy nhập cơng cộng
gồm các mạng máy tính được liên kết với nhau. Hệ thống này truyền thông
tin theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao

thức liên mạng đã được chuẩn hóa (giao thức IP). Hệ thống này bao gồm
hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện
nghiên cứu và các trường đại học, của người dùng cá nhân và các chính phủ
trên tồn cầu.
1.2. Lợi ích của Internet
Internet có rất nhiều lợi ích đối với cuộc sống thường ngày:
 Đọc báo, xem tin tức Online
 Lướt Facebook, xem phim, nghe nhạc trực tuyến
 Gửi nhận Mail, tìm kiếm thơng tin trên mạng
 Mua bán, học tập, thậm chí chữa bệnh qua mạng
 …
Nói tóm lại, Internet mang lại CỰC KỲ tiện ích cho con người, nó cung cấp
một khối lượng thông tin Khổng Lồ. Các cách thức thông thường để truy cập
Internet là quay số, băng rộng, không dây, vệ tinh và qua điện thoại cầm tay.
1.3. Dịch vụ Internet
1.3.1 Web, E-Mail, FTP, hội thoại
Website - 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. Website có thể được xây dựng từ các tệp tin HTML
(website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (website
động). Website có thể được xây dựng bằng nhiều ngơn ngữ lập trình khác
nhau (PHP,.NET, Java, Ruby on Rails...).
Email - Thư điện tử (từ chữ Electronic mail) là một hệ thống chuyển
nhận thư từ qua các mạng máy tính.
Email là một phương tiện thông tin rất nhanh. Một mẫu thông tin (thư
từ) có thể được gửi đi ở dạng mã hố hay dạng thông thường và được
chuyển qua các mạng máy tính đặc biệt là mạng Internet. Nó có thể chuyển
mẫu thông tin từ một máy nguồn tới một hay rất nhiều máy nhận trong cùng
lúc.

Ngày nay, email chẳng những có thể truyền gửi được chữ, nó cịn có
thể truyền được các dạng thơng tin khác như hình ảnh, âm thanh, phim, và


đặc biệt các phần mềm thư điện tử kiểu mới cịn có thể hiển thị các email
dạng sống động tương thích với kiểu tệp HTML.
FTP (File Transfer Protocol - Giao thức truyền tập tin) 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
(chẳng hạn như Internet - mạng ngoại bộ - hoặc intranet - mạng nội bộ).
Hoạt động của FTP cần có hai máy tính, một máy chủ và một máy khách).
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, thì khởi đầu một liên kết với máy 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. Vì giao thức FTP là một giao thức chuẩn
cơng khai, cho nên bất cứ một công ty phần mềm nào, hay một lập trình viên
nào cũng có thể viết trình chủ FTP hoặc trình khách FTP. Hầu như bất cứ
một nền tảng hệ điều hành máy tính nào cũng hỗ trợ giao thức FTP. Hiện
nay trên thị trường có rất nhiều các trình khách và trình chủ FTP, và phần
đơng các trình ứng dụng này cho phép người dùng được lấy tự do, không
mất tiền.
1.3.2 Gopher, News Group, Newsletter và Các dịch vụ phổ biến khác
Gopher là dịch vụ tương đối mới của Internet, Gopher cho phép truy
nhập thông tin trên Internet theo thực đơn. Thông tin trên Gopher có thể là
văn bản hay đồ họa.
Newsgroup Nhóm thảo luận : Dịch vụ cho phép nhóm người dùng
trao đổi, san sẻ ý tưởng và truyền đạt thông tin với những người đồng ý nghĩ
về một đề tài mà tất cả các thành viên của nhóm đều quan tâm.

Usenet Tập hợp vài ngàn nhóm thảo luận (Newgroup) trên Internet.
Những người tham giao vào Usenet sử dụng một chương trình đọc tin
(NewsReader) để đọc các thư của người khác, gởi thư của mình cũng như trả
lời các thư khác trong Usenet.
Mailing List (danh sách thư tín) là danh sách địa chỉ thư điện tử của một
nhóm người có nhu cầu chia sẻ các ý tưởng với những người cùng quan
điểm. Chỉ cần gửi một bức thư đến địa chỉ một người trong mailing list, thì
tất cả những người có tên trong danh sách thư đều nhận được và sự hồi đáp
thư cũng diễn ra tương tự. Hai điểm khác biệt cơ bản giữa mailing list và
newgroup là:
- Trong mailing list, các thư đến được gửi trực tiếp vào trong hộp thư của
bạn, vì thế hộp thư của bạn có khả năng biị đầy một cách nhanh chóng, với
Newsgroup thì khơng gặp tình trạng này.
- Với Newsgroup, bất cứ một người nào trong nhóm cũng có thể xem các
thơng tin của nhóm, cịn mailing List mang tính cá nhân và những người
khác khơng thể xem các thơng tin của người đó được.
Mailing List là cách đơn giản để tìm kiếm các thơng tin thích hợp và cập
nhật thường xuyên các chủ đề thú vị mà bạn quan tâm.


Telnet (Telephone Internet) Là dịch vụ cho phép đăng nhập vào các máy
trên mạng như một thiết bị đầu cuối (terminal). Chương trình Telnet thực
hiện kết nối giữa máy tính của người dùng đến một máy tính khác trên
Internet để khai thác các tài nguyên hoặc để điều khiển hoạt động của máy
tính đó. Để sử dụng Telnet, ban cần phải có tài khoản truy cập với tên người
sử dụng (username) và mật khẩu (password) do người quản trị hệ thống cấp
phát
VoIP (Voice over Internet Protocol) Kỹ thuật chuyển tải giọng nói qua
giao thức Internet, hay cịn gọi là Điện thoại Internet. Lợi ích to lớn của cơng
cị VoIP là có thể gọi điện thoại hoặc gửi Fax đi nước ngoài nhưng chỉ phải

trả giá cước điện thoại nội hạt. Để sử dụng dịch vụ VoIP, đòi hỏi bạn phải có
những kiến thức nhất định về tin học và máy tính, phải có phần mềm hỗ trợ
dịch vụ và đặc biệt là phải được IAP, ISP nơi bạn sử dụng Internet mở cổng
cho dịch vụ này.
Dịch vụ điện thoại ở Việt Nam đã được Viettel (Công ty khai thác viễn
thông của Qn Đội) và VNPT (Tổng cơng ty Bưu chính Viễn thông Việt
Nam) đưa vào khai thác. Dịch vụ 178 của Viettel giúp tiết kiệm 43% chi phí
điện thoại truyền thông khi thực hiện các cuộc đàm thoại đường dài (liên tỉn
hoặc quốc tế). Tương tự Viettel, dịch vụ VoIP 171 là dịch vụ điện thoại
đường dài sử dụng giao thức Internet của Tổng cơng ty Bưu chính Viễn
thơng Việt Nam (VNPT).
VIDEO CONFERENCE (hội nghị truyền hình, hội nghị hình đàm, Hội
nghị từ xa…). Dịch vụ giúp những người ở các vị trí đĩa lý khác nhau có thể
trị chuyện và nhìn thấy nhau thơng qua một phong ảo, nơi mọi người gặp gỡ
và trao đổi với nhau các thông tin cần thiết. Ví dụ, khi tiến hành hội nghị
khoa học từ xa, có thể triệu tập nhiều nhà khoa học thuộc nhiều quốc gia trên
thế giới cùng họp mà các nhà khoa học đó k hơng cần thiết phải rời khỏi nơi
cư trú.
Với dịch vụ Video Conference, chúng ta có thể thực hiện các hội nghị, hội
thảo từ xa; điều hành, giao ban từ xa; giới thiệu sản phẩm từ xa, chuẩn đốn
bệnh từ xa… Đây cịn là dịch vụ cho các gia đình hay tập thể muốn truyền
các hình ảnh vào những dip cưới hỏi, ma chay, các lễ kỷ niệm… đến người
thân ở xa.
WAP (Wỉeless Application Protocol) Giao thức ứng dụng khơng dây,
được hình thành trong khoảng mười năm trở lại đây. WAP là một hệ thông
thông tin di động toàn cầu (GMS – Global System for Mobile
Communications) tiện lợi cho người sử dụng điện thoại di động và những
người có nhu cầu kết nối vào Internet thông qua điện thoại di động.
2. Giới thiệu về WWW
2.1. Dịch vụ WWW.

Ngày nay người ta dùng máy tính như một cơng cụ rất hữu ích để truy cập
Internet, chủ yếu là tìm kiếm thơng tin. Thơng tin này có thể là văn bản, hình
ảnh, âm thanh hay thơng tin đa phương tiện…


Nhu cầu tìm kiếm thơng tin ngày càng nhiều đã đưa ra vấn đề: làm thế
nào dễ dàng sử dụng máy tính truy cập Internet như một cơng cụ phục vụ đắc
lực cho việc tra cứu, tìm kiếm thơng tin trên mạng thơng tin rộng lớn nhất tồn
cục.
Vấn đề trên trở nên dễ dàng hơn bởi ý tưởng siêu văn bản (Hypertext) –
văn bản thông minh nhà tin học Ted Nelson đề xuất vào năm 1965. Đến 1989,
dự án chính thức được thực hiện bởi một kỹ sư trẻ người Anh tên là Tim
Berners – Lee.
World Wide Web (www) là một mạng các tài nguyên thông tin. WWW
dựa trên 3 cơ chế để các tài nguyên trở nên sẵn dùng cho người xem càng rộng
rãi nhất càng tốt, đó là:
- Cơ chế đặt tên cùng dạng đối với việc định dạng các tài nguyên trên
WWW (như các URL).
- Các giao thức, để truy cập tới các tài nguyên qua WWW (như HTTP).
- Siêu văn bản, để dễ dàng chuyển đổi giữa các tài nguyên (như HTML).
2.2. Giao thức trong WWW
3. Quy trình xây dựng Website
Để xây dựng Website cần trải qua 1 số bước cơ bản sau:
 Xác định giao diện, đặc tính cần thiết của website
 Chọn tên miền, hosting cho website
 Tiến hành thiết kế website
 Chạy thử, fix lỗi, hoàn thiện
 Lên kế hoạch điều hành, phát triển website
 Bảo trì, cập nhật website thường xuyên
4. Web page, Website

4.1 Web page
Web page (trang web) là một trang trên website, nó có thể là 1 bài viết, 1 chuyên
mục hoặc 1 trang thông tin bất kỳ. Các bạn lướt web sẽ thấy mỗi website thường
có rất nhiều các nội dung khác nhau như trang giới thiệu, trang thông tin liên hệ,
các bài viết giới thiệu về sản phẩm, dịch vụ,… mỗi trang nội dung có một
URL (đường link) riêng biệt, ta gọi mỗi trang đó là một web page.
4.2. Website
Website còn gọi là trang web hoặc 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. Trang mạng có thể được xây dựng từ các tệp tin HTML
(trang mạng tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (trang mạng
động).


5. Trình duyệt Web
5.1. Khái niệm trình duyệt Web
Trình duyệt web là một phần mềm ứng dụng cho phép người sử dụng xem và
tương tác với các văn bản, hình ảnh, đoạn phim, nhạc, trị chơi và các thơng tin
khác ở trên một trang web của một địa chỉ web trên mạng toàn cầu hoặc mạng
nội bộ. Văn bản và hình ảnh trên một trang web có thể chứa siêu liên kết tới các
trang web khác của cùng một địa chỉ web hoặc địa chỉ web khác. Trình duyệt
web cho phép người sử dụng truy cập các thông tin trên các trang web một cách
nhanh chóng và dễ dàng thơng qua các liên kết đó. Trình duyệt web đọc định
dạng HTML để hiển thị, do vậy một trang web có thể hiển thị khác nhau trên các
trình duyệt khác nhau.
5.2. Các trình duyệt Web
Internet Explorer, Mozilla Firefox, Safari, Google Chrome,Opera, Avant
browser, Maxthon, Konqueror, Lynx, Flock, Arachne, Epiphany, KMeleon, Midori và AOL Explorer.
Một số trình duyệt web hiện nay cho Điện thoại di động bao gồm Mozilla

Firefox, Safari, Google Chrome,Opera, UCWeb.
5.3. Một số thao tác cơ bản với trình duyệt Web
Hướng dẫn này được dùng trên phần mềm Google Chrome
Cách 1: Sử dụng Google để tra cứu thơng tin nhanh chóng
Bước 1: Vào thanh địa chỉ của trình duyệt google bằng cách di chuyển con trỏ
chuột tới khung và click chuột phải để điền thông tin:

Bước 2: Điền nội dung mong muốn tìm kiếm tại khung địa chỉ của trình duyệt:


Bước 3: Nhấn Enter và bạn sẽ thấy một danh sách liên quan để nội dung vừa
gõ:

Bước 4: Xem nội dung vừa liệt kê bằng cách click con trỏ chuột vào link trên
danh sách. Sẽ được chuyển tới 1 trang website cụ thể.
Cách 2: Mở một cửa sổ thực hiện tính năng ẩn danh (Incognito)
Đầu tiên nhấp vào nút 3 vạch đen ở góc trên bên phải trình duyệt.


- Nhấp chọn vào New Incognito Window

Tính năng ẩn danh là trong những phương pháp ưu việt để giúp người dùng
khơng bị rị rỉ thơng tin cá nhân khi lướt web trên trình duyệt Chrome đồng thời
nó cũng khơng lưu bất kỳ thông tin nào vào lịch sử và cache của trình duyệt.
Ngồi ra ta có thể thực hiện được điều này ta cần phải sử dụng tới tổ hợp phím
Ctrl + Shift + N khi cửa sổ Chrome đang mở.
Cách 3: Đánh dấu trang làm việc yêu thích nhanh chóng
Bước 1: Tới một trang web mà bạn u thích để thực hiện đánh dấu bằng cách
gõ địa chỉ hoặc điền thơng tin để tìm kiếm tới trang này:

Bước 2: Nhấp vào ngôi sao tận cùng bên phải của thanh địa chỉ.


Bước 3: Điền tên khung name hoặc có thể để mặc định để khi bạn muốn
Bookmark đi tới và vào xem thông tin -> bấm Enter để lưu trang đánh dấu.

Bước 4:Để cho hiện hoặc ẩn trang đánh dấu song song ngay trên trình duyệt thig
ta thực hiện bằng cách nhấp vào biểu tượng 3 vạch đen ở phía trên bên phải của
trình duyệt và bấm vào Show bookmark bab hoặc nhấn Ctrl+Shifi+ B.


Bước 5:Để xem người quản lý đánh dấu những trang nào trên trình duyệt này thì
ta thực hiện bằng cách nhấp vào biểu tượng 3 vạch đen ở phía trên bên phải của
trình duyệt chrome và bấm vào Bookmark Manager.

Cách 4: Thực hiện chức năng kiểm soát ký tự gõ
Bước 1: Vào một hộp gõ văn bản trên mạng internet với trình duyệt chrome.

Bước 2: Điền các ký tự vào khung văn bản này.

Bước 3: Click con trỏ chuột trái vào vị trí xác định đã viết sai để sửa nội dung.


Cách 5: Thao tác với Tab trên trình duyệt Chrome
Bước 1: Từ cửa sổ làm việc hiện tại ta click chuột trái vào góc phải chọn vào
new tab hoặc dùng phím nóng Ctrl +T để thêm nhiều cửa sổ làm việc và đóng
tab hiện tại thì dùng Ctrl+W.

Bước 2: Khơng những thêm cửa sổ mới mà cịn có thể di chuyển các cửa sổ ra
riêng rẽ bằng cách dùng con trỏ chuột trái gìn tab muốn di chuyển và kéo thả.

Bước 3: Sắp xếp vị trị của các cửa sổ trên trình duyệt bằng cách dùng con trỏ
chuột trái gìn tab muốn di chuyển và kéo đặt.


Trên đây là tồn bộ cách sử dụng trình duyệt web Google Chrome một cách chi
tiết nhất. Với thủ thuật trên đây thì sẽ giúp ích cho những ai đang làm việc với
trình duyệt này. Ngồi ra, để sử dụng Chrome hiệu quả bạn có thể đặt Google
Chrome làm trình duyệt mặc định trên máy tính. Ít ai biết rằng, Chrome hay
Firefox và Opera đều có những tính năng ẩn khá thú vị mà bạn sẽ không thể
khám phá được nếu như chưa được chỉ dẫn. Nếu những tính năng ẩn trên
Chrome khá hữu dụng như vơ hiệu hóa flash hoặc tắt extenstion thì Firefox cũng
có những tính năng ẩn như lướt web ẩn danh, lướt web không cần mạng, khá
tiện lợi.



Bài 2
GIAO DIỆN WEB
Mã bài: MĐ 21 – 02.
Mục tiêu
Nội dung
1. Các loại giao diện Website
2. Bố cục giao diện Web
Một số thành phần thông thường mà tất cả các website đều có là:

Header: header là phần đầu tiên của trang web, chứa logo trang web,
banner chính ngang, menu phụ như thơng tin, ơ tìm kiếm, ngày tháng, thời
tiết,…
 Navigation: thanh điều hướng (hay là menu chính), là một thanh ngang,

chứa các mục chính (thể loại chính) của trang web. Phần menu này rất
quan trọng giúp người dùng và cơ chế tìm kiếm định hình hiểu rõ về cấu
trúc website của bạn.
 Content: chứa nội dung chính website.
 Sidebar: thanh bên, chứa các phần liên quan đến nội dung chính như các
menu phụ, các bài viết liên quan, quảng cáo,… Một số website có 1 thanh
bên, 2 thanh bên hoặc hơn nữa là tùy theo bố cục.
 Footer: phần chân (đáy) trang, chứa thơng tin về trang web như tình trạng
bản quyền
 Ngồi ra cịn nhiều thành phần khác, bạn sẽ tự học được thông qua kinh
nghiệm thực tế khi thiết kế và làm việc với các dự án web.
Bố cục HTML5
Người ta có xu hướng phổ biến làm giao diện trên HTML5 vì HTML5 có chứa
các thẻ ngữ nghĩa, giúp cơ chế tìm kiếm hiểu sát hơn về cấu trúc website. Các
thẻ mới ở HTML dùng để xây dựng bố cục gồm:












Thẻ header: định nghĩa phần đầu của trang web
Thẻ nav: thanh điều hướng (menu)
Thẻ section: định nghĩa 1 phần website

Thẻ article: định nghĩa nội dung bài viết độc lập
Thẻ aside: định nghĩa phần bên cạnh nội dung (như sidebar-thanh bên)
Thẻ footer: định nghĩa đáy (chân) trang
Thẻ details: định nghĩa thông tin chi tiết
Thẻ summary: định nghĩa tiêu đề tóm tắt của 1 phần tử details

3. Xây dựng giao diện Web theo yêu cầu
Để xây dựng giao diện Website bạn cần tìm hiểu kỹ u cầu từ phía người dùng.

Bài 3


CÁC ĐỊNH NGHĨA VÀ THUẬT NGỮ
Mã bài: MĐ 21 – 03.
1. Giới thiệu HTML
HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với
các mẩu thơng tin được trình bày trên World Wide Web. Cùng với CSS và
JavaScript, HTML tạo ra bộ ba nền tảng kỹ thuật cho World Wide Web. HTML
được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng
trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành
một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì.
Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các
nhà phát triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát
triển tiếp với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web.
2. Các thẻ cơ bản trong HTML
2. 1. Các thẻ khung.
Dưới đây là một đoạn HTML cơ bản
<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>

</HEAD>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
</BODY>
</HTML>
Lưu dưới dạng file .html hoặc .htm
Một tài liệu html gồm 3 phần cơ bản:
Phần html: Mọi tài liệu html phải bắt đầu bằng thẻ mở html <html> và kết thúc
bằng thẻ đóng html </html>
Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>.
Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web.
Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title>.
Tiêu đề là phần khá quan trọng. Khi người dùng tìm kiếm thông tin, tiêu đề của
trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm.
Phần thân: phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình ảnh
và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt đầu
bằng thẻ <body> và kết thúc bằng thẻ </body>
2.2. Thẻ định dạng văn bản
2.2.1 Thẻ tiêu đề
Thẻ tiêu đề được là một thẻ cơ bản và quan trọng trong HTML nó nổi bật hơn
với các phần tử còn lại trong văn bản, trong HTML có 6 thẻ tiêu đề lần lượt từ

đến

, như ví dụ dưới.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Qua ví dụ trên có thể thấy thẻ

có kích thước lớn nhất và giảm dần đến

. Thông thường một tài liệu HTML chuẩn SEO có một thẻ

chứa tiêu
đề quan trọng nhất của bài, 2 thẻ

trở lên hỗ trợ cho thẻ

và các

,

,

.
2.2.2 Đoạn văn bản
Đoạn văn bản được định nghĩa trong cặp thẻ

, phần lớn nội dung của
trang web nằm trong cặp thẻ này. Nội dung văn bản nằm trong cặp thẻ này được
hiểu là một đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định.
2.2.3 Các thẻ định dạng chữ viết
Trong một văn bản bạn để ý có thể có chữ được in đậm, in nghiêng thậm chí
là gạch ngang ... ví dụ

Đây là các thẻ định dạng chữ viết

<strong>Đây là chữ in đậm</strong>
<i>Đây là chữ in nghiêng</i>
<u>Đây là chữ in gạch chân</u>
<strike>Đây là chữ in gạch ngang chữ viết</strike>
Giải thích ví dụ
- Thẻ <strong>: In đậm chữ viết.
- Thẻ <i>: In nghiêng chữ viết.
- Thẻ <u>: Gạch chân chữ viết.
- Thẻ <strike>: Gạch ngang chữ viết.
Và một số thẻ khác nữa
2.2.4 Thuộc tính style định dạng chữ viết
Mặc dù việc làm đẹp cho website đã có các file css giải quyết, nhưng một văn
bản HTML thơng thường cũng có thể trang trí cho chữ viết bằng thuộc tính
style. Thuộc tính style có thể đặt trong bất kỳ thẻ HTML nào và giá trị của các
thuộc tính là các thuộc tính css như bình thường.
Cấu trúc thuộc tính <tên thẻ style="tên thuộc tính: giá trị">
Màu chữ
Để thiết lập màu chữ ta có thể sử dụng thuộc tính color, giá trị của nó có thể là

tên tiếng anh hoặc mã HEX.
<span style="color: #000">chữ màu đen</span>
Màu nền
Cách sử dụng như màu chữ, để thiết lập sử dụng thuộc tính background-color
<div style="background-color: red">
Chữ có nền màu đỏ
</div>
Kích thƣớc chữ


Sử dụng thuộc tính font-size, và giá trị là số kèm theo đơn vị. Đơn vị có thể là
px, %, pt, hoặc em nhưng thường sử dụng px.

Chữ có kích thước 16px

Font chữ
Sử dụng font-family với giá trị là tên font chữ có trên máy tính, các font chữ cơ
bản như Arial, Helvetica, Time New Roman, Verdana. Có thể để một hoặc nhiều
kiểu chữ làm dự phòng.
<span style="font-family: Helvetica, Arial">Font chữ Arial</span>
Căn lề văn bản
Sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify.
<span style="text-align: center">Canh giữa văn bản</span>
2.3. Thẻ căn chỉnh nội dung
2.4. Liên kết
Để tạo được liên kết trong tài liệu HTML ta sẽ sử dụng cặp thẻ <a></a> chứa
các tham số như ví dụ dưới.
<a href="" title="tuhocweb" target="_blank">nhấp vào
đây</a>
Ý nghĩa các thuộc tính
- href: Chứa đường dẫn thư mục, địa chỉ website của tài liệu muốn liên kết, nếu
muốn truy cập một tài liệu trên cùng một cấp thì chỉ cần ghi tên-tập-tin.định

dạng.
- title: Tiêu đề của liên kết nó sẽ hiển thị khi rê chuột vào liên kết.
- target: Xác định nơi mở tài liệu, với các giá trị như _self (mở tài liệu trên cửa
sổ hiện tại, mặc định), _blank (mở tài liệu trên cửa sổ mới), _top (mở tài liệu
trong nội dung trang hiện tại), _parent (mở tài liệu trên khung trình duyệt mẹ
của nó).
Thẻ tạo liên kết <a> cịn có nhiều thuộc tính nữa nhưng đây là những thuộc tính
cơ bản của nó.
Bên trong thẻ <a> có thể chứa nội dung siêu văn bản bảo gồm cả thẻ tiêu đề, thẻ
hình ảnh...
Liên kết neo
Liên kết neo là một liên kết trong tài liệu HTML sẽ dẫn đến một vị trí trong
cùng tài liệu mà khơng phải tải lại trang hoặc mở một tài liệu mới.
- Khu vực được neo, được khai báo ở bất kỳ thẻ nào với thuộc tính id.
- Liên kết neo, được khai báo bằng thẻ <a> chỉ khác thuộc tính href thêm # vào
trước tên id của khu vực cần truy cập đến ví dụ
<a href="#id-lien-ket">Liên kết neo</a>
2.5 Thẻ ảnh
Tag <img /> dùng để nhúng một image vào văn bản HTML
Tag <img /> có 2 thuộc tính cần thiết là src và alt, trong đó:
src: đường dẫn tham chiếu tới image.