wdim268 week 6 (summer 2010)
DESCRIPTION
TRANSCRIPT
WDIM268WEEK6
Why HTML5?
Photo Credit: Lovro67
Pave the cow paths!
Backwards compatibility.
Web applications.
Rich media.
More semantic tags.
Ease-of-use.
How do I start?
Remember this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> <script type="text/javascript" src="scripts.js"></script></head><body> (Page content)
</body></html>
Ta-da!
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script></head><body> (Page content)
</body></html>
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script></head><body> (Page content)
</body></html>
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script></head><body> (Page content)
</body></html>
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script></head><body> (Page content)
</body></html>
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>(Page title)</title> <link rel="stylesheet" href="style.css" media="screen, projection" /> <script src="scripts.js"></script></head><body> (Page content)
</body></html>
Writing markup...
If a tag is empty and requires no closing tag, slash or no slash is okay.
<br>
<br/>
Attribute values must be provided, with the value enclosed in quotes.
alt
alt=Ham
alt=′Ham′
alt=″Ham″
Boolean (on/off) attributes can omit the redundant value (but they don’t have to).
selected
selected=selected
selected=′selected′
selected=″selected″
Deprecated vs Obsolete
These are obsolete in HTML5.
center
font
frameframeset
strike
big
acronym
Use abbrinstead
noframes
small now means “small print,” legalese, etc.
b means stylisticially offset without conveying
extra importance
Continue using strong when the text has extra importance.
i means the text is in “an alternate voice or mood”
Continue using em when the text hasextra emphasis.
<a href=""> <h1>Post Title</h1> <p>Short description.</h1></a>
Anchor tags can now be inline or block.
These exciting developments and more in this week’s demo!