Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.


  • Be the first to comment


  1. 1. <title><br /> HTML 5 & CSS 3<br /></title><br />
  2. 2. HTML Pre-History<br />General Markup Language (GML) was developed at IBM in the 1960's by <br />Charles F. Goldfarb<br />:h1.Chapter 1: Introduction <br />:p.GML supported hierarchical containers, such as <br />:ol <br />:li.Ordered lists (like this one), <br />:li.Unordered lists, and <br />:li.Definition lists <br />:eol. as well as simple structures. <br />:p.Markup minimization (later generalized and formalized in SGML), allowed the end-tags to be omitted for the "h1" and "p" elements.<br /><br />
  3. 3. HTML Pre-History<br />Standard Generalized Markup Language (SGML) was derived from GML in the 1980's. <br />SGML was the pre-cursor to both HTML and XML.<br />SGML defined the user of angle brackets for tags. <example><br />
  4. 4. HTML<br />Hyper Text Markup Language <br />(HTML) was first defined by <br />Tim Berners-Lee in 1991<br />Original HTML had 20 tags and displayed simple text with basic markup for formatting.<br />
  5. 5. HTML 2, 3, and 4<br />HTML 2 added many of the attributes we know today such as images, forms, input.<br />HTML 3 added new tags that had been part of minor revisions. <br />HTML 4 extended the number of tags. Currently most HTML is 4.01<br />
  6. 6.
  7. 7. CSS History<br />CSS 1 was proposed in 1995 as a way to style documents. It contained descriptions for font, background and other style tags.<br />CSS 2 is the version we currently use added positioning and other elements.<br />
  8. 8. Web Usability Then<br />Mid-Late 1990's web forms started to show up with web applications.<br />Late 1990's JavaScript added further interaction.<br />2000's AJAX and Flash started to provide richer internet applications.<br />
  9. 9. Web Usability Now<br />Increased emphasis on making the web as rich an interface as native applications.<br />The mobile web <br />is the next frontier.<br />Current Technologies are dated and are hindering growth.<br />
  10. 10. HTML 5 and CSS3 to the Rescue<br />HTML5 and CSS3 are the next generation of markup that will drive the web.<br />What is the difference between HTML4 and HTML 5?<br />
  11. 11. Structure Tags<br /><header> - Header <br /><nav> - Navigation, Menu (Primary Navigation)<br /><section> - Seperation Element <br /><article> - Article Content<br /><aside> - Sidebars, Widgets, Misc non primary content <br /><footer> - Footer <br /><header> and <footer> tags may be used multiple times. Example in Sections, and in the main page.<br />
  12. 12. Structure<br /><header><br /><section><br /><aside><br /><nav><br /><header><br /><article><br /><footer><br /><footer><br />
  13. 13. New Inputs <br />* tel (Telephone) <br />* search <br />* url<br />* email<br />* datetime<br />* date<br />* month<br />* week<br />* time<br />* datetime-local<br />* number <br />* range (slider)<br />* color <br />
  14. 14. Inputs Mobile Display<br />Tel<br />Number<br />Email<br />
  15. 15. Canvas<br /><canvas> <br />Create a virtual canvas for drawing graphics in the browser. <br />Javascript can be used to control graphic rendering via the canvas.<br />x,y coordinate system<br />
  16. 16. Canvas Example<br />
  17. 17. APIs<br />Drag and Drop - Provides an API for Drap and Drop for JavaScript<br />Geolocation - Determine Location of The User via the Browser<br />Offline Storage - Browsers will support local storage. The API will be SQL like. <br />
  18. 18. APIs<br />History API - Access Browser history via JavaScript.<br /><contenteditable> - Enables a Content Editing API <br />Web Workers - Background Tasks for JavaScript<br />
  19. 19. Multimedia<br />Native Multimedia Support <br />No Plugins Necessary<br /><Video> - Native Video<br /><Audio> - Native Audio<br />
  20. 20. YouTube HTML5 Beta<br />Available for Chrome and Safari<br />
  21. 21. Other Controls<br /><Progress> Displays progress of a task or action completed.<br /><meter> Displays measure of something.<br /><Output> For output of calculation or output of a script.<br />
  22. 22. CSS3<br />
  23. 23. New Styles<br />border-radius - Rounded Corners<br />border-colors - Gradient Borders<br />box-shadow - Drop Shadows<br />text-shadow - Text Drop Shadows<br />gradient - Gradient backgrounds<br />resize - Resize an Element<br />background-size - resize background<br />background - supports multipe images<br />
  24. 24. Examples<br />
  25. 25. Selectors<br />A Variety of Selectors provide an interface to apply styles more precisely.<br />An example would be selecting an nth child. <br />Example: div:nth-child(3) {}<br />
  26. 26. Columns<br />Multi Column Layout is now provided by CSS3<br />
  27. 27. Animation and Motion<br />Animations - CSS3 allows for animations of styles<br />Transitions - Allows styles to change gradually color shifts<br />Transformations - 2D and 3D transformations, stretch, move, etc<br />
  28. 28. Examples<br />
  29. 29. Misc<br />Media Queries - Provides for ways to specify styles based on viewport size.<br />
  30. 30. When?<br />HTML5 - Canidate Stage in 2012<br />CSS3 - Still in Working Draft<br />
  31. 31. What about that Gorilla?<br />IE 6 and other legacy browsers are preventing progress.<br />IE9 has some HTML5 support.<br />
  32. 32. Benefits of HTML5 & CSS3<br />Rich Interface elements not requiring third party plugins.<br />Seperation of content and design<br />Enhanced Mobile Support <br />New Programming Interfaces<br />
  33. 33. The Critics Say<br />HTML5 will not get rid of Flash<br />HTML5 doesn't use XML Syntax<br />Too many tags / Tag Soup<br />
  34. 34. The Future<br />Current mobile browser technology will be the next battle ground.<br />HTML5 and CSS3 will even the odds with supporting more and more platforms.<br />The web will no longer be a second class user interface.<br />
  35. 35. References<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    Be the first to comment

    Login to see the comments

  • williammdavis

    Dec. 7, 2016


Total views


On Slideshare


From embeds


Number of embeds