HTML5 introduction for beginners


Published on

An introduction to HTML5 and its API's for the extream beginners those who already know what is HTML. Presentation also includes few features the CSS3.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 introduction for beginners

  1. 1. HTML5 web development to the next level By Vineeth N K
  2. 2. What is HTML5 ? HTML5 is a specification that describes some new tags and markup, as well as some JavaScript APIs. HTML5 includes the fifth revision of the HTML markup language, CSS3, and a series of JavaScript APIs. Together, these technologies enable you to create complex applications that previously could be created only for desktop platforms. HTML5 does not belong to a company or a specific browser. It has been forged by a community of people interested in evolving the web and a consortium of technological leaders that includes Google, Microsoft, Apple, Mozilla, Facebook, IBM, HP, Adobe, and many others.
  3. 3. What is HTML5 ? Evolution of HTML 4.0 and DOM level-2. Removal or redefinition of presentational markup language. Formalized foundation-level APIs The evolution of browser into a programming platform.
  5. 5. TIMELINE  HTML 2.0 1995  Formalized the syntax and many of the rules that were already implemented  HTML 3.2 1997  Legally ignored by browser Manufactures who began to implement their own tags.  Web Standard Project 1998  Pushed for std. adoption added weight to the W3C recommendations & promoted standard based browsers
  6. 6.  HTML 4.0 1999  Stabilized syntax and structure of HTML becomes the standard for web authoring.  Major milestone.  XHTML 1.0 2000  Designed to move HTML towards XML DTDs often caused it to render as HTML.  More Structured XML based approach.  Strict rules.
  7. 7. 2000  The Growth of the Web  High bandwidth connections increase, as does the demand for multimedia & applications driven by technologies such as Flash, AJAX...  Work on XHTML 2.0 begins. 2004 2004  Focusing on strictly structural language.  The Rise of HTML5
  8. 8. HTML5 TIMELINE  2004 : The Rise of HTML5.  2004 : WHATWG (Web Hypertext Application Technology Working Group) begins what will become HTML5. 2007 : W3C charters new working group adopts WHATWG’s work, renamed HTML5 2009 : W3C does not renew the XHTML 2.0 charter. 2010 : Driven in large part by Apple, Google & public interest in HTML5 grows. Microsoft,
  9. 9. WHY DO WE NEED HTML5?  Backward compatibility.  Error Handling.  New Structure And Syntax.  Multimedia with less reliance on Plug-ins  Integrated APIs  Associated APIs
  10. 10. Backward Compatibility  Any user agent that support HTML5 also support documents written in previous versions of HTML.  One of the best reasons for you to embrace HTML5 today is that it works in most existing browsers.
  11. 11. ERROR HANDLING  Previous specifications left error handling up to the user agents.  XHTML 2.0 featured draconian error handling.  Pages would stop rendering if an error was found.  HTML5 features detailed algorithms for parsing errors.
  12. 12. New Structure And Syntax  DOCTYPE has been simplified. PRIOR DOCTYPES HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  13. 13. NEW DOCTYPE HTML 5 <!DOCTYPE html >  Deprecated Tags  HTML5 has introduced a lot of new elements, but the specification also deprecates quite a few common elements basefont big center font s strike tt u
  14. 14.  Aside from the presentational elements, support for frames has been removed.  Despite the widespread use, frames caused so many usability and accessibility issues frame frameset noframes  A few other elements are gone because there are better options are available.  acronym gets replaced by abbr.  applet gets replaced by object.  dir gets replaced by ul.
  15. 15.  In addition to deprecated elements, there are many attributes that are no longer valid. align link, vlink, alink, and text attributes on the body tag bgcolor height and width scrolling on the iframe element valign hspace and vspace cellpadding, cellspacing, and border on table  New Structural tags and attributes.  developers to wrap elements with extra div tags with IDs such as banner, sidebar, article, and footer  As nesting depth of the div tag increases, more will be the confusion.
  16. 16.  HTML5 specification introduces new tags specifically designed to divide a page into logical regions.  <header> Defines a header region of a page or section.  <footer> Defines a footer region of a page or section.  <nav> Defines a navigation region of a page or section.  <section> Defines a logical region of a page or a grouping of content.  <article> Defines an article or complete piece of content.  <aside> Defines secondary or related content.
  17. 17. Custom data attributes Allows addition of custom attributes to any elements using the data- pattern. [All browsers support reading these via JavaScript’s getAttribute() method.] <meter> Describes an amount within a range. [C5, F3.5, S4, O10] <progress> Control that shows real-time progress toward goal. [Unsupported at publication time.]
  18. 18.  NEW FORM ELEMENTS  Email field [<input type="email">] Displays a form field for email addresses.  URL field [<input type="url">] Displays a form field for URLs.  Telephone field [<input type="tel">] Displays a form field for telephone numbers.  Search field [<input type="search">] Displays a form field for search keywords.  Slider (range) [<input type="range">] Displays a slider control. Number [<input type="number">] Displays a form field for numbers, often as a spinbox.
  19. 19.  Date fields [<input type="date">] Displays a form field for dates. Supports date, month, or week.  Dates with Times [<input type="datetime">] Displays a form field for dates with times. Supports datetime, datetime-local, or time.  Color [<input type="color">] Displays a field for specifying colors.  Autofocus support [<input type="text" autofocus>] Support for placing the focus on a specific form element.  Placeholder support [<input type="email" placeholder="">] Support for displaying placeholder text inside of a form field.  In-place editing support [<p contenteditable></p>] Support for in-place editing of content via the browser.
  20. 20. MULTIMEDIA  You don’t need Flash or Silverlight for video, audio, and vector graphics anymore.  Embedding videos <video src=” controls> Your browser does not support the video element. </video>  Multiple Files & Scripting <video controls> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4"> Your browser does not support the video element. </video>
  21. 21.  Embedding audio <audio id="drums" controls> <source src="sounds/ogg/drums.ogg" type="audio/ogg"> <source src="sounds/mp3/drums.mp3" type="audio/mpeg"> <a href="sounds/mp3/drums.mp3">Download drums.mp3</a> </audio>  Scalable Vector Graphics <svg width="200" height="200"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart" /> </svg>
  22. 22.  The canvas element lets us create vector images within the HTML document using JavaScript. <canvas id="myCanvas" width="150" height="150"> </canvas> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50);  Canvas can be used to create simple or complex shapes or even create graphs and charts without resorting to server-side libraries, Flash, or other plugins.
  23. 23. INTEGRATED APIs  Video and audio API This provides multimedia plug-in within the browser.  Inline editing API Editing of contents in a web documents directly through the web browser.  Offline Application API • Allows Applications to run without internet connection. • Content renewed when connection restored. • Can store 5MB of data. • Application cache stores the offline details. • Options in HTML5 to store data. i. Web SQL Database or IndexedDB. ii. Web storage (localStorage, sessionStorage)
  24. 24.  History API Enables Applications to access to the browser history.  Web Protocol API Allows Applications to register themselves to the handlers of url scheme. Eg: Mail Applications could register themselves to handle mail protocols. File upload applications to FTP and so on.  Drag & Drop API Allows Application to enable, control and respond to the dragging and dropping of page elements.
  25. 25. ASSOSCIATED APIs  Geolocation API Geolocation determines a person’s whereabouts by looking at their computer’s IP address, MAC address, Wi-Fi hotspot location, or even GPS coordinates if available. navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } );
  26. 26.  2D Canvas Drawing API  Local Storage API  Web Workers API Allows you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.  Web Socket API Creates a stateful connection between a browser and a server.  Messaging API Sends messages between windows with content loaded on different domains.
  27. 27. What is CSS3?  Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in markup.  Visual enhancement like rounded corners gradients shadows. • • •  Your design can be as simple as a text transformation to something as rich as full-blown animations with 3D transformations.
  28. 28. EXPLORING PRIOR VERSIONS  CSS1 • • • CSS LEVEL 1. Published in December 1996. Support for, Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements
  29. 29.  CSS2 CSS level 2 specification was developed by the W3C and published as a Recommendation in May 1998. • • • • Absolute, relative, and fixed positioning of elements New font properties such as shadows. The W3C no longer maintains the CSS2 recommendation.  CSS2.1 • • • • First Become a Candidate recommendation on 2004, Later reverted to Working draft on 2005 Returned to Candidate recommendation in 2007 and updated twice in 2009 Fixes errors in CSS2, removes poorly-supported or not fully interoperable features and adds alreadyimplemented browser extensions to the specification. finally published as a W3C Recommendation on 2011
  30. 30. CSS3 Features  Selectors : For selecting specific elements from documents for formating. • General Sibling Selector : This selector matches and targets all the siblings of a given element. It is not necessary however that the elements be adjacent siblings. Example: h1 ~ pre represents a pre element following an h1. Children Selector : This Selector shows the relationship between two elements and targets those elements which are children of a particular element. • Example: body > p This selector represents a p element that is child of body:
  31. 31. • Attribute Selector : Unlike CSS 2.1 where one has to make match on a complete string of an attribute, CSS offers the flexibility to make matches anywhere within an attribute, be it beginning or end. Example: i. [attr^=val] –- matches a Document object model element (DOM) with the attribute attr and a value starting with val ii. [attr$=val] –- matches a DOM element with the attribute attr and a value ending with the suffix val iii. [attr*=val] –- matches a DOM element with the attribute attr and a value containing the substring val
  32. 32.  Border Radius : Used to create round corner for boxes without hard code. Example: #ex3 { border-top-left-radius: 1em; } #ex3 { border-top-right-radius: 1em; } #ex3 { border-bottom-right-radius: 1em; } #ex3 { border-bottom-left-radius: 1em; }
  33. 33.  Border Image : It allows using an image as a border for an element. One can set values for Border Image and border-corner-image. Example: .border-image-example { -webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat; -moz-border-image: url(border-image.jpg) 45 20 45 30 repeat; border-image: url(border-image.jpg) 45 20 45 30 repeat; } .border-image-example { border-image: url(bg-border.jpg) 45 20 45 20 repeat; } .border-image-example { border-image: url(bg-border.jpg) 45 20 repeat;
  34. 34.  Multiple Background : This has been made possible and one may use multiple background images for one element. Example: #banner{ background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y; } Colors and Opacity:  CSS 3 comes with an ability to add transparency to an element and its color schemes have been enhanced to add this factor as well. Example: This paragraph has opacity 1.0. background-color:#30f;color:#fff;width:100%;opacity:1.0; Opacity 0.8.
  35. 35.  Multi Column layout: This property allows creating the desired number of columns by making the required specifications regarding column width, separator, column gap width, etc. Example: Column width: -moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; Column count: -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black;
  36. 36.  BOX Shadow: Prior to CSS 3, JavaScript was used for creating shadow to an image but now with BOX Shadow feature, one can add shadow to any element on the website. • Example: #example1{ box-shadow:10px 10px 5px #888; } However it is currently supported by Firefox 3.1+, Safari and Chrome only. •