The first one: What is

HTML5?

The second one:

How can I start using it?

Very, very important questions. We're going to get through them

in the next half an hour.

My name is Jim.

I live in Washington D.C., and I'm a Web developer.

Today's big ideas...

Number one:

HTML5 is actually a catchphrase for bunch of new things. It's not just

one thing; it's a bunch of things. We're going to cover what those things are.

Big Idea #2:

HTML5 is flexible. It's actually more flexible than what came before it.

We're going to talk about that and why that's the case.

Number three:

HTML5 has new tags that you can use in your Web pages.

And Big Idea #4: these new tags work in old

browsers.

So you can use HTML5 today.

Well, you can use some of it today. Some of it you can't. Some of it only works in

certain browsers.

This is a way of the Internet and we have come to accept this. But there's a lot of

stuff that you can do today. By the end of the session if you don't know it already

you're gonna know what that stuff is.

Let's begin.

Big Idea #1: HTML5 is actually a catchphrase for a bunch of new things.

It's a catchphrase for new HTML tags.

Things that weren't available to you before...new tags are now

available to you.

New shiny CSS properties including things like drop shadows, opacity,

animations, transitions. We're going to talk about those a little bit.

And new Javascript...all kinds of things... a lot of things actually oriented

towards mobile devices.

We'll talk about those a little bit too. All these things HTML, CSS and Javascript

are collectively called HTML5.

There's a bunch of stuff that's not HTML, but it's still kinda called this because

it gained some momentum...

this catchphrase HTML5 for the new shiny.

And so, let's talk about what some of those things are. First, let's talk

about actual real HTML.

The Doctype...

you know the Doctype. You've seen something like this at the top of your

web pages. A big complex set of statements

that

describe

what specific flavor of HTML the document is.

Well, HTML5 does away with the specific flavor and says

just this.

The Doctype is just HTML. It's not HTML5.

It's not HTML4. It's not HTML6. It's just standard HTML.

Unbelievably, this Doctype, as simple as it is,

works all the way back to IE6. It works in old browsers because all it's telling

browsers is this is standard HTML.

This is a sea change (meaning a big change) from what came before,

in which the Doctype specifically said "no this is HTML4" and "this

over here is HTML4.01" and "this one's xHTML1".

This is different.

A new thing in HTML5 is

taking tags...tags like this. We all have tags like this in our layouts.

Divs for headers, nav and footers. This might be how you've

assigned ID's to those particular things. Well, in HTML5

the folks who came up with it said

people need headers, navs and footers all the time so let's make tags for them.

Just make it easy

and make it semantically correct and easier for search engines. Make tags that

describe what the thing actually is.

There are a bunch of new tags. Here are some of them. I'm gonna show you even more

before this half hour is up.

Another new thing in HTML - better

forms. Here's an example. The input tag is where you type in stuff or you deliver

input in a form.

The most common one is the input with a type parameter of text.

This on an Android phone, like the screenshot we're seeing right here, just

a little place where you can put in some text and the Android phone pops up a little

keyboard and you type in your search term or whatever.

Well, HTML5 introduces a bunch of new types

of parameters that you can put in. You can have a type that's specifically for

searching, one for email, one for websites, for URLs, one for telephones,

ranges which is a number from one to a hundred, say.

And if you take this example like an input type of telephone,

it's still a box where you type in information, but the Android keyboard changed.

Android is smart enough to say, "it's a type of telephone...they don't care about

letters, they just need numbers." Now,

if you use the input type tel

in an old browser, you're gonna get the standard input box, no problem at all,

it's backwards compatible.

But new browsers, like this one, that understand this type of telephone

will work better.

More greatness in HTML5 -

Form Validation. Things that can happen without having to resort to Javascript,

though Javascript and server-side validation is always a good idea.

Microdata -

describing in more detail elements on your page. Great for

search engines, great for accessibility.

Native audio and video without Flash - this is probably one of the most

heralded new things in HTML5.

It's the whole thing around the iPhone and the iPad not using

Flash but still being able to look at YouTube videos,

and being able to put Vector graphics on your web page; being able to take an Illustrator

file or Vector file

and put it on your web page in a way that looks good at any size and on any

display.

That's a bunch of HTML stuff that's part of HTML5, but that's not all. We got

new shiny CSS stuff that's part of this thing known collectively

as HTML5.

Here's some of the new shiny:

Opacity -

you can take two divs

and give them a background color that is this blue, like what's described here, but give

it an opacity -

this RGBA designation -

red, green, blue and alpha.

The alpha is the last number - 0.8 and that's 80 percent

opacity. Just like in Photoshop taking a layer to 80 percent of opacity.

You can do gradients straight in CSS.

Here's an example of one. You could do linear and radial gradients. You can do

bunches of gradients stacked on top of each other.

You can do rounded corners.

Take a div, give it a nice rounded corner without having to resort to background

images

or divs within divs.

The box shadow - you can take a div and put a drop shadow behind that div and control the

elements of that shadow.

You can take the same div

and instead of the shadow being dark, you can have the shadow be light and create a

glow effect.

You can put shadow not just on boxes but on text.

You can transform

elements.

For instance, this one is rotated 30 degrees.

This one is skewed 30 degrees. You can put those together.

And you can also create 3-D transforms, in which things can look like

they are moving in space.

And you've got animations.

CSS animations allow moving from from one

position or one CSS state to another CSS state.

Lots and lots of great CSS stuff that's now available to you

including web fonts,

having multiple columns within a div, multiple backgrounds, images in the

borders, transitions, transformations in 3-D,

new selectors,

changing how the box model works,

and creating outlines in addition to borders. That's just some of the stuff

that's new in CSS. There's new and shiny Javascript as well.

There's drag and drop. It's a fantastic thing. You can actually see this in gmail

today.

If you go into your gmail - if you have gmail, of course - you can

drag a file from your desktop directly into gmail

and it'll upload it to the website. That's all happening through Javascript, and that's

Javascript that's now available, and it wasn't available before.

That's part of this collective thing called HTML5.

Canvas - it's kind of like a competitor to Flash.

It's the ability to draw graphics on the screen and have them animate and be interactive.

This is sort of a silly example.

More great stuff, you've got Geolocation - the ability for Javascript to

understand where the device is if the device supports it.

For instance, a mobile phone. Offline browsing, also great for mobile phones

and a way for a website to be able to be saved

so you can browse it even when you're not directly connected the internet.

Local storage, which is like cookies on crack.

You can store megabytes of data instead of just a couple of kilobytes

and you can access it like a database.

All of that stuff

is part of this thing collectively known as HTML5,

even though a bunch of it has absolutely nothing to do with

regular HTML.

That was Big Idea #1, that HTML5 is actually a catchphrase for a bunch of

new things.

Okay, wait, wait, hang on a second,

I wasn't taking notes. How do I know what this thing was? And what about

that...

web fonts? And what about the canvas? How'd I make the unicorn that does the

pooping rainbow?

Well the answer is

read the books.

As part of this program, you have books that are available to you for

free for a month including these two beauties

by the folks at "A Book Apart".

These two books, if you have not read them,

are short and sweet. They're well-written. They're technically precise...very,

very good introductions. There are lots of others, too. I'm not saying these are the

only books. There are lots and lots of books about HTML5

and its various things.

Another good website I'm going to recommend to you... I'm just gonna jump in and recommend

this to you...

there's one called caniuse.com. Let's you know what you can use in particular

browsers...a fantastic reference.

Let's talk a little bit more about the HTML part of HTML5. The rest of this

presentation is not going to be about CSS or Javascript, but just about HTML.

Big Idea #2 - HTML5, the actual HTML part, is more flexible

than what came before it, more flexible than HTML4.

This is a sea change (meaning a big change). Usually things are less flexible as you move on

in versions. This is actually the opposite. Let me give you some examples here.

First the example that we've already seen.

The new Doctype is extremely simple

and will work in HTML6, if there ever is such a thing, and 7 and

8.

This Doctype is the new Doctype to stay.

Let me give you another example.

Take this picture of Justin Bieber, please.

The syntax here that you're seeing for this IMG tag is xHTML syntax.

The reason I know this is because

it's a self closing tag but it has

this slash here at the end.

That's xHTML. If you don't have the slash, this guy is no good.

This tag in HTML - no good! Might still work...you might still be able to get away with it.

But this is HTML,

that's xHTML.

Well, here's the deal. In HTML5, this tag is a-ok, no problem.

So is this tag.

Either one is completely fine. It makes no difference whether you have that

slash

or do not have that slash.

What's more,

this tag is okay, too. You don't even have to have the quotation marks.

Not only can you get away with it, but

it's actually valid HTML5.

It won't even complain. It is legal and okay.

So is this guy.

UPPERCASE, lowercase, it does not matter.

HTML5 don't care!

You can do anything you want in those examples and it's perfectly legal.

Let me show you another example.

Here's a long introduction to a webpage. We've all seen something like

this.

This is an example that's xHTML one transitional.

And you've got a long Doctype here.

You've got the xML name space and the HTML tag.

You've got some meta tags on the script tag down here.