TÌM HIỂU HTML 5 VÀ ỨNG DỤNG XÂY DỰNG WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN

HTML là viết tắt của cụm từ Hypertext Markup Language ( Hiểu nghĩa là "Ngôn ngữ đánh dấu siêu văn bản bằng thẻ" ). - HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử dụng các thẻ html để biểu diễn các trang web. Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. File HTML là 1 text file (file văn bản) có chứa các thẻ (tag). File HTML sẽ có phần đuôi là .html

ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG

BÁO CÁO THỰC TẬP CƠ SỞ

ĐỀ TÀI TÌM HIỂU HTML 5 VÀ ỨNG DỤNG XÂY DỰNG WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN

Giáo viên hướng dẫn: Tiến Sĩ.Bùi Ngọc Tuấn

Sinh viên thực hiện: Lê Xuân Thường Lớp: CNTT_12C

THÁI NGUYÊN, NĂM 2016

MỤC LỤC

LỜI NÓI ĐẦU 4

CHƯƠNG I CƠ SỞ LÝ THUYẾT 5

1.1 Tổng quan về website 5

1.1.1 Lịch sử hình thành và phát triển của world wide web……… 5

1.1.2 Phân biệt Web tĩnh, web động……….6

1.2 Ngôn ngữ HTML 7

1.2.1 Định nghĩa HTML……… 7

1.2.2 Giới thiệu về HTML5……… 13

1.2.3 Các cấu trúc mới trong HMTL5……… 14

1.2.4 Các thẻ mới trong HTML5……….15

CHƯƠNG 2: THIẾT KẾ WEBSITE DEMO NGHE NHẠC TRỰC TUYẾN 24

2.1 Giới thiệu bản demo 24

2.2 Yêu cầu cài đặt và cấu hình máy tính 24

2.3 Chi tiết bản demo website nghe nhạc trực tuyến 24

2.4 Kết luận 29

TÀI LIỆU THAM KHẢO 31

NHẬN XÉT CỦA GIÁO VIÊN 32

DANH MỤC HÌNH ẢNH

Hình 1.1: Lịch sử phát triển của công nghệ web……… 11

Hình 1.2: Định dạng âm thanh thẻ audio……… 21

Hình 1.3: Giao diện trang chủ index……….25

Hình 1.4: Giao diện tab nhạc trữ tình………25

Hình 1.5: Giao diện tab nhạc trẻ………26

Hình 1.6: Giao diện bài hát vụn vỡ………26

Hình 1.7: Giao diện bài hát nắm lấy tay anh……… 27

Hình 1.8: Giao diện bài hát Giọt nắng bên thềm………27

Hình 1.9: Giao diện bài hát Nơi ấy con tìm về……… 28

Hình 1.10: Giao diện bài hát Nơi nào có em……… 28

LỜI NÓI ĐẦUHiệ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ềnhcùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máytính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trìnhduyệ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ênmà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ấttố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ênbất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tintrê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 chongười dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tàinguyên phong phú hơn

HTML5 cũng làm cho các ứng dụng web và các trang web hấp dẫnhơ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ắtmắ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ưởngtượng trong đầu hơn

Đó là lý do em lựa chọn đề tài “Tìm hiểu về HTML5 và xây dựng

website demo nghe nhạc trực tuyến”

CHƯƠNG I CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về website

Website là một tập hợp các trang web (web pages), còn gọi là trangweb, trang mạng) bao gồm văn bản, hình ảnh, video, flash v.v…thường chỉnằm trong một tên miền (domain name) hoặc tên miền phụ(subdomain).Trang web được lưu trữ ( web hosting) trên máy chủ web (web server) có thể truy cập thông qua Internet trên World Wideweb của Internet Một trang web là tập tin HTML hoặc XHTML có thể truynhập dùng giao thức HTTP Website có thể được xây dựng từ các tệp tinHTML (website tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ(website động) Website có thể được xây dựng bằng nhiều ngôn ngữ lập trìnhkhác nhau (PHP,.NET, Java, Ruby on Rails )

Nhờ có Web nên dù không phải là chuyên gia mọi người có thể sửdụng Internet một cách dễ dàng Phần mềm để xem Web gọi là trình duyệt(Browser) Một số trình duyệt phổ biến hiện nay là Internet Explorer củaMicrosoft tiếp đó là Navigator của Netcape

1.1.1 Lịch sử hình thành và phát triển của world wide web

Vào 03/1989, Tim Berners-Lee công bố sự ra đời của mạng toàn cầuWorld Wide Web (WWW) dựa trên công nghệ hypertext Dự án siêu vănbản toàn cầu cho phép các nhà vật lý có thể cùng làm việc với nhau trênmạng Năm 1991, phòng thí nghiệm vật lý thực nghiệm châu Âu (CERN) tạiThụy Sĩ công bố trước toàn thế giới về sự ra đời của WWW Với sự giúp đỡcủa ngôn ngữ siêu văn bản (Hypertext Markup Language - HTML), mộtkhông gian ảo chứa thông tin, tài liệu, âm thanh, hình ảnh video xuất hiện.Trên internet, kết nối là những sợi cáp nối các máy tính với nhau; còn trênweb, kết nối là những đường liên kết siêu văn bản Internet tồn tại được lànhờ những chương trình liên kết giữa các máy tính Mạng toàn cầu - WWWkhông thể tồn tại nếu không có các mạng cơ sở (mạng của các đường truyền

và các chương trình liên kết), nhưng mạng toàn cầu cũng làm cho mạng cơ

sở trở nên hữu ích hơn, bởi điều con người thật sự quan tâm là thông tin chứkhông phải là máy tính và cáp truyền dữ liệu

Năm 1991, dự án của Tim Berners trở thành sự thật Hệ thống chia sẻthông tin, giờ đây có tên phổ biến là World Wide Web, đã được đưa vào sửdụng trong cộng đồng Vật lý thông qua máy vi tính của CERN, được các nhàvật lý gọi là Máy Chủ Web (Web Server-thực chất vào lúc đó là TextServer)

Tháng giêng năm 1992, World Wide Web được phổ biến rộng rãi đếncông chúng qua mạng lưới Internet- mạng máy tính lớn nhất thế giới Vàcuối năm 1992, thế giới có khỏang 50 máy chủ Web họat động Hầu hết cácmáy được đặt ở các trường Đại Học

Vào năm 1995, World Wide Web bắt đầu được thương mại hóa Các tậpđòan lớn như AT&T, Digital Equipment Corporation, IBM, MCI, Novell vàSun Microsystems thiết lập các máy chủ Web để cung cấp thông tin và thôngtin thị trường cho bất cứ ai có máy vi tính kết nối Internet và trình duyệtWeb

Việt Nam chính thức kết nối internet tháng 12/1997

1.1.2 Phân biệt Web tĩnh, web động

Trang Web tĩnh

Web tĩnh là website sử dụng hoàn toàn ngôn ngữ HTML (có đuôi htmlhoặc htm), sau khi tải trang HTML từ máy chủ xuống, trình duyệt (IE,Firefox, Opera, ) sẽ biên dịch mã và hiển thị nội dung trang web, ngườidùng hầu như không thể tương tác với trang web

Ví dụ: Người dùng không thể gửi bài, đặt hàng, người quản lý websitekhông thể thêm bớt, sửa xóa thông tin về sản phẩm

Ưu điểm của website tĩnh:

- Chạy nhanh

- Ít tốn tài nguyên máy chủ

- Gần như không thể hack.

- Chi phí tạo thấp

- Nhược điểm của website tĩnh

- Website tĩnh tương tự như 1 tờ báo giấy, không có sự tương tácgiữa người truy cập và website, khách không thể tự thay đổi nộidung website, do đó chi phí sửa nội dung sẽ rất cao

Trang web động

Web động là website có sự tương tác 2 chiều giữa người truy cập, người quản

lý và website

Ưu điểm của website động:

- Khả năng tương tác với người dùng,

- Ngôn ngữ lập trình cấp cao cho phép tạo ra các website với nhiều mục

đích sử dụng

- Thỏa mãn nhu cầu truy cập của khách hàng

- Nhược điểm của website động:

- Dữ liệu lớn, cấu trúc phức tạp, chi phí thiết kế cao

1.2 Ngôn ngữ HTML

1.2.1 Định nghĩa 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ươngcủa CERN - Viện Thí Nghiệm Vật Lí Phân Tử Châu Âu (Conseil Européenpour 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(trongKinh 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ậnnà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ộtgiao 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ố 20thẻ đó vẫn còn được hiển thị trong HTML4

- HTML1:

HTML1 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 đầutiên được tung ra vào cuối năm 1990 và gần như một năm sau, ngôn ngữ nàymới thực sự được ứng dụng Năm 1993 các chuẩn HTML trở thành nền tảngcủa Mosaic- Trình duyệt đầu tiên của Internet

- HTML2:

Nhiều công ty lớn đã đánh giá không đúng sức mạnh của ngôn ngữ siêu vănbả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ựcrấ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ơitrê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ácthẻ này nhằm nhấn mạnh trình độ đã đạt tới của chuẩn HTML vào thời điểmhiệ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ênbả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ụngnhững phát triển của HTML W3C chấp nhận những phiên bản cải tiến củaHTML với các thẻ mới và các chức năng mới Dave Ragget đã mua về mộtphiê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ảitiế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ênbản này đã bị bỏ đi Phiên bản HTML 3.2 là phiên bản mạnh nhất của sê-ri này

và trước khi được tung ra, nó được duyệt bởi W3C và bởi các nhà cung cấptrình duyệt chóp bu là Netscape và Microsoft

- HTML4:

Người ta dành cả năm 1997 để phát triển phiên bản HTML4, một bước tiếntriển quan trọng trong những phiên bản cũ HTML4 có những công cụ có giá trịmang lại thêm nhiều đất sáng tạo cho dân thiết kế web: CSS Ban đầu CSS cũngkhông được coi là quan trọng lắm, nhưng đến nay, người ta đánh giá nó cũngquan trọng không kém gì bản thân HTML Một sự kiện quan trọng nữa là sựphát triển của các trình duyệt: Microsoft ứng dụng hầu như tất cả các thẻ và trình duyệt Internet Explorer được người sử dụng yêu thích hơn ,làm lu mờNetscape Vào tháng 4 năm 1998 HTML4 đã được chứng nhận bởi W3C vàtương lai trở nên sáng lạn hơn HTML có một “đối thủ” gọi làXHTML(Extensible HyperText Markup Language- tạm dịch: ngôn ngữ đánhdấu siêu văn bản mở rộng) và từ năm 1998 đến nay, cuộc chiến vẫn diễn ra ácliệt , nhưng cuối cùng có lợi nhất vẫn là người sử 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ượngphong 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ăngmớ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 tanên chuẩn bị tinh thần chờ đợi một vài năm để đưa nó vào hoạt động, tức là chođến lúc các nhà thiết kế Web làm chủ được các chức năng mới của phiên bảnlần này Một trong những thẻ làm người sử dụng trở nên mê mệt sẽ là thẻ cóchức năng cho phép xem videos mà không cần phải cài đặt Flash hay bất cứplug-in phụ nào Các cuộc tranh luận sẽ vẫn còn tiếp tục nhưng chắc chắn sẽ là

về các chức năng mới của phiên bản lần này

Những thẻ thú vị là những thẻ cho phép bạn dễ dàng quản lí dữ liệu hơn nhưlà:

Bản HTML5 có nhiều thẻ nhưng cũng có nhiều vấn đề và rất khó để quảquyết một cách chắc chắn bởi vì mọi việc còn có thể khác hẳn vào ngày mai.Một thực tế chắc chắn đó là: bởi vì phiên bản lần này được nghiên cứu bởi cáctập đoàn và các chuyên viên thiết kế, nên kết quả chỉ có thể là bước nhảy vọtđầy ấn tượng trong dòng chảy của sự phát triển Web, Internet và thiết kế Trongchuẩn mới thực sự hoàn chỉnh của HTML, một nhân tố vô cùng quan trọng sẽđóng góp vào vai trò ảnh hưởng của HTML 5, đó là: CSS3

Tin tốt là những phiên bản mới của CSS đi kèm với HTML 5 sẽ cho phép cácnhà thiết kế có thể thỏa sức sáng tạo Hi vọng rằng không lâu nữa HTML 5 sẽthực sự đi vào sử dụng và chúng ta sẽ được nhìn thấy các Websites thiết kếbằng HTML 5 trong thời gian gần đây.

Hình 1.1: Lịch sử phát triển của công nghệ web

Thành phần của HTML

Các dạng thẻ HTML:

- Thẻ HTML dùng để viết lên những thành tố HTML

- Thẻ HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn

- Những thẻ HTML thường có một cặp giống như <b> và </b>

- 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 <b> và <B> đều như nhau

Thành phần HTML

- Thành phần của HTML bắt đầu với thẻ: <b>

- Nội dung của nó là: web design resources

- Thành phần của HTML kết thúc với thẻ: </b>

- Mục đích của thẻ <b> là để xác định một thành phần của HTML phải

được thể hiện dưới dạng in đậm

- Phần này bắt đầu bằng thẻ bắt đầu <body> và kết thúc bằng thẻ kết thúc

</body> Mục đích của thẻ <body> là xác định thành phần của HTMLbao gồm nội dung của tài liệu

Bố cục chuẩn của một trang tài liệu HTML

- <!DOCTYPE>: phần khai báo chuẩn của html hay xhtml

- <head></head>: Phần khai báo ban đầu, khai báo về meta, title, css,javascript Đây là nơi người lập trình đưa ra thông tin ban đầu về trang web,

nó có thể là tiêu đề trang web, mô tả trang web, về tác giả trang web, về thờigian refresh trang, về bộ gõ tiếng việt của trang… những nội dung trên sẽkhông được hiển thị trên trình duyệt

- <body></body> : phần chưa nội dung của trang web, nơi hiển thị nội dung.Phần thân của trang web có thể đc bố cục thành 3 phần cơ bản đó là:

- Header: là phần đầu của nội dung trang web, nó thường được dùng để đặtlogo web, tên website

- Body_main: là phần thân nội dung trang web, nó là phần đặt menu chínhmenu phụ của trang web, các bài viết của trang web, các liên kết khác…

- Footer: Là phần chân của nội dung trang web, thường được dùng để ghi bảnquyền trang web, tác giả trang web, thông tin liên hệ.

Một số điều cần lưu ý khi soạn thảo siêu văn bản bằng HTML:

- Nhiều dấu cách liền sau cũng chỉ có tác dụng như một dấu cách Phải sử

dụng thẻ để thể hiện nhiều dấu giãn cách liền nhau

- Gõ enter để xuống dòng xem như một dấu cách, để xuống hàng thì phải sử

HTML5 là sự phát triển mạnh mẽ đột biến của HTML Đây là hình thứcđịnh dạng cốt lõi của hầu hết các website trên internet cho đến năm 2004, ngônngữ HTML được phát triển bởi World Wide Web Consortium Rất nhiều nhàphát triển đã thất vọng với những cải tiến trong ngôn ngữ HTML mà W3C đã đềxuất, nhiều ý kiến cho thấy họ đã mất liên kết với các nhu cầu web hiện đại vàphát triển ứng dụng Một nhóm mới có tên WHATWG (Web HypertextApplication Technology Working Group) nắm quyền phát triển ngôn ngữ này và

đã đặt tên nó là các chi tiết kĩ thuật của HTML5

HTML5 tạo ra sự trải nghiệm người dùng hấp dẫn hơn Các trang đượcthiết kế bằng HTML5 có thể cung cấp một trải nghiệm giống như các ứng dụngcủa máy tính để bàn HTML5 cũng cung cấp phát triển nhiều nền tảng nâng caobằng cách kết hợp khả năng của các API với sự có mặt ở khắp mọi nơi của trìnhduyệt Khi sử dụng HTML5, các nhà phát triển có thể cung cấp một trải nghiệmứng dụng hiện đại, trôi chảy qua các nền tảng Khi nói tới HTML5, nghĩa làđang sử dụng phép tốc ký cho sự đổi mới liên tục Các thẻ mới, các phương thứcmới và một framework phát triển chung dựa trên các sự tác động lẫn nhau củaHTML5 và hai đối tác của nó, CSS3 và JavaScript Đây là cốt lõi của hiện tượng

xử lý ứng dụng lấy máy khách làm trung tâm

Ngoài việc triển khai các kỹ thuật và các phương thức của công nghệHTML5 cho máy tính để bàn, có thể triển khai thực hiện HTML5 trong nhiềutrình duyệt điện thoại di động web có tính năng phong phú một thị trường đang

phát triển, khi đã chứng kiến sự phổ biển của các hệ điều dành web AppleiPhone, Google Android và các điện thoại chạy Palm HTML5 cung cấp:

- Các thẻ mô tả chính xác những gì chúng được thiết kế

- Tăng cường khả năng truyền thông trên mạng

- Cải thiện khả năng lưu trữ chung

- Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền

- Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú

và máy chủ

- Truy vấn dữ liệu đã được lưu trữ tốt hơn

- Cải thiện tốc độ nạp và lưu trang

- Hỗ trợ cho CSS3 để quản lý giao diện

người dùng đồ họa (GUI), có nghĩa là

HTML5 có thể được định hướng nội dung

- Cải thiện xử lý biểu mẫu trình duyệt

- Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách

- Canvas và video, để thêm đồ họa và video mà không cần cài đặt các

plug-in của bên thứ ba

- Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị củamáy điện thoại thông minh kết hợp với các dịch vụ và các ứng dụng đám mây

di động

- Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phéptruyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toánđám mây

1.2.3 Các cấu trúc mới trong HMTL5

Đầu tiên, chúng ta nói về cấu trúc mới thay đổi của HTML 5 gồm những tagmang tính chất đột phá:

- Tag <section></section> được định nghĩa cho ý nghĩa của nó Section tag

là một đại diện cho những phần chung của tài liệu hoặc ứng dụng nó thể hiệnmột nhóm chuyên đề về nội dung, thông thường thể hiện với các heading

- Tag article là tag <article> đại diện cho phần self-contained của toàn bộtài liệu, ứng dụng của website Có thể là một diễn đàn, bài viết, tạp chí, blog,bình luận người dùng, widget hoặc tiện ích khác

- Aside tag <aside></aside> là một trong những tag quan trong của html 5

nó được định nghĩa như một phần nội dung của toàn trang và cũng có thể đượcxem là tách biệt với nội dung đó Và nó thương biểu thị như là slidebars

- Header tag <header></header> là một trong những phần tử của html5 nóthể hiện để biểu thị tiêu đề từ h1 > h6, hoặc những nhóm, tập hợp các biểutượng logos

- Hgroup tag cho biết sự thể hiện sự quan trọng của nó so với các phần tử.Các phần tử tag có thể sử dụng kèm theo là các header của html từ h1 > h6 khichứa nhiều cấp, các header con, các title, hoặc các taglines

- Footer tag được biểu thị dưới dạng <footer></footer> là phần tử nằmtrong html5 dùng để chứa nội dung của các footer như là thông tin về công ty,phone, copyright data, like

- Nav tag <nav></nav> là một phần đại diện của page thể hiện chức năng link

từ một page này đến page khác hoặc đến một phần của page “a section withnavigation links"

1.2.4 Các thẻ mới trong HTML5

Thẻ canvas

- Canvas HTML5 là một phần tử vẽ và tạo hình ảnh động vô cùng có ích.Canvas sử dụng JavaScript để vẽ đồ họa trực tiếp trên trang web Đây là vùngchữ nhật mà bạn định nghĩa và điều khiển và nó cho phép dựng hình 2D và hìnhảnh bitmap động, theo bảng kịch bản lệnh

- Canvas HTML5 là lý tưởng để sản xuất tài liệu hình ảnh thú vị nhằm nângcao các UI, các bản vẽ, các album ảnh, các biểu đồ, các đồ thị, các hình ảnhđộng, và các ứng dụng bản vẽ nhúng Phần tử Canvas có một số phương thức để

</canvas>

- Ưu điểm:

Có thể lưu ảnh dạng png hoăc jpg

Rất thích hợp xây dựng games đồ họa

Thẻ drag and drop

- Là khả năng kéo và thả một đối tượng, nó là một trong những tính năng mới khá hay của HTML5

- Kéo và thả là một tính năng rất phổ biến Đó là khi bạn "lấy" một đối tượng và kéo nó đến một vị trí khác nhau

- Trong HTML5, kéo và thả là một phần của tiêu chuẩn, và bất kỳ yếu tố

- Làm Drop: Khi dữ liệu được kéo giảm, một sự kiện xảy ra thả

Trong ví dụ trên, thuộc tính ondrop gọi một chức năng, thả (sự kiện):

- Các dữ liệu kéo là id của phần tử kéo ("drag1")

- Thêm các yếu tố lôi kéo vào các yếu tố giảm

nhúng một đoạn video hoặc phim trên một trang web: các yếu tố <video>

- Để hiển thị một đoạn video trong HTML5

Ví dụ:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

Thẻ video xác định một đoạn video, chẳng hạn như một đoạn phim hoặc mộttrường video

- Cú pháp: <video src="" controls="controls">Dòng thông báo</video>

- Đoạn text nằm bên trong <video> và </video> sẽ hiển thị khi trình duyệt không hỗ trợ tag <video>

- Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn

Ví dụ:

<video src=”đường dẫn tới file video” controls=”controls”>Trình duyệt đang dùng không hỗ trợ tag video</video>