Scribd
Upload
90 views

Welcome To Webville: Getting To Know html5

Here are the changes made to the HTML code: 1. Updated the doctype to <!doctype html> 2. Removed the type attribute from the <meta> tag: <meta charset="utf-8"> 3. Removed the type attribute from the <link> tag: <link rel="stylesheet" href="lounge.css"> 4. Removed the type attribute from the <script> tag: <script src="lounge.js"></script> So in summary, the key things needed to update HTML to HTML5 are: 1. Update the doctype 2. Remove type attributes from <meta>, <link>, and <script> tags

Uploaded by

Lama Bud
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
90 views

Welcome To Webville: Getting To Know html5

Here are the changes made to the HTML code: 1. Updated the doctype to <!doctype html> 2. Removed the type attribute from the <meta> tag: <meta charset="utf-8"> 3. Removed the type attribute from the <link> tag: <link rel="stylesheet" href="lounge.css"> 4. Removed the type attribute from the <script> tag: <script src="lounge.js"></script> So in summary, the key things needed to update HTML to HTML5 are: 1. Update the doctype 2. Remove type attributes from <meta>, <link>, and <script> tags

Uploaded by

Lama Bud
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

1 getting to know html5

Welcome to Webville
Were going to Webville! Theres so much great HTML5 construction going on, wed be crazy to live anywhere else. Come on, follow us, and well point out all the new sights on the way.

HTML has been on a wild ride. Sure, HTML started


as a mere markup language, but more recently HTMLs put on some major muscle. Now weve got a language tuned for building true web applications with local storage, 2D drawing, offline support, sockets and threads, and more. The story of HTML wasnt always pretty, and its full of drama (well get to all that), but in this chapter, were first going to go on a quick joyride through Webville to get sense for everything that goes into HTML5. Come on, hop in, were headed to Webville, and were going to start by going from zero to HTML5 in 3.8 pages (flat).

Heads up: XHTML received a Dear John letter in 2009 and well be visiting XHTML later in the Where are they now segment.

this is a new chapter

Upgrade to HTML5 TODAY! Why wait? Use my and do it in only THREE EASY STEPS
grungy old HTML page Step right up! For a limited time well take that it to HTML5. of yours and in JUST THREE EASY STEPS upgrade Could it really be that easy? dy prepared for you. You betcha; in fact weve got a demonstration alrea HTML; Check out this tired, worn out, seen-better-days your very eyes: were going to turn it into HTML5 right before
HTML 4.01//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD strict.dtd"> "http://www.w3.org/TR/html4/

HTML5-o-Matic

<html> <head> ent="text/html; charset=UTF-8"> <meta http-equiv="content-type" cont <title>Head First Lounge</title> eet" href="lounge.css"> <link type="text/css" rel="stylesh "lounge.js"></script> <script type="text/javascript" src= </head> <body> h1> <h1>Welcome to Head First Lounge</ <p> > <img src="drinks.gif" alt="Drinks"

</p> <p> <a href="elixirs.html">elixirs</a>, Join us any evening for refreshing two of Tap Tap Revolution. conversation and maybe a game or ; BYOWS (Bring Your Own Web Server). Wireless access is always provided </p> </body> </html>

HTML 4.01 from This is all just normal e, which you might Loung the Head First ad First HTML (and remember from He , you dont need to). if not, dont worry

Look how easy it is to write HTML5 on), not h is written in HTML 4.01 (the previous versi Get your feet wet by reviewing this HTML, whic part does. Feel free to sh your memory of what each HTML5. Carefully look at each line and refre few pages. at how to transition this to HTML5 over the next make notes right on the page. Well look

getting to know HTML5

After taking a careful look at the HTML on the page 2, can you see any markup that might change with HTML5? Or that youd want to change? Well point out one for you: the doctype definition:

e for html, his is the doctyp place! T t were in the righ

This just means this standard is publicly available.

This part says were using HTML version 4.01 and that this markup is written in ENglish.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This points to a file that identifies this standard.


Remember, the doctype definition belongs at the top of your HTML file and tells the browser the type of your document, in this case, HTML 4.01. By using a doctype the browser is able to be more precise in the way it interprets and renders your pages. Using a doctype is highly recommended. So, using your deductive powers, what do you think the doctype definition for HTML5 will look like? Write it here (you can refer back to your answer when we cover this in a bit):

Your answer goes

here.

you are here 4

update your html

Introducing the

HTML5-o-Matic, update your HTML now!

ST EP 1

Step 1 is going to amaze you: follow along, were going to start at the top of the Head First Lounge HTML and update the doctype to give it that new HTML5 shine. Heres the old HTML 4.01 version of the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Now you might have guessed that were going to replace every mention of 4 with 5 in the doctype, right? Oh, no. Heres the amazing part: the new doctype for HTML5 is simply:
<!doctype html>

No more Googling to remember what the doctype looks like, or copying and pasting from another file, this doctype is so simple you can just remember it. But, wait, theres more... Not only is this the doctype for HTML5, its the doctype for every future version of HTML. In other words, its never going to change again. Not only that, it will work in your older browsers too.

Apologies to t the crew tha got the 4.01 o doctype tattoit. to remember

ve andards guys ha W3C HTML Stally mean it this time. The re promised us they
If youre a fan of the Extreme Makeovers or The Biggest Loser television shows, youre going to love Step 2. In this step we have the content meta tag... here, check out the before/after pictures:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8">

ST EP 2

BEFORE (HTM

L 4)

AFTER (HTML

5)

Yes, the new meta tag has lost a lot of weight is much simpler. When you specify the meta tag in HTML5, just supply the tag along with a character encoding. Believe it or not, all browsers (old and new) already understand this meta description, so you can use it on any page and it just works.
4
Chapter 1

getting to know HTML5

ST EP 3

And now for Step 3, the step that brings it all home. Here were also going to focus on the <head> element and upgrade the link tag. Heres what we have now: a link of type text/css that points to a stylesheet:
<link type="text/css" rel="stylesheet" href="lounge.css">

To upgrade this for HTML5, we just need to remove the type attribute. Why? Because CSS has been declared the standard, and default, style for HTML5. So, after we remove the type attribute, the new link looks like this:
<link rel="stylesheet" href="lounge.css">

Old skool

HTML5

Bonus

And, because you acted fast, weve got a special bonus for you. Were going to make your life even easier by simplifying the script tag. With HTML5, JavaScript is now the standard and default scripting language, so you can remove the type attribute from your script tags too. Heres what the new script tag looks like without the type attribute: Dont worry if you dont know
<script src="lounge.js"></script>

a lot about the script tag yet, well get there...

Or if you have some inline code, you can just write your script like this:
<script> var youRock = true; </script>

ipt All your JavaScr goes here. Well talk more about JavaScript in a bit.

IE RTIF CE

TML5

00 %

Congratulations, youre now certified to upgrade any HTML to HTML5 !

As a trained HTML5-o-Matic user, youve got the tools you need to take any valid HTML page and to update it to HTML5. Now its time to put your certification into practice!

you are here 4

beyond markup

Wait a sec, all this fuss about HTML5 and this is all I needed to do? What is the rest of this book about?

Okay, okay, you got us. So far, weve been talking about updating your older HTML pages so that theyre ready to take advantage of everything HTML5 has to offer. And as you can see, if youre familiar with HTML 4.01, then youre in great shape because HTML5 is a superset of HTML 4.01 (meaning practically everything in it is still supported in HTML5) and all you need to do is know how to specify your doctype and the rest of the tags in the <head> element to get started with HTML5. But, youre right, we were being silly, of course there is more to HTML5 than just updating a few elements. In fact, what everyone is excited about is the ability to build rich, interactive pages (or even sophisticated web applications), and to support that HTML5 provides a whole family of technologies that works hand in hand with the HTML5 markup language. But hang on; before we get there weve got just a bit more work to do to make sure were ready with our markup.

Chapter 1

getting to know HTML5

Youre closer to HTML5 markup than you think!


Heres some old skool HTML that needs updating. Work through the HTML5-o-Matic process and update this HTML to HTML5. Go ahead and scribble in the book, scratch out the existing markup code, and add any new markup code you need to. Weve helped a little by highlighting the areas that need to change. When youre done, type it in (or grab the exercise files and make your changes if you prefer), load this in your browser, sit back and enjoy your first HTML5. Oh, and youll find our answers on the next page.

To download all the code and sample files for this book, please visit http://wickedlysmart.com/hfhtml5.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" <html> "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Head First Lounge</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="lounge.css"> </head> <body> <p> <script type="text/javascript" src="lounge.js"></script>

<h1>Welcome to Head First Lounge</h1> <img src="drinks.gif" alt="Drinks">

</p> <p>

Join us any evening for refreshing <a href="elixirs.html">elixirs</a>, conversation and maybe a game or two of Tap Tap Revolution. Wireless access is always provided; BYOWS (Bring Your Own Web Server).

</html>

</body>

</p>

you are here 4

exercise solution

Youre closer to HTML5 markup than you think!


Heres some old skool HTML that needs updating. Work through the HTML5-o-Matic process and update this HTML to HTML5. Go ahead and scribble in the book, scratch out the existing markup code, and add any new markup code you need to. Weve helped a little by highlighting the areas that need to change. Heres our solution.

Heres the updated code:

<!doctype html>

The doctype...

<html> <head> <title>Head First Lounge</title>

Here are the four lines we changed to make our Head First Lounge web page officially HTML5.

... the meta tag... <meta charset=utf-8"> ... the link tag... <link rel=stylesheet" href=lounge.css"> <script src=lounge.js"></script> ... and the script tag.
</head> <body> <h1>Welcome to Head First Lounge</h1> <p> <img src="drinks.gif" alt="Drinks"> </p> <p> Join us any evening for refreshing <a href="elixirs.html">elixirs</a>, conversation and maybe a game or two of Tap Tap Revolution. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> </body> </html>

Dont believe us? Try http://validator.w3.org/ and youll see - it validates as HTML5. For real!

Chapter 1

getting to know HTML5

Q: A:

How does this work on the old browsers? Like the new doctype, meta, and so on... somehow the older browsers work with this new syntax? Yes, through a bit of cleverness and luck. Take the type attributes on the link and script tags; now, it makes sense to get rid of this attribute with HTML5 because CSS and JavaScript are now the standards (and certainly are the default technologies for style and scripting). But as it turns out, the browsers already assumed the defaults of CSS and JavaScript. So the stars aligned and the new markup standard just happens to have been supported in the browser for years. The same is true of the doctype and the meta tag.

A: Q: A:

True, especially until HTML5 is 100 percent supported. Well cover both of these points in the chapter and throughout the book. Why does this even matter? I just typed a page in without a doctype and meta tag and it worked just fine. Why do I need to worry if this stuff is totally correct?

A:

What about the new doctype, it seems too simple now; it doesnt even have a version or DTD. Yes, it does seem a little magical that after years of using complex doctypes we can now just simplify it to were using HTML. Heres what happened: HTML used to be based on a standard called SGML, and that standard required both the complex form of the doctype and the DTD. The new standard has moved away from SGML as a way to simplify HTML language and make it more flexible. So, we dont need the complex form anymore. Further, as we said above, there is some luck here in that almost all browsers just look for HTML in the doctype to ensure they are parsing an HTML document. Were you joking about it never changing again? I thought the versioning was really important for browsers. Why not use <!doctype html5>? Its not like there isnt going to be an HTML6 too. Right?

Q:

Q: A:

Yes, browsers are great at overlooking small errors in HTML files. But by including the correct doctype and meta tags, youll make sure browsers know exactly what you want, rather than having to guess. Plus, for people using older browsers, the new doctype means theyll use standards mode, which is what you want. Remember, standards mode is a mode where the browser assumes youre writing HTML that conforms to a standard, so it uses those rules to interpret your page. If you dont specify a doctype, some browsers may go into quirks mode and assume your web page is written for older browsers, when the standard wasnt quite up to snuff, and may interpret your page incorrectly (or assume its just written incorrectly). Whatever happened to XHTML? It seems like a few years ago that was the future. Yeah it was. Then flexibility won out over strict syntax, and in the process XHTML (XHTML 2, to be precise) died and HTML5 was born to be more accepting of the way people write web pages (and the way browsers render them). That said, dont worry, because knowing about XHTML is only going to make you a stronger author of HTML5 content (and youre going to appreciate HTML5 a whole lot more). And by the way, if you really love XML, theres still a way to write your HTML5 in strict form. More on that later... What is UTF-8?

Q:

The use of the doctype evolved with browser makers using the doctype to tell their browsers to render things in their own standards mode. Now that we have much more of a true standard, the HTML5 doctype tells any browser that this document is standard HTML, be that version 5, 6 or whatever. Well, I assume different browsers are going to have different capabilities at any one time. How do I handle that?

A:

Q: A:

Q:

UTF-8 is a character coding that has support for many alphabets, including non-western ones. Youve probably seen other character sets used in the past, but UTF-8 is being promoted as the new standard. And its way shorter and easier to remember than previous character encodings.

you are here 4

what you should know

We dont expect you to know HTML5, yet. If youve never had exposure to HTML5 before, thats okay, but you should have worked with HTML, and there are some basics you should know about like elements, tags, attributes, nesting, the difference between semantic markup and adding style, and so on. If you arent familiar with all these, were going to make a small suggestion (and a shameless plug): theres another book that proceeds this one, Head First HTML with CSS & XHTML, and you should read it. And if youre somewhat familar with markup languages, you might want to skim it or use it as a reference while reading this book.

Weve also put a small guide to HTML5 markup & CSS3 in the appendix. If you just want a quick overview of the new additions, have a quick read over them at the end of the book.

10

Chapter 1

You might also like