Html 5


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Html 5

  1. 1. A Very Brief History of
  2. 2. XHTML 1 CSS 2.1 Content Presentation 2001-2006
  3. 3. WHAT WGWeb Hypertext ApplicationTechnology Working Group 2004-2007
  4. 4. World Wide Web Consortium 2007-Present
  5. 5. HTML 5 CSS 3Content Presentation 2007-Present
  6. 6. The Content Layer:HTML 5
  7. 7. NewElements
  8. 8. Structural Elements:Provides new semanticvocabulary for parts of apage previously served byDIVs and ID and CLASSattributes.
  9. 9. Figures:Allows for associatingcaptions with embeddedcontents, includingvideos, audios, quotes orimages.
  10. 10. Audio & Video: <video src="test.ogg"Allows for associating autoplay="autoplay" controls="controls">captions Your browser does not supportwith embedded content, the video element. This could also includeincluding object and embed codes for legacyvideos, audio, or images. browsers. </video>
  11. 11. Other Elements:METER - Contained content is a measurement, like length.PROGRESS - Contains current process toward a goal, like a percentage.TIME - TimeCOMMAND - Represents something a command a user may execute.DATAGRID - Represents data. Non-tabular or otherwise.OUTPUT - Displays the output of a program or process.RUBY - Allows input of rubi/ruby annotations for Asian languages.
  12. 12. NewForm Controls
  13. 13. Form Controls:DATETIME - Allows input of a date and a time.DATETIME-LOCAL - Allows input of a date and a time, in local time.NUMBER - Allows input of a number.RANGE - Input is verified to be within a range.EMAIL - Confirms the input to be a valid email.URL - Ensures input is a valid URL.COLOR - Provides a mechanism for the user to input an RGB color.
  14. 14. Doc Structure
  15. 15. HTML 5 DocType:The HTML 5 doctype is <!DOCTYPE html>way easier than anyother doctype.Just type the parts youremember,and you’llprobably be right.
  16. 16. Block-Level Links: <li>You can now wrap links <a href="page.html"> <img src="pic.jpg">around block-level <h3>Title</h3>elements, rather than <p>Text</p> </a>having to create links </li>around every elementinside the block element.
  17. 17. New APIs
  18. 18. Drag & Drop API:Allows objects (imagesand links, by default) tobe dragged and thendropped onto a target.
  19. 19. getElementsByClassName:Works just likegetElementsById, butselects an array of allelements based on a sharedclass name.
  20. 20. Cross-Document Messaging:This allows non-hostiledocuments on differentdomains to simplycommunicate with eachother.
  21. 21. Simple Client Storage:The DOM attribute stores session datafor a single window, like cookies on crack.The DOM attribute allows each site tostore megabytes of data across sessions to improveperformance.Both methods store only strings.
  22. 22. Structured Client Storage: tx.executeSql(HTML 5’s Web Storage module ‘SELECT * FROM Notes’,provides an SQL server within [], function(tx, rs) {the client, accessible using for(var i = 0;Javascript. It uses fairly i < rs.rows.length; i++) { renderNote(rs.rows[i]);standard SQL queries for both })reading and writing.
  23. 23. Offline Application Caching: <html manifest=”/cache.manifest”>Allow the client to refer directly to CACHE MANIFESTits cache, authoritatively, for certain index.htmlresources, even if the browser is help.html style/default.cssoffline. images/logo.png images/backgound.pngResources listed in the “network” NETWORK: server.cgisection are never cached.
  24. 24. Canvas:Provides an API for drawing <canvas id="canvas"directly in the browser window, width="150" height="150"> fallback contentusing instructions that define </canvas>vector-based shapes and lines.This allows SVG-like graphics to becreated on the fly in the browser.
  25. 25. The Presentation Layer: CSS 3
  26. 26. Colors
  27. 27. Opacity:Adjusts the opacity of theselected element’spresentation on screen.Takes values between 0.0(fully transparent) and 1.0(fully opaque).
  28. 28. RGBA Color:Like RGB color definitions,but allows a fourth field,defining the alpha valueof the color beingapplied.
  29. 29. HSL/A Color:HSL color definitionsaccept three arguments:hue is a degree on a colorwheel (0-360), saturationis a percentage, andlightness is a percentage.
  30. 30. Backgrounds
  31. 31. Background-Size:Defines the size at whichthe browser should displaythe specified backgroundimage. Accepts all normalsize definitions as widthfollowed by height.
  32. 32. Background-image: background: url(body- top.png) top left no-repeat,Allows for multiple images url(body-bottom.png) bottom left no-repeat;to be specified. The firstimage specified is layeredclosest to the top of thescreen, and subsequentimages are layered beneath.
  33. 33. Borders
  34. 34. Border-Color: border: 5px solid #000; border-color: #000Allows for multiple transparent transparent #000;border colors to bespecified, one pixel at atime. The last specifiedcolor is repeated ifnecessary.
  35. 35. Border-image:Allows the border to be represented by animage, by defining which parts of the imageshould be used for the edges, and which shouldbe repeated inthe main partof the element.
  36. 36. Border-Radius:Curves the corners of theborder using the radiusgiven, often in pixels. Thiscan be given to all corners,or only to individualcorners as specified.
  37. 37. Box-Shadow:Creates a drop shadowbeneath the selectedelement.
  38. 38. Text
  39. 39. Text-Overflow:If text overflows theavailable space, thetext-overflow propertydefines whathappens..
  40. 40. Text-Shadow:Creates a drop shadowbeneath the selectedtext.
  41. 41. Column-Width & Column-Gap:Breaks flowing text intomultiple columns, based on thewidth of the container. Columnwidth defines the width of eachcolumn, and column-gapdefines the gap betweencolumns.
  42. 42. @font-face: @font-face { font-family: Helvy;Allows a font file to be src: local("Helvetica Neue Bold"),associated with a font local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf);name for later use in font-weight: bold;font-family } p.specialFont {declarations.. font-family: Helvy, sans-serif; }
  43. 43. Transformation
  44. 44. Rotate:Rotates the selectedelement at the definedangle, defined indegrees.
  45. 45. Scale:Scales the element inquestion based on thespecified unit-less numbersgiven for the X and Y axes.If only one number is given,it is applied to both axes.
  46. 46. Skew:Skews the elementaround the X and Y axesby the specified angles,in degrees. If it’s onlyone number, the Y axisis assumed to be zero.
  47. 47. Skew:Skews the elementaround the X and Y axesby the specified angles,in degrees. If it’s onlyone number, the Y axisis assumed to be zero.
  48. 48. Translate:Moves the object alongeach axis by the lengthspecified. The unit canbe anything accepted asa length in CSS, such aspx, percentages, etc.
  49. 49. 3D TRANSFORMATIONS:PERSPECTIVE - The distance, in pixels, of the z plane from the viewer.MATRIX3D - Allows creation of a 3d transformation matrix.ROTATE3D - Rotate the matched element in three dimensions.SCALE3D - Performs a three-dimensional scale operation.TRANSLATE3D - Allows the matched element to be moved along threeaxes.
  50. 50. READY YET?Is It The Time To Use These? 2011
  51. 51. MORE RESOURCES:HTML 5 Doctor - 5 Spec - Presenter - Feel free to follow up with me