html5 & css3 -- upa iowa
DESCRIPTION
A history of HTML & CSS, and Preview of HTML5 and CSS3, and overview of the future.TRANSCRIPT
![Page 1: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/1.jpg)
<title> HTML 5 & CSS 3</title>
![Page 2: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/2.jpg)
HTML Pre-HistoryGeneral 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 :ol :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.
http://www.sgmlsource.com/history/roots.htm
![Page 3: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/3.jpg)
HTML Pre-HistoryStandard 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>
![Page 4: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/4.jpg)
HTMLHyper 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.
![Page 5: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/5.jpg)
HTML 2, 3, and 4HTML 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
![Page 6: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/6.jpg)
![Page 7: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/7.jpg)
CSS HistoryCSS 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.
![Page 8: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/8.jpg)
Web Usability ThenMid-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.
![Page 9: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/9.jpg)
Web Usability NowIncreased 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.
![Page 10: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/10.jpg)
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?
![Page 11: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/11.jpg)
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.
![Page 12: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/12.jpg)
Structure<header>
<nav>
<section> <aside>
<footer>
<header><article>
<footer>
![Page 13: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/13.jpg)
New Inputs
* tel (Telephone) * search * url* email* datetime* date* month* week* time* datetime-local* number * range (slider)* color
![Page 14: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/14.jpg)
Inputs Mobile Display
Tel Number
![Page 15: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/15.jpg)
Canvas<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
![Page 16: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/16.jpg)
Canvas Example
![Page 17: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/17.jpg)
APIsDrag 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.
![Page 18: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/18.jpg)
APIsHistory API - Access Browser
history via JavaScript.
<contenteditable> - Enables a Content Editing API
Web Workers - Background Tasks for JavaScript
![Page 19: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/19.jpg)
MultimediaNative Multimedia Support
No Plugins Necessary
<Video> - Native Video
<Audio> - Native Audio
![Page 20: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/20.jpg)
YouTube HTML5 Beta
Available for Chrome and Safari
![Page 21: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/21.jpg)
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.
![Page 22: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/22.jpg)
CSS3
![Page 23: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/23.jpg)
New Stylesborder-radius - Rounded Cornersborder-colors - Gradient Bordersbox-shadow - Drop Shadowstext-shadow - Text Drop Shadowsgradient - Gradient backgroundsresize - Resize an Elementbackground-size - resize backgroundbackground - supports multipe images
![Page 24: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/24.jpg)
Examples
![Page 25: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/25.jpg)
SelectorsA Variety of Selectors provide an
interface to apply styles more precisely.
An example would be selecting an nth child.
Example: div:nth-child(3) {}
![Page 26: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/26.jpg)
ColumnsMulti Column Layout is now
provided by CSS3
![Page 27: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/27.jpg)
Animation and MotionAnimations - CSS3 allows for
animations of styles
Transitions - Allows styles to change gradually color shifts
Transformations - 2D and 3D transformations, stretch, move,
etc
![Page 28: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/28.jpg)
Examples
![Page 29: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/29.jpg)
MiscMedia Queries - Provides for
ways to specify styles based on viewport size.
![Page 30: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/30.jpg)
When?
HTML5 - Canidate Stage in 2012
CSS3 - Still in Working Draft
![Page 31: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/31.jpg)
What about that Gorilla?IE 6 and other legacy browsers
are preventing progress.
IE9 has some HTML5 support.
![Page 32: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/32.jpg)
Benefits of HTML5 & CSS3Rich Interface elements not
requiring third party plugins.
Seperation of content and design
Enhanced Mobile Support
New Programming Interfaces
![Page 33: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/33.jpg)
The Critics SayHTML5 will not get rid of Flash
HTML5 doesn't use XML Syntax
Too many tags / Tag Soup
![Page 34: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/34.jpg)
The FutureCurrent 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.
![Page 35: HTML5 & CSS3 -- UPA Iowa](https://reader033.vdocuments.site/reader033/viewer/2022061220/54bb62c24a795979098b45c9/html5/thumbnails/35.jpg)
Referenceshttp://en.wikipedia.org/wiki/HTMLhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.htmlhttp://tools.ietf.org/html/rfc1866http://www.w3.org/People/Raggett/book4/ch02.htmlhttp://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/http://www.w3schools.com/html5http://bluefaqs.com/2010/03/understanding-the-basics-of-css3/http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/http://www.css3.info/webkit-announces-support-for-css-3d-transforms/http://www.css3.info/http://images.appleinsider.com/html5.091909.001.png
HTML 5 and CSS3 Demoshttp://www.zurb.com/article/221/css3-animation-will-rock-your-worldhttp://www.fofronline.com/2009-04/3d-cube-using-css-transformations/http://www.1stwebdesigner.com/development/50-awesome-css3-animations/http://html5demos.com/http://www.romancortes.com/blog/pure-css-coke-can/http://9elements.com/io/projects/html5/canvas/ http://www.zachstronaut.com/lab/isocube.htmlhttp://www.dotcodedump.com/HTML5/triangle.html <-- My Canvas Example