Webcast: Transform HTML Into HTML5

By | December 12, 2019


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 are encoded in this particular format, UTF 8. That’s what’s going on with
that meta tag right there. Okay, let’s look at an example together. The example I’m showing you is this HTML
page that I have created… Okay sorry not The Pisco Sour, we’ll have that one for
later. This HTML page I’m loading up here in
jsbin.com. It’s like JS Fiddle. It’s sort of an equivalent of that, but it’s got a
nice thing in which I can edit HTML here and I can see the output directly
here. This is a page that I jigged up for you. It’s an homage to
“Arrested Development” – for those of you who don’t get the joke. And these over here – this
HTML here, these divs are what you’re seeing over here. The JS Bin website – what it does is if
I edit text right here, like I had some exclamation points, you see it immediately here on the right-hand side.
So I’m just giving you the lay of the land of what you’re seeing here in this
particular screenshot. So, this document that we’re looking at
right here has a Doctype that’s xHTML1 transitional. It’s got all the important
things for an xHTML document. In order to prove that this
is a valid document, I’m gonna take all of this, I’m gonna copy it, and I’m gonna paste it
into the W3C markup validation service. So we’re gonna see if this example that I’ve just
given you is valid xHTML. And it is. This guy is successfully checked as xHTML 1.0 transitional. So this guy is good to go. We’re gonna transform this into HTML5.
We’re gonna do it together. Watch. You only have to do two things. First thing you have to do is take this
Doctype – this big, long sucker – lop off all the stuff on the end. Doctype HTML. Boom! Second thing I’ve got to do in order to make it validate –
I don’t “technically” have to do it but it won’t validate without it – is change this meta tag here with the charset
of UTF 8. It gives a slightly different syntax than what
came before it but it looks like that. That’s it! This is now valid HTML5. All this other stuff like the xML
namespace that stuff which is hold-overs from
xHTML – totally fine! HTML5 doesn’t mind that it’s there.
It doesn’t hurt anything. It’s completely legal. Not necessary, but it’s completely legal. Let me select this. Gonna copy it
and we’re gonna come back over and paste it into W3C validator and revalidate this and we’re gonna see what
happens. Hey, check it out! It is valid HTML5
now. We’re good to go. That’s all it took to transform this document from
xHTML to HTML5. Hang on one second. Kevin’s
got a question for me. Yes Kevin? Kevin: I’ve got 2 quick questions on HTML5 syntax. The first is the syntax is a lot more
flexible in HTML5. Is that backwards compatible? Jim: It is backwards compatible. That’s a
fantastic question! The reason it’s backwards compatible is
that this Doctype tells all browsers including older browsers to operate in standards
mode. So that means that the stuff that comes
after it will just be rendered as standard HTML. Now if you’ve got a kludgy HTML that doesn’t follow one of the standards, like it’s okay if it’s got quotation marks or doesn’t
have quotation marks or it’s UPPERCASE or lowercase. But if you do something crazy that you might have been
able to get way with before because quirks mode in IE, for instance, let
you get away with it but you might not be able to. But otherwise the syntax is completely
valid. Kevin, you said you had another question. Was
there something else? Kevin: Is there any instance where you
absolutely need a forward slash and caret or a certain syntax
in HTML5? Jim: That’s also a fantastic question! There are
certain instances in which the syntax is important like in any HTML, but the specific
example of the forward slash, the slash and the caret or the right corner bracket
here. Completely fine either way,
like I said. In terms of other things, there are
some syntactical things that are even more flexible than what came before. For instance, if you wanted to link this headline
here, ‘The Bob Loblaw Law Blog’, to a website – a normal way to do it would be
something like this. I don’t know if this is a
real URL or not. And then you close that A tag there. That would create a link for this
headline. Now, if you wanted to also link the
second headline, in order to do that properly in original HTML you’d have to copy and paste that link the
same way. Well, in HTML5 and in older browsers
using this syntax it’s completely legit to put the A tag around both of the
headlines. This is an A tag around two block
level elements. You could get away with this before, but
it wasn’t legal and now it’s legal. So you can not only get away with
it but it’s legal and it works in old browsers. That’s a great question! If you’ve got more
questions and follow up questions, we’ll save them for the Q&A and we’ll be able to talk about them
in the forum afterwards. Let’s keep going with the presentation, please. HTML5 is flexible. Let’s go to Big Idea #3. We’re gonna
move fast now. HTML5 has new tags. Here are all the new tags in HTML5. You can use any of these. However, not all these tags are useful for most
people most of the time. These are the tags that are useful for most people most of the time. The tags that mark out specific elements of
a page that have semantic meaning. Let me show you an example. Let’s take this
webpage that’s got sort of a standard layout that
we’re accustomed to – a header, a nav bar, a body, a sidebar area and a footer. If you were laying those out in HTML today
those would be divs. You’d probably want to apply IDs or
classes to those divs. But the IDs or classes that you apply
are completely up to you as the writer of the document. So, I might call this header and you might call
it headline. I might call it global nav and you might call it main nav.
Tomato (toe-may-toe) – tomato (toe-mah-toe). It’s entirely up to you what that is. Well, the folks who
created HTML5 said no let’s standardize these so it’s easier for
engines and easier for inner-operability. So they created tags that kind of
relate to these things. We’ve got the header tag; the nav tag for navigation – you can have more
than one, that’s completely fine; section for a generalized kind of
section on a page; an article for a self-contained piece of content; a side, which is the nerdy way of saying
sidebar; and a footer. So, let’s put this into practice. Let’s go back to our ‘Arrested Development’
example, here. We’ve got a box here that’s our div ID of container, and inside the container we’ve got a
headline. The headline has this nice, little double rule below it and it’s centered, and then you’ve got the body down below. Let’s convert these regular tags into
HTML5 friendly tags. We’ll start with this first one – div ID of container. We’re going to change this to an article tag
because the stuff that’s inside this tag comprises a self-contained piece of silly
content. I’ve got an article tag. I took the closing div tag
and replaced it with a closing article tag. Uh oh! My CSS went away. Oh dear!
What am I gonna do? Well, it’s just as simple as coming up here and
taking the selector that was once applying to that
container and changing it our new tag. It’s a tag – the article tag – so it doesn’t take a
pound sign or a dot. It’s just a tag. And BOOM our CSS is back! We’re going to do the same thing here. This section here with this H1 and this
H2 are combined to make sort of
a headline for us and that’s what the div is called now. We’re gonna
change that to the header tag and give it a closing header tag. Welp…
our CSS went away. It’s easy to fix. Come back up here to
the selector that it once was and change it to our new selector. We’ve gotta change in a couple of different
places because that’s what we’ve done with our CSS. And BOOM! – we have our layout back
exactly the way it was. So using these new tags, especially in modern browsers,
is just as simple as using them. Now, just like any tag, we can give this article a class of ‘silly’. Classes, IDs – they all work the exact same
way that they did before, it’s just a new set of tags that you can use. HTML5 has these new tags that are
available to you to use. Okay now, your next question, if you’re
smart and you’re like me, is gonna be, ‘Alright, what about old browsers? I work in a place where we care about old
versions of old browsers. This stuff’s gotta work.’ Well the deal is these tags work in old browsers as long as you give them some help. Okay, so some browsers can have a really hard
time with new tags. They don’t understand. You have to do some fancy stuff to
let them recognize these new tags. Now I’m not gonna name names as to which
browsers are going to give us the hardest time, but what I am gonna say is
there’s a fix. What the fix is is Javascript. First, let me show you the problem, then I’ll
show you the answer. So, if I come back here to this example
where I’ve created an article tag and a header tag and it looks really nice. Here I’ve got the URL
for this. If I look at it in this modern browser in Chrome, it looks great, looks fantastic. Let’s look
at it in a not so modern browser. Let’s look at it in Windows IE6
using BrowserStack here. It’s a nice, little service that let’s you look in old
browsers. Okay, so here’s what that page looks like in IE6. We’ve got the text. The H1 and the H2, those guys work fine. We didn’t get the CSS. We lost our CSS. What’s going on here?
Well, did the CSS work in the first place? Yes, it
did, it did work in the first place but it’s not working anymore. The deal is that IE6 does not understand
the article and the header elements. It needs some Javascript added in there that helps
it understand. Now some nerds who are smarter than you
and me combined have put some Javascript together that
helps. There are two different versions of it.
There are actually a bunch of different ones. These are the most popular. The first is called
the HTML5 Shim, or sometimes it’s called the HTM5 Shiv
and they mean the same thing. I don’t know why somebody thinks a knife is the same
thing as a shim, but okay. The second one is called Modernizr. These are pieces of code that make
old browsers, especially our friends at IE, look, rather understand, new
HTML tags. Let’s see this in action. So, here I’ve got my HTML5 code
here. I’m going to add a Javascript here. This Javascript happens to be hosted
on the internet on a content delivery network. So over here in my other browser I’ve got the address for the HTML5
Shim. Let’s use that example. So, that piece of Javascript right here does absolutely nothing visual to the
page. It only makes it so that old browsers
understand these new tags. LEt’s save this and go look at it again in Internet
Explorer 6. Boom! It works. It works and I didn’t have to do a darn
thing. You just code correctly in HTML5. You
include this piece of Javascript, the HTML5 Shim or a similar piece of Javascript called Modernizr
and it just works. It’s pretty delightful actually. Okay let’s come back here. It just works. What Modernizr does.. okay you’ve got these two examples,
HTML5 Shim and Modernizr. HTML5 Shim makes HTML5 tags work. Modernizr
is a little bit more complex than that. If you go to the website, you can see
what it is. Both of these obviously are free. They’re just pieces of Javascript. They’re pretty small,
they don’t add too much download time and you can customize them. Lots, lots more
detail and examples when you go to these website. We’ll post these websites, by the way, on the forum boards after this is over
so you can get to these sites. And they just work. What Modernizr does on top of
this is that it adds classes to your HTML. It does it through Javascript. And what it does, is it lets you as an author of
CSS see what this particular browser can
do or cannot do. So, here is an example of the classes that are added
to the HTML tag in my modern Chrome browser on
OSX. What Modernizr adds is ‘not IE’.
It adds a class of ‘not IE’ because I’m not looking on Internet Explorer. Cool! It adds a class of JS because javascript is
available. And, it adds all of these other classes for
things that are available on this particular page in this particular
browser. Here’s the same example in IE6. Javascript’s available. It is IE, so that ‘not IE’ is not there.
But then there’s all this other stuff. It doesn’t have Canvas. It doesn’t have Canvas
text. It doesn’t have geo location. It doesn’t have RGBA, or
border radius, or box shadow or text shadow. IE6 does not offer any of
these things. And what Modernizr does is it adds classes to the HTML that say so. Why does that matter? Well, it doesn’t
make any visual difference at all. It does it all behind the scenes. But it
leaves it so that you in your CSS to write selectors that are appropriate for what the browser can do. So, you could say, “Hey, if the HTML tag has a
class of text shadow then you could do something. You could
apply that text shadow. If it doesn’t, if it’s regular HTML
then it’s got some fallback properties. Now tech shadow might not be the best
example. There are other ways to get around it, but you can use these to get
really detailed and specific CSS selectors and attributes for
different browsers to make everybody have a good experience. So, how do you get started with all of these new things, with HTML5,
with these new CSS properties, with Modernizr, with the HTML5 Shim with doing all this stuff? Well, this is a start, you’re paying attention, you’re
learning about this stuff. Like I say, read the books. These two
books…I wish I was getting paid by these guys. I like these books so much and I’m gonna push
them on you so hard because they’re really fabulous and they’re
really short – even better. That’s it for the session. Thank you very
much! I’m really delighted to have you and we hope to
see you next week.

9 thoughts on “Webcast: Transform HTML Into HTML5

  1. svknyc Post author

    Can you please make this video captioned for millions who need it? Thanks!

    Reply
  2. svknyc Post author

    "Bad" captions are not "good" enough. It's like telling you that "bad" audio is good enough. Please fix captions – either by uploading a clean transcript or by fixing the auto captions. Thanks!

    Reply
  3. svknyc Post author

    There are important features for good captions: proper grammar, punctuation, speaker identificaiton, sound description, etc. It is not something that auto captions can do.

    Reply
  4. svknyc Post author

    Just like voice intonation is important in speech, so is proper grammar and punctuation in captions.

    Reply
  5. Brave Little Soul Post author

    I missed the first part of this class and yesterday's webcast. So glad you're posting them. Thanks!!

    Reply
  6. svknyc Post author

    Hello – thanks for the message. It looks much better, but there are sentences that could be cut better. I wanted to add a link about best practices, but for some reasons YouTube would not allow me to add any URL links.

    Reply
  7. svknyc Post author

    Since YT won't allow me add a link, try to google the following keywords "dcmp org captioningkey text html" and pick the first link to go to the page about how to make the line divisions in captions to make it easier to read. But otherwise, captions are much better!

    Reply
  8. Jason Smith Post author

    I love you! I hope thats not to forward lol- THANKYOU!!!

    Reply
  9. dagreenstar Post author

    Good works here. I'd like to get started and was wondering where can I get those books mentioned in the video. any links?
    Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *