HTML is a computer language devised to allow website creation Firstly mentioned on the Internet by Berners-Lee in late 1991. HTML stands for Hyper Text Markup Language .• An HTML file is a text file containing small markup tags .• The markup tags tell the Web browser how to display the page .• An HTML file must have an htm or html file extension Example : Simple HTML Page Example Explained The first tag in your HTML document is <html>.
New Markup Elements <article> Defines external content <aside> Defines some content aside from the article it is placed in <audio> Defines sound, such as music or other audio streams <canvas> Defines graphic, such as graphs or other images <command> Defines a command button, like a radio button, a checkbox, or a button
<datagrid> Defines a list of selectable data. Thedatagrid is displayed as a tree-list<datalist> Defines a list of selectable data. Use thiselement together with the input element, to make adropdown list for the input’s value<details> Defines details of an element, which theuser can see, and click to hide < dialog> Defines a dialog, such as a conversation .
<nav> Defines a section of navigation links <q> Defines a short quotation <time> - Defines a time or a date, or both <video> - Defines video, such as a movie clip or other video streams <meter> - Defines the range
APIs for multimedia by using video and audio tags Drag and drop API HTML canvas 2D context HTML5 web messaging WebSQL Geolocation WebWorkers Notification WebSockets
New Media Elements ◦ <video> Now embed video in your page without requiring any plugin like Flash or Silverlight. Browser MP4 WebM OGG IE9 Yes No No FF4+ No Yes Yes Chrome6+ Yes Yes Yes Opera10.6+ No Yes Yes
New Media Elements ◦ <audio> Extremely simple and easy way to show an audio player in your page. Browser MP3 WAV OGG IE9 Yes No No FF4+ No Yes Yes Chrome6+ Yes Yes Yes Opera10.6+ No Yes Yes
A canvas is a rectangular area, and you control every pixel of it.<canvas id="myCanvas" width="200" height="100"></canvas> Uses JS to draw shapes and color. ◦ <canvas> Entire library of JS functions for Canvas Dynamic and interactive graphics Draw images using 2D drawing API – Lines, curves, shapes, fills, etc.
Two new objects to save data: ◦ localStorage - stores data with no time limit ◦ sessionStorage - stores data for one session localStorage ◦ Data stored till cleared programmatically by JS ◦ Or browser cache cleared. ◦ accessible only from the domain that initially stored the data. sessionStorage ◦ accessible only from the page that initially stored the data.
email url number range date pickers (date, month, week, time, datetime) search color <input type="number"> <input type="range">
http://www.apple.com/html5 http://www.youtube.com/html5 GTA Game Clone in HTML5 http://www.webworks.dk/enginetest/ Web-Based Adobe Photoshop Clone in HTML5 http://www.picozu.com/
Conclusion – Introduced the new elements and APIs included in HTML5. We also got a taste of the semantic changes to come and the new structure our web pages should take in the future. Finally, we learned that even though HTML5 isn’t quite ready for the masses, we can still get our grubby developer fingers on it and start experimenting today.
W3Schools.com HTML5Rocks.com HTML5Test.com And then there is Google!