html5 css3 handbook

42

Upload: mrfdes

Post on 10-Apr-2015

2.735 views

Category:

Documents


10 download

TRANSCRIPT

Page 1: Html5 Css3 Handbook
Page 2: Html5 Css3 Handbook

CONTENTS

INTRODUCING HTML5 AND CSS3 3

GETTING TO KNOW HTML5 5

The <!DOCTYPE> Element 7

The <header> Element 7

The <nav> Element 8

The <article> Element 8

The <aside> Element 10

The <section> Element 10

The <footer> Element 11

INTRODUCING CSS3 12

The border-radius Property 13

The box-shadow Property 15

The text-shadow Property 16

The transition Property 17

PUTTING IT ALL TOGETHER WITH COFFEECUP HTML EDITOR 20

Tag List 20

Code Completion 20

HTML5 Themes and Layouts 21

Not Just a Plug 22

HTML5 AND CSS3: LOOKING FORWARD 23

HTML5 Forms 23

The <canvas> Element 24

Data Storage 24

Thanks for Reading! 25

APPENDIX A: HTML5 CODE 26

APPENDIX B: CSS3 CODE 31

2

Page 3: Html5 Css3 Handbook

INTRODUCING HTML5 AND CSS3

Get ready, people, ’cause there’s a revolution underway. It’s going to change the way websites are built and viewed, and it’s going to make the web more accessible for people, search engines, comput-ers, smartphones, you name it. It’s the shift to HTML5 and CSS3. Mark your calendars, because by mid-2011, you can expect universal browser support for these languages.

What exactly are HTML5 and CSS3? They’re revised versions of the web design languages we’ve come to know and love. Now keep in mind that the existing versions of HTML and CSS aren’t getting scrapped; instead, more elements and properties — and by extension, more functionality — are being added.

But if it’s not broken, why fix it? The answer to that question actually lies in the history behind HTML5 and CSS3. See, in 1997, the grand high pooh-bahs at the World Wide Web Consortium (W3C for short) decided to stop extending the then-current version of HTML, and instead turned their focus toward XML and XHTML. Their intentions were good, and by using languages that had to be formatted correct-ly in order to work, they hoped to keep things standard across the web. The thing is, nobody’s perfect, and since even tiny errors in XML and XHTML yielded fatal errors, designers stuck with HTML, which still worked even if there were errors in the code.

A few years later, a group of developers and browser vendors petitioned the W3C to update HTML and CSS to reflect the changing nature of the web. The W3C refused, staunchly clinging to the XML/XHTML ideal. However, a group of people calling themselves the Web Hypertext Applications Technology Working Group (WHATWG) broke apart from the W3C. They were dedicated to updating HTML and CSS while maintaining backward compatibility and forgiving error handling. Eventually, the W3C saw the light and joined forces with the WHATWG, and they began work on HTML5 and CSS3 in earnest.

One of the things that makes HTML5 and CSS3 so powerful is hindsight. We’ve learned a lot about how people interact with the web — and about the web itself — in the years since its inception, and HTML5 and CSS3 take this knowledge into account. They’re also more suited to the technologies of our modern age, like smartphones and iPads, as well as to disabled users and search engines. Finally, the languages are much more intuitive, meaning they’ll be easier to learn, easier to master, and easier to use to create kick-butt websites.

Sound too good to be true? It’s not. Throughout the course of this handbook, you’ll learn just how these languages make things easier for designers, users, and devices. And this webpage (Figure 1.1) is how we’re going to teach you:

3

Page 4: Html5 Css3 Handbook

Fig. 1.1. A webpage designed using HTML5 and CSS3.

There are two things that are special about this page: 1) It’s written in HTML5 and CSS3, and 2) It will work in any current browser. That’s right — you can start using this new technology today! Over the next two chapters, we’ll walk you through the steps we took to make this page. By the time you finish this guide, you will be able to create simple page designs using HTML5 and CSS3. Let’s get started4

Page 5: Html5 Css3 Handbook

GETTING TO KNOW HTML5

So, how exactly does HTML5 simplify everything so much? Well, for years, we’ve had to improvise when designing page elements like headers and sidebars, and it shows. If you’ve looked at the source code of most modern websites, you’ll see what is commonly referred to as “tag soup,” a seemingly endless array of <div> elements nested inside other <div> elements. This is the standard way of doing things — using divisions and IDs to give semantic meaning to our markup.

This method came from our most respected HTML luminaries, and it has worked well up to this point. However, HTML5 is going to make this process simpler and more intuitive. HTML5 makes more sense from a structural standpoint by introducing more intuitive semantic elements and cleaning up a lot of the work-arounds and ambiguous markup we use today.

To illustrate this, let’s take a look at the HTML5 webpage we saw in the previous chapter. Figure 2.1 shows how it looks without any styles.

5

Page 6: Html5 Css3 Handbook

Fig. 2.1. A page created using just HTML5.

Now, let’s take a look at the code that makes it possible. We’ve included the full code for this page in Appendix A (Page 26), so you can take a look at it in its entirety. You’ll notice a lot of familiar HTML elements in that block of code — old pals like <div>, <ul>, <h1>, and the rest of the gang — but there are a few new faces there too. Everything we cover in this example can be used in current browsers — 6

Page 7: Html5 Css3 Handbook

including Internet Explorer, just as long as you paste this code into the <head> section of your docu-ment:

<!--[if IE]>

<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

<![endif]-->

This link, a handy piece of JavaScript called HTML5 Shim, helps translate HTML5 for IE so it can render pages correctly. We’ll spare you the technical details about how it works, but as long as you remember to post this just before your </head> tag, your new designs will work just fine in IE.

The <!DOCTYPE> Element

As all you seasoned web designers know, the <!DOCTYPE> element is a total mess:

<!DOCTYPE html

PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Yuck. Well, have we got good news for you! With HTML5, you’ll notice a pleasant change. Ladies and gentlemen, meet the new and improved <!DOCTYPE> element.

<!DOCTYPE html>

That’s right, with just two words, you achieve the same effect as the <!DOCTYPE PUBLIC “-//blah blah blah”> mess we’ve all grown to know and loathe. The best part? It’s totally backwards-compatible, which means that you can use this code to specify the DOCTYPE even if you’re using HTML 4.01 or XHTML 1.0. Why would you want to do that? Well, if you’re going to be switching over to HTML5 even-tually anyway, you may as well start here. So go ahead, what are you waiting for?

The <header> Element

Moving on, you’ll notice the <header> element.

<header>

<h1>Website Name</h1>

</header>

This element is used to differentiate a heading from the rest of the page. In this case, the heading is the <h1> element, but it can include any of the header elements (<h1>-<h6>), a table of contents, a search box, a logo — pretty much anything you might consider a heading.

7

Page 8: Html5 Css3 Handbook

The <header> element is a good example of how HTML5 strives for more semantic markup. See, brows-ers, search engines, and assistive devices interpret header elements as text, but there’s no special meaning there to set them apart from any of the other text on the page. With HTML5, they know that anything inside the <header> elements is, well, a header. This means they can interpret them more ap-propriately. That idea of appropriate interpretation is the driving force behind HTML5.

The <nav> Element

The next new element we’re going to cover is <nav>:

<nav id=”global”>

<ul>

<li class=”selected”><a href=”/”>Home</a></li>

<li><a href=”/”>About</a></li>

<li><a href=”/”>Services</a></li>

<li><a href=”/”>Contact</a></li>

</ul>

</nav>

It’s used to mark up the section of the page containing navigation — think navigation bars or a links section.

The <article> Element

The <article> element is used to mark up self-contained content that is intended to be distributed or syndicated — blog posts, user comments, and, you guessed it, articles — as well as any associated headers or footers. In our example page, we used the <article> element to mark up a blog post:

<article class=”blogPost”>

<header>

<h2>Article Title</h2>

<p>Posted on <time pubdate datetime=”2009-06-29T23:31:45-09:00”>June 29th 2009 (…) </p>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imper (…) </p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt (…) </p>

</article>

8

Page 9: Html5 Css3 Handbook

The <time> Element

The <time> element gives you a way to encode dates and times in your webpage code. One common use for this element — including in our sample webpage — is to specify the publication date of a piece of content. If you’re doing so, be sure to include the pubdate attribute, like so:

<time pubdate datetime=”2009-06-29T23:31:45-09:00”>June 29th 2009</time>

There are actually a few different ways to format the datetime attribute value (the bit between the quotation marks):

<time datetime=”2010-06-08”>June 8, 2010</time>

<time datetime=”2010-06-08T09:00Z”>9 a.m. on June 8, 2010</time>

<time datetime=”2010-06-08T09:00+06:00”>9 a.m. on June 8, 2010 in Asturias, Spain</time>

Dates are always written out in YYYY-MM-DD format, and you can append them with the specific time, if you want. To do this, put a T right after the date, followed immediately by the time, formatted like so: HH:MM:SS. (Note: Seconds are optional. If you don’t want to include them, just omit the :SS bit.) Finally, append the whole kit and kaboodle with either:

• Z: This sets the time to Coordinated Universal Time (UTC).

• +HH:DD or -HH:DD: This allows you to set time-zone offsets from UTC. Using +HH:DD format adds the amount of time you specify to your current time; using -HH:DD format subtracts the specified time.

9

Page 10: Html5 Css3 Handbook

The <aside> Element

The <aside> element is usually used to mark up sidebars and other content that is related, but not es-sential, to the rest of the content. An <aside> can occur within an article (like a sidebar to a story) or, as in our example, as a sidebar menu:

<aside>

<section>

<header>

<h3>Categories</h3>

</header>

<nav id=”categories”>

<ul>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

(…)

</aside>

The <section> Element

The <section> element is a little more vague than the other elements we’ve talked about. It’s basically used for just what it sounds like: to section off related parts of a document. It’s up to you to decide what parts might need to be sectioned off. You could use <section> to create logical sections, like sub-headings in a long article, or you could use it structurally, like we did in our sample webpage. We used <section> elements to set off the introduction to the page, the articles, different areas of the sidebar, etc.:

<section id=”about”>

<header>

<h3>About</h3>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor (…)</p>

</section>

Although you can use <section> to create structural or logical sections, you should choose one usage and stick with it.

10

Page 11: Html5 Css3 Handbook

The <footer> Element

The last element we’re going to talk about here is the <footer> element, and it’s pretty self-explanato-ry: Use it for footer content.

<footer>

<div class=”clear”>

<section id=”about”>

<header>

<h3>About</h3>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor (…) </p>

</section>

<section>

<header>

(…)

</footer>

You’re not limited to using the <footer> element just at the bottom of your pages — you can create footers for any page element, including sidebars, articles, and more.

Hey, give yourself a pat on the back — you just learned the basics of how to create a webpage using HTML5. Pretty easy, right? In the next section of this handbook, you’ll learn how to style your rock-solid webpage with CSS3.

11

Page 12: Html5 Css3 Handbook

INTRODUCING CSS3

For years, designers have used images and JavaScipt to create basic design elements like boxes with rounded corners or simple gradients. Although these methods work, they often require a lot of coding to pull off and result in long download times for the user. CSS3 aims to eliminate this less-than-ideal situation. Using the magic of CSS3, you can add text and box shadows, create gradients, and use cus-tom fonts.

At this time, most browsers support CSS3; in fact, the only exception is Internet Explorer, which won’t support it until mid-2011. Fortunately, there’s an easy work-around for those who want to start using CSS3 right away. Just create two separate style sheets, one in the current version of CSS and the other in CSS3. (The former is for IE, and the latter is for all the other browsers.) Next, just put this code in the <head> section of your HTML document:

<link rel=”stylesheet” href=”css3style.css” type=”text/css” media=”screen” charset=”utf-8” />

<!--[if IE]>

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” charset=”utf-8” />

<![endif]-->

This code tells the browser to use the CSS3 style sheet (css3style.css), unless it’s IE, in which case it should use the current CSS style sheet (style.css).

Now, let’s start learning about CSS3! We included the full CSS3 code for our sample webpage in Appen-dix B (Page 30). For the rest of this section, we’ll take a closer look at some of the new CSS3 proper-ties we used to achieve this style, as well as a couple others that you should know about.

Browser Prefixes in CSS3

There’s a select handful of CSS3 properties that need special prefixes in order to display prop-

erly. The reason for this is that some browsers use different names for CSS3 properties, and

using the prefix basically translates the CSS3 property for a given browser. This table lists the

prefixes you’ll need to use for Firefox, Safari, and Google Chrome.

Browser Prefix Example

Firefox -moz- moz-border-radius: 10px;

Safari -webkit- webkit-border-radius: 10px;

Google Chrome -webkit- webkit-border-radius: 10px;

Here’s an example of how a CSS3 property, box-shadow, would look in a style sheet:

nav {

-moz-box-shadow:2px 2px 2px #333333;

-webkit-box-shadow:2px 2px 2px #333333;

}12

Page 13: Html5 Css3 Handbook

The border-radius Property

Check out the nice rounded corners around the navigation links near the top of our sample webpage:

Fig. 3.1. Rounded corners on the navigation links.

Creating that effect with old-timey technology is surprisingly technical, and it involves four images and about a page and a half worth of code. But with CSS3, you can do the same thing using the border-radius property. Here’s the style we used in our sample webpage:

#intro a {

color: #fff;

background-color: #333;

font: normal bold 14px/44px arial, Helvetica, sans-serif;

padding: 10px;

margin-right: 40px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

text-align: center;

}

Basically what the border-radius property does is allow you to specify the radius, measured in pixels, of the slope of the corner. There are a couple different ways you can specify the roundness of your corners. In our example, we set all the corners to 5 pixels at once. If for whatever reason you wanted your corners to have different radii, you’d list the different pixel measurements in the following order: top, right, bottom, and left (you can remember this using the mnemonic “trouble” — TRBL):

nav {

-moz-border-radius:10px 10px 10px 10px;

-webkit-border-radius:10px 10px 10px 10px;

}

To set the radius of a single corner, use one of these versions of the border-radius property:

border-radius-topleft13

Page 14: Html5 Css3 Handbook

border-radius-topright

border-radius-bottomleft

border-radius-bottomright

The box-shadow Property

As you may have guessed, this property adds a shadow to a box. Here’s how it looks in our webpage:

Fig. 3.2. The box-shadow property at work.

And here’s the code we used to create it in our sample style sheet:

#intro #photo {

background-color: #fff;

float: right;

margin-top: -170px;

-moz-box-shadow: 0 1px 10px #333;

-webkit-box-shadow: 0 1px 10px #333;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

width: 400px;

height: 300px;

}

Now, let’s deconstruct that CSS a bit.

-moz-box-shadow: 0 1px 10px #333;

14

Page 15: Html5 Css3 Handbook

Horizontal offset, or how far to the right or left of the box the shadow appears. A positive value places the shadow to the right of the box, and a negative value places it to the left. Enter a value of 0 if you do not want a horizontal offset.

Vertical offset, or how far to the top or bottom of the box the shadow appears. A positive value places the shadow below the box, a negative value places it above the box, and a value of 0 creates no vertical offset.

Blur. The higher the number, the more the shadow will be blurred.

The color of the shadow.

The text-shadow Property

The text-shadow property works the same way as box-shadow, with one difference: You don’t need to use a CSS3 prefix. The text-shadow property doesn’t make an appearance on our sample webpage, but we figured we’d tell you about it because it’ll probably come in handy in your own designs.

The @font-face Declaration

This one little CSS declaration solves a web design problem that’s been plaguing designers for years: how to use custom fonts on a webpage. Believe it or not, with @font-face, you can use any typeface you want on your pages. Figure 3.3 displays and deconstructs code you need to make it happen.

@font-face {

font-family: “MyFancyFont”;

src: url(“type/filename.eot”);

src: local(“ñ”),

url(“type/filename.woff”) format(“woff”),

url(“type/filename.otf”) format(“opentype”),

url(“type/filename.svg#filename”) format(“svg”);

}

Fig. 3.3. An @font-face style rule.

The name of your typeface.

The path to the .eot version of the font file.

A backup font located on the user’s computer. If you don’t want to use any of the standard fonts on a user’s computer, enter a character you wouldn’t find on a normal keyboard, like a smiley face or an n with a tilde (ñ).

The paths to the .woff and .otf versions of the font file.

The path to the .svg version of the font file. This is slightly different because you need to ap-pend the path with #filename, where filename is the name of the file.15

Page 16: Html5 Css3 Handbook

Now, let’s talk a little bit about how this all works. You’ll notice that the code contains links to differ-ent file types of the same font. What happens is that the browser actually downloads and installs these files. How do you obtain these different types of fonts? You can easily convert any font using a free service like Font Squirrel: http://www.fontsquirrel.com/fontface/generator.

Once you have converted your fonts, upload them to your server, and then add this code to your style sheet, substituting the parts in pink with paths to and names of your own font files.

@font-face {

font-family: “MyFancyFont”;

src: url(“type/filename.eot”);

src: local(“ñ”),

url(“type/filename.woff”) format(“woff”),

url(“type/filename.otf”) format(“opentype”),

url(“type/filename.svg#filename”) format(“svg”);

}

Next, add some style rules for text elements, like so:

h1 {

font-family:MyFancyFont,helvetica,sans-serif;

}

Congratulations: With just a few lines of code, you’ve successfully used a cool, non-web-safe font on your webpage.

The transition Property

You know how, when you hover over a link, the color changes instantly? Wouldn’t it be nice if there were a way to make that transition a little smoother, like a slow fade? See where we’re going with this? With the transition property, you can specify the duration and timing of a given object’s anima-tion. Use the following properties to specify your transitions:

Property Description Values Example

transition-property What CSS property will be animated

all, none, [property] -webkit-transition-property: padding opacity;

transition-duration How long the transition will last [time] (in seconds) webkit-transition-duration: 1s;

transition-timing-function

The timing of the animation (e.g. slow at first, slow at the end, a consistent speed, etc.)

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)

-webkit-transition-timing-function: ease-in;

16

Page 17: Html5 Css3 Handbook

Property Description Values Example

transition A shorthand property that can be used for all three transition properties

[property] [duration] [timing-function]

-webkit-transition: opacity 3s ease;

The transition-timing-function property is a little tough to grasp, but there’s a great animation at the-art-of-web.com that illustrates how it works. You can check it out here: http://www.the-art-of-web.com/css/timing-function/

We tried to keep our sample webpage simple, so we omitted transitions, but here’s a sample style rule to show you transitions in action:

header nav a {

margin-top:3px;

margin-left:5px;

margin-right:5px;

padding:.5em 0;

color: #3399FF;

background-color:transparent;

-webkit-transition: all 0.9s linear;

}

header nav a:hover {

color:#CC0066;

-webkit-transition: all 0.9s linear;

}

That first style rule sets the margins, padding, and color for links in a header. The transition property tells the browser to make all the properties of links take effect over the course of 0.9 seconds in a linear way. This means that when the page loads, the space between the links will steadily increase to the specified distance over the course of 0.9 seconds. The second style rule sets the color of header links in the hover state. With the addition of the transition property, the color changes slowly and steadily from blue to pink. To see this transition in action, put that code in a CSS file called style.css, create an HTML file containing this code, and then open it up in a browser:

<!DOCTYPE html>

<html>

<head>

<link rel=stylesheet href=”style.css” type=”text/css” media=screen>17

Page 18: Html5 Css3 Handbook

</head>

<body>

<header>

<nav>

<a href=”#”>Link 1</a>

<a href=”#”>Link 2</a>

</nav>

</header>

</body>

</html>

Pretty neat, huh? And that’s just a basic example. Transitions have several other uses, including mak-ing page elements spin, grow, and shrink.

And with that, we’ve concluded the CSS3 portion of our program! Next up, you’ll learn how to weave these two languages together into beautiful webpages using CoffeeCup HTML Editor.

18

Page 19: Html5 Css3 Handbook

PUTTING IT ALL TOGETHER WITH COFFEECUP HTML EDITOR

Over the past two chapters, you’ve learned how to put together a solid layout using HTML5, and how to style it using the cool tools available in CSS3. So far so good, right? Are you feeling confident, like this stuff actually isn’t that hard? Well, what if we told you there was an even easier way to use HTML5 and CSS3? There is, and it’s the CoffeeCup HTML Editor.

We’ve recently given our HTML Editor a face-lift, integrating HTML5 and CSS3 right into the program. All it takes to use HTML5 in the HTML Editor is declaring the DOCTYPE — remember that simple, clean HTML5 DOCTYPE?

<!DOCTYPE html>

There are a couple ways you can do this. If you start with a blank page (File > New Blank Page), just type it in manually. Alternately, if you use the Quick Start option (File > New From Quick Start), you can select the HTML5 DOCTYPE from the DOCTYPE drop-down list.

Fig. 4.1. The DOCTYPE drop-down list contains a list of HTML DOCTYPES, including HTML5.

This automatically inserts the HTML5 DOCTYPE, as well as some other code, onto your page to get you started. Once you’ve declared your DOCTYPE, you can use these helpful tools to whip up a website.

Tag List

On the left-hand side of the HTML Editor workspace, you’ll see the Code tab. Click it to see a compre-hensive list of HTML5 elements.

Fig. 4.2. The Code tab contains a comprehensive list of HTML5 elements.

Use it as a reference, or double-click an element to add it to your code.

Code Completion

When you type an element in the HTML Editor, a handy window containing HTML5 elements appears just over your cursor. This is the Code Completion window, and you can use it to make sure your code is error-free.

19

Page 20: Html5 Css3 Handbook

Fig. 4.3. Code completion helps make sure your tags are formatted properly.

Here’s how it works: Start typing the element you want to include in your code, and then browse through the suggestions for the one you want. When you select one, the opening and closing tag will automatically be inserted into your document. This way, you never have to worry about forgetting to close a tag or mistyping the name of an element.

HTML5 Themes and Layouts

If you’re not fully convinced you can design a page of your own using HTML5 and CSS3, or if you just want some inspiration, the built-in themes and layouts in the HTML Editor are just what you need.

What’s the Difference Between a Theme and a Layout?

A layout includes the HTML for a basic page structure and allows you to provide your own text

and images. This gives you more freedom over the appearance of your design. A theme includes

three pages (index.html, aboutus.html, and contactus.html) that include the HTML and images

for a basic design, allowing you to replace the images and text with your own content. This is a

great option for beginners, since the bulk of the work has already been done for you.

To browse the HTML5 themes, just go to File > New From Theme. This opens the Theme Chooser, which allows you to browse all our great themes, including five written in HTML5 and CSS3.

Fig. 4.4. The Theme Chooser allows you to browse our great HTML5 themes.20

Page 21: Html5 Css3 Handbook

If you’d rather use a layout, go to File > New From Layout. This opens the Layout Chooser, which, much like the Theme Chooser, allows you to check out the layouts that come with the program, including five written in HTML5 and CSS3.

Fig. 4.5. The Layout Chooser allows you to select one of our HTML5 layouts.

Not Just a Plug

Look, of course we’re going to recommend the HTML Editor — it is our flagship program, after all. But this isn’t just some shameless plug. We here at CoffeeCup have a philosophy that if we aren’t proud of a product, we won’t put our name on it. We honestly believe that the HTML Editor is the best resource out there for people who want to build a website using HTML5 and CSS3.

If you ever experience any issues with the Editor, feel free to browse our extensive online knowledge base (http://www.coffeecup.com/html-editor/help/) or contact our world-class tech support team. Just log into our website (https://www.coffeecup.com/login/) and click the My Support Room link. Once you’ve submitted your request, you should get a response back within 24 hours.

And if you have any suggestions for how to make the Editor — or any of our other awesome web design programs — better, drop us a line at [email protected].

21

Page 22: Html5 Css3 Handbook

HTML5 AND CSS3: LOOKING FORWARD

So far, we’ve covered some of the basics of HTML5 and CSS3, but there’s a lot more to look forward to. Read on, and we’ll give you an overview of some more exciting developments on the horizon. Since most of what we cover in this chapter isn’t widely supported yet, you won’t be able to use much of this information right away, but it’ll definitely give you something to get pumped about!

HTML5 Forms

With HTML5, Web forms are about to get a lot easier to create. Sure, new input types and more stream-lined, intuitive markup are exciting, but what really has designers in a tizzy is the fact that they don’t have to mess around with scripts anymore. That’s right: Using only HTML5, you can enable functions like auto-completion, validation, and required fields.

Let’s start with the new input types. Remember how we said the driving force behind HTML5 is more semantic, meaningful markup? The new HTML5 input types, listed below, embody this idea:

• email — Creates an e-mail address field.

• number — Creates a field that allows the user to enter a number.

• color — Creates a color picker box.

• search — Adds a search box.

• tel — Creates a telephone number field.

• range — Adds a number range/slider.

• datetime, date, month, week, time, and datetime-local — Creates a calendar/date picker that al-lows a user to select a date.

• url — Create a URL field.

HTML5 also has new form attributes that narrow down what users can enter in a given field. They are:

• list — Allows you to specify a list of options for an input field.

• placeholder — Displays placeholder text in a field.

• max and min — Sets the minimum and maximum date/time or number values.

• pattern — Allows you to use a regular expression to validate an input field.

Now, what’s the big deal about these new attributes and input types? Well, let’s say you want a user to enter their phone number in your form. With the current version of HTML, you’ll probably use a text field, but with HTML5, you can use the tel input type. Not only is this more meaningful, but it also makes form validation easier.

Let’s talk a little bit about form validation. Right now, it’s handled using JavaScript and a request of your server. This is a pain on two counts: First, it takes a long time, and second, it’s actually remark-ably difficult to verify an e-mail address using JavaScript. With HTML5, form validation will happen inside the browser. It’s quicker and more accurate, and with all these new input types, it can be very specific, validating URLs, telephone numbers, and more.

Pretty nice, right? If you’re stoked about playing with HTML5 forms, download Opera (http://www.opera.com/) — it’s the only browser that currently offers HTML5 form support.

22

Page 23: Html5 Css3 Handbook

The <audio> and <video> Elements

These days, there aren’t many good options if you want to embed audio or video content in a web-page. You could use the <embed> and <object> HTML elements, but there aren’t any well-established standards for how to do that, they’re hard to use, the results vary from browser to browser, and the finished product looks ugly and doesn’t yield a good user experience. Enter the <audio> and <video> HTML5 elements. These guys aim to clean up this mess with a standardized, easy-to-use method of embedding audio and video in webpages. Just check out this clean code:

<video src=”video.ogv” controls poster=”poster.jpg” width=”400” height=”500”>

<a href=”video.ogv”>Download this movie.</a>

</video>

Pretty easy to follow, right? But what’s all this controls and poster jibber-jabber? Including the controls attribute tells the browser to show the video in its default user interface; the poster attribute displays an image before the movie starts playing. The <audio> element is even simpler!

<audio src=”music.oga controls>

<a href=”music.oga”>Download this song.</a>

</audio>

There’s still a bit of work to be done to really fine-tune these elements, but it’s already clear that they’ll provide a much more intuitive solution for embedding audio and video in a webpage.

The <canvas> Element

The beauty of a canvas is its potential. It’s a blank surface, an open invitation to the artist to fill it in with whatever they want. The <canvas> element works the same way. With just one line of code, you can create a blank canvas just waiting to be filled with interactive or decorative images, text, gradi-ents, and the like.

<canvas width=”500” height=”400”></canvas>

Of course, just as it’s tricky to paint a masterpiece, it’s also tricky to fill up an HTML5 canvas. It takes a lot of JavaScript to make anything happen, and that’s a subject that’s a bit too broad for the scope of this handbook. However, you can take a look at a really cool application of this new element at http://diveintohtml5.org/canvas.html#halma.

Data Storage

The last new HTML5 technology we’re going to talk about here is HTML5 Storage, which is a way for webpages to store data within the browser. This new technology is kind of like cookies, with one important distinction: Unlike cookies, HTML5 Storage never transmits information back to the server. Instead, the information — about 5MB — is saved in something like a database in the browser itself. There are two different storage options:

• sessionStorage — Sets fields in the browser window, which means that when the window or tab is closed, the data is lost.23

Page 24: Html5 Css3 Handbook

• localStorage — Sets fields on the domain, which means that the window or tab can be closed and reopened and the data will still be there. Another cool thing about localStorage is that if you have two windows open to the same page and something changes on one of the pages, it automatically changes on the other page.

One of the most exciting potential applications for HTML5 Storage is the ability to work with interac-tive web applications even when you’re not online. And since it reduces the number of requests to a server, it also has the potential to create a faster experience for the user.

Thanks for Reading!

We hope you’ve enjoyed this look at HTML5 and CSS3. We’ve covered a lot in this chapter — and in this handbook — but believe it or not, we’ve still barely begun to scratch the surface! If you’re inter-ested in learning more and following new developments in the HTML5/CSS3 world, check out these great resources:

HTML5

• Dive Into HTML5 (http://diveintohtml5.org/)

• A List Apart (http://www.alistapart.com/articles/previewofhtml5)

• W3C (http://dev.w3.org/html5/spec/Overview.html)

• HTML5 Doctor (http://html5doctor.com/)

• HTML5 Gallery (http://html5gallery.com/)

CSS3

• CSS3.info (http://www.css3.info/)

• CSS3.com (http://www.css3.com/)

• W3C (http://www.w3.org/Style/CSS/current-work)

Thanks again, and best of luck!

24

Page 25: Html5 Css3 Handbook

APPENDIX A: HTML5 CODE

Here is the HTML5 code used to structure the sample webpage.

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<meta name=”Description” content=”HTML5 Website Example”>

<meta name=”author” content=”CoffeeCup Software, Inc.”>

<meta name=”Copyright” content=”Copyright (c) 2010 CoffeeCup, all rights reserved.”>

<title>HTML5 Website Example</title>

<link rel=”stylesheet” href=”styles.css”>

<!--[if IE]>

<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>

<![endif]-->

</head>

<body>

<header>

<h1>Website Name</h1>

</header>

<nav id=”global”>

<ul>

<li class=”selected”><a href=”/”>Home</a></li>

<li><a href=”/”>About</a></li>

<li><a href=”/”>Services</a></li>

<li><a href=”/”>Contact</a></li>

</ul>

</nav>

<section id=”intro”>

<header>25

Page 26: Html5 Css3 Handbook

<h2>Do you love HTML5 as much as we do?</h2>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>

<a href=”/”>Read More!</a>

<div id=”photo”>

<div>

<h3>Photo</h3>

</div>

</div>

</section>

<div id=”main” class=”clear”>

<section id=”articles”>

<article class=”blogPost”>

<header>

<h2>Article Title</h2>

<p>Posted on <time pubdate datetime=”2009-06-29T23:31:45-09:00”>June 29th 2009</time> by <a href=”#”>Joe Blow</a> - <a href=”#comments”>3 comments</a></p>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imper-diet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>

<article class=”blogPost”>

<header>

<h2>Article Title</h2>

26

Page 27: Html5 Css3 Handbook

<p>Posted on <time pubdate datetime=”2009-06-29T23:31:45-09:00”>June 29th 2009</time> by <a href=”#”>Joe Blow</a> - <a href=”#comments”>3 comments</a></p>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imper-diet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</article>

</section>

<aside>

<section>

<header>

<h3>Categories</h3>

</header>

<nav id=”categories”>

<ul>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

</ul>

</nav>

</section>

<section>

<header>

<h3>Archives</h3>27

Page 28: Html5 Css3 Handbook

</header>

<nav id=”archives”>

<ul>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

</ul>

</nav>

</section>

</aside>

</div>

<footer>

<div class=”clear”>

<section id=”about”>

<header>

<h3>About</h3>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi-dunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href=”/”>laboris nisi ut aliquip</a> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</section>

<section>

<header>

<h3>Blog Roll</h3>

</header>

<nav id=”blogRoll”>28

Page 29: Html5 Css3 Handbook

<ul>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

</ul>

</nav>

</section>

<section>

<header>

<h3>Site Map</h3>

</header>

<nav id=”siteMap”>

<ul>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

<li><a href=”/”>Menu Link</a></li>

</ul>

</nav>

</section>

</div>

</footer>

</body>

</html>29

Page 30: Html5 Css3 Handbook

APPENDIX B: CSS3 CODE

Here is the CSS3 code used to style the sample webpage.

/* Reset v1.0 | 20080212 - http://meyerweb.com/eric/tools/css/reset/

----------------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}30

Page 31: Html5 Css3 Handbook

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: ‘’;

content: none;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

/* remember to highlight inserts somehow! */

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

/* tables still need ‘cellspacing=”0”’ in the markup */

table {

border-collapse: collapse;

border-spacing: 0;31

Page 32: Html5 Css3 Handbook

}

/* tells browsers that don’t read HTML5 tags to render like divs */

header, footer, aside, nav, article, section {

display: block;

margin: 0;

padding: 0;

}

.clear:after {

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

/* Layout

----------------------------------------------------------------------------------------------------*/

body {

background: #f0f0f0;

border: none;

color: #333;

margin: 0 auto;

font: 14px/24px Helvetica, Arial, sans-serif;

width: 960px;

}

32

Page 33: Html5 Css3 Handbook

h1 {

font: normal bold 34px/50px Arial, Helvetica, sans-serif;

padding-top: 30px;

}

h2 {

font-size: 28px;

line-height: 44px;

padding: 22px 0;

}

h3 {

font-size: 18px;

line-height: 22px;

padding: 11px 0;

}

p {

font-weight: normal;

padding-bottom: 22px;

}

a {

color: #CC6600;

text-decoration: none;

}

a:visited {

color: #CC6600;33

Page 34: Html5 Css3 Handbook

outline: none;

text-decoration: none;

}

a:hover {

color: #FF9900;

text-decoration: underline;

}

a:active {

color: #CC6600;

outline: none;

text-decoration: none;

}

a:focus {

outline: 1px dotted;

}

header h1 {

padding: 30px 0 20px 40px;

}

nav#global {

padding: 10px 0;

position: absolute;

left: 0;

width: 100%;

background-color: #333;34

Page 35: Html5 Css3 Handbook

}

nav#global ul {

margin: 0 auto;

width: 960px;

border: none;

}

nav#global ul li {

display: inline;

list-style: none;

padding-left: 40px;

}

nav#global ul li a {

color: #777;

background-color: #222;

border: 2px solid #222;

font: normal bold 14px/44px Arial, Helvetica, sans-serif;

padding: 10px;

margin-right: 40px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

text-align: center;

}

nav#global ul li a:hover {

background-color: #111;

border: 2px solid #444;35

Page 36: Html5 Css3 Handbook

color: #FF9900;

text-decoration: none;

}

nav#global ul li.selected a {

color: #fff;

}

nav#global ul li.selected a:hover {

color: #FF9900;

}

#intro {

background-color: #ccc;

margin-top: 100px;

padding: 40px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

}

#intro header h2 {

font-weight: normal;

line-height: 30px;

padding: 0 0 15px 0;

width: 370px;

}

#intro p {

width: 370px;36

Page 37: Html5 Css3 Handbook

}

#intro a {

color: #fff;

background-color: #333;

font: normal bold 14px/44px Arial, Helvetica, sans-serif;

padding: 10px;

margin-right: 40px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

text-align: center;

}

#intro a:hover {

color: #FF9900;

background-color: #222;

text-decoration: none;

}

#intro #photo {

background-color: #fff;

float: right;

margin-top: -170px;

-moz-box-shadow: 0 1px 10px #333;

-webkit-box-shadow: 0 1px 10px #333;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

width: 400px;

height: 300px;37

Page 38: Html5 Css3 Handbook

}

#photo div {

background-color: #333;

margin: 10px auto 0 auto;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

width: 380px;

height: 260px;

text-align: center;

}

#photo div h3 {

color: #fff;

font-size: 25px;

line-height: 25px;

padding: 115px 0 0 0;

}

div#main {

background: url(main_bkgd.png) repeat-y top right;

border: none;

}

#main #articles {

float: left;

margin-left: 40px;

width: 600px;

border: none;38

Page 39: Html5 Css3 Handbook

}

article {

border-bottom: 1px dotted #aaa;

padding: 15px 0;

}

article:last-child {

border-bottom: none;

}

aside {

float: right;

margin-top: 40px;

margin-right: 40px;

}

aside section {

background-color: #F5F5F5;

margin-bottom: 30px;

padding: 20px 40px 20px 20px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

aside h3 {

padding: 0 0 11px 0;

}

39

Page 40: Html5 Css3 Handbook

nav#categories ul li, nav#archives ul li {

list-style: none;

margin: 5px 0;

}

footer {

position: absolute;

left: 0;

width: 100%;

background-color: #333;

}

footer div {

margin: 0 auto;

padding: 40px 0 20px 40px;

width: 920px;

border: none;

}

footer div section {

color: #777;

float: left;

margin-right: 25px;

width: 230px;

border: none;

}

footer div section h3 {

color: #fff;40

Page 41: Html5 Css3 Handbook

}

nav#blogRoll ul li, nav#siteMap ul li {

margin-left: 15px;

}

footer #about {

margin-right: 60px;

width: 330px;

}

41

Page 42: Html5 Css3 Handbook