1. Trang chủ
  2. » Luận Văn - Báo Cáo

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

36 5 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Tìm hiểu về HTML, CSS, Javascript, xây dựng một website phát nhạc
Trường học Đại học Công nghệ Giao thông Vận tải
Chuyên ngành Công nghệ thông tin
Thể loại Báo cáo thực tập chuyên ngành
Năm xuất bản 2023
Thành phố Hà Nội
Định dạng
Số trang 36
Dung lượng 0,95 MB

Cấu trúc

  • CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ CÔNG TY (6)
    • 1. Giới thiệu chung (6)
      • 1.1 Lịch sử phát triển (7)
      • 1.2 Tầm nhìn (8)
      • 1.3 Sứ mệnh (8)
      • 1.4 Giá trị cốt lõi (8)
    • 2. Mô hình tổ chức và đội ngũ nhân sự (9)
    • 3. Sản phẩm, dịch vụ (10)
      • 3.1 Sản phẩm (10)
      • 3.2 Dịch vụ (11)
    • 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ử (16)
      • 1.3. Cách thức hoạt động (16)
      • 1.4. Ưu và nhược điểm của HTML (17)
      • 1.5 Vai trò của HTML trong lập trình Web (18)
      • 2.1. Khái niệm (18)
      • 2.2 Lịch sử (18)
      • 2.3 Cách thức hoạt động của CSS (19)
      • 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.1 Khái niệm (23)
      • 3.2 Lịch sử (23)
      • 3.3 Cách thức hoạt động của Javascript (23)
      • 3.4 Ưu và nhược điểm của Javascript (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 (36)
  • TÀI LIỆU THAM KHẢO (36)

Nội dung

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 ĐOÀ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 quá 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 ĐOÀ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 độ chuyên 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 quý 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ể hoàn thiện tốt hơn và làm đề tài hoàn thiện h

GIỚI THIỆU CHUNG VỀ CÔNG TY

Giới thiệu chung

Công ty cổ phần Tập đoàn Giải pháp Sao Mai, thành lập tháng 02/2002, chuyên cung cấp dịch vụ công nghệ thông tin và tư vấn hạ tầng kỹ thuật Công ty cung cấp các giải pháp công nghệ thông tin đa dạng, bao gồm viễn thông, quản lý doanh nghiệp, ERP, CRM, và hệ thống thông tin địa lý GIS Ngoài ra, Sao Mai cũng phát triển các phần mềm quản lý tập trung như quản lý tài sản đường bộ, thông tin quy hoạch xây dựng, và hệ thống giao thông thông minh, nhằm nâng cao hiệu quả quản lý và cải thiện dịch vụ công.

Công ty SSG, với logo đặc trưng, nổi bật trong lĩnh vực tự động hóa nhà máy (Factory Automation) cùng với SAOMAI, một đơn vị uy tín Chúng tôi chuyên chế tạo máy, tích hợp hệ thống, gia công cơ khí và sản xuất tủ điều khiển Ngoài ra, chúng tôi 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ộ, cũng như xử lý hình ảnh và video.

Trong suốt 20 năm hoạt động, SAOMAI đã không ngừng khám phá giới hạn bản thân với mục tiêu trở thành Tập đoàn công nghệ phát triển bền vững, kết hợp sức mạnh trí thức, tính đoàn kết và công nghệ tiên tiến Hiện tại, SAOMAI tự hào sở hữu đội ngũ chuyên gia kỹ thuật và tư vấn giàu kinh nghiệm trong lĩnh vực CNTT, đã từng thiết kế và triển khai các hệ thống CNTT lớn cho nhiều khách hàng, bao gồm các cơ quan Chính phủ, Bộ công an, Ngân hàng, Tập đoàn và các doanh nghiệp trong và ngoài nước như Nhật Bản và 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à ngoà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 đoà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)

Vào tháng 4 năm 2013, phần mềm quản lý hợp đồng chuyên dụng cho ngân hàng và các định chế tài chính đã được Hiệp hội phần mềm và dịch vụ CNTT Việt Nam (VINASA) vinh danh với giải thưởng Sao Khuê.

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”

Vào tháng 4 năm 2014, Giải thưởng Sao Khuê đã được Hiệp hội phần mềm và dịch vụ CNTT Việt Nam (VINASA) trao tặng cho Giải pháp quản lý thông tin và điều hành doanh nghiệp SEI (Solution for Executive Internal) Giải pháp này đã xuất sắc đạt xếp hạng 4 sao trong lĩnh vực các sản phẩm và giải pháp phần mềm mới của Việt Nam trong năm 2013-2014.

SaoMai Solutions Group đã khẳng định vị thế là Tập đoàn Công Nghệ Cao hàng đầu trong lĩnh vực Công nghệ Thông tin, Tự Động Hóa và 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.

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.

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.

- KÝ LUẬT LÀ SỨC MẠNH.

- HỌC HỎI VÀ SỬA CHỮA.

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 với trình độ Thạc sỹ, kỹ sư, cử nhân tại văn phòng Hà Nội và Kyoto, góp phần vào thành công của công ty nhờ vào kinh nghiệm và sự chuyên nghiệp của đội ngũ Đội ngũ quản lý tư vấn nghiệp vụ và kỹ thuật được đào tạo bởi các tổ chức danh tiếng như Microsoft, Oracle, SAP và thường xuyên tu nghiệp tại Nhật Bản, mang lại kiến thức và kinh nghiệm từ nhiều dự án thực tế Các chuyên gia của SAOMAI cũng được đào tạo về các phương pháp phát triển và triển khai, sở hữu kỹ năng về công nghệ tiên tiến nhất từ ORACLE, SAP, IBM và 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 thực hiện nhiều dự án đồng thời cho khách hàng, nhờ vào kinh nghiệm phong phú trong việc triển khai các dự án 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

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

SAOMAI là đơn vị tư vấn chuyên về hạ tầng kỹ thuật, quy hoạch giao thông và quản lý tài sản, đồng thời phân phối và triển khai các giải pháp GIS và ERP từ các nhà cung cấp hàng đầu Với sự nỗ lực không ngừng, SAOMAI đã phát triển hệ thống triển khai giải pháp ưu việt, áp dụng các phương pháp đào tạo khoa học và công nghệ tiên tiến, phù hợp với sự phát triển liên tục của 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 thoá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

- 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

Chúng tôi cung cấp dịch vụ tư vấn khảo sát và lập dự án thiết kế cho các công trình cấp thoát nước, xử lý chất thải và môi trường Đội ngũ chuyên gia của chúng tôi cũng đảm nhận giám sát thi công các dự án hạ tầng kỹ thuật, xây dựng dân dụng và công nghiệp, đảm bảo chất lượng và hiệu quả trong từng giai đoạn thực hiện.

+ 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 và thiết kế kiến trúc công trình là những yếu tố quan trọng trong việc xây dựng hệ thống quản lý tài sản đường bộ Đội ngũ tư vấn chuyên nghiệp sẽ thực hiện khảo sát và lập dự án thiết kế, đồng thời cung cấp tư vấn về môi trường và xã hội để đảm bảo tính bền vững và hiệu quả trong quản lý tài sản.

+ 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

Chúng tôi cung cấp dịch vụ tư vấn và đánh giá các dự án đầu tư xây dựng, đồng thời tiến hành điều tra và đánh giá các nghiên cứu phát triển công nghệ trong lĩnh vực cấp thoá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)

SAOMAI chuyên cung cấp dịch vụ tư vấn chiến lược CNTT và xây dựng kế hoạch tổng thể ứng dụng CNTT cho doanh nghiệp Đội ngũ chuyên gia của chúng tôi, với kinh nghiệm tu nghiệp tại Nhật Bản, Mỹ, Đan Mạch, Hàn Quốc, cam kết mang đến cho khách hàng những giải pháp đầu tư CNTT 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

Chúng tôi chuyên cung cấp dịch vụ tư vấn khảo sát và lập dự án, bao gồm 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 Ngoài ra, chúng tôi còn tư vấn về môi trường, xã hội và hỗ trợ kỹ thuật nhằm nâng cao năng lực trong các lĩnh vực này.

+ Tư vấn thiết kế, thi công lắp đặt hệ thống an ninh giám sát:

Chúng tôi chuyên tư vấn, thiết kế và triển khai thi công lắp đặt hệ thống an ninh giám sát tích hợp, bao gồm hệ thống giao thông thông minh trên các tuyến đường cao tốc, camera giám sát cho trường học, bệnh viện, bến xe, và các điểm trọng yếu trong các bộ, cơ quan nhà nước Ngoài ra, chúng tôi cung cấp thiết bị và thi công lắp đặt hệ thống báo động, báo cháy, cùng với quản lý ra vào tự động tại các khu trung tâm thương mại, khu đô thị và 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ý:

Chúng tôi chuyên thiết kế và xây dựng các hệ thống mạng máy tính như LAN và WAN, đồng thời thiết lập hệ thống máy chủ Server Farms và mạng DMZ Chúng tôi cung cấp công nghệ VPN và các giải pháp bảo mật cho mạng WAN, cùng với việc phát triển các ứng dụng quản lý tùy chỉnh theo yêu cầu của 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à công nghệ tiên tiến hỗ trợ việc tập hợp và tổ chức dữ liệu theo thời gian trong không gian nhiều chiều Các công cụ của Data Warehouse tạo điều kiện thuận lợi cho việc khai thác, phân tích và tìm kiếm dữ liệu, đồng thời cho phép người dùng dễ dàng thao tác thông qua giao diện “kéo thả”.

+ 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

TT Tên HĐ/Dự án Chủ đầu tư T

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

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

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

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

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

4 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

2020 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

5 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

6 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

7 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

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

SAOMAI được thành lập bởi đội ngũ chuyên gia tư vấn và kỹ thuật dày dạn kinh nghiệm trong lĩnh vực tư vấn, xây dựng và triển khai phần mềm xuất khẩu Đội ngũ cán bộ của SAOMAI đã tích lũy được nhiều kinh nghiệm trong việc triển khai và 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à công ty hàng đầu thế giới trong lĩnh vực cung cấp giải pháp GIS SAOMAI đã hợp tác với ESRI để ứng dụng công nghệ ArcGIS trong nhiều dự án GIS tại Việt Nam, bao gồm hệ thống quản lý đô thị tại thành phố Vũng Tàu và 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 hàng đầu thế giới về giải pháp Quản trị doanh nghiệp Hiện nay, các giải pháp của SAP đang nắm giữ thị phần lớn nhất toàn cầu và được triển khai tại hơn 120 quốc gia.

SAOMAI là đối tác chiến lược (VAR Partner) của SẮP, chuyên phân phối và triển khai giải pháp quản trị doanh nghiệp SAP ERP tại Việt Nam Đồng thời, SAOMAI cũng 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 để đáp ứng nhu cầu quản lý của doanh nghiệp Việt Nam.

IBM là nhà cung cấp giải pháp hạ tầng CNTT hàng đầu thế giới, và SAOMAI là đối tác chiến lược trong chương trình IBM Express Advantage Chúng tôi tập trung vào việc khai thác cơ hội CNTT cho các doanh nghiệp vừa và nhỏ, đồng thời sáng tạo để tạo ra lợi thế cạnh tranh Mạng lưới của chúng tôi bao gồm con người, giải pháp và dịch vụ, giúp các doanh nghiệp giải quyết hiệu quả các vấn đề kinh doanh.

Với kinh nghiệm phong phú trong nhiều lĩnh vực, đặc biệt là công nghệ thông tin và công nghệ cao, SAOMAI đã triển khai thành công nhiều dự án tư vấn, phát triển phần mềm quản lý tài sản đường bộ, ứng dụng phần mềm và xuất khẩu phần mềm.

GIỚI THIỆU VỀ HTML CSS JS

GIỚI THIỆU VỀ HTML

HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ dùng để xây dựng và cấu trúc các thành phần trên website hoặc ứng dụng Nó thường được kết hợp với các công nghệ như CSS và các ngôn ngữ kịch bản như JavaScript để tạo ra trải nghiệm người dùng phong phú hơn.

HTML không phải là ngôn ngữ lập trình, vì vậy nó không thể tạo ra các chức năng động Tương tự như phần mềm Microsoft Word, HTML được sử dụng để bố cục và định dạng trang web.

HTML, khi kết hợp với CSS và JavaScript, tạo thành nền tảng vững chắc cho thế giới mạng Các phần tử HTML được xác định bằng các thẻ, được viết trong dấu ngoặc nhọn.

HTML, do Tim Berners-Lee, một nhà vật lý tại CERN Thụy Sĩ, phát triển, đã cách mạng hóa cách thức truy cập thông tin trên Internet Ông đã sáng tạo ra siêu văn bản và hypertext, cho phép người dùng truy cập ngay lập tức vào các liên kết Ngày nay, HTML đã trở thành tiêu chuẩn Internet, được duy trì và phát triển bởi tổ chức W3C (World Wide Web Consortium).

HTML được công khai lần đầu vào cuối năm 1991 qua tài liệu "HTML Tags", bao gồm 18 phần tử cơ bản Các phiên bản HTML tiếp theo đã bổ sung thêm nhiều thẻ và thuộc tính 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.

HTML documents là các tệp có đuôi html hoặc htm, có thể được mở bằng bất kỳ trình duyệt nào như Google Chrome, Firefox hay Safari Các trình duyệt này sẽ đọc và chuyển đổi các tệp HTML thành dạng hình ảnh trực quan trên Internet, giúp người dùng dễ dàng xem và hiểu nội dung.

Một trang web thường bao gồm nhiều trang HTML như trang chủ, giới thiệu, liên hệ và blog Mỗi trang HTML cần có cấu trúc riêng, bao gồm các thẻ (elements) để xác định từng khối nội dung Các thẻ này tạo thành một cấu trúc hoàn chỉnh với các phần như section, paragraph, heading và các khối nội dung khác.

Một tài liệu HTML luôn được gói trong cặp tag và

Cặp tag sẽ là nơi mô tả những gì nhìn thấy của trang Ngoài phần body còn có phần head, được viết bởi cặp tag

Khi sử dụng cặp thẻ , bạn cần phải thêm một cặp thẻ nữa Nội dung giữa thẻ sẽ là tên của trang web, được hiển thị ở phía trên cùng của thanh menu.

Như vậy một trang web có cấu trúc như sau

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, ).

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.

Việc kiểm soát cách đọc và hiển thị file HTML trên các trình duyệt là một thách thức, đặc biệt là với những trình duyệt cũ không hỗ trợ các thẻ HTML mới Do đó, mặc dù tài liệu HTML có sử dụng các thẻ hiện đại, nhưng những trình duyệt này vẫn không thể đọc và hiển thị chúng đúng cách.

1.5 Vai trò của HTML trong lập trình Web

HTML đóng vai trò quan trọng trong lập trình web như một ngôn ngữ đánh dấu siêu văn bản, tạo nên cấu trúc cơ bản cho một trang web Nó giống như khung xương, giúp các thành phần khác kết nối và phát triển, từ đó hình thành một website hiệu quả và hoạt động trơn tru.

Dù mục đích sử dụng website của bạn là gì, HTML là yếu tố thiết yếu để xử lý và hiển thị dữ liệu trên trình duyệt web Nó đóng vai trò quan trọng trong việc xây dựng một website có cấu trúc tốt và hoạt động hiệu quả Do đó, HTML là ngôn ngữ cơ bản mà mọi lập trình viên và nhà phát triển website cần phải nắm vững.

CSS, hay còn gọi là Cascading Style Sheets, là một ngôn ngữ thiết kế đơn giản dùng để xử lý giao diện của trang web Nó 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.

Bằng cách sử dụng CSS, bạn có thể điều chỉnh màu sắc, kích thước và kiểu chữ, quản lý khoảng cách giữa các đoạn văn, xác định kích thước các thành phần trên trang web, thay đổi màu nền, thiết kế bố cục và tối ưu hóa hiển thị trên các màn hình với kích thước khác nhau, cùng với nhiều hiệu ứng đa dạng khác.

CSS rất hữu ích và tiện lợi Nó có thể kiểm soát tất cả các trang trên một website.

Các stylesheet ngoà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.

CSS được Hakon Wium Lie đề xuất lần đầu vào ngày 10 tháng 10 năm 1994, khi ông làm việc cùng Tim Berners-Lee tại CERN Trong thời gian này, nhiều ngôn ngữ định kiểu khác cho web cũng được đưa ra, dẫn đến các cuộc thảo luận trong cộng đồng và sự đồng thuận của World Wide Web Consortium, kết quả là CSS W3C đầu tiên (CSS1) được phát hành vào năm sau đó.

Năm 1996, Bert Bos đã có một đề nghị quan trọng khi ông trở thành đồng tác giả của CSS1, được công nhận là đồng sáng tạo của CSS.

XÂY DỰNG WEBSITE PHÁT NHẠC

Khái niệm website

Website, hay còn gọi là trang web, là tập hợp các trang con bao gồm văn bản, hình ảnh, video và nhiều nội dung khác, được lưu trữ trên một tên miền hoặc tên miền phụ trên các máy chủ trực tuyến Khái niệm website được phát minh vào khoảng năm 1990-1991 bởi Tim Berners-Lee và Robert Cailliau tại CERN, Geneva, Thụy Sĩ.

Một trang web là tập tin HTML hoặc XHTML có thể truy cập thông qua giao thức HTTP hoặc HTTPS Website có thể được xây dựng từ các tệp tin HTML (trang mạng tĩnh) hoặc sử dụng hệ thống quản lý nội dung (CMS) hoạt động trên máy chủ (trang mạng động) Ngoài ra, website có thể được phát triển bằng nhiều ngôn ngữ lập trình khác nhau như PHP, NET, Java, và Ruby on Rails.

Hiện nay, để một website có thể vận hành trên môi trường Word Wide, cần bắt buộc có 3 phần chính:

 Tên miền (là tên riêng và duy nhất của website).

 Hosting (là các máy chủ chứa các tệp tin nguồn).

 Source code (là các tệp tin html, xhtml, )

Website được truy cập và hiển thị cho người dùng thông qua các trình duyệt web, cung cấp văn bản, hình ảnh, video, nhạc, trò chơi và thông tin khác Các trang web này được phát triển bởi các nhà thiết kế web chuyên nghiệp.

Ngày nay, website trở thành công cụ phổ biến mà mọi người có thể truy cập từ bất kỳ đâu có internet hoặc sóng di động Đối với doanh nghiệp và cá nhân thường xuyên tương tác với cộng đồng online, website là phương tiện hiệu quả nhất để quảng bá hình ảnh, sản phẩm và thông tin Chính vì vậy, dịch vụ thiết kế web chuyên nghiệp đã ra đời để đáp ứng nhu cầu này.

Quy trình thiết kế một website

Thiết kế website là một quá trình phức tạp, chịu ảnh hưởng bởi nhiều yếu tố như mục tiêu, mục đích, đối tượng sử dụng, nội dung và giao diện người dùng Dưới đây là quy trình cơ bản để thiết kế một website hiệu quả.

1 Thu thập thông tin và định rõ mục tiêu:

Xác định rõ mục đích của trang web, chẳng hạn như giới thiệu doanh nghiệp, bán hàng trực tuyến hoặc chia sẻ thông tin Đồng thời, hãy đặt ra các mục tiêu cụ thể mà bạn muốn đạt được từ trang web để đảm bảo hiệu quả và hướng đi đúng đắn.

Nghiên cứu đối thủ và các trang web tương tự để có cái nhìn tổng quan về thị trường và phong cách thiết kế.

2 Lập kế hoạch và thiết kế sơ đồ trang web:

Xác định cấu trúc trang web, các trang con và mối quan hệ giữa chúng.

Tạo sơ đồ trang web (sitemaps) để hình dung tổ chức bố trí nội dung.

Xác định các nội dung cần có trên từng trang.

Chuẩn bị các hình ảnh, video, văn bản và các yếu tố nội dung khác.

Tạo một giao diện trực quan và hấp dẫn dựa trên sơ đồ trang web và nội dung là rất quan trọng Đảm bảo rằng giao diện này thân thiện với người dùng và tương thích trên nhiều thiết bị để mang lại trải nghiệm tốt nhất cho người sử dụng.

Dựa vào thiết kế giao diện, xây dựng trang web bằng mã lập trình (HTML, CSS, JavaScript).

Thêm các tính năng và chức năng cần thiết, chẳng hạn như hệ thống quản lý nội dung (CMS), các biểu mẫu liên hệ, tích hợp mạng xã hội,

6 Kiểm tra và tối ưu hóa:

Kiểm tra và đảm bảo tính năng hoạt động đúng như mong đợi trên các trình duyệt và thiết bị khác nhau.

Tối ưu hóa trang web để tải nhanh hơn và cải thiện trải nghiệm người dùng.

7 Theo dõi và bảo trì:

Theo dõi hiệu suất của trang web và thu thập phản hồi từ người dùng.

Thường xuyên cập nhật và bảo trì trang web để đảm bảo hoạt động tốt trong thời gian dài.

Thiết kế website phát nhạc

3.1 Giới thiệu Âm nhạc được xem là giải pháp giúp giải tỏa những căng thẳng, mệt mỏi và mang đến nguồn cảm hứng cho hầu hết tất cả mọi người Bạn có thể thấy rõ ràng rằng sự ra đời của các website nghe nhạc như zing.mp3, nhaccuatui.vn, có tầm ảnh hưởng rất lớn nền công nghiệp giải trí nước nhà.

Chính bởi vậy , thiết kế website nghe nhạc trực tuyến với giao diện đơn giản, ấn tượng đang được các doanh nghiệp chú trọng đầu tư.

Web hướng đến chức năng đơn giản, dễ dàng sử dụng phù hợp cho mọi đối tượng có những nhu cầu cơ bản của người nghe nhạc

Hình 3.1 Cấu trúc trang web

- Header: Nơi chứa tên bài hát hiện tại, ảnh đĩa, các nút chức năng và thanh tiến trình bài hát

- Item: Nơi chứa thông tin của bài hát như ảnh đĩa, tên bài hát, ca sĩ cùng với một nút tùy chọn

- List item: Nơi chứa tất cả bài hát được hiển thị theo từng item

Sản phẩm được thiết kế vào thực hiện theo các bước sau:

- Phác thảo sơ lược chức năng, hiển thị của website

- Thiết kế bố cục trang web

- Khởi tạo giao diện HTML, CSS của trang web bằng công cụ Visual Studio Code

- Khởi tạo các chức năng cơ bản của trang web

- Tối ưu hóa các chức năng tạo cảm giác cho người dùng

+ Trên cùng là dòng Text Now playing: cùng với tên bài hát hiện tại

+ Chính giữa là phần ảnh đĩa của bài hát hiện tại

+ Tiếp đến là các nút icon chức năng phát lại, phát bài trước, Play/Pause, phát bài sau, random

+ Cuối cùng là thanh tiến trình bài hát

Hình 3.2 Giao diện Header Thiết kế giao diện phần Item

+ Phía bên trái hiện thị ảnh đĩa của bài hát

+ Phần giữa hiển thị tên bài hát

+ Phần cuối hiển thị tên ca sĩ

+ Phía bên phải hiển thị nút tùy chọn

Hình 3.3 Giao diện Item bài hát

Thiết kế giao diện cho List item

+ List item được cách đều hai bên, cùng một khoảng cách với header + Các Item Phía trong cũng được cách đều 1 khoảng nhỏ giữa các Item

Hình 3.4 Giao diện tổng thể

Khởi tạo các chức năng cơ bản cho trang web

Các chức năng cơ bản được khởi tạo:

+ Nút Play/Pause được hiển thị theo trạng thái của bài hát

+ Chức năng phát lại bài hay đang phát

+ Chức năng chuyển đến bài hát kế tiếp

+ Chức năng Chuyển đến bài hát phía trước

+ Chức năng phát ngẫu nhiên (không phải bài hiện tại ) bài hát có trong danh sách

+ Chức năng hiển thị tiến trình bài hát

+ Chức năng thay đổi tiến trình bài hát bằng cách kéo, nhấn chuột

Tối ưu hóa các chức năng tạo cảm giác cho người dùng

+ Cho phép ảnh đĩa quay khi bài hát đang được phát

+ Ẩn/Hiểm thị phần ảnh đĩa khi người dùng cuộn chuột

+ Chuyển đổi màu Item bài hát đang được trỏ đến

+ Chuyển đổi màu Item bài hát khi được click chọn

+ Tạo khoảng chễ nhỏ khi chuyển đổi qua lại giữa các bài hát

Khi sử dụng các phím trên bàn phím, bạn có thể thêm nhiều sự kiện hữu ích như sử dụng nút trái và phải để tua bài, phím lên và xuống để chuyển đổi giữa các bài hát, và phím cách để thực hiện thao tác Play/Pause một cách dễ dàng.

Ngày đăng: 06/11/2023, 18:01

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w