HTML5 & CSS3 -- UPA Iowa
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


HTML5 & CSS3 -- UPA Iowa



A history of HTML & CSS, and Preview of HTML5 and CSS3, and overview of the future.

A history of HTML & CSS, and Preview of HTML5 and CSS3, and overview of the future.



Total Views
Views on SlideShare
Embed Views



1 Embed 19 19



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

HTML5 & CSS3 -- UPA Iowa Presentation Transcript

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