TÌM HIỂU, GIỚI THIỆU VỀ HTML5 VÀ CSS3ỨNG DỤNG XÂY DỰNG TRANG WEB CHO SIÊU THỊ ĐIỆN MÁY HCMỤC LỤCDANH MỤC CÁC KÝ TỰ, CÁC TỪ VIẾT TẮT4CHƯƠNG I: TỔNG QUAN VỀ HTML VÀ CSS71.1 HTML71.2 CSS121.3 CÁC PHIÊN BẢN VÀ CÁCH THỨC LẬP TRÌNH JAVASCRIPT.16CHƯƠNG II: TỔNG QUAN VỀ HTML5 VÀ CSS3202.1 HTML5202.2 CSS3382.3 NHỮNG MẶT HẠN CHẾ CỦA HTML5 VÀ CSS345CHƯƠNG III: GIỚI THIỆU BẢN DEMO VÀ KẾT LUẬN493.1 GIỚI THIỆU BẢN DEMO493.2 KẾT LUẬN51TÀI LIỆU THAM KHẢO52
TRƯỜNG ĐẠI HỌC CNTT VÀ TT KHOA CÔNG NGHỆ THÔNG TIN o O o THỰC TẬP CƠ SỞ Đề tài : TÌM HIỂU, GIỚI THIỆU VỀ HTML5 VÀ CSS3 ỨNG DỤNG XÂY DỰNG TRANG WEB CHO SIÊU THỊ ĐIỆN MÁY HC Giáo viên hướng dẫn : ThS. DƯƠNG THU MÂY Sinh viên thực hiện : NÔNG VĂN THÁI Lớp : MMT-K10A Thái Nguyên, ngày tháng năm 2014 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN …………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ……………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Thái nguyên, ngày tháng năm 2014 ( Kí và ghi rõ họ tên ) MỤC LỤC DANH MỤC CÁC KÝ TỰ, CÁC TỪ VIẾT TẮT Từ viết tắt Từ đầy đủ Giải thích CNTT Công nghệ thông tin TT Truyền thông HTML Hyper Text Markup Language CSS Cascading Style Sheets LỜI MỞ ĐẦU Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn, trên máy tính bạn xem trang web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn. Hay bạn có thể xem phim rất tốt với IE nhưng với Firefox thì không. Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin trên internet. HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có những tính năng ưu việt hơn. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn. HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn. Ngoài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế web dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript đó là Akihabra Games và Star Wars AT-AT Walker. Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác. Mặc dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 sẽ có nhiều hứa hẹn trong lĩnh vực này. Đó là lý do em lựa chọn đề tài “Tìm hiểu về HTML5 và CSS 3, ứng dụng xây dựng trang web quản lý thông tin cá nhân”. Trong đề tài thực tập của mình em tập chung vào nghiên cứu các nội dung chính sau: Chương 1: Lịch sử hình thành và phát triển của HTML và CSS Chương 2: Các thuộc tính mới trong HTML5 và CSS3 Chương 3: Giới thiệu bản DEMO (trang web quản lý thông tin cá nhân) Em xin chân thành cảm ơn các thầy, cô giáo khoa Công Nghệ Thông Tin, ĐH Công Nghệ Thông Tin và Truyền Thông đã giảng dạy em các bộ môn trong thời gian vừa qua. Đặc biệt là thầy giáo Phạm Hồng Việt là giáo viên hướng dẫn trực tiếp, đã tận tình chỉ bảo em hoàn thành đề tài. CHƯƠNG I: TỔNG QUAN VỀ HTML VÀ CSS 1.1 HTML Định nghĩa về HTML HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị các trang web. - Hyper Text Markup Language chính là HTML (Viết tắt) - Nhiều người nhầm tưởng HTML là ngôn ngữ lập trình nhưng sự thực không phải như vậy, nó là một ngôn ngữ đánh dấu - Một ngôn ngữ đánh dấu là một bộ các thẻ đánh dấu - Để có thể miêu tả trang web ta cần đánh dấu các thẻ HTML Lịch sử hình thành và quá trình phát triển của HTML Ai phát minh ra HTML và mục đích ban đầu của ngôn ngữ này là gì? Chúng ta đều biết rằng Thụy Sĩ, hay chính xác hơn , Geneva là quê hương của CERN- Viện Thí Nghiệm Vật Lí Phân Tử Châu Âu(Conseil Européen pour la Recherche Nucléaire, theo tiếng Pháp) và cũng chính tại đây, “Thí Nghiệm Thiên Nhiên Kỉ” đã được tiến hành. Đây là một sự kiện gây chấn động, thu hút nhiều mối quan tâm của dư luận. Rất nhiều người trong số họ coi thí nghiệm và nơi diễn ra thí nghiệm này như là khởi đầu của sự Khải Huyền(trong Kinh Thánh). Dù gì đi nữa thì tôi cũng không muốn có thêm bất cứ bình luận nào về câu chuyện này, điều đáng bàn ở đây đó là : Geneva , Thụy Sĩ là quê hương của HTML. Tim Berners-Lee là cha đẻ của HTML (Wikipedia viết rằng: Ngôn ngữ siêu văn bản là “văn bản được hiển thị trên máy tính hoặc các thiết bị điện tử khác . Ngôn ngữ này có dính dáng tới những ngôn ngữ khác mà người đọc có thể truy cập ngay lập tức, thường là bằng một cú nhấp chuột hay là bằng một tổ hợp phím tắt ”). Năm 1989, ông nghiên cứu ra ngôn ngữ HTML như là một giao thức truyền đạt thông tin giữa giới khoa học với nhau và thành công của nó vẫn còn cho đến ngày nay. Tim đầu tiên tạo ra 20 thẻ trong HTML, lấy ý tưởng từ ngôn ngữ SGML ,nhưng điều kì diệu đáng kinh ngạc là ở chỗ 13 trong số 20 thẻ đó vẫn còn được hiển thị trong HTML4. HTML 1 (Nhiều dân thiết kế/lập trình không coi HTML1 như là một phiên bản của HTML ) HTML 1 không cho phép truyền đạt cấu trúc trang phức tạp, nhưng vừa đủ để cho phép tạo ra một trang web đơn giản. Vạn sự khởi đầu nan. Phiên bản đầu tiên được tung ra vào cuối năm 1990 và gần như một năm sau, ngôn ngữ này mới thực sự được ứng dụng. Năm 1993 các chuẩn HTML trở thành nền tảng của Mosaic- Trình duyệt đầu tiên của Internet. HTML 2 Nhiều công ti lớn đã đánh giá không đúng sức mạnh của ngôn ngữ siêu văn bản , nhưng cuối cùng thì các chuẩn HTML cũng được phổ biến rộng rãi. Bởi vì không có một tổ chức nào đứng ra hỗ trợ cho sự phát triển ngôn ngữ HTML , mọi thứ bị ngừng trệ. Vào tháng 7 năm 1994, HTML 2 được phát hành. HTML 2 là phiên bản cải tiến của HTML. Phiên bản lần này được tạo ra bởi sự nỗ lực rất lớn của những người yêu thích HTML trên khắp thế giới. Những người này đã đảm nhận một nỗ lực khổng lồ khi chú ý đến tất cả đóng góp từ khắp nơi trên thế giới cho phiên bản mới này. Trước tình hình này, cũng trong cùng năm 1994, Tập Đoàn Tài Chính World Wide Web được thành lập với người đứng đầu là Tim Berners-Lee. Năm 1995, thẻ mới là thẻ “bgcolor”(màu nền) hay thẻ “font face”(font chữ?) được đưa vào ứng dụng; Tôi đưa ra những ví dụ về các thẻ này nhằm nhấn mạnh trình độ đã đạt tới của chuẩn HTML vào thời điểm hiện tại… chúng ta có thể nói rằng sự khác biệt giữa phiên bản đầu tiên và phiên bản năm 1995 là rất lớn. HTML 3 Internet làm cho ngôn ngữ HTML phát triển và chính nó cũng ứng dụng những phát triển của HTML. W3C chấp nhận những phiên bản cải tiến của HTML với các thẻ mới và các chức năng mới. Dave Ragget đã mua về một phiên bản thú vị với rất nhiều thẻ HTML hấp dẫn và phiên bản này đã được cải tiến rất hay. Nhưng vì nó làm chậm đường truyền của các trình duyệt nên phiên bản này [...]... ECMAScript 1,ISO-16262 Navigator 26 và 7, 1.5 4-2000 Internet Explorer 35.5 ECMAScript 3 và 6, mozilla 1 2.0 2003 ECMAScript 4 CHƯƠNG II: TỔNG QUAN VỀ HTML5 VÀ CSS3 2.1 HTML5 Sự ra đời của HTML5 HTML5 sẽ cho phép một lớp ứng dụng web mới ra đời, hỗ trợ nội dung đa phương tiện và các tính năng offline mà không cần đến những công nghệ độc quyền đi kèm Các đặc tính của HTML5 đã và đang được nói đến rất nhiều... kỹ thuật của HTML5 sẽ được trình lên W3C Candidate Recommendation vào năm 2012 và lên W3C Recommendation vào năm 2022 Tuy nhiên, nhiều đặc tính kỹ thuật của HTML5 đã ổn định và có thể được ứng dụng ngay từ bây giờ Theo Hickson, khung thời gian đệ trình và thử nghiệm kỹ thuật HTML5 là: - Dự thảo đầu tiên gửi lên W3C vào tháng 10/2007 Dự thảo cuối cùng vào tháng 10/2009 Kêu gọi thử nghiệm vào năm 2011... Recommendation) vào năm 2012 Dự thảo bộ thử nghiệm đầu tiên vào năm 2012 Dự thảo thử nghiệm thứ hai vào năm 2015 Phiên bản thử nghiệm cuối cùng vào năm 2019 Phát hành lại Dự thảo Last Call Working Draft vào năm 2020 Đề cử dự kiến vào năm 2022 HTML5 sẽ thay thế HTML4, DOM2 HTML và XHTML 1 Các thuộc tính mới trong HTML5 Các tính năng video của HTML5 – cho phép đơn giản hoá việc thêm một video vào trang Web... dấu lớn hơn < và > nhỏ hơn • Những thẻ HTML thường có một cặp giống như và • Thẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc • Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung • Những thẻ HTML không phân biệt in hoa và viết thường Ví dụ dạng và đều như nhau • Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung • Những thẻ HTML không phân biệt in hoa và viết thường... nghiên cứu về HTML5 đã bắt đầu từ giữa những năm 2000, song các đặc tính kỹ thuật của nó dự kiến sẽ được hoàn thiện vào tận năm 2022 HTML4 chính thức xuất bản vào năm 1999 Chính xác thì các công trình nghiên cứu về HTML5 bắt đầu vào tháng 6/2004, do các tổ chức World Wide Web Consortium HTML Working Group (W3C HTML WG) và WHATWG cùng phối hợp thực hiện Ian Hickson, biên tập kỹ thuật của HTML5, nói ông... thiệu vào năm 1996 Cách đơn giản nhất để hiểu CSS là hãy coi nó như một phần mở rộng của HTML để giúp đơn giản hóa và cải tiến việc thiết kế cho các trang web Mỗi khi bạn bắt đầu một Style Sheets, thì bắt buộc mở bằng và kết thúc bằng và tiếp theo sau đó là khai báo và kết thúc bằng và sau những bước trên thì bạn có thể nhìn thấy nguyên đoạn code như sau: và. .. dụng Internet HTML5 Vào tháng 1 năm 2008, W3C tung ra bản nháp của HTML5 và thế thượng phong có vẻ nghiêng về HTML(so với XHTML) Phần lớn chúng ta đều biết khả năng của bản HTML4.01- phiên bản gần đây nhất, nhưng những tính năng mới của phiên bản thứ 5 này là gì? Cá nhân tôi cho rằng phiên bản lần này sẽ mang lại nhiều cải tiến và chúng ta nên chuẩn bị tinh thần chờ đợi một vài năm để đưa nó vào hoạt động,... phần tiếp theo 2.2 CSS3 sự ra đời của CSS3 Ngày 23/5/2001 W3C đã giới thiệu CSS3 tới cộng đồng người phát triển web, trong những năm đầu đang phát triển CSS3 nó vẫn còn mới lạ đối với người phát triển web, mãi cho tới thời điểm những năm 2007 đến 2010 và thời điểm hiện tại thì CSS3 đã thật sự tạo nên một sức hút lớn với những tính năng mạnh mẽ của nó Các thuộc tính mới trong CSS3 Phần này giới... Youtube sử dụng Flash, Microsoft sử dụng Windows Media®, và Apple sử QuickTime Với HTML5 việc chèn đa phương tiện vào web trở nên vô cùng đơn giản như bạn chèn hình ảnh vào trang web vậy Bạn có thể đặt nội dung vào giửa thẻ mở và thẻ đóng để mô tả cho bài hát hoặc đoạn phim