1 / 35

HTML5

HTML5. 0812159 – Võ Nguyên Hiệp 0812164 – Đinh Văn Hoàng. GIỚI THIỆU. HTML5  là một ngôn ngữ cấu trúc và trình bày nội dung cho  World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software

kovit
Télécharger la présentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 0812159 – Võ Nguyên Hiệp 0812164 – Đinh Văn Hoàng

  2. GIỚI THIỆU • HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Webvà sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software • Đây là phiên bản thứ 5 của ngôn ngữ HTML và hiện tại vẫn đang được phát triển bởi World Wide Web Consortium vàWHATWG

  3. GIỚI THIỆU • Cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất,giúp trình duyệt web, trình đọc màn hình ... có thể đọc, hiểu, hay xử lý một cách dễ dàng. • HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi trội của XHTML,DOM, đặc biệt là JavaScript.

  4. Thẻ mới • Các thẻ đánh dấu article aside bdi command details summary figure figcaption footer header hgroup mark

  5. Thẻ mới • Các thẻ đánh dấu meter nav process ruby rt rp section time wbr

  6. Thẻ mới • Các thẻ media audio video source embed track • Thẻ Canvas canvas • Các thẻ form datalist keygen output

  7. Thẻ mới • Thuộc tính type của thẻ inputcó các giá trị mới: tel search url email datetime date month week time datetime-local number range color

  8. Thuộc tính mới • Thẻavà areacó thêm thuộc tính media • Thẻ area có thêm thuộc tính hreflang, type và rel tương tự như a và link • Thẻmetacó thêm thuộc tính charset nhằm hỗ trợ character encoding • ….

  9. Thay đổi trong các thẻ • Thẻhrđược dùng để ngắt đoạn • Thẻheadkhông cho phép có thẻ object là thẻ con • Thẻlabelsẽ không có focus trừ khi bạn định nghĩa trong giao diện người dùng

  10. Thay đổi trong các thẻ • Thẻ input có thuộc tính typevới các giá trị mới

  11. Thay đổi trong các thẻ • Thẻ input có thuộc tính typevới các giá trị mới

  12. Thay đổi thuộc tính • Thẻ li chấp nhận thuộc tính value, cũng như thuộc tính start trong thẻ ol • Thẻavàareachấp nhận thuộc tính target • Thẻ scriptvàstyle không yêu cầu cần phải có thuộc tính typenếu ngôn ngữ script là ECMAScript và style là CSS • …

  13. Bỏ bớt các thẻ • Các thẻ sau không có trong HTML5 bởi • Chức năng của chúng đã được thay thế tốt hơn bằng CSS : basefont, big, center, font, strike, tt • Khả năng sinh lỗi lớn : frame, frameset, noframes

  14. Bỏ bớt các thẻ • Các thẻ sau không có trong HTML5 bởi • Ít sử dụng, đã được thay thế bởi các thẻ khác : • acronym được thay bằng abbr • applet thay bằng object • isindex thay bằng form • dir thay bằng ul

  15. Bỏ bớt các thuộc tính • rev vàcharsettrong linkvàa. • shapevàcoordstronga. • longdesc  trong  img  và  iframe. • target  trong  link. • nohref  trong  area. • profile  trong  head. • version  trong  html.

  16. Bỏ bớt các thuộc tính • name trong  img(dùng idthay thế) • scheme  trong  meta. • archive, classid, codebase, codetype, declare  và standby trong object. • valuetype  và  type trong param. • axisvàabbr trong td  và  th. • scopetrongtd. • summary  trong  table.

  17. Bỏ bớt các thuộc tính • Những thuộc tính sau được thay thế bằng CSS • align alink link • text background bgcolor • border cellpadding cellspacing • char charoff clear • compact frame frameborder • height hspace vspace …

  18. API • HTML5 hỗ trợ một số hàm API nhằm giúp đỡ trong việc tạo các ứng dụng web. Được sử dụng với những thẻ mới • Chạy filevideovà audio dùng trong thẻ video vàaudio • Giúp ứng dụng web chạy offline • Cho phép đăng ký protocols và media types. • Cho phép chỉnh sửa khi dùng thuộc tính contenteditable • Cho phép kéo - thả với thuộc tính draggable • Cho phép lưu lịch sử duyệt web

  19. HTML5 DEMO • Canvas • Drag and Drop • Geolocation • Input Types • Offline event • Sound • Two videos playing in sync • Video • Web Storage

  20. HTML5 - Video <video width="700" height="400" controls="controls"> <source src="BEE.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> http://www.w3schools.com/html5/html5_video.asp

  21. HTML5 - Video • Video Formats http://www.w3schools.com/html5/html5_video.asp

  22. HTML5 - Sound <audio src="Linh-Hon-Da-Mat.mp3" controls="controls"> Your browser does not support the audio element. </audio> http://www.w3schools.com/html5/html5_audio.asp

  23. HTML5 - Sound • Sound Formats http://www.w3schools.com/html5/html5_audio.asp

  24. HTML5 - Canvas What is Canvas? • A canvas is a rectangular area, and you control every pixel of it. • The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. • The HTML5 canvas element uses JavaScript to draw graphics on a web page. http:// www.w3schools.com/html5/html5_canvas.asp

  25. HTML5 - Canvas

  26. HTML5 - Canvas • Create a Canvas Element <canvas id="myCanvas" width="200" height="100"></canvas> • Add a canvas element to the HTML5 page. • Specify the id, width, and height of the element:

  27. HTML5 - Canvas • Draw With JavaScript • All drawing must be done inside a JavaScript: <script type="text/javascript">var c=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script> http://www.w3schools.com/html5/html5_canvas.asp

  28. HTML5 - Canvas • Draw With JavaScript • cxt.fillRect(0,0,150,75);

  29. HTML5 - Canvas • Draw Line varcxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(50,80); cxt.lineTo(120,10); cxt.stroke();

  30. HTML5 - Canvas • Draw Circle var c=document.getElementById("myCanvas"); varcxt=c.getContext("2d"); cxt.arc(80,68,45,0,Math.PI,true); cxt.lineWidth = 15; cxt.strokeStyle = "black"; cxt.stroke();

  31. HTML5 - Canvas • Draw Circle

  32. HTML5 - Canvas • createLinearGradient() • drawImage()

  33. HTML5 – Web Storage • localStorage - stores data with no time limit • sessionStorage - stores data for one session localStorage.lastname="Smith";document.write(localStorage.lastname); sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);

  34. HTML5 – Input Types • better input control and validation. • email • url • number • range • Date pickers (date, month, week, time, datetime, datetime-local) • search • color

  35. HTML5 – Input Types • Browser Support:

More Related