WDIM268 Week 6 (Summer 2010)

WDIM268WEEK6

Why HTML5?

Pave the cow paths! Photo Credit: Lovro67

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>

Writing markup...

<br> <br/> If a tag is empty and requires no closing tag, slash or no slash is okay.

alt alt=Ham alt=′Ham′ alt=″Ham″ Attribute values must be provided, with the value enclosed in quotes.

selected selected=selected selected=′selected′ selected=″selected″ Boolean (on/off) attributes can omit the redundant value (but they don’t have to).

Deprecated vs Obsolete

font big Use abbr instead frame frameset noframes acronym strike center These are obsolete in HTML5.

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 has extra 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!

WDIM268 Week 6 (Summer 2010)

by Tyler Sticka

Accessibility

Categories

Upload Details

Usage Rights

Statistics

WDIM268 Week 6 (Summer 2010) Presentation Transcript