HTML5 CSS3 HANDBOOK

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.. By the time y

INTRODUCING HTML5 AND CSS3 3

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 widespread 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 cor-rectly in order to validate, they hoped to keep things standard across the web Some designers readily adopted this new system, whereas others stuck with HTML for the looser syntax and validation rules, and still others weren’t even aware of the change

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

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

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

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 25), 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

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

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:

The <header> Element

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

7

The <header> element is a good example of how HTML5 strives for more semantic markup See, 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.

brows-The <nav> Element

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

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:

<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

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

The <aside> Element

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

es-as in our example, es-as a sidebar menu:

<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.:

The <footer> Element

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

11

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” />

Appen-Browser Prefixes in CSS3

There’s a select handful of CSS3 properties that need special prefixes in order to display 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

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

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:

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):

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:

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

}

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 pend the path with #filename, where filename is the name of the file.

ap-15

Now, let’s talk a little bit about how this all works You’ll notice that the code contains links to 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

differ-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

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:

transition-property What CSS property will be

property: padding opacity;

-webkit-transition-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)

timing-function: ease-in;

-webkit-transition-16

Property Description Values Example

transition A shorthand property that can

be used for all three transition properties

[property] [duration] function] -webkit-transition: opacity 3s ease;

[timing-The transition-timing-function property is a little tough to grasp, but there’s a great animation at 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/

the-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:

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:

<body>

<header>

<nav>

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

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

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

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 and layouts, just go to File > New From Theme/Layout This opens the

Theme/Layout Chooser, which allows you to browse all our great themes and layouts, including five

written in HTML5 and CSS3

20

Fig 4.4 The Theme/Layout Chooser allows you to browse our great HTML5 themes and 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 headhoncho@coffeecup.com

21