HTML 5 Tutorial

Views:
 
     
 

Presentation Description

HTML 5 basic tutorials

Comments

By: kavyashreeNR (79 month(s) ago)

Hi..... i did liked the presentation and wish to download can you please give me send me the ppt to kavya.shree1@gmail.com

By: yudiipati (82 month(s) ago)

i like it very much,

Presentation Transcript

HTML 5 Tutorial:

HTML 5 Tutorial Copyright © Applied Development. 2006-2009. All rights reserved. Web development to the next level…

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Timeline of web tech… Year Technologies 1991 HTML 1994 HTML 2 1996 CSS 1 + Javascript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Table less design 2005 Ajax 2009 HTML 5 [HTML + CSS + Javascript + DOM]

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Why HTML 5? New HTML standard New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D Graphics Local Storage Local SQL Database Web Applications

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. RULES: New features should be based on HTML, CSS, DOM and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. New features: The canvas element for drawing The video and audio elements for media playback Better support for local offline storage New content specific elements like article, footer, header, nav , section New form controls like calendar, date, time, email, url , search

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. New Markup elements: Tag Description <article> Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site. <aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content <bdi> For text that should not be bound to the text-direction of its parent elements <command> A button, or a radiobutton , or a checkbox <details> For describing details about a document, or parts of a document <summary> A caption, or summary, inside the details element <figure> For grouping a section of stand-alone content, could be a video <figcaption> The caption of the figure section <footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information <mark> For text that should be highlighted <meter> For a measurement, used only if the maximum and minimum values are known

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. New Media elements: Tag Description <audio> For multimedia content, sounds, music or other audio streams <video> For video content, such as a movie clip or other video streams <source> For media resources for media elements, defined inside video or audio elements <embed> For embedded content, such as a plug-in <track> For text tracks used in mediaplayers

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. New canvas elements: Tag Description <canvas> For making graphics with scripts

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. New Form elements: Tag Description <datalist> A list of options for input values [ autocomplete ] <keygen> Generate keys to authenticate users <output> For different types of output, such as output written by a script Webpage: <input type=" url " list=" url_list " name="link" /> < datalist id=" url_list "> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </ datalist >

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. New input elements: Tag Description tel The input value is of type telephone number search The input field is a search field url The input value is a URL email The input value is one or more email addresses datetime The input value is a date and/or time date The input value is a date month The input value is a month week The input value is a week time The input value is of type time datetime-local The input value is a local date/time number The input value is a number range The input value is a number in a given range color The input value is a hexadecimal color, like #FF8800 placeholder Specifies a short hint that describes the expected value of an input field

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Video: There are 3 supported video formats for the video element: Ogg = Ogg files with Theora video codec and Vorbis audio codec MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec WebM = WebM files with VP8 video codec and Vorbis audio codec

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Audio: Currently there are 3 supported audio formats for the video element: Ogg = Ogg files with Theora video codec and Vorbis audio codec MP3 = MP 3 files WAV = WAB files

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Canvas: A canvas is a rectangular area, and you control every pixel of it It has several methods for drawing paths, boxes, circles, characters, and adding images All the drawings has to be done in Javascript only <canvas id=" myCanvas "></canvas> <script type="text/ javascript "> var canvas = document.getElementById (' myCanvas '); var ctx = canvas.getContext ('2d'); ctx.fillStyle ='#FF0000'; ctx.fillRect (0,0,80,100); </script>

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Web storage There are two ways of storing data on the client. localStorage - stores data with no time limit sessionStorage - stores data for one session HTML 5 uses Javascript to store data

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Web storage - Example // use localStorage for persistent storage saveButton.addEventListener ('click', function () { window. localStorage.setItem ('value', area.value ); window. localStorage.setItem ('timestamp', (new Date()). getTime ()); }, false); textarea.value = window. localStorage.getItem ('value'); window. localStorage.removeItem (‘value’);

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Web storage - Example // use sessionStorage if (! sessionStorage.pageCounter ) sessionStorage.setItem ('pageCounter',0); sessionStorage.setItem (' pageCounter ', parseInt ( sessionStorage.pageCounter )+1); //usage sessionStorage.pageCounter (or) sessionStorage [‘ pageCounter ’]

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Form input types Input type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No number No No 9.0 7.0 5.1 range No No 9.0 4.0 4.0 Date pickers No No 9.0 10.0 5.1 search No 4.0 11.0 10.0 No color No No 11.0 12 No

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Form elements Tag IE Firefox Opera Chrome Safari < datalist > No 4.0 9.5 No No <keygen> No 4.0 10.5 3.0 No <output> No 4.0 9.5 10.0 5.1

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Form attributes Attribute IE Firefox Opera Chrome Safari autocomplete 8.0 3.5 9.5 3.0 4.0 autofocus No 4.0 10.0 3.0 4.0 form No 4.0 9.5 10.0 No form overrides No 4.0 10.5 10.0 No height and width 8.0 3.5 9.5 3.0 4.0 list No 4.0 9.5 No No min, max and step No No 9.5 3.0 No multiple No 3.5 11.0 3.0 4.0 novalidate No 4.0 11.0 10.0 No pattern No 4.0 9.5 3.0 No placeholder No 4.0 11.0 3.0 3.0 required No 4.0 9.5 3.0 No

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Global attributes Attribute Value Description Contenteditable True,false , inherit Specifies whether a user can edit the content of an element or not Contextmenu Menu_id Specifies a context menu for an element. The value must be the id of a <menu> element Draggable True, false, auto Specifies whether a user is allowed to drag an element or not Dropzone Copy, move, link Specifies what happens when dragged items/data is dropped in the element Hidden Hidden Specifies that an element should be hidden Spellcheck True, false Specifies if the element must have its spelling and grammar checked

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Event attributes The global event attributes that can be added to HTML5 elements to define event actions. Window Events Form Events Keyboard Events Mouse Events Media Events

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Best Practices Minimize HTTP requests CSS Sprites Image Mapping Inline images Use a Content Delivery Network [CDN] Add Expires or Cache-control header Stylesheets on the top and scripts at the bottom Avoid CSS expressions Make Javascript & CSS external file Reduce DNS lookup [ nothing downloads unless it finds the dns ]

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Best Practices Minify Javascript & CSS [ Javascript Minifier ] Avoid redirects Avoid nested tables Make Ajax cacheable Preload components Reduce the number of DOM elements Minimize the usage of the number of iFrames Reduce the cookie size Close your tags

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. Advanced level web SQL Database Indexed Database Application Cache Web Workers Web Socket Notifications Native Drag & Drop Desktop Drag-In API Desktop Drag-Out API FileSystem API Geolocaiton Device Orientation Speech Input

PowerPoint Presentation:

Copyright © Applied Development. 2006-2009. All rights reserved. HTML TAGS Head Sections Grouping Tables Forms Forms 2 Interactive Edits Embedded Text-level Text-level 2 doctype body p table form keygen details del, ins img a time html article hr caption fieldset output summary iframe em code head nav pre thead legend progress command embed strong kbd title aside blockquote tbody label meter menu object i, b samp base section ol tfoot input param u var link header ul tr button video s mark meta footer li th select audio small bdi style h1-h6 dl, dt, dd td datalist source abbr bdo script hgroup figure col optgroup canvas q ruby, rt, rp noscript address figcaption colgroup option track cite span div textarea map dfn br area sub, sup wbr

authorStream Live Help