Placeholder Image

Subtitles section Play video

  • Today we're going to cover a couple of the big important things.

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

  • You've also have the type

  • because it's text Javascript and the language because it's Javascript.

  • The reason you've got to have these, for instance, is that there could be another scripting

  • language other than Javascript and so you need to tell the browser, "Hey, what

  • I'm about to show you isn't

  • VB script or action script. (I mean those are bad examples.) But it's specifically

  • Javascript." In HTML5, all this is vastly simpler.

  • They said, "You know what? If you've got a script tag, let's just assume it's

  • Javascript unless you tell us differently."

  • This is the simplified version

  • of the page that you just saw. Very, very simple Doctype.

  • You've got to have this meta tag here.

  • The style sheet tag

  • is simple and the script tag is much, much simpler.

  • These two tags are the tags that make this document HTML5.

  • The Doctype - you've got to have.

  • The meta tag - well you don't have to have this but it won't validate without it.

  • What this does is it says the characters that you're about to see