Tìm hiều về html, css, javascript, xây dựng một website phát nhạc

ĐẠI HỌC CÔNG NGHỆ GIAO THÔNG VẬN TẢI
KHOA CÔNG NGHỆ THÔNG TIN

-----     -----

BÁO CÁO THỰC TẬP CHUYÊN NGÀNH, THỰC TẬP DOANH
NGHIỆP,THỰC TẬP KỸ THUẬT PHẦN MỀM,
THỰC TẬP TỐT NGHIỆP
NGÀNH: CƠNG NGHỆ THƠNG TIN

ĐỀ TÀI :

TÌM HIỀU VỀ HTML, CSS, JAVASCRIPT, XÂY DỰNG MỘT WEBSITE
PHÁT NHẠC

Hà Nội – 2023

MỤC LỤC
LỜI CẢM ƠN................................................................................................................................................3
LỜI MỞ ĐẦU............................................................................................................................................4
CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ CÔNG TY.............................................................................5
1.

Giới thiệu chung.............................................................................................................................5
1.1 Lịch sử phát triển.........................................................................................................................6
1.2 Tầm nhìn......................................................................................................................................7


1.3 Sứ mệnh........................................................................................................................................7
1.4 Giá trị cốt lõi................................................................................................................................7
2.

Mơ hình tổ chức và đội ngũ nhân sự............................................................................................8

3.

Sản phẩm, dịch vụ.........................................................................................................................9
3.1

Sản phẩm................................................................................................................................9

3.2 Dịch vụ........................................................................................................................................10
4.

Đối tác, khách hàng tiêu biểu......................................................................................................14

CHƯƠNG 2. GIỚI THIỆU VỀ HTML CSS JS...................................................................................15
1. GIỚI THIỆU VỀ HTML.........................................................................................................................15
1.1 Khái niệm...................................................................................................................................15
1.2 Lịch sử........................................................................................................................................15
1.3. Cách thức hoạt động.................................................................................................................15
1.4.Ưu và nhược điểm của HTML..................................................................................................16
1.5 Vai trị của HTML trong lập trình Web..................................................................................17
2 Giới thiệu về CSS.................................................................................................................................17
2.1. Khái niệm..................................................................................................................................17
2.2 Lịch sử........................................................................................................................................17
2.3 Cách thức hoạt động của CSS...................................................................................................18
2.4 Ưu và nhược điểm của CSS.......................................................................................................20
2.5 Vai trò của CSS trong lập trình................................................................................................22
3 Giới thiệu về Javascript.......................................................................................................................22
3.1 Khái niệm...................................................................................................................................22

3.2 Lịch sử........................................................................................................................................22
3.3 Cách thức hoạt động của Javascript........................................................................................23
3.4 Ưu và nhược điểm của Javascript............................................................................................23
4 Mối quan hệ giữa HTML CSS và JS......................................................................................................24
CHƯƠNG 3: XÂY DỰNG WEBSITE PHÁT NHẠC..........................................................................27
1. Khái niệm website.............................................................................................................................27
2. Quy trình thiết kế một website..........................................................................................................28
3. Thiết kế website phát nhạc................................................................................................................29


3.1 Giới thiệu....................................................................................................................................29
3.2 Phân tích nội dung.....................................................................................................................29
3.4 Giao diện website.......................................................................................................................31
CHƯƠNG 4. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN.......................................................................35
1. Kết luận..............................................................................................................................................35
2. Hướng phát triển...............................................................................................................................35
TÀI LIỆU THAM KHẢO.......................................................................................................................37

LỜI CẢM ƠN
Trong thời gian thực tập và làm báo cáo thực tập, em đã nhận được nhiều sự giúp đỡ,
đóng góp ý kiến và chỉ bảo nhiệt tình của thầy cơ, gia đình và bạn bè.
Trước hết em xin chân thành cảm ơn thầy giáo Lê Trung Kiên giảng viên Khoa Công
nghệ Thông tin, Trường Đại học Công Nghệ Giao Thông Vận Tải, người đã trực tiếp,
hướng dẫn, nhận xét, giúp đỡ em trong suốt quá trình thực hiện đề tài.
Em xin chân thành cảm ơn các anh chị trong công ty, cảm ơn anh Phạm Văn Tuyến –
CƠNG TY CỔ PHẦN TẬP ĐỒN GIẢI PHÁP SAO MAI – người đã hướng


dẫn trực tiếp, chia sẻ kiến thức với em trong q trình thực tập tại cơng ty, mặc dù cơng
việc của anh rất nhiều những anh đã dành thời gian để hướng dẫn tận tình cho em nhanh

chóng làm quen với môi trường trong công ty cũng như kiến thức và quy trình làm việc
trong quá trình thực tập.
Xin chân thành cảm ơn ban giám hiệu nhà trường, các thầy cơ trong Khoa Cơng nghệ
Thơng tin và các phịng ban nhà trường đã tạo điều kiện tốt nhất cho em cũng như các
bạn khác trong suốt thời gian học tập và làm báo cáo.
Cuối cùng em xin chân thành cảm ơn tới CƠNG TY CỔ PHẦN TẬP ĐỒN GIẢI
PHÁP SAO MAI, ban lãnh đạo của cơng ty và các phịng ban đã tạo điều kiện cho em
được thực tập tại Cơng ty. Do thời gian thực hiện có hạn, kiến thức cịn hạn chế, trình độ
chun mơn cịn yếu, nên trong quá trình thực tập cũng như làm đề tài khơng tránh được
những sai sót nhất định.
Em rất mong q công ty và các thầy cô cùng các bạn sinh viên có thể góp ý để em có
thể hồn thiện tốt hơn và làm đề tài hoàn thiện hơn trong quá trình thực tập này.
Em xin chân thành cảm ơn !

Sinh viên thực hiện
Nguyễn Quốc Khánh

LỜI MỞ ĐẦU
Trong bối cảnh cuộc cách mạng công nghệ thông tin đang lan tỏa và thay đổi sự
phát triển của xã hội, việc sở hữu một trang web đáng tin cậy đã trở thành yếu tố
không thể thiếu đối với hầu hết các tổ chức và doanh nghiệp. Website không chỉ là
một công cụ giới thiệu dịch vụ hay sản phẩm mà cịn đóng vai trò là cầu nối quan
trọng giữa doanh nghiệp và khách hàng, mang đến những trải nghiệm tuyệt vời và
tối ưu hóa tương tác giữa hai bên.
Trong khn khổ thực tập chuyên ngành, em đã nhận được cơ hội thực hành tạo
ứng dụng web, một bước đi quan trọng và thú vị trong hành trình chinh phục ngành
cơng nghệ thơng tin. Đề tài này không chỉ là một phần của chương trình đào tạo,


mà cịn là cơ hội giúp chúng tơi khám phá sâu hơn về quy trình phát triển web, rèn

luyện kỹ năng thực tế và ứng dụng kiến thức đã học vào thực tiễn.


CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ CÔNG TY
1. Giới thiệu chung
Cơng ty cổ phần Tập đồn Giải pháp Sao Mai được thành lập vào tháng
02/2002 là Công ty chuyên nghiệp trong lĩnh vực cung cấp dịch vụ công
nghệ thông tin, tư vấn hạ tầng kỹ thuật, công nghiệp và quy hoạch giao
thông, cung cấp các giải pháp công nghệ thông tin như: viễn thông, quản lý
doanh nghiệp, ERP, CRM, hệ thông tin địa lý GIS, các hệ thống bán lẻ,
quản trị doanh nghiệp và các giải pháp về hành chính công, cung cấp hệ
thống giải pháp phần mềm quản lý tập trung như: phần mềm quản lý tài sản
đường bộ, phần mềm quản lý thông tin quy hoạch xây dựng, phần mềm
quản lý thông tin tuyển quân, dân quân tự vệ, phần mềm quản lý hệ thống
giao thơng thơng minh...

Hình 1.1 Logo công ty SSG

Đồng thời, SAOMAI cũng là một trong những đơn vị uy tín trong lĩnh vực FA tự
động hóa các nhà máy (Factory Automation), chế tạo máy, tích hợp hệ thống, gia
cơng cơ khí, tủ điều kiển và cung cấp các giải pháp phần mềm quản lý sản xuất,
đọc và quản lý mã vạch, quản lý chi phí nội bộ, xử lý hình ảnh/ Video...


Trong suốt 20 năm hoạt động, SAOMAI luôn khao khát khám phá giới hạn của bản
thân với định hướng trở thành Tập đồn cơng nghệ, phát triển bền vững trên cơ sở
kết hợp sức mạnh trí thức, tính đồn kết tập thể và công nghệ ở tầm cao mới.
Đến nay, SAOMAI đã quy tụ được đội ngũ đông đảo các chun gia kỹ thuật,
chun gia tư vấn có trình độ chun mơn cao có nhiều năm kinh nghiệm trong các
lĩnh vực CNTT khác nhau và đã từng trực tiếp tham gia thiết kế, triển khai vận

hành hệ thống CNTT lớn, hệ thống phần mềm chuyên ngành cho nhiều khách hàng
là các cơ quan Chính phủ như các Sở - Ban - ngành, Bộ cơng an, Ngân hàng, Tập
đồn, Cơng ty và các Doanh nghiệp trong nước và nước ngoài (Nhật Bản, Mỹ,..)

1.1 Lịch sử phát triển
Được thành lập năm 2002, là một trong những doanh nghiệp tiên phong trong lĩnh
vực xuất khẩu phần mềm sang thị trường Nhật Bản và Mỹ, SAOMAI đã và đang
triển khai các phần mềm quản lý, phần mềm ứng dụng và các website database cho
nhiều cơ quan, , tổ chức và các tổng công ty lớn ở thị trường trong nước. Qua chất
lượng và dịch vụ các sản phẩm của mình, SAOMAI đã và đang khẳng định được vị
trí của mình đối với thị trường trong và ngồi nước. Bên cạnh đó, chúng tơi cũng
đang từng bước phát triển một cách bền vững để trở thành Tập đoàn SAOMAI
chuyên cung cấp những giải pháp và dịch vụ trong lĩnh vực Công nghệ thông tin và
Công nghệ cao. Năm 2003: Hợp tác liên kết với Tập đồn JSS Nhật Bản (Nihon
Software Service) sau đó thành lập liên doanh JSSI, liên minh với các nhà máy cơ
khí Việt Nam để nâng cao năng lực sản xuất, tính cạnh tranh của Công nghiệp Việt
Nam, khai thác thị trường Nhật Bån.
Năm 2002: Thành lập Công ty phần mềm SAOMAI.
Năm 2009: Thành lập Công ty liên doanh với đối tác Đan Mạch. SAVAI GROUP
(www.savaigroup.com)
Năm 2013: Tham gia Câu lạc bộ Hợp tác CNTT Việt Nam – Nhật Bản (VJC)
04/2013: Được Hiệp hội phần mềm và dịch vụ CNTT Việt Nam (VINASA) trao
tặng giải thưởng Sao Khuê dành cho Phần mềm quản lý hợp đồng chuyên dụng
dành cho ngân hàng và các định chế tài chính.
05/2013: Được Tổ chức Quốc tế Business Initiative Directions (B.I.D) công bố
SAOMAISOFT nhận giải thưởng quốc tế INTERNATIONAL QUALITY
SUMMIT AWARD – xếp hạng vàng.


Ngày 10/01/2014: Hiệp hội doanh nghiệp nhỏ và vừa Việt Nam chứng nhận Công

ty cổ phần phần mềm Sao Mai được tặng danh hiệu “THƯƠNG HIỆU SẢN
PHẨM, DỊCH VỤ VIỆT NAM PHÁT TRIỂN BỀN VỮNG”.
04/2014: Được Hiệp hội phần mềm và dịch vụ CNTT Việt Nam (VINASA) trao
tặng giải thưởng Sao Khuê dành cho Giải pháp quản lý thông tin và điều hành
doanh nghiệp – SEI (Solution for Executive Internal), xếp hạng 4 sao trong lĩnh
vực: Các sản phẩm, giải pháp phần mềm mới 2013-2014 của Việt Nam.
1.2 Tầm nhìn
・SaoMai Solutions Group trở thành Tập đồn Cơng Nghệ Cao hàng đầu thị
trường về lĩnh vực Công nghệ Thông tin & Cơng nghệ cao về Tự Động Hóa &
Computer Vision.
・Trở thành một Tập đoàn với Hệ sinh thái mở rộng, hướng tới hợp tác cộng sinh,
toàn diện với các đối tác.
1.3 Sứ mệnh
SaoMai Solutions Group mang tới cho Khách hàng và Đối tác sự Hợp tác chuyên
nghiệp và kết quả Cùng thắng.
1.Chi phí phù hợp.
2.Chất lượng ổn định theo Tiêu chuẩn.
3.Triển khai và Báo cáo theo quy trình.
1.4 Giá trị cốt lõi
Để hiện thực hóa Tầm Nhìn và Sứ Mệnh, chúng tôi đã xây dựng 8 Giá Trị Cốt Lõi
làm nền cho việc phát triển Kinh doanh cũng như Xây dựng mối quan hệ với các
đối tác, nhân viên, khách hàng, cộng đồng…
-

KHÁCH HÀNG LÀ TRUNG TÂM.
HỢP TÁC CHUYÊN NGHIỆP.
KÝ LUẬT LÀ SỨC MẠNH.
TÍNH HỆ THỐNG.
CHÍNH TRỰC.
TƯ DUY CÙNG THẮNG.

.HỌC HỎI VÀ SỬA CHỮA.
TRI THỨC ĐA DẠNG.


2. Mơ hình tổ chức và đội ngũ nhân sự

Hình 2.1 Mơ hình tổ chức cơng ty SSG

SAOMAI hiện có 138 cán bộ cơng nhân viên có bằng Thạc sỹ, kỹ sư, cử
nhân làm việc tại văn phòng Hà Nội và Kyoto. Thành cơng của cơng ty có được là
nhờ kinh nghiệm, sự chuyên nghiệp của đội ngũ cán bộ và chất lượng, hiệu quả của
các giải pháp công ty cung cấp.
Đội ngũ cán bộ quản lý tư vấn nghiệp vụ và kỹ thuật đơng đảo, có kiến thức do
Microsoft, Oracle, SAP đào tạo, được tu nghiệp hàng năm tại Nhật bản và kinh
nghiệm từ nhiều dự án thực tế. Đội ngũ chuyên gia của SAOMAI cũng đã được đào
tạo về các phương pháp phát triển, triển khai và có đủ kỹ năng về những công nghệ
tiên tiến mới nhất của ORACLE, SAP, IBM, Microsoft...


Với đội ngũ tâm huyết, năng động và có nhiều kinh nghiệm như hiện nay,
SAOMAI có khả năng triển khai nhiều dự án cùng lúc cho các khách hàng của
mình. Cùng với những kinh nghiệm đã triển khai các dự án cực kỳ phức tạp,
SAOMAI cam két song hành với sự phát triển của khách hang

Hình 2.2 Nhân sự cơng ty SSG

3. Sản phẩm, dịch vụ
3.1 Sản phẩm
SAOMAI là đơn vị tư vấn giải pháp hạ tầng kỹ thuật, quy hoạch giao thông,
quản lý tài sản và nâng cao năng lực, là đối tác phân phối và triển khai các giải

pháp thông tin địa lý - GIS, Quản trị doanh nghiệp - ERP của các hãng cung
cấp hàng đầu thế giới và trong nước. Với sự nỗ lực không ngừng vươn lên
trong các giai đoạn phát triển của mình, đến nay hệ thống triển khai các giải
pháp của Công ty CP Tập đoàn Giải Pháp SAO MAI được coi là ưu việt nhất
với các phương pháp đào tạo khoa học, công nghệ cập nhật kịp với sự phát
triển liên tục của lĩnh vực công nghệ thông tin.
+ Sản xuất: Sản xuất và triển khai phần mềm trong các lĩnh vực:
+ An ninh quốc phòng, an ninh giám sát, an ninh tích hợp + Quản lý tài sản đường
bộ
+ Quản lý thông tin quy hoạch xây dựng, cơ sở dữ liệu cấp thốt nước
+ Quản lý các lĩnh vực ngành cơng thương
+ Quản lý hệ thống giao thông thông minh


+ Hệ thống ghi âm, ghi hình có âm thanh
+ Quản lý và điều hành doanh nghiệp
+ Gia công và xuất khẩu các dự án phần mềm (outsourcing và Offshoring) cho các
đối tác Nhật bản, Mỹ và Châu Âu.
+ Kinh doanh: Cung cấp các thiết bị máy chủ, lưu trữ và bảo mật
- Máy chủ IBM
- Máy chủ HP
- Máy chủ Dell
- Linh kiện Server, linh kiện máy tính - Thiết bị lưu trữ, thiết bị bảo mật, thiết bị
mạng, CNTT
3.2 Dịch vụ
+ Dịch vụ tư vấn:
-Tư vấn khảo sát, lập dự án thiết kế, giám sát thi công các cơng trình cấp thốt
nước, xử lý chất thải, mơi trường, hạ tầng kỹ thuật, xây dựng dân dụng và công
nghiệp, bao gồm:
+ Khảo sát địa hình, địa chất cơng trình, địa chất thủy văn

+ Lập dự án đầu tư
+ Thiết kế cơ sở, thiết kế thi công
+ Quy hoạch, thiết kế kiến trúc cơng trình... kế hệ thống quản lý tài sản
đường bộ Tư vấn khảo sát, lập dự án thiết Tư vấn môi trường và xã hội:
+ Lập báo cáo đánh giá tác động môi trường, môi trường chiến lược, kế
hoạch quản lý môi trường
+ Điều tra, khảo sát kinh tế xã hội Tư vấn hỗ trợ kỹ thuật xây dựng, tăng
cường năng lực:
+ Tư vấn quản lý dự án + Tư vấn lập hồ sơ mời thầu, kế hoạch đấu thầu,
đánh giá hồ sơ dự thầu đấu thầu.
+ Tư vấn đánh giá các dự án đầu tư xây dựng, điều tra đánh giá các dị nghiên
cứu phát triển cơng nghệ cấp thốt nước và kỹ thuật mơi trường...
+ Tư vấn chiến lược Công nghệ thông tin (CNTT)


- Một trong những lĩnh vực có bề dày kinh nghiêm của SAOMAI là tư vấn chiến
lược CNTT và xây dựng kế hoạch tổng thể ứng dụng CNTT cho các doanh nghiệp.
Các chuyên gia từng tu nghiệp ở nước ngoài như Nhật bản, Mỹ, Dan Mạch, Hàn
Quốc,... của chúng tôi đã hỗ trợ cho các khách hàng những phương án đầu tư ứng
dụng CNTT theo cách hiệu quả nhất.
+ Tư vấn khảo sát, lập dự án, xây dựng khung cơ sở dữ liệu, thiết kế cơ sở,
thiết kế thi công...
- Tư vấn khảo sát, lập dự án, xây dựng khung cơ sở dữ liệu cho: hệ thống quản lý
tài sản đường bộ, hạ tầng kỹ thuật, quy hoạch giao thông, tư vấn môi trường, xã hội
và tư vấn hỗ trợ kỹ thuật, xây dựng, tăng cường năng lực...
+ Tư vấn thiết kế, thi công lắp đặt hệ thống an ninh giám sát:
- Tư vấn, thiết kế, triển khai thi công lắp đặt hệ thống an ninh giám sát, an ninh
tích hợp: Hệ thống giao thông thông minh trên các tuyến đường cao tốc, hệ thống
camera giám sát cho Trường học, Bệnh viện, bến xe, hệ thống an ninh giám sát tại
một số điểm trọng yếu trong các Bộ, cơ quan ban ngành Nhà nước. - Cung cấp thiết

bị, thi công lắp đặt hệ thống báo động, báo cháy, quản lý ra vào tự động tại các Khu
Trung tâm thương mại, khu đơ thị, tịa nhà văn phịng...
+ Tư vấn thiết kế, xây dựng hệ thống thông tin quản lý:
- Thiết kế và xây dựng các hệ thống mạng máy tính (LAN, WAN); Thiết lập hệ
thống máy chủ Server Farms, hệ thống mạng DMZ; Công nghệ VPN, các giải pháp
bảo mật cho WAN; Xây dựng các ứng dụng quản lý cho hệ thống theo yêu cầu
khách hàng...
+ Tư vấn, xây dựng giải pháp Trung tâm tích hợp dữ liệu (Data Warehouse):
- Data Warehouse là một công nghệ cao cấp và tiên tiến nhất để trợ giúp công
việc tập hợp dữ liệu biến động theo thời gian và tổ chức các dữ liệu này trong một
khơng gian nhiều chiều. Ngồi ra các công cụ của Data Warehouse sẽ tạo ra điều
kiện cho việc khai thác, phân tích, tìm kiếm và đào sâu dữ liệu và các liên quan
giữa dữ liệu bằng các giao diện “kéo thả” rất dễ dùng.
+ Cung cấp thiết bị, dịch vụ tư vấn, khảo sát thi công lắp đặt và giải pháp:
- Hệ thống giao thông thông minh (ITS)
- Giải pháp an ninh tổng thể
- Hệ thống an ninh quản lý giao thơng bằng phạm vi hình ảnh
+ Đào tạo & cung cấp nguồn nhân lực


DANH SÁCH DỰ ÁN TIÊU BIỂU
S

Tên HĐ/Dự án

Chủ đầu tư

TT

G

hiện

T
thực

1

Dịch vụ tư vấn xây dựng khung cơ sở
dữ liệu đường bộ, xây dựng 1 hệ thống và lập
kế hoạch quản lý tài sản đường bộ. Dự án
VRAMP

Tổng
cục
Đường Bộ Việt Nam

2
017-nay

2

Sửa chữa, nâng cấp, bổ sung chức
năng hệ thống phần mềm, Dự án sửa chữa Hệ
thống quản lý CSDL quản lý bảo trì một
đường (PMS)

Ban quản lý
dự án 4

020

Sửa chữa hệ thống giao thông thông
minh (ITS) tuyến cao tốc thành phố Hồ Chí
Minh Trung Lương

Cục Quản lý
Đường Bộ IV

Xây dựng phẩm mềm nội bộ,phần
mềm thương mại, hạ tầng kỹ thuật công nghệ
thông tin tạo lập cơ sở dữ liệu và đào tạo,

Bộ chỉ huy
quân sự tỉnh Bắc

3

4

2

2
020
2
020


5

6

7

8

chuyển giao công nghệ thuộc dự án Xây dựng
cơ sở dữ liệu và phần mềm quản lý tuyển
quân tỉnh Bắc Ninh

Ninh

Mua sắm thiết bị công nghệ thông tin
năm 2018 thuộc dự án | Xây dựng hệ thống
dịch vụ công. trực tuyến của Bộ Y Tế giai
đoạn 2017-2020

Cục
Bộ Y Tế

Phát triển hệ thống của hệ thống vận
hành trên nền Web ( gái 2) cho Dự án tăng
cường năng lực bao tri đường bộ giai đoạn II

Tổng
cục
Đường Bộ Việt Nam

Cung cấp, lắp đặt thiết bị, xây dựng
Công thông tin điện tử thành phần, tạo lập
CSDL và đảo ở chuyển giao công nghệ cho

các cơ quan nhà nước tỉnh Vĩnh Phúc

Sở
Vĩnh Phúc

CNTT-

2
0182019
2
0162017

TTTT

2
0152016

....

4. Đối tác, khách hàng tiêu biểu
SAOMAI được thành lập bởi các chuyên gia tư vấn, chuyên gia kỹ
thuật đã có rất nhiều kinh nghiệm trong việc tư vấn, xây dựng, triển khai,
xuất khẩu phần mềm. Cán bộ của SAOMAI đã tích lũy được kinh nghiệm
trong việc triển khai, vận hành giải pháp ERP cho các doanh nghiệp lớn tại
Việt Nam.


SAOMAI hiện đang là đối tác cung cấp và triển khai giải pháp công nghệ
của các hãng cung cấp hàng đầu thế giới và trong nước:
ESRI là hãng cung cấp các giải pháp GIS số một thế giới.

SAOMAI đã hợp tác, sử dụng công nghệ ArcGIS của ESRI triển khai nhiều
dự án liên quan đến GIS tại Việt nam như: Hệ thống quản lý đô thị tại thành
phố Vũng tàu, cổng thông tin hỗ trợ, dự báo dịch bệnh lở mồm long móng...
SAP là nhà cung cấp giải pháp Quản trị doanh nghiệp hàng đầu trên thế giới.
Theo thống kê, hiện các giải pháp do SAP cung cấp đang chiếm thị phần cao
nhất trên thế giới và được triển khai tại hơn tại trên 120 nước trên thế giới.
SAOMAI là đối tác chiến lược (VAR Partner) phân phối và triển khai giải
pháp quản trị doanh nghiệp SAP ERP của SẮP tại Việt Nam. SAOMAI cũng
đồng thời nghiên cứu và phát triển các ứng dụng tích hợp với hệ thống SAP
B1 nhằm đáp ứng nhu cầu quản lý của doanh Built on express advantage™
IBM offerings nghiệp Việt Nam.
IBM là hãng cung cấp giải pháp hạ tầng CNTT hàng đầu thế
giới hiện nay. SAOMAI là đối tác của IBM trong chiến lược IBM Express
Advantage, tiếp cận để nắm bắt cơ hội CNTT đối với các các doanh nghiệp
vừa và nhỏ, đồng thời sáng tạo để giành được lợi thế cạnh tranh thông qua
mạng lưới bao gồm con người, giải pháp và dịch vụ nhằm giúp các doanh
nghiệp giải quyết các vấn đề kinh doanh của DN
Với kinh nghiệm làm việc đa dạng lĩnh vực, tập trung trong lĩnh vực công
nghệ thông tin, công nghệ cao, SAOMAI đã và đang triển khai thành công rất
nhiều dự án liên quan đến lĩnh vực tư vấn, phần mềm quản lý tài sản đường
bộ, phần mềm ứng dụng, xuất khẩu phần mềm....

CHƯƠNG 2. GIỚI THIỆU VỀ HTML CSS JS
1. GIỚI THIỆU VỀ HTML
1.1 Khái niệm
HTML (viết tắt của từ Hypertext Markup Language) hay là Ngôn ngữ Đánh
dấu Siêu văn bản. Sử dụng HTML để xây dựng và cấu trúc lại các thành phần trong
website hoặc ứng dụng. HTML có thể được hỗ trợ bởi các cơng nghệ như CSS và
các ngôn ngữ kịch bản giống như JavaScript.

HTML khơng phải là ngơn ngữ lập trình, nghĩa là nó khơng thể tạo ra các
chức năng “động” được. Giống như như phần mềm Microsoft Word, HTML dùng
để bố cục và định dạng trang web.
HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững
chắc cho thế giới mạng. Các phần tử HTML được phân định bằng các tags, được
viết bằng dấu ngoặc nhọn
1.2 Lịch sử
HTML được tạo ra bởi Tim Berners-Lee là nhà vật lý học của trung tâm
nghiên cứu CERN ở Thụy Sĩ. Ông đã nghĩ ra và viết siêu văn bản và hypertext trên
Internet. Hypertext được hiểu là văn bản chứa link, có thể giúp người xem truy cập
ngay lập tức. Hiện nay, HTML đã trở thành một chuẩn Internet được vận hành và
phát triển bởi tổ chức W3C (World Wide Web Consortium).
HTML đầu tiên được cơng khai là một tài liệu có tên “HTML Tags” được
đề cập trên Internet vào cuối năm 1991. Gồm 18 phần tử đơn giản của HTML và
các phiên bản sau của HTML đều có thêm tag và attributes mới.
Từ năm 1996, các phần tử HTML được duy trì với đầu vào là các nhà cung
cấp phần mềm thương mại bởi World Wide Web Consortium.
Năm 2000, HTML đã trở thành tiêu chuẩn quốc tế, sau đó đến năm 2004
HTML5 trong Web Hypertext Application Technology Working Group và được
hoàn thiện vào năm 2014.
1.3. Cách thức hoạt động
HTML documents là files được kết thúc .html hay .htm. Với những file này
bạn có thể xem bằng cách sử dụng bất kỳ trình duyệt nào (Google Chrome, Firefox,
Safari,…). Các trình duyệt đọc những file HTML này và biến đổi chúng thành một
dạng visual trên Internet sao cho người dùng có thể xem và hiểu được chúng.
Bình thường một trang web có nhiều có web HTML như: trang chủ, giới
thiệu, liên hệ, blog,… Mỗi trang như thế đều cần một trang HTML riêng. Trong
mỗi trang HTML chứa một bộ các tag (elements) để xác định từng khối của một
trang web và tạo thành một cấu trúc gồm section, paragraph, heading và các khối

nội dung khác.
Một tài liệu HTML ln được gói trong cặp tag và </html>
Cặp tag <body> </body> sẽ là nơi mô tả những gì nhìn thấy của trang
Ngồi phần body cịn có phần head, được viết bởi cặp tag
<head></head> .Nếu sử dụng cặp tag này, bắt buộc phải viết them một cặp tag nữa


đó là <title></title> Giữa thẻ title là là tên của trang web được hiển thị phía trên
cùng của menubar
Như vậy một trang web có cấu trúc như sau

Hình 2.1: Cấu trúc HTML
1.4.Ưu và nhược điểm của HTML
Ưu điểm HTML
HTML có một số ưu điểm dưới đây:
• Cộng đồng với nhiều tài nguyên lớn.
• Hoạt động mượt mà trên tất cả các trình duyệt.
• Các markup sử dụng trong HTML ngắn gọn và có độ đồng nhất cao.
• Sử dụng mã nguồn mở và miễn phí.
• Tích hợp dễ dàng với các ngơn ngữ backend (PHP, Node.js,..).
Nhược điểm HTML
Nói đển ưu điểm thì khơng thể bỏ qua các nhược điểm của HTML, cụ thể
một số nhược điểm HTML dưới đây:
• Chủ yếu được áp dụng cho web tĩnh, nếu muốn tạo tính năng động thì các
lập trình viên cần sử dụng thêm JavaScript hoặc ngơn ngữ backend khác.
• Mỗi trang HTML cần được tạo riêng biệt ngay khi có nhiều yếu tố trùng
lặp như header và footer.
• Một số trình duyệt cịn chậm cập nhật để hỗ trợ tính năng mới của HTML.
•Khó để kiểm sốt cách đọc và hiển thị file HTML của trình duyệt (một số
trình duyệt cũ khơng render được tag mới. Vì vậy, dù trong HTML document có sử

dụng các tag thì các browser đó khơng đọc được).


1.5 Vai trị của HTML trong lập trình Web
Trong lập trình web, HTML có vai trị như thế nào? Theo đúng định nghĩa,
HTML là một loại ngôn ngữ đánh dấu siêu văn bản, do đó vai trị chính của nó
cũng xoay quanh yếu tố này. HTML đóng vai trị như khung xương của một trang
web, tạo nên cấu trúc cơ bản nhất của một website để các thành phần khác kết nối,
đắp nặn tạo nên một website hiệu quả và hoạt động trơn tru nhất.
Bất kể mục đích sử dụng website của bạn là gì, website được xây dựng trên
nền tảng nào hay sử dụng ngơn ngữ lập trình nào thì tất cả đều cần đến sự hỗ trợ
của HTML để dữ liệu được xử lý và hiển thị trên các trình duyệt web. Chính vì
thế, HTML trở thành một thành phần không thể thiếu nếu muốn xây dựng một
website có cấu trúc tốt và hoạt động có quy củ. HTML cũng trở thành loại ngôn
ngữ cơ bản nhất mà các lập trình viên hay nhà phát triển website cần nắm rõ.
2 Giới thiệu về CSS
2.1. Khái niệm
CSS là viết tắt của Cascading Style Sheets, một ngôn ngữ thiết kế đơn giản,
xử lý một phần giao diện của trang web. CSS mô tả cách các phần tử HTML hiển
thị trên màn hình và các phương tiện khác.
Sử dụng CSS, bạn có thể kiểm sốt màu chữ, cỡ chữ, kiểu chữ, khoảng cách
giữa các đoạn văn bản, kích thước của các thành phần trên trang web, màu nền,
thiết kế bố cục và cách trang web hiển thị trên những màn hình có kích thước khác
nhau cũng như hàng loạt hiệu ứng khác.
CSS rất hữu ích và tiện lợi. Nó có thể kiểm sốt tất cả các trang trên một
website.
Các stylesheet ngồi được lưu trữ dưới dạng các tập tin .CSS. CSS được kết
hợp với ngôn ngữ đánh dấu HTML hoặc XHTML.
2.2 Lịch sử
CSS lần đầu tiên được đề xuất bởi Hakon Wium Lie vào ngày 10 tháng 10

năm 1994. Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee tại CERN.
Một số ngôn ngữ định kiểu khác cho web đã được đề xuất cùng lúc và các cuộc
thảo luận về danh sách gửi thư cộng đồng cũng như đồng thuận trong World Wide
Web Consortium dẫn đến CSS W3C đầu tiên (CSS1) được phát hành vào năm
1996. Đặc biệt, một đề nghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành
đồng tác giả của CSS1 và được coi là đồng sáng tạo CSS.


Tập tin định kiểu theo tầng đã tồn tại ở dạng này hay dạng khác kể từ khi
bắt đầu Ngôn ngữ đánh dấu tổng quát tiêu chuẩn (SGML -Standard Generalized
Markup Language) vào những năm 1980 và CSS được phát triển để cung cấp biểu
định kiểu cho web. Một yêu cầu đối với ngơn ngữ biểu định kiểu web là nó đến từ
các nguồn khác nhau trên web. Do đó, các ngơn ngữ biểu định kiểu hiện có như
DSSSL và FOSI không phù hợp. Mặt khác, CSS để cho kiểu của tài liệu bị ảnh
hưởng bởi nhiều biểu định kiểu theo kiểu “cascading”
Khi HTML phát triển, nó đã bao gồm nhiều phong cách hơn để đáp ứng
nhu cầu của các nhà phát triển web. Sự phát triển này đã cho nhà thiết kế kiểm soát
nhiều hơn về diện mạo trang web. Một điều nữa đó là chi phí HTML phức tạp hơn.
Sự khác biệt trong việc triển khai trình duyệt web, chẳng hạn như ViolaWWW và
WorldWideWeb, khiến giao diện trang web nhất qn trở nên khó khăn và người
dùng ít kiểm soát hơn cách hiển thị nội dung web.
2.3 Cách thức hoạt động của CSS

Hình2.2. Bố cục chung của CSS
Phương thức hoạt động: CSS sẽ tìm dựa vào vùng chọn (tên một ID, tên
thẻ HTML hoặc class…), sau đó áp dụng các thuộc tính cần thay đổi lên vùng
chọn.
- Bố cục: Bao gồm các thuộc tính:
+ Margin (lề): Khoảng cách xung quanh bên ngoài phần tử
+ Boder (đường viền): Đường nằm ngồi phần đệm

+ Padding (vùng đệm): Khơng gian quanh nội dung


Cấu trúc một đoạn CSS giống mơ hình hộp: Khai báo bằng vùng chọn;
phần thuộc tính & giá trị của CSS nằm phía trong dấu ngoặc nhọn {}, được tách
biệt bằng dấu hai chấm; có dấu chấm phẩy ; ở cuối mỗi dịng khai báo thuộc tính.
Trong đó:
Selector (Bộ chọn): Selector cho phép người sử dụng có thể lựa chọn các
phần tử HTML mà không làm ảnh hưởng đến xung quanh. Các Selector được áp
dụng cho các trường hợp sau:


Tất cả phần tử theo một dạng cụ thể nào đó.



Thuộc tính ID và class của các phần tử.


Các phần tử dựa vào mối liên quan với các phần tử khác trong cây
phân cấp tài liệu.
Declaration (Khai báo): Declaration có chức năng xác định thuộc tính của
một phần tử bất kỳ trong chương trình. Khối khai báo chứa một hoặc nhiều khai
báo, phân tách với nhau bằng các dấu chấm phẩy.
Properties (Thuộc tính): Những cách mà bạn có thể tạo kiểu cho một phần
tử HTML. (Với trường hợp này thì font-size được xem là một trong những thuộc
tính của phần tử p). Chính vì vậy, với CSS thì bạn chỉ cần lựa chọn thuộc tính mà
chính bạn muốn tác động nhất trong bộ quy tắc của mình.
Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta
sẽ sở hữu giá trị thuộc tính mà việc lựa chọn trong số đó phụ thuộc vào số lần xuất

hiện của thuộc tính.

Hình 2.3. Cấu trúc của CSS
2.4 Ưu và nhược điểm của CSS
Ưu Điểm