Introduction to HTML5 & CSS3
Download as PPTX, PDF9 likes9,782 views
This document discusses new features in HTML5 and CSS3. It provides examples of new HTML5 elements like <header>, <nav>, <article>, and new forms elements. It also covers new CSS3 features like gradients, rounded corners, shadows. Additionally, it mentions new JavaScript APIs in HTML5 for things like geolocation, drag and drop, offline web apps, storage and more. Finally, it encourages developers to use new web standards and provides resources for learning HTML5.
![Hisroty APIwindow . history . pushState(data, title [, url ] )window.addEventListener("popstate", function(event) {set(event.state);}http://diveintohtml5.org/history.htmlhttp://www.flickr.com/photos/archetypefotografie/3821120232](https://image.slidesharecdn.com/openhack-2011-html5-css3-110729232108-phpapp02/85/Introduction-to-HTML5-CSS3-26-320.jpg)
![Cross-Origin Resource SharingXHR request across domainsif the server you are connecting to allows it<?phpheader('Access-Control-Allow-Origin: *');?>myproxy.php<?php $url = $_SERVER['QUERY_STRING']; $ch = curl_init($url);curl_exec($ch);?>http://www.flickr.com/photos/garryknight/3861083969/](https://image.slidesharecdn.com/openhack-2011-html5-css3-110729232108-phpapp02/85/Introduction-to-HTML5-CSS3-36-320.jpg)
Introduction to HTML5 & CSS3
- 2. HTML5 & CSS3Pradeep B VY! Media@pradeepbvhttp://www.slideshare.net/pradeepbv
- 3. Web standards todayHTMLHTML 4.01 SpecificationW3C Recommendation 24 December 1999JSECMA-262 3rd editionNovember 2000CSSCSS Level 2 SpecificationW3C Recommendation May 1998
- 4. Ailing , over burdened & cracking at the edges http://www.flickr.com/photos/vivekjena/2904759616/
- 5. Who can help us? http://www.flickr.com/photos/ananthask/3092896908
- 7. Html5 = ???Html5 markup + jsapi’S + css3 http://www.flickr.com/photos/gladius/with/2304942509/
- 8. It already running out therehttp://www.flickr.com/photos/philmcelhinney/1000986005/
- 11. HTML 5 SEMATICS<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.flickr.com/photos/hamed/512309138/<!doctype html>http://www.flickr.com/photos/yourdon/3475417696/http://www.flickr.com/photos/johanl/4816110696/in/photostream/
- 12. HTML 5 SEMATICS<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">http://www.flickr.com/photos/hamed/512309138/<meta charset=“utf-8">http://www.flickr.com/photos/yourdon/3475417696/http://www.flickr.com/photos/johanl/4816110696/in/photostream/
- 13. HTML 5 SEMATICS<link rel="stylesheet" type="text/css" href=“style.css"></link>http://www.flickr.com/photos/hamed/512309138/<link rel="stylesheet” href=“style.css"></link><script></script>http://www.flickr.com/photos/yourdon/3475417696/http://www.flickr.com/photos/johanl/4816110696/in/photostream/
- 15. Some new elements<figure> & <figcaption><mark><meter><progress><details> & <summary><time><datalist> & listSome new Attributescontenteditablecontextmenudragableroleon??? (e.g. onclick)http://www.flickr.com/photos/hygienematters/5424756879
- 16. Custom Attributes<div id=“ticker” data-symbol=“YHOO”>el.getAttribute(attrName)http://www.flickr.com/photos/tamakisono/531582453
- 17. New form typesmore at: http://diveintohtml5.org/forms.htmlhttp://www.flickr.com/photos/wwworks/2475349116
- 18. MicrodataSemantic web pagesAnnotate the DOM with scoped key/value pair from custom vocabularieshttp://www.flickr.com/photos/osde-info/3189305118/
- 21. Devices go on airplane modehttp://www.flickr.com/photos/pmiaki/3635074858
- 22. <html manifest="/cache.manifest">CACHE MANIFESTindex.htmlstyle.cssScript.jsNetwork: api.webservice.example.comhttp://www.whatwg.org/specs/web-apps/current-work/multipage/offline.htmlhttp://www.flickr.com/photos/teegardin/5894050552
- 24. Storage APIsessionStorage: tied to the life of the session (browser window close)localStorage: is stored indefinitelyMore: http://html5demos.com/storage/http://www.flickr.com/photos/bfionline/2378518052
- 26. Hisroty APIwindow . history . pushState(data, title [, url ] )window.addEventListener("popstate", function(event) {set(event.state);}http://diveintohtml5.org/history.htmlhttp://www.flickr.com/photos/archetypefotografie/3821120232
- 28. File APIFile APIUse JS to Read file
- 31. Geo locationif (navigator.geolocation)navigator.geolocation.getCurrentPosition(success, failure, {maximumAge: 4800}); coords.latitudecoords.longitudecoords.altitudecoords.accuracycoords.altitudeAccuracycoords.headingcoords.speedtimestamphttp://www.flickr.com/photos/geocacherdk/3359109398
- 32. File APIDevice Orientationwindow.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta and event.gamma }, true);http://pradeepbv.github.com/openhackday2011/device_orientation_demo.htmlhttp://dev.w3.org/geo/api/spec-source-orientation.htmlhttp://www.flickr.com/photos/lofink/415275746
- 33. Other things on the launch pad…audio/video input, access microphones and cameras,local data such as contacts & eventshttp://www.flickr.com/photos/gladius/162647178
- 36. Cross-Origin Resource SharingXHR request across domainsif the server you are connecting to allows it<?phpheader('Access-Control-Allow-Origin: *');?>myproxy.php<?php $url = $_SERVER['QUERY_STRING']; $ch = curl_init($url);curl_exec($ch);?>http://www.flickr.com/photos/garryknight/3861083969/
- 37. Websocketsfull-duplex Reduced latency Gaminghttp://www.flickr.com/photos/triller/2226679393/
- 40. <video> - audio, autoplay, control, height, loop, poster, preload, src, width<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /></video>http://www.flickr.com/photos/lge/3810270838/, http://googlesystem.blogspot.com/2010/08/watch-video-in-youtubes-html5-player.html
- 41. Video
- 42. Audioautoplay, controls, loop, preload, src<audio controls="controls"> <source src=”mysong.ogg" type="audio/ogg" /> <source src=”mysong.mp3" type="audio/mpeg" /></audio>http://www.flickr.com/photos/17258892@N05/2587506121/
- 48. Web workersCarry outexpensive computationsnetwork callswithout interrupting the UIhttp://pradeepbv.github.com/openhackday2011/web_workers_demo.htmlhttp://www.flickr.com/photos/gladius/1240719073
- 51. Style up using CSS3http://www.flickr.com/photos/pdenker/5386861946/
- 52. Follow fashion trends GradientRounded CornersShadowhttp://www.flickr.com/photos/pumpkincat210/3339791794
- 57. Copy, paste, tweak, profit!http://html5demos.com/http://www.flickr.com/photos/avatar-1/5499235063