Xây dựng website giới thiệu chương trình ptit sakura

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO THỰC TẬP
TỐT NGHIỆP

Tên đề tài:

“Xây dựng website giới thiệu chương trình
PTIT-SAKURA”
Đơn vị thực tập: Trung tâm Đào tạo Quốc tế
Giáo viên hướng dẫn: Ths. Nguyễn Thị Thanh Tâm


TRUNG TÂM ĐÀO TẠO
QUỐC TẾ - CIE
                  

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập - Tự do - Hạnh phúc

PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP

Họ và tên sinh viên thực tâp : 
Đơn vị thực tập                     : Trung tâm Đào tạo Quốc tế
Thời gian thực tập                 :

NHẬN XÉT CỦA CƠ SỞ THỰC TẬP
1. Chấp hành nội quy và quy định của cơ quan: 
……………………………………………………………………………………
……………………………………………………………………………………

      ……………………………………………………………………………………

2. Ý thức học tập:
……………………………………………………………………………………
……………………………………………………………………………………
      ……………………………………………………………………………………

3. Quan hệ, giao tiếp tại đơn vị: 
……………………………………………………………………………………
……………………………………………………………………………………
      ……………………………………………………………………………………
Xác nhận của cơ quan thực tập
(Ký, ghi rõ họ tên và đóng dấu)

Hà nội , ngày tháng năm
Người đánh giá
(Ký và ghi rõ họ tên)

1


HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH
VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA
VIỆT NAM
Độc lập-Tự do-Hanh phúc

ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP

Họ và tên sinh viên: 
Lớp:
Nội dung đánh giá
1. Chấp hành kỷ luật:  (Tốt, Trung bình, hoặc Yếu)

2. Ý thức học tập:  (Tốt, Trung bình, hoặc Yếu)

3. Quan hệ, giao tiếp:  (Tốt, Trung bình, hoặc Yếu)

4. Điểm (Thang điểm 10)

Các ý kiến khác (nếu có):
Ngày     tháng     năm 20….
Giáo viên hướng dẫn thực tập
(Ký và ghi rõ họ tên)

2


LỜI CẢM ƠN 
Để có thể hồn thành kỳ thực tập vừa qua một cách tốt đẹp, trước hết em
xin cảm ơn nhà trường và các thầy cô đã tạo điều kiện cho chúng em có cơ hội
được làm việc tại Trung tâm Đào tạo Quốc tế - một nơi lý tưởng để học hỏi và
phát triển bản thân. Em cũng xin cảm ơn sự tận tình hướng dẫn của cơ Nguyễn
Thị Thanh Tâm trong q trình hồn thiện báo cáo. Đồng thời em cũng xin cảm
ơn anh Linh, anh Toàn, thầy Phạm Vũ Minh Tú và các bạn đã giúp đỡ, hỗ trợ và
chia sẻ những khó khăn mà em gặp phải trong quá trình thực tập tại Trung tâm,
qua đó đã giúp em trau dồi được rất nhiều điều mới lạ. Chắc chắn đây sẽ là
khoảng thời gian không thể quên đối với em.
Một lần nữa, em xin chân thành cảm ơn! 

3


MỤC LỤC
PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP........................1
LỜI CẢM ƠN.......................................................................................................3
MỤC LỤC..............................................................................................................4
Chương 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP................................................5
I. Giới thiệu chung.................................................................................5
II.

Cấu trúc tổ chức...........................................................................5

III. Tầm nhìn và sứ mệnh của CIE.........................................................6
a.

Tầm nhìn.....................................................................................6

b.

Sứ mệnh.......................................................................................6

c.

Những giá trị cốt lõi.....................................................................6

IV.

Các chương trình đào tạo,dự án và đối tác của CIE...........................6

a.

Đào tạo........................................................................................6

b.

Dự án...........................................................................................7

Chương 2: NỘI DUNG THỰC TẬP...................................................................8
I. Giới thiệu chung.................................................................................8
a.

Nội dung cơng việc:......................................................................8

b.

Kết quả cần đạt:...........................................................................9

II.

Q trình làm việc...........................................................................9

a.

Tiếp nhận cơng việc và nghiên cứu về chủ đề chính của website....9

b.

Tìm hiểu về website Landing Page..............................................10

c.

Tìm hiểu về HTML....................................................................11

d.

Tìm hiểu về CSS.........................................................................13

e.

Công cụ được sử dụng trong công việc........................................14

f.

Nghiên cứu hiệu ứng tạo animation............................................17

g.

Nghiên cứu về Meta Tags phục vụ tối ưu SEO............................17

Chương 3: KẾT LUẬN......................................................................................24
I. Những kết quả đạt được....................................................................24
II.

Bài học kinh nghiệm......................................................................24

III. Những điều chưa đạt được.............................................................25
4

IV.

Kết luận.........................................................................................25

TÀI LIỆU THAM KHẢO..................................................................................26

Chương 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP
I. Giới thiệu chung

Trung tâm Đào tạo Quốc tế (viết tắt là CIE) là đơn vị trực thuộc Học viện
Cơng nghệ Bưu chính Viễn thơng (PTIT), trường đại học công lập hàng đầu
trong lĩnh vực CNTT&TT tại Việt Nam. Trung tâm mang đến những cơ hội tuyệt
vời cho tất cả sinh viên của trung tâm để học tập các chương trình đào tạo quốc tế
và gia tăng cơ hội làm việc tại nước ngoài, đồng thời mang đến cho bạn sinh viên
trong nước và quốc tế các chương trình trao đổi và dịch chuyển sinh viên. Như
một phần trong cam kết của trung tâm về việc mang lại sự tiếp cận tốt nhất tới
các chương trình đào tạo quốc tế cho sinh viên trong nước và sinh viên nước
ngoài tại PTIT, CIE cung cấp các chương trình ưu việt với sự kết nối chặt chẽ với
các đối tác quốc tế với phương pháp tiếp lấy người học làm trung tâm. Đồng thời
áp dụng các các chương trình tư vấn linh hoạt được thiết kế để gắn kết sinh viên
trong suốt q trình nhằm đảm bảo sự thành cơng của các em trước, trong và sau
khi học tập tại CIE.

II. Cấu trúc tổ chức
b. Ban giám đốc trung tâm

 Giám đốc: PGS.TS. Hoàng Hữu Hạnh
5

 Phó giám đốc: ThS. Nguyễn Minh Phượng
c. Các phịng ban
 Tổ Quản lý Đào tạo: ThS. Phạm Trần Cẩm Vân, Quản lý Chương trình 
 Tổ Phát triển Dự án: ThS. Phạm Vũ Minh Tú, Quản lý Dự án 

III. Tầm nhìn và sứ mệnh của CIE
a. Tầm nhìn
Phát triển Trung tâm Đào tạo Quốc tế của PTIT trở thành một trung tâm
về quốc tế hoá trong giáo dục đại học, giáo dục định hướng nghề nghiệp và dịch
vụ đào tạo quốc tế cho xã hội.
b. Sứ mệnh
 Cung cấp các chương trình đào tạo quốc tế chất lượng để đáp ứng xu hướng
phát triển và yêu cầu thực tiễn của các tổ chức, doanh nghiệp và xã hội.
 Cung cấp các chương trình đào tạo định hướng nghề nghiệp tiêu chuẩn quốc
tế, nâng cao kỹ năng cho việc phát triển nguồn nhân lực cho các thị trường
nội địa và quốc tế.
 Cung cấp các dịch vụ về quốc tế hóa giáo dục và đào tạo có chất lượng cho
sinh viên, đáp ứng yêu cầu phát triển nhanh của thế giới hiện đại ngày nay.
c. Những giá trị cốt lõi
 Đề cao sự cởi mở để đón nhận tri thức bên ngồi.
 Tích cực chuyển đổi để làm chủ những giá trị mới
 Kiến thiết sự đổi mới sáng tạo vì một thế giới tốt đẹp hơn.

IV. Các chương trình đào tạo,dự án và đối tác của CIE
a. Đào tạo

 Chương trình đại học chất lượng cao
 Chương trình Kỹ sư CNTT bằng Tiếng Anh
 Chương trình du học chuyển tiếp dánh cho sinh viên PTIT sang học tập và

nhận bằng tại đại học AIZU, Nhật Bản

 Chương trình liên kết đào tạo cử nhân quốc tế với đại học La Trobe, Australia
 Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học AIZU, Nhât Bản
6


 Chương trình liên kết đào tạo cử nhân quốc tế với đại học Middlesex, Vương
Quốc Anh

 Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học cơng nghệ (UTS)
 Các khóa học ngắn hạn
b. Dự án
 Dự án ProEUHE – ERAMUS + JEAN MONNET
 Dự án AVIS PLUS
 Dự án EUROPE DAY 2021
 Dự án quảng bá về châu Âu qua công nghệ truyền thông đa phương tiện
c. Các đối tác của CIE
 Gameloft
 Samsung
 Microsoft
 Đại học La Trobe
 Tập đồn Bưu chính Viễn thơng Việt Nam VNPT

7


Chương 2: NỘI DUNG THỰC TẬP
I. Giới thiệu chung
Đề tài: Phát triển website giới thiệu dự án PTIT-SAKURA

a. Nội dung công việc:
Công việc 1: Khảo sát sơ bộ về môi trường và cách làm việc nơi thực tập.
Công việc 2: Nhận công việc được giao và trao đổi yêu cầu với người hướng dẫn.
Cơng việc 3: Tìm hiểu về quy trình thiết kế và phát triển một website landing
page chuẩn.
Cơng việc 4: Tìm hiểu về ứng dụng animation và cách hoạt động của SEO meta
tag trên website.
Công việc 5: Thực hiện thiết kế và ứng dụng các kiến thức đã tìm hiểu được vào
website.
Cơng việc 6: Hồn thiện báo cáo thực tập.
STT
1

2

Nội dung thực tập

Thời gian

Mục tiêu

Khảo sát sơ bộ về mơi Từ ngày 19/7 đến

Tìm hiểu về quy trình làm

trường và cách làm việc 21/7

việc, cách giao tiếp và văn

nơi thực tập

hóa làm việc của Trung tâm.

Nhận cơng việc được Từ ngày 22/7 đến

Nhận đề tài được giao, làm

giao và trao đổi yêu cầu ngày 25/7

rõ các yêu cầu cũng như

với người hướng dẫn

được hướng dẫn sơ bộ tìm
hiểu

về

quy

trình

làm

website
3

Tìm hiểu về quy trình Từ ngày 26/7 đến

Tìm hiểu về phong cách

thiết kế và phát triển một ngày 3/8

thiết kế giao diện, công cụ

website

thiết

landing

page
8

kế

cũng

như


4

chuẩn

HTML&CSS.

Tìm hiểu về ứng dụng Từ ngày 4/8 đến
animation và cách hoạt ngày 10/8

Tìm hiểu về ứng dụng của
animation trên website và
cách tối ưu hóa khả năng tìm
kiếm với SEO meta tag

động của SEO meta tag
trên website
5

Thực hiện thiết kế và Từ ngày 11/8 đến
ứng dụng các kiến thức 25/8

Bắt tay vào thực hiện thiết
kế và phát triển website

đã tìm hiểu được vào
website
6

Hoàn thiện báo cáo thực Từ ngày 12/8 đến
tập

31/8

b. Kết quả cần đạt:
 Tham gia trải nghiệm làm việc trong mơi trường thực tế.
 Hồn thành tốt cơng việc được giao.
 Tích cực trong việc trao đổi với các thành viên trong nhóm cũng như với
người hướng dẫn.
 Rút ra những kinh nghiệm sau thời gian thực tập.

II. Q trình làm việc
a. Tiếp nhận cơng việc và nghiên cứu về chủ đề chính của website
i. Giới thiệu về chương trình cầu nối Việt Nhật PTIT-SAKURA
Với bối cảnh quan hệ hợp tác giữa Việt Nam và Nhật Bản ngày càng phát
triển thì nhu cầu về lực lượng chuyên gia kỹ sư Công nghệ Thông tin thành thạo
tiếng Nhật đang trở nên thực sự cần thiết đối với cả thị trường Nhật Bản lẫn thị
trường Việt Nam. Do đó, số lượng người đăng ký học tiếng Nhật tại Việt Nam và
du học sinh Việt tại Nhật Bản cũng ngày càng tăng cao.
Chính vì lẽ đó, chương trình liên kết đào tạo giữa Học viện Cơng nghệ
Bưu chính Viễn thơng PTIT và Học viện ngôn ngữ Meros, Tokyo, Nhật Bản đã
9


được hình thành, với mong muốn vừa rút ngắn thời gian đào tạo cho sinh viên
PTIT để các bạn sinh viên vừa có thể thành thạo ngoại ngữ này trong thời gian
ngắn nhất,
vừa đáp ứng được chuẩn đầu ra cho các doanh nghiệp CNTT tại Nhật Bản cũng
như các doanh nghiệp CNTT có vốn đầu tư Nhật Bản tại Việt Nam yêu cầu.
ii. Giới thiệu về Học viện ngôn ngữ Meros, Tokyo Nhật Bản
Tiền thân là trường đào tạo Giáo viên dạy tiếng Nhật cho người nước
ngoài, sau mở rộng thành trường đào tạo trực tiếp cho sinh viên nước ngoài sang
Nhật du học. Trường thành lập từ năm 1984 khi chính phủ Nhật bắt đầu triển
khai chính sách mời gọi Du học sinh nước ngoài tới Nhật, với 37 năm kinh
nghiệm đào tạo cho hơn 10,000 sinh viên nước ngoài đến từ 23 quốc gia trên Thế
giới, Meros sẽ là lựa chọn đáng tin cậy nhất cho sinh viên khi học tiếng Nhật.
Chương trình giảng dạy đặc biệt dành riêng cho Du học sinh ngành CNTT
duy nhất tại Nhật Bản với 7 năm kinh nghiệm đào tạo chuyên sâu cho sinh viên
khối CNTT có mong muốn đi làm tại các doanh nghiệp CNTT tại Nhật Bản.
Đảm bảo đầu ra tại các Doanh nghiệp IT tại Nhật Bản, với mức lương cam kết tối

thiểu từ 2200$/tháng đến 3500$/tháng.
b. Tìm hiểu về website Landing Page
i. Landing page là gì?
Landing Page là một trang web đơn mà cá nhân hoặc doanh nghiệp tạo ra
nhằm mục đích tối ưu hóa tỉ lệ chuyển đổi.
Chuyển đổi ở đây có thể là: Mua hàng, lấy thông tin khách hàng, tải tài
liệu, cài ứng dụng, tham gia sự kiện, đăng ký đặt trước, … Hoặc bất cứ mục tiêu
tiếp thị nào khác.
ii. Phân loại Landing page
Có 3 loại landing page chính yếu: Landing page thu thập khách hàng tiềm
năng, landing page bán hàng, landing page trung gian chuyển đổi. Mỗi loại
landing page lại phục vụ cho những mục đích khác nhau và chúng cũng có những
thành phần giao diện khác nhau:

10


 Landing page thu thập khách hàng tiềm năng: Có chức năng chính là thu thập
thơng tin cơ bản của khách hàng tiềm năng như họ tên, email, số điện thoại để
sử dụng cho các hoạt động marketing sau đó. Chính vì lẽ đó nên loại landing
page này thường có một biểu mẫu đăng ký và luôn đi kèm với một lợi ích trao
đổi với khách hàng để thuyết phục họ điền thông tin vào như ebook, webinar,
hội thảo offline, …
 Landing page bán hàng: Có chức năng chính là thuyết phục khách hàng đưa
ra quyết định mua hàng ngay trên landing page. Đặc điểm của loại landing
page này là bao gồm những chi tiết như lợi ích khách hàng, đặc điểm nổi bật,
phản hồi khách hàng, … giúp khách hàng có đầy đủ thơng tin để đưa ra quyết
định mua hàng.
 Landing page chuyển đổi trung gian: Với mục tiêu là dẫn dắt khách hàng
chuyển hướng tới trang chuyển đổi chính. Có đặc điểm là chỉ sử dụng nút kêu

gọi hành động để chuyển hướng tới trang khác, không sử dụng biểu mẫu đăng
ký. Ngoài ra, trong thương mại điện tử, trang Landing Page trung gian sẽ
cung cấp đầy đủ thông tin về sản phẩm và dẫn dắt khách hàng về trang giỏ
hàng của website chính.
Chương trình PTIT-SAKURA có một trang đích là trang web đăng ký
dành cho sinh viên. Kết hợp các đặc điểm đã phân tích bên trên, ta có thể nhận
thấy “Landing page chuyển đổi trung gian” là loại website phù hợp nhất với
chương trình vì tính đơn giản, dễ tiếp cận và tương đối thuận lợi để triển khai.
iii. Quy trình phát triển landing page:
 Bước 1: Xác định mục tiêu chuyển đổi.
 Bước 2: Xây dựng nội dung trang web để thuyết phục khách hàng thực hiện
hành động.
 Bước 3: Thiết kế giao diện Landing page với nội dung đã thiết lập ở bước 2.
 Bước 4 : Phát triển website với HTML& CSS.
c. Tìm hiểu về HTML
i. Định nghĩa về HTML

11


HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang
web, nghĩa là các mẩu thơng tin được trình bày trên World Wide Web.
ii. Ưu điểm của HTML
 Nguồn tài nguyên hỗ trợ lớn.
 Hoạt động mượt mà trên phần lớn các trình duyệt phổ biến hiện nay.
 Cách sử dụng dễ dàng.
 Các markup trong HTML ngắn gọn, tính đồng nhất cao.
 Mã nguồn mở, miễn phí.
 Là một chuẩn web do W3C vận hành.
 Dễ dàng tích hợp với nhiều loại ngơn ngữ.

iii. Nhược điểm của HTML
 Mỗi trang HTML phải được tạo riêng biệt.
 Khó kiểm sốt được việc đọc và hiển thị tập tin HTML của trình duyệt. Điển
hình như một vài trình duyệt lỗi thời khơng thực hiện được render tag.
 Một số ít trình duyệt chậm cập nhật các tính năng hỗ trợ mới của HTML để
có thể đọc, hiểu file một cách chính xác.
iv. Một số thành phần trong HTML

 Elements: Các element là các chỉ định xác định cấu trúc và nội dung của các
đối tượng trong một trang. Một số yếu tố được sử dụng thường xuyên hơn
bao gồm nhiều cấp độ tiêu đề (được xác định là 

đến 

) và đoạn văn
(được xác định là 

), …
 Tags: Việc sử dụng các dấu ngoặc nhỏ hơn và lớn hơn bao quanh một
element sẽ tạo ra cái được gọi là thẻ. Có 2 loại thẻ chính trong HTML là thẻ

12


mở và thẻ đóng. Ví dụ thể mở: <div>. Ví dụ thẻ đóng: </div>. Nội dung giữa
thẻ mở và thẻ đóng là nội dung chính của element đó.
 Attributes: Các attribute là các thuộc tính được sử dụng để cung cấp thơng
tin bổ sung về một element. Các thuộc tính phổ biến nhất bao gồm thuộc tính
id, xác định một element; các thuộc tính class, phân loại một element; thuộc
tính src, trong đó xác định một nguồn cho nội dung nhúng; và thuộc tính href,
cung cấp một tham chiếu hyperlink đến một tài nguyên được liên kết.
d. Tìm hiểu về CSS
i. Định nghĩa CSS
CSS (Cascading Style Sheets): định nghĩa về cách hiển thị của một tài liệu
HTML. CSS đặc biệt hữu ích trong việc thiết kế Web. Nó giúp cho người thiết kế
dễ dàng áp đặt các phong cách đã được thiết kế lên bất kì page nào của website

một cách nhanh chóng, đồng bộ.
ii. Ưu điểm của CSS
 Một stylesheet thường sẽ được lưu trữ trong bộ nhớ cache của trình duyệt,
và do đó có thể được sử dụng trên nhiều trang mà không được nạp lại, tăng
tốc độ tải và giảm độ truyền dữ liệu qua mạng.
 Dễ dàng định dạng lại hoặc cải tiến thêm.
 Có tính linh hoạt cao.
 Tính nhất qn cao, có thể ảnh hưởng và tác động lên nhiều thành phần của
một trang web một cách dễ dàng và đồng bộ.
iii. Nhược điểm của CSS
 Thiếu các biến, gây một số hạn chế nhất định trong việc thay đổi màu sắc
hoặc độ cao …
 Các trình duyệt khác nhau có thể hiển thị CSS theo nhiều cách khác nhau.
iv. Một số thành phần trong CSS

13


 Selectors: có tác dụng chỉ định chính xác thành phần nào trong HTML để
có thể tác động chính xác lên nó. Các selector thường nhắm vào một giá trị
thuộc tính như id hay class hoặc là một phần tử ví dụ như

hay

.
 Properties: Khi một phần tử được chọn, một thuộc tính sẽ xác định các
kiểu sẽ được áp dụng cho phần tử đó. Tên thuộc tính nằm sau selector,
trong dấu ngoặc nhọn {} và ngay trước dấu hai chấm. Có rất nhiều thuộc
tính chúng ta có thể sử dụng, chẳng hạn như background, color, fontsize, height, và width, …
 Values: Dùng để xác định và đo lường giá trị của một properties.
e. Công cụ được sử dụng trong công việc
i. Công cụ thiết kế website: Figma

14

Figma là công cụ được ra mắt vào năm 2016, với giao diện thân thiện và
tính dễ sử dụng, Figma đã nhanh chóng nổi lên và trở thành một cơng cụ thiết kế
giao diện người dùng phổ biến trong cộng đồng cơng nghệ tồn cầu. Một số
thương hiệu lớn sử dụng Figma cho tới thời điểm hiện tại có thể kể đến như
Microsoft, Twitter, GitHub, Dropbox …
Khác với những công cụ thiết kế trước đây, Figma được thiết kế trên nền
tảng đám mây. Đây là cơng cụ có tính năng tương tự như Sketch, tuy nhiên nó hỗ
trợ làm việc nhóm tốt hơn.
Một số tính năng của nổi bật của Figma:
 Figma có thể hoạt động tương thích trên tất cả các hệ điều hành có trình duyệt
web, từ Windows, Linux, Macs cho đến Chromebooks đều có thể dùng cơng
cụ này. Tính tới thời điểm này, đây là cơng cụ thiết kế duy nhất có thể làm
được điều này. Tất cả người dùng có thể chia sẻ, mở hay chỉnh sửa một file
Figma dễ dàng dù đang dùng bất kỳ hệ điều hành nào.
 Là một công cụ browser-based, vậy nên mọi người trong team có thể dễ dàng
làm việc với nhau tương tự như làm việc trên Google Docs. Mỗi thành viên
trong nhóm đang xem hoặc chỉnh sửa file, Figma sẽ hiển thị đại diện bằng
một avatar tròn trên thanh công cụ với tên riêng. Đây là một chức năng rất
tiện khi bạn muốn biết ai đang làm việc trên file.
 Người dùng có thể chia sẻ file Figma bằng việc gửi link, người nhận link sẽ
có khả năng truy cập vào file đó. Nếu bạn lựa chọn Link to selected frame
người nhận sẽ nhìn thấy ngay frame bạn đang chọn lúc chia sẻ. Đây là tính
năng được rất nhiều designer sử dụng.
 Tất cả mọi thứ đều được lưu trữ online một cách tự động trong khi người
dùng đang làm việc trên Figma.
 Hiện nay, Figma có một kho plugin có sẵn phong phú và miễn phí.
 Tích hợp sẵn khả năng Prototype nhanh chóng và dễ dàng.

15


ii. Công cụ phát triển HTML&CSS cho trang web: Visual Studio Code

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux
và macOS, Visual Studio Code được phát triển bởi Microsoft. Nó được xem là
một sự kết hợp hồn hảo giữa IDE và Code Editor.
Một số tính năng nổi bật của Visual Studio Code:
 Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình như C/C++, C#, F#,
Visual Basic, HTML, CSS, JavaScript, …Vì vậy, nó dễ dàng phát hiện và đưa
ra thơng báo nếu chương chương trình có lỗi.
 Các trình viết code thơng thường chỉ được sử dụng hoặc cho Windows hoặc
Linux hoặc Mac Systems. Nhưng Visual Studio Code có thể hoạt động tốt
trên cả ba nền tảng trên.
 Trong trường hợp lập trình viên muốn sử dụng một ngơn ngữ lập trình khơng
nằm trong số các ngơn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích
mở rộng. Điều này vẫn sẽ khơng làm giảm hiệu năng của phần mềm, bởi vì
phần mở rộng này hoạt động như một chương trình độc lập.
 Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn. Với
Visual Studio Code, người dùng có thể hồn tồn n tâm vì nó dễ dàng kết
nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.
 Visual Studio Code hỗ trợ nhiều ứng dụng web. Ngồi ra, nó cũng có một
trình soạn thảo và thiết kế website.

16


 Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng. Visual
Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.

 Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải
chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao
tác.
 Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục
– mặc dù chúng không hề liên quan với nhau.
f. Nghiên cứu hiệu ứng tạo animation
i. Giới thiệu
WOW.js được phát triển bởi Matthieu Aussaguel, một kỹ sư lập trình web
hiện đang sống và làm việc tại Thái Lan. WOW.js là sự kết hợp giữa jQuery và
thư viện Animation.css được viết sẵn các kịch bản. Khi bạn scroll website thì
jQuery sẽ bắt sự kiện và kích hoạt chuyển động, các đối tượng sẽ chuyển động và
diễn hoạt với sự hỗ trợ của CSS 3 Animation và CSS 3 Transition.
ii.

Cách sử dụng

 Bước 1: Liên kết tới thư viện animation Animate.css với đoạn code:

 Bước 2: Kích hoạt Wow.js:

 Bước 3: Tải file tổng hợp animation và chèn vào folder website
 Bước 4: Chọn loại animation và kích hoạt

g. Nghiên cứu về Meta Tags phục vụ tối ưu SEO
17


i. Định nghĩa
Meta tag là các thẻ được sử dụng trong các tài liệu HTML và XHTML để
cung cấp siêu dữ liệu (metadata) có cấu trúc về một trang web. Chúng là một

phần trong thẻ <head> của trang web và nó có thể được đọc bởi các cơng cụ tìm
kiếm và trình thu thập thơng tin web.
Nhiều phần tử Meta với các thuộc tính khác nhau có thể được sử dụng trên
cùng một trang giúp cho các cơng cụ tìm hiểu hiểu trang web đó nói về cái gì và
có được phép thu thập và lập chỉ mục hay không.

ii. Các loại meta tags
 Thẻ title
Đây là nhan đề của trang web, cho biết chủ đề của trang web là gì. Nội
dung của thẻ <title> được hiển thị trong thanh bar trên cùng của cửa sổ trình
duyệt.

18


 Thẻ meta description
Thẻ này nêu tóm tắt nội dung của trang web, thể hiện chi tiết hơn thẻ
nhan đề ở trên. Tuy nhiên không nên quá dài cũng như quá ngắn.

 Thẻ meta content-type
Dùng để khai báo hệ thống ký tự trên trang web sử dụng HTML. Nó
giúp các trình duyệt biết được nội dung trang web được mã hóa ký tự ra sao,
để có thể hiện thị thơng tin một cách tốt nhất. Cú pháp:

Trên HTML5, hệ thống hỗ trợ đơn giản hơn với cú pháp sau:

 Thẻ meta viewport
Thẻ này giúp tối ưu website cho phù hợp với nhiều thiết bị, hướng dẫn
trình duyệt cách điều khiển kích thước cũng như tỉ lệ thu phóng.
Cú pháp:

 Social meta
Thẻ này có hiệu quả trong việc kết nối website với các trang mạng xã
hội như Facebook, Twitter, … Khi ai đó chia sẻ URL trang web lên mạng xã
hội, nội dung trong thẻ Social meta sẽ giúp các trang mạng biết cách hiển thị
thông tin sao cho hiệu quả.
 Meta robot
Mục đích của thẻ này là báo cho Google có thực hiện hay khơng việc
lập chỉ mục hay theo dõi trang. Cú pháp:

 Meta language

19