WDIM268 Week 6 (Summer 2010)
-
Upload
tyler-sticka -
Category
Design
-
view
463 -
download
3
description
Transcript of WDIM268 Week 6 (Summer 2010)
![Page 1: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/1.jpg)
WDIM268WEEK6
![Page 2: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/2.jpg)
Why HTML5?
![Page 3: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/3.jpg)
Photo Credit: Lovro67
Pave the cow paths!
![Page 4: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/4.jpg)
Backwards compatibility.
![Page 5: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/5.jpg)
Web applications.
![Page 6: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/6.jpg)
Rich media.
![Page 7: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/7.jpg)
More semantic tags.
![Page 8: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/8.jpg)
Ease-of-use.
![Page 9: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/9.jpg)
How do I start?
![Page 10: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/10.jpg)
Remember this?
![Page 11: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/11.jpg)
<!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>
![Page 12: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/12.jpg)
Ta-da!
![Page 13: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/13.jpg)
<!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>
![Page 14: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/14.jpg)
<!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>
![Page 15: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/15.jpg)
<!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>
![Page 16: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/16.jpg)
<!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>
![Page 17: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/17.jpg)
<!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>
![Page 18: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/18.jpg)
Writing markup...
![Page 19: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/19.jpg)
If a tag is empty and requires no closing tag, slash or no slash is okay.
<br>
<br/>
![Page 20: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/20.jpg)
Attribute values must be provided, with the value enclosed in quotes.
alt
alt=Ham
alt=′Ham′
alt=″Ham″
![Page 21: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/21.jpg)
Boolean (on/off) attributes can omit the redundant value (but they don’t have to).
selected
selected=selected
selected=′selected′
selected=″selected″
![Page 22: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/22.jpg)
Deprecated vs Obsolete
![Page 23: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/23.jpg)
These are obsolete in HTML5.
center
font
frameframeset
strike
big
acronym
Use abbrinstead
noframes
![Page 24: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/24.jpg)
small now means “small print,” legalese, etc.
![Page 25: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/25.jpg)
b means stylisticially offset without conveying
extra importance
Continue using strong when the text has extra importance.
![Page 26: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/26.jpg)
i means the text is in “an alternate voice or mood”
Continue using em when the text hasextra emphasis.
![Page 27: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/27.jpg)
<a href=""> <h1>Post Title</h1> <p>Short description.</h1></a>
Anchor tags can now be inline or block.
![Page 28: WDIM268 Week 6 (Summer 2010)](https://reader034.fdocuments.net/reader034/viewer/2022051817/5492730eb479597e6a8b5901/html5/thumbnails/28.jpg)
These exciting developments and more in this week’s demo!