introduction to html5
TRANSCRIPT
![Page 1: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/1.jpg)
Introduction to HTML5Terry Ryan | Worldwide Developer EvangelistTwitter: @tpryan
![Page 2: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/2.jpg)
Who Are You?
![Page 3: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/3.jpg)
What is “HTML5”?
![Page 4: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/4.jpg)
“HTML5” is an marketing term that companies
use to mean “cool shit that
works on an iPad”
![Page 5: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/5.jpg)
• HTML5• CSS 3• JavaScript• CSS 2• JavaScript Frameworks• Canvas (Actually part of HTML5)• Video tag (Actually part of HTML5)• Anything the speaker wants it to
mean
“HTML5”
![Page 6: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/6.jpg)
What is HTML5?
![Page 7: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/7.jpg)
We’ll come back to that in
a second.
![Page 8: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/8.jpg)
Review
![Page 9: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/9.jpg)
What is HTML?
![Page 10: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/10.jpg)
HTML is a language that
provides structure to
content
![Page 11: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/11.jpg)
Start with ContentwhichElement?Trying to answer that age old question:Should that be a div, a span, or something else?
HomeContributeAbout
One of the main challenges we see in building semantic content is picking what tag to use when.
![Page 12: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/12.jpg)
Add Structure<h1>whichElement?</h1><h2>Trying to answer that age old question:</h2><h2>Should that be a div, a span, or something else?</h2>
<ul><li>Home</li><li>Contribute</li><li>About</li></ul>
<p>One of the main challenges we see in building semantic content is picking what tag to use when. This site seeks to help with that. Now, before we get all judgy and preachy let me get a few tenants out there:</p>
![Page 13: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/13.jpg)
What is CSS?
![Page 14: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/14.jpg)
CSS is a language that
provides style to content
![Page 15: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/15.jpg)
<h1>whichElement?</h1><h2>Trying to answer that age old question:</h2><h2>Should that be a div, a span, or something else?</h2>
<ul><li>Home</li><li>Contribute</li><li>About</li></ul>
<p>One of the main challenges we see in building semantic content is picking what tag to use when. This site seeks to help with that. Now, before we get all judgy and preachy let me get a few tenants out there:</p>
<style type="text/css">h1{
color: red;}h2{
color: blue;font-style: italic;
}
p{color: white;background-color:
black;}
</style>
Add Style
![Page 16: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/16.jpg)
HTML/CSS results in
separation of content from
display
![Page 17: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/17.jpg)
Why?
![Page 18: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/18.jpg)
• Helps SEO• Makes work more portable or
changeable• Allows for multiple ways of display
Why separate content and display?
![Page 19: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/19.jpg)
<style type="text/css">h1{
color: red;}h2{
color: blue;font-style: italic;
}
p{color: white;background-color:
black;}
</style>
Change Style<style type="text/css">
h1{color: red;font-size: 16px;
}h2{
color: blue;font-size: 26px;
}
ul{list-style: none;clear: both;display: block;width: 100%;height: 30px;padding: 0;
}li{
float: left;padding-right: 20px;
}
</style>
![Page 20: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/20.jpg)
What is JavaScript?
![Page 21: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/21.jpg)
JavaScript is a language that
provides behavior to
content
![Page 22: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/22.jpg)
Behavior<html><head>
<script type="text/javascript">function createAlertMessage(){alert("Stop what you're doing!");}
</script>
</head><body><button onclick="createAlertMessage()">Alert!</button>
</body></html>
![Page 23: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/23.jpg)
ContentStructure
StyleBehavior
![Page 24: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/24.jpg)
Content - Database
Structure - HTML Style - CSSBehavior - JavaScript
![Page 25: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/25.jpg)
Content - HTML Structure - HTML
Style - CSSBehavior - JavaScript
![Page 26: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/26.jpg)
What is HTML5?
![Page 27: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/27.jpg)
The 5th and most recent public
specification for HTML from the public groups
that….
![Page 28: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/28.jpg)
The 5th and most recent public
specification for HTML from the public groups
that….
![Page 29: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/29.jpg)
The most recent
specification for HTML
![Page 30: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/30.jpg)
The most recent*
specification** for HTML*** * It’s not technically the most recent ** It’s actually a standard*** While we’re at it, there is no HTML5 only HTMLThis is why pragmatic people hate standards bodies sometimes
![Page 31: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/31.jpg)
• New semantic elements– article, section, aside, header, footer,
etc
• New multimedia elements– audio, video, canvas
• New API’s for manipulation in JavaScript– Offline data, drag and drop, web storage
New in HTML5
![Page 32: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/32.jpg)
What is CSS3?
![Page 33: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/33.jpg)
A series of recommendations modules
to the standards
committees…
![Page 34: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/34.jpg)
Can’t we just say “The
latest official version of
CSS?”
![Page 35: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/35.jpg)
It’s not official.
![Page 36: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/36.jpg)
It’s not the latest.
![Page 37: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/37.jpg)
It’s not a version.
![Page 38: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/38.jpg)
Let’s just say “HMTL5” for everything?
Ok?
![Page 39: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/39.jpg)
What can you do with
“HTML5”?
![Page 40: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/40.jpg)
SEMANTICS
![Page 41: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/41.jpg)
Semantic HTML means your
markup describes it’s
content without presenting it
![Page 42: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/42.jpg)
What do we mean by Semantic HTML• HTML where proper elements are used
– <p> denotes paragraph– <ul> denotes an list of items, where the order is not
important – <address> contains address information– <div> and <span> are used to describe information
• HTML where extraneous elements are not misused– No <p> for line breaking– No <blockquote> for indentation– No <h1> for big text
• HTML without presentation information– No <font>, <b>, <i> tags– No inline styles
![Page 43: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/43.jpg)
Semantic HTML is a moving target
• Not Boolean• Not always objective• A continuum
![Page 44: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/44.jpg)
Semantic HTML
<body background="css/bg.png">
<font face="Calibri”><center>
<table width="800" bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF">
<tr><td>
<table width="100%" bgcolor="#f0f0f0" border="0“>
<tr>
<td><h1>
<font face="Palatino Linotype">The Awesome Blog of Awesome</font>
</h1>
</td>
</tr>
<tr>
<td align="right"><p><i>Awesome is a State of Mind</i></p></td>
</tr>
</table>
<body>
<div id="header">
<h1>The Awesome Blog of Awesome</h1>
<p class="tagline">
Awesome is a State of Mind
</p>
</div>
RELATIVELY UNSEMANTIC RELATIVELY SEMANTIC
![Page 45: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/45.jpg)
HTML5?
What does this have to do with HTML5?
![Page 46: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/46.jpg)
HTML5 adds more semantics
<body> <header> <h1>The Awesome Blog of Awesome</h1> <p>Awesome is a State of Mind</p> </header> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </nav>
![Page 47: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/47.jpg)
Outlines• Outlines seem really important to the
people who push semantic HTML 5• Are they really important?– Today: No– Tomorrow: Who knows?
• But this is a semantically correct way of reducing classes and extraneous divs
![Page 48: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/48.jpg)
Header
![Page 49: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/49.jpg)
Header
<div id="header">
<h1>The Awesome Blog of Awesome</h1>
<p class="tagline">Awesome is a State of Mind</p>
</div>
<header>
<h1>The Awesome Blog of Awesome</h1>
<h2>Awesome is a State of Mind</h2>
</header>
HTML 5
PREVIOUSLY
![Page 50: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/50.jpg)
Footer
![Page 51: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/51.jpg)
Footer
<div id="footer”>
<p>Copyright 2011 - Terry Ryan</p>
</div>
<footer>
<p>Copyright 2011 - Terry Ryan</p>
</footer>
HTML 5
PREVIOUSLY
![Page 52: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/52.jpg)
Navigation
![Page 53: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/53.jpg)
Navigation
<div id="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
PREVIOUSLY HTML 5
![Page 54: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/54.jpg)
Articles
![Page 55: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/55.jpg)
Articles
<div class="post”>
<div class="postheader">
<h3><a href="">I Scream My Thoughts</a></h3>
<p class="date">August 10, 2011</p>
</div>
<p>You probably haven't heard of them duis</p>
</div>
<article>
<header>
<h1><a href="">I Scream My Thoughts</a></h1>
<time>August 10, 2011</time>
</header>
<p>You probably haven't heard of them duis </p>
</article>
PREVIOUSLY HTML5
![Page 56: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/56.jpg)
An article is a piece of
content that can
stand on it’s own
![Page 57: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/57.jpg)
Content
57
![Page 58: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/58.jpg)
Content
<div class=”content”>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
</div>
<div class=”content”>
<article>
...
</article>
<article>
...
</article>
<article>
...
<article>
</div>
PREVIOUSLY HTML5
![Page 59: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/59.jpg)
Also can be correct
<div class=”content”>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
<div class="post”>
...
</div>
</div>
<section class=”content”>
<article>
...
</article>
<article>
...
</article>
<article>
...
<article>
</section>
PREVIOUSLY HTML5
![Page 60: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/60.jpg)
Umm
That’s great, but frankly not that much of a different, how is that better?
![Page 61: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/61.jpg)
Benefit 1
</div>
</div>
</div>
<div id=“footer”>
</div>
</body>
</div>
</article>
</div>
<footer>
</footer>
</body>
BEFORE THESE ELEMENTS AFTER
![Page 62: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/62.jpg)
Benefit 2• Less monkeying with content
hierarchies
![Page 63: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/63.jpg)
Main Page Archive Page Post Page
Article ArticleArticle
<article> <header> <h1><a href="">I Made a Post Thingie</a></h1> <time datetime="2011-09-02">September 2, 2011</time> </header> <img src="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" /> <p>DIY ea nulla photo booth tempor occaecat, velit nihil mixtape scenester. Irony laboris echo park, wolf officia vice cupidatat labore butcher freegan farm-to-table nisi velit aliqua gluten-free. Aliquip nesciunt assumenda, wayfarers seitan wolf reprehenderit nulla twee sartorial dolore food truck voluptate ex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur fap pariatur dolor. Lo-fi nulla whatever mlkshk, banksy american apparel carles adipisicing incididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, adipisicing sartorial non cardigan craft beer cillum reprehenderit terry richardson 3 wolf moon mollit. Ethical ut labore beard, 3 wolf moon duis readymade assumenda hipster tofu mcsweeney's master cleanse.</p></article>
article header h1
![Page 64: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/64.jpg)
Benefit 3• No longer bound to one header or
one nav can have multiple.
![Page 65: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/65.jpg)
New elements work across
modern browsers without fail
![Page 66: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/66.jpg)
What’s you’re
definition of
Modern?
![Page 67: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/67.jpg)
Use the HTML 5 Shiv
http://code.google.com/p/html5shiv/
![Page 68: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/68.jpg)
FORMInput
![Page 69: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/69.jpg)
HTML5 includes lots of
new <input> types
69
![Page 70: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/70.jpg)
They aren’t supported on every browser
70
![Page 71: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/71.jpg)
All browsers default to showing unknown input types as text
71
![Page 72: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/72.jpg)
• Support is spotty• Browser vendors tend
to round, add magnifying glass, etc.
<input type=“search” name=“search” />
Search
![Page 73: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/73.jpg)
• Provides validation• Provides email keyboard on iOS
devices.
<input type=“email” name=“email” />
![Page 74: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/74.jpg)
Provides validationProvides url keyboard on iOS devices.
<input type=“url” name=“url” />
Url
![Page 75: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/75.jpg)
Provides keypad on iOS and Android devices.Provides a stepper on desktopsTakes attributes:
– Min/Max– Step
<input type=“number” name=“cost” />
Number
![Page 76: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/76.jpg)
• Provides keypad on iOS and Android devices.
<input type=“tel” name=“cell” />
Tel
![Page 77: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/77.jpg)
Not well supported,
but have potential
![Page 78: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/78.jpg)
• Provides a set of values• The slider allows you to pick one• Not terribly precise• Takes attributes:
• Min/Max• Step
<input type=“range” name=“volume” />
Range
![Page 79: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/79.jpg)
• Provides validation• On Opera
• Displays a data picker
• On Safari/Chrome• Displays ticker
• IE• Dashes your hopes and dreams the way only IE can
<input type=“date” name=“dob” />
Date
![Page 80: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/80.jpg)
FORMElements
![Page 81: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/81.jpg)
Output
Semantically correct placeholder for calculated values.Can also be used a label for input type=“slider”
<output />
![Page 82: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/82.jpg)
Output in Action<form class="order"> <label for="quantity">Quantity:</label> <input id="quantity" name="quantity" type="number" value="1" onChange="calc()" /> <br /> <label for="price">Price: </label> <input id="price" name="price" type="number" value="19.99" disabled /> <br /> <label for="total">Total: </label>
<output id="total" name="total" /> <br /></form>
<script type="application/javascript">function calc(){
var quantity = document.getElementById("quantity").value;var price = document.getElementById("price").value;var total = document.getElementById("total");total.value = Math.round(quantity * price * 100)/100;
}</script>
![Page 83: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/83.jpg)
meter
Basically a Bar Chart of results<meter min=“0” max=“20” value=“12”>12cm</meter>
![Page 84: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/84.jpg)
progress
Could be used to indicate progress through a multistep formCould be programmatically changed to indicate progress of program
<progress min=“100” value=“20”>20%</progress>
![Page 85: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/85.jpg)
For Future Reference• HTML 5 General – http://diveintohtml5.org– http://html5doctor.com
• HTML5 Semantics– http://diveintohtml5.org/semantics.html
• HTML 5 Forms– http://wufoo.com/html5– http://diveintohtml5.org/forms.html
![Page 86: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/86.jpg)
MULTIMEDIA
![Page 87: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/87.jpg)
Canvas
![Page 88: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/88.jpg)
• A drawing surface for–Manipulating images– Drawing– Saving Content
Canvas
![Page 89: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/89.jpg)
Demo
![Page 90: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/90.jpg)
• http://www.html5rocks.com/en/tutorials/canvas/integrating/ • http://dev.opera.com/articles/view/html-5-canvas-the-basics
/ • http://www.slideshare.net/bebraw/intro-to-html5-canvas-
8312015
More resources for Canvas
![Page 91: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/91.jpg)
Video
![Page 92: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/92.jpg)
<Image> for movies
![Page 93: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/93.jpg)
Audio
![Page 94: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/94.jpg)
<image> for sounds
![Page 95: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/95.jpg)
Web Audio API
![Page 96: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/96.jpg)
<canvas> for sounds
![Page 97: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/97.jpg)
OTHERS
![Page 98: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/98.jpg)
• Offline Storage• Drag and Drop
Others
![Page 99: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/99.jpg)
CSS3
![Page 100: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/100.jpg)
Remember CSS3 is a series of
modules…
![Page 101: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/101.jpg)
• Transforms– Origins
• Shadows• Gradients• Transitions• Animations
CSS Modules
![Page 102: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/102.jpg)
Demo
Various CSS Coolness
![Page 103: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/103.jpg)
Why CSS3?
![Page 104: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/104.jpg)
• Hardware Accelerated• Philosophically a display issue• Hardware Accelerated
Reasons
![Page 105: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/105.jpg)
CONCLUSIONS
![Page 106: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/106.jpg)
“HTML5” vs HTML5
![Page 107: Introduction to HTML5](https://reader035.vdocuments.us/reader035/viewer/2022062405/555c2741d8b42a0b418b4d98/html5/thumbnails/107.jpg)
Follow up?
• Preso will be up at – http://slideshare.net/tpryan
• Feel free to contact me– [email protected]– http://terrenceryan.com– Twitter: @tpryan