PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH...CHƯƠNG IV... ●CSS t>y ch?nh cách hiển th@ đoạn text●CSS t>y ch?nh kiểu chữ và kBch thưCc●CSS t>y ch?nh bảng●CSS t>y ch?nh danh sách- Ưu điểm của C
Trang 1“Trang thông tin v t a game Astroneer”ề ự
Trang 2CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNH
CHƯƠNG IV KẾT LUẬN
4.1 Link source code
4.2 Link trang web
1
Trang 3B ng phân chia công vi c nhóm 9ảệ
L I M Đ UỜỞ Ầ
Công ngh thông tin đang phát tri n v i m t t c đ chóng m t, các nhà khoa h cệ ể ớ ộ ố ộ ặ ọđã kh ng đ nh: ch a có m t ngành ngh và công ngh nào l i phát tri n nhanhẳ ị ư ộ ề ệ ạ ểchóng, sâu r ng và có nhi u ng d ng nh CNTT S ra đ i c a Internet đã mộ ề ứ ụ ư ự ờ ủ ởra m t k nguyên m i - k nguyên thông tin, trong đó các ho t đ ng kinh t , xãộ ỷ ớ ỷ ạ ộ ếh i, gi i trí đ u độ ả ề ượ ốc s hóa và k t n i v i nhau.ế ố ớ
Trong lĩnh v c gi i trí, Internet đã t o ra m t sân ch i m i cho các trò ch i đi nự ả ạ ộ ơ ớ ơ ệt Các trang web gi i thi u v s n ph m game ra đ i đã tr thành m t kênhử ớ ệ ề ả ẩ ờ ở ộthông tin quan tr ng cho các game th ọ ủ
M t trang web thông tin v game cung c p cho ngộ ề ấ ười dùng nh ng thông tin m iữ ớnh t, đ y đ nh t v t a game y T i đây, ngấ ầ ủ ấ ề ự ấ ạ ười dùng có th tìm th y t t cể ấ ấ ảnh ng gì h c n bi t v m t t a game, t c t truy n, gameplay, đ h a, âmữ ọ ầ ế ề ộ ự ừ ố ệ ồ ọthanh, đ n đánh giá c a các chuyên gia và c ng đ ng game th Các trang webế ủ ộ ồ ủnày cũng thường xuyên c p nh t nh ng tin t c m i nh t v các s ki n, khuy nậ ậ ữ ứ ớ ấ ề ự ệ ếmãi, và b n c p nh t c a các t a game.ả ậ ậ ủ ự
V i s phát tri n c a Internet và công ngh thông tin, các trang web nh th nàyớ ự ể ủ ệ ư ếngày càng tr nên ph bi n và đóng vai trò quan tr ng qu ng bá cho nhi u ngở ổ ế ọ ả ề ười
2
Trang 4bi t đ n h n V i mong mu n xây d ng m t website đ m i ngế ế ơ ớ ố ự ộ ể ọ ười có th n mể ắđược thông tin v t a game Astroneer, chúng em đã tái hi n l i trang web qu ngề ự ệ ạ ảbá t a game này.ự
CHƯƠNG I GI I THI U Đ TÀIỚỆỀ1 Tên đ tàiề
- Trang thông tin v t a game Astroneerề ự
- Thiết kế dựa theo trang web: https://astroneer.space
2 Gi i thi u đ tàiớệề
Trang web ch a thông tin liên quan đ n t a game Astroneer nh các b nứ ế ự ư ảc p nh t, thông tin m i, …ậ ậ ớ
3 M c tiêu và ph m vi đ tàiụạề3.1 M c tiêuụ
Hi u rõ h n v HTML và CSS cùng các ngôn ng l p trình web, trau d iể ơ ề ữ ậ ồnh ng k năng xây d ng m t ng d ng web Ngoài ra khi th c hi n đ tài đãữ ỹ ự ộ ứ ụ ự ệ ềgiúp chúng em có nhi u ki n th c n n t ng đ phát tri n ng d ng c a côngề ế ứ ề ả ể ể ứ ụ ủngh vào th c t ệ ự ế
Trang 5CHƯƠNG II CÔNG NGHỆ SỬ DỤNG1 T ng quan v ổề l p trìnhậ Web
L p trình web là quá trình xây d ng và phát tri n các trang web Nó bao g mậ ự ể ồvi c t o ra các thành ph n giao di n nh HTML, CSS và JavaScript đ xây d ngệ ạ ầ ệ ư ể ực u trúc, thi t k và tấ ế ế ương tác v i ngớ ười dùng trên trình duy t.ệ
HTML là ngôn ng đánh d u đữ ấ ượ ử ục s d ng đ t o c u trúc c a m t trang web.ể ạ ấ ủ ộHTML đ nh nghĩa các ph n t c a trang web, ch ng h n nh tiêu đ , đo n văn,ị ầ ử ủ ẳ ạ ư ề ạhình nh, và nút.ả
CSS là ngôn ng đ nh d ng đữ ị ạ ượ ử ục s d ng đ đ nh d ng giao di n c a m t trangể ị ạ ệ ủ ộweb CSS đ nh nghĩa kích thị ước, màu s c, và v trí c a các ph n t HTML.ắ ị ủ ầ ử
Javascript là ngôn ng l p trình đữ ậ ượ ử ục s d ng đ thêm tính tể ương tác cho trangweb JavaScript cho phép người dùng tương tác v i trang web thông qua các sớ ựki n, ch ng h n nh nh p chu t và cu n.ệ ẳ ạ ư ấ ộ ộ
Ngoài ra, l p trình web còn bao g m các thành ph n khác, ch ng h n nh :ậ ồ ầ ẳ ạ ư
● Back-end: Đây là ph n x lý d li u và ph n h i v i các yêu c u t front-ầ ử ữ ệ ả ồ ớ ầ ừend Back-end được vi t b ng các ngôn ng nh PHP, Java, Python, Ruby, ế ằ ữ ưv.v.
● Database: Đây là n i l u tr d li u c a trang web.ơ ư ữ ữ ệ ủ
● Web server: Đây là máy ch l u tr các trang web và ng d ng web.ủ ư ữ ứ ụ
L p trình web là m t lĩnh v c r ng l n và đang phát tri n nhanh chóng Có r tậ ộ ự ộ ớ ể ấnhi u công ngh và ngôn ng l p trình khác nhau có th đề ệ ữ ậ ể ượ ử ục s d ng đ xâyểd ng các trang web và ng d ng web.ự ứ ụ
4
Trang 62 Tổng quan về HTML, CSS và JavaScript2.1 HTML
HyperText Markup Language hay còn g i là HTML là ngôn ng đánh d uọ ữ ấtiêu chu n cho các tài li u đẩ ệ ược thi t k đ hi n th trong trình duy t web Nóế ế ể ể ị ệcó th để ược tr giúp b i các công ngh nh CSS và các ngôn ng k ch b nợ ở ệ ư ữ ị ảgi ng nh JavaScript.ố ư
HTML cung c p các phấ ương ti n đ t o tài li u có c u trúc b ng cáchệ ể ạ ệ ấ ằbi u th ng nghĩa c u trúc cho văn b n nh headings, paragraphs, lists, links,ể ị ữ ấ ả ưquotes và các m c khác 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 Các tags nh và gi i thi u tr c ti p n i dungế ằ ấ ặ ọ ư ớ ệ ự ế ộvào trang Các tags khác nh bao quanh và cung c p thông tin v văn b n tài li uư ấ ề ả ệvà có th bao g m các th khác làm ph n t ph Các trình duy t không hi n thể ồ ẻ ầ ử ụ ệ ể ịcác th HTML, nh ng s d ng chúng đ di n gi i n i dung c a trang.ẻ ư ử ụ ể ễ ả ộ ủ
- Ưu điểm của HTML là:
●Ngôn ng này đữ ược s d ng r ng rãi v i r t nhi u ngu n tàiử ụ ộ ớ ấ ề ồnguyên h tr cùng m t c ng đ ng s d ng vô cùng l n đ ng sauỗ ợ ộ ộ ồ ử ụ ớ ằnó.
●Có th ho t đ ng mể ạ ộ ượt mà trên h u h t m i trình duy t hi n hành.ầ ế ọ ệ ệ
●Mã ngu n m và hoàn toàn mi n phí.ồ ở ễ
●Các Markup s d ng trong HTML thử ụ ường ng n g n và đ ng nh t.ắ ọ ồ ấ
●Chu n chính c a web đẩ ủ ược v n hành b i World Wide Webậ ởConsortium (W3C).
5
Trang 7●D dàng tích h p v i các ngôn ng backend nh PHP, Node.js, ễ ợ ớ ữ ư
- Nhược điểm của HTML:
●Ngôn ng này ch đữ ỉ ược áp d ng ch y u cho trang web tĩnh Đ iụ ủ ế ốv i các tính năng đ ng, b n c n s d ng JavaScript ho c ngôn ngớ ộ ạ ầ ử ụ ặ ữbackend bên th 3 ví d nh PHP.ứ ụ ư
●Người dùng ph i t o các trang web riêng l cho HTML, ngay c khiả ạ ẻ ảcác ph n t gi ng nhau.ầ ử ố
●M t s trình duy t ch p nh n các tính năng m i m t cách ch mộ ố ệ ấ ậ ớ ộ ậch p Đôi khi các trình duy t cũ h n không ph i lúc nào cũng hi nạ ệ ơ ả ểth các th m i h n.ị ẻ ớ ơ
2.2 CSS
Cascading Style Sheet hay còn g i là CSS là m t ngôn ng l p trình đọ ộ ữ ậ ượcthi t k r t đ n gi n và d s d ng M c tiêu c a CSS là giúp đ n gi n hóa quáế ế ấ ơ ả ễ ử ụ ụ ủ ơ ảtrình t o ra các website CSS có nhi m v th c hi n vi c x lý giao di n c aạ ệ ụ ự ệ ệ ử ệ ủm t trang web Có th k đ n các y u t nh màu s c văn b n, hay kho ngộ ể ể ế ế ố ư ắ ả ảcách gi a các đo n, font ch , hình nh, b c c, màu n n,…ữ ạ ữ ả ố ụ ề
V i s h tr c a CSS thì ngớ ự ỗ ợ ủ ười dùng có th thay đ i, ch nh s a nh ngể ổ ỉ ử ữy u t trên theo ý mu n Trong quá trình phát tri n và thi t k website thì CSSế ố ố ể ế ếchính là m t công c vô cùng c n thi t Nó có th gi i quy t t t nh ng côngộ ụ ầ ế ể ả ế ố ữvi c mà HTML không x lý đệ ử ược.
- Có thể phân chia các loại CSS thành những loại như:
●CSS t>y ch?nh hình nền6
Trang 8●CSS t>y ch?nh cách hiển th@ đoạn text
●CSS t>y ch?nh kiểu chữ và kBch thưCc
●CSS t>y ch?nh bảng
●CSS t>y ch?nh danh sách
- Ưu điểm của CSS:
●Khả năng tiết kiệm thời gian
●CSS giúp khả năng tải trang nhanh chóng
●Dễ dàng khi thực hiện bảo trì
●CSS sở hữu thuộc tBnh rộng
●Khả năng tương thBch tốt
- Nhược điểm của CSS:
●CSS hoạt động khác biệt cho từng trình duyệt
●Khá khó khăn cho người mCi
7
Trang 9●Đ@nh dạng của web có khả năng gặp rủi ro
2.3 Javascript
Javascript chính là m t ngôn ng l p trình web r t ph bi n ngày nay.ộ ữ ậ ấ ổ ếJavascript được tích h p đ ng th i nhúng vào HTML đ h tr cho website trợ ồ ờ ể ỗ ợ ởnên s ng đ ng h n Chúng cũng đóng vai trò tố ộ ơ ương t nh m t ph n c aự ư ộ ầ ủwebsite, cho phép Client-side Script t ngừ ười dùng tương t máy ch (Nodejs)ự ủđ t o ra nh ng website đ ng.ể ạ ữ ộ
Javascript – m t ngôn ng vô cùng ph bi n trong lĩnh v c l p trình ngàyộ ữ ổ ế ự ậnay Có th nói r ng, Javascript hay còn g i là JS là ngôn ng r t thông d ngể ằ ọ ữ ấ ụtrong vài năm g n đây Đã có khá nhi u framework ra đ i và đầ ề ờ ược vi t b ng lo iế ằ ạngôn ng này T frontend cho đ n backend thì b t c n i nào cũng có s xu tữ ừ ế ấ ứ ơ ự ấhi n c a JS M t vài thông tin sau đây s giúp cho b n hi u thêm v lo i ngônệ ủ ộ ẽ ạ ể ề ạng đ c bi t này.ữ ặ ệ
- Ưu điểm của Javascript:
●Chương trình r t d h c.ấ ễ ọ
●Nh ng l i Javascript r t d đ phát hi n, t đó giúp b n s a l i m tữ ỗ ấ ễ ể ệ ừ ạ ử ỗ ộcách nhanh chóng h n.ơ
●Nh ng trình duy t web có th d ch thông qua HTML mà không c n sữ ệ ể ị ầ ửd ng đ n m t compiler.ụ ế ộ
●JS có th ho t đ ng trên nhi u n n t ng và các trình duy t web khácể ạ ộ ở ề ề ả ệnhau.
8
Trang 10●Được các chuyên gia đánh giá là m t lo i ngôn ng l p trình nh vàộ ạ ữ ậ ẹnhanh h n nhi u so v i các ngôn ng l p trình khác.ơ ề ớ ữ ậ
●JS còn có th để ượ ắc g n trên m t s các element ho c nh ng events c aộ ố ặ ữ ủcác trang web
●Nh ng website có s d ng JS thì chúng s giúp cho trang web đó có sữ ử ụ ẽ ựtương tác cũng nh tăng thêm nhi u tr i nghi m m i cho ngư ề ả ệ ớ ười dùng.
●Người dùng cũng có th t n d ng JS v i m c đích là đ ki m traể ậ ụ ớ ụ ể ểnh ng input thay vì cách ki m tra th công thông qua ho t đ ng truyữ ể ủ ạ ộxu t database.ấ
●Giao di n c a ng d ng phong phú v i nhi u thành ph n nh Dragệ ủ ứ ụ ớ ề ầ ưand Drop, Slider đ cung c p đ n cho ngể ấ ế ười dùng m t Rich Interfaceộ(giao di n giàu tính năng).ệ
●Giúp thao tác v i ngớ ười dùng phía Client và tách bi t gi a các Clientệ ữv i nhau.ớ
- Nhược điểm của Javascript:
●JS Code Snippet khá l n.ớ
●JS d b các hacker và scammer khai thác h n.ễ ị ơ
●JS cũng không có kh năng đa lu ng ho c đa d ng x lý.ả ồ ặ ạ ử
9
Trang 11●Có th để ược dùng đ th c thi nh ng mã đ c trên máy tính c a ngể ự ữ ộ ở ủ ườis d ng.ử ụ
●Nh ng thi t b khác nhau có th s th c hi n JS khác nhau, t đó d nữ ế ị ể ẽ ự ệ ừ ẫđ n s không đ ng nh t.ế ự ồ ấ
●Vì tính b o m t và an toàn nên các Client-Sideả ậ Javascript s không choẽphép đ c ho c ghi các file.ọ ặ
●JS không đượ ỗ ợc h tr khi b n s d ng trong tình tr ng thi t b đạ ử ụ ở ạ ế ị ượck t n i m ng.ế ố ạ
CHƯƠNG III PHÁT TRIỂN VÀ TRIỂN KHAI CHƯƠNG TRÌNHK t qu thu đếảược
● Giao di n trang chệủ
10
Trang 12● Giao di n trang serverệ
12
Trang 13● Giao di n trang news và bài vi tệế
14
Trang 14● Giao di n trang supportệ
15
Trang 15CHƯƠNG IV KẾT LUẬN1.ƯU ĐI MỂ
- Cơ bản nắm được những kiến thức, cách th c đứ ể xây dựng một trang web,thực hiện đúng quy trình.
- Xây dựng hệ thống giao diện, bưCc đầu xây dựng được một trang web hoàn
Trang 162 H N CHẠẾ
2.1 H n ch c a webạế ủ
- Còn đơn giản so v i b n g cớ ả ố
- V n ch a th c hi n đẫ ư ự ệ ược m t s chi ti t có s n trang g cộ ố ế ẵ ở ố
2.2 H n ch và gi i pháp trong quá trình làm bàiạếả
Vì HTML, CSS, Javascript là ngôn ngữ mCi được học nên có nhiều bỡ ngỡtrong việc căn ch?nh đúng kBch thưCc và có nhiều lệnh mCi nên giải phápduy nhất là đọc slide bài giảng và tìm thêm kiến thức ở trên mạng.
3 K T LU NẾẬ
Sau một thời gian học tập và nghiên cứu, nhóm chúng em đã hoàn thành bàitập đúng hạn Khi làm bài tập lCn, chúng em đã học tập thêm nhiều kiếnthức về những ngôn ngữ, những phần mCi,… và giúp chúng em cải thiệnh n trong vi c hoàn thi n trang webơ ệ ệ Vì đây là lần đầu tiên chúng em làmweb nên vẫn còn nhiều hạn chế trong thiết kế, sản phẩm vẫn còn một số lỗinhỏ Chúng em mong sẽ nhận được những ý kiến đóng góp của các thầy côvà các bạn để bài tập lCn của chúng em được hoàn thiện hơn và có thể đi vàothực tế Nhóm chúng em xin chân thành cảm ơn cô Nguy n Th Thùy Liênễ ịđã tận tình hưCng dẫn, truyền đạt những kiến thức mCi và ch? bảo nhóm emtrong suốt thời gian qua Chúng em xin chân thành cảm ơn!
4 SOURCE CODE4.1 Link source code
4.2 Link trang web
17