5 Days of HTML5 (Day 1: Getting Started in One Day – Part 1)

Welcome! It’s Day 1 of our 5 day tutorial, so we’ll start at the beginning. I’ve already covered what HTML5 is and why it’s awesome, but what do we need to start coding websites in the new HTML5 standard?


The industry standard software is Adobe Dreamweaver, with the most recent version being CS5.5; an intermediary upgrade from CS5. If you’ve got anything lower than CS5, you won’t be in support of the HTML5 and CSS3 standards. CS5 supports HTML5/CSS3 but was released in the early stages of the standards development, so I recommend trying to grab a copy of CS5.5 for maximum support. Adobe offer free full 30 day trials of their software from their website. It might be handy to grab a copy of Photoshop CS5.5 or GIMP whilst you’re at it, we’ll be using a graphics editing program to make logos and various stylings for the site.

Open up Dreamweaver and on the main menu, in the “create new” column, click on “HTML”. Hit File > Save As and create a folder for our project where we can save everything. Let’s say we call this folder “My HTML5 Project”. You’ll also want to create folders named “css” and “images” within this your My HTML5 Project folder to get started.

We should now have a folder looking like this:

My HTML5 Project
>css
>images

Switch yourself to code view, and grab a piece of paper. We’re going to write on it the rule of HTML5 and good website design. First rule; real men code in code view.

Divs, Divs Everywhere.

If you’ve coded a website before, you’ll be familiar with divs, a div is a ‘division’ in a HTML document. We used to use them for chopping up our website into managable chunks representing the different sections of a website. For example we’d have <div id=”header”></div> in which we’d put our header of the website, and style by identifying the ID parameter “header” in our CSS.

HTML5 gets rid of this. We can still use divs, but we’ve got some new tags that are there for certain jobs. Some tags you should familiarise yourself with:

<header>
<nav>
<footer>
<article>
<section>

There are more, but these are the ones you’ll be seeing the most of. We even have headers and footers for tables now in HTML5. We can see in the picture below how the new tags come into effect when structuring our site.

So todays goal; We’re going to create a basic HTML5 and CSS3 template for our new website, put in some backups for dealing with browsers that don’t support HTML5, and then we’re going to screen our templates with the W3C validator tool and make sure it passes.

Go back to your blank document, by default, Dreamweaver will fill in your Doctype info. Delete it, we’ll start from a totally blank page.

First thing we need to do is tell the world that this is a HTML5 document and should be treated as such. For this we declare a ‘doctype’ or Document Type. We used to have to type a big long string that noone could ever remember. Now we just simply put the following at the first line of the page;

<!DOCTYPE html>
<html lang=”en”>

Seriously. Its THAT easy. HTML pages usually consist of two main sections usually divided into subsections. These main sections are <head> and <body>. As you can imagine, the head is the start of the document, usually where we set everything up to be used later, the body being the main content of a page. We want to now open up the head section of the page and a title to our page, this is what reads at the top of your browser and is defined with the <title> tag.

<head>
<title>TITLE HERE</title>

<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>

Now we haven’t actually created a new CSS3 document yet. So go ahead and create a blank one from File > New, and save it to our css folder. We’ll put in a couple of global resets as good practice to clean everything up…

@charset “UTF-8”;
/* CSS Document */

*  {
    margin: 0 0;
    padding: 0 0;
}

Awesome. So we’ve declared our document, linked in an external stylesheet, and now we can code the main body of the site.

<body>
<header>
<nav>
</nav>
</header>

<section id=”homepage”>
<article id=”headlineblock”>
</article>

<article id=”newsblock”>
</article>

<article id=”newsblock”>
</article>

<aside id=”twitterfeed”>
</aside>
</section>

<footer>
</footer>
</body>

</html>

We’ve added some of the new HTML5 tags to denote the structure of the page, and we can use the id tags to give elements names which we can then call up in our CSS document, allowing us to style multiple instances of the same tags differently.

Lets put it all together and run it through the W3C HTML5 Validator.


Ok, this isn’t bad at all, we can see the first error is that we’re missing some metadata to help explain what the page is. So after opening our <head> tag, we can add in the following to help identify a character set, and give a bit more information about what this page is.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <meta name=”description” content=”DESCRIPTION GOES HERE” />
    <meta name=”keywords” content=”KEYWORDS GO HERE” />

Sidenote: After battling with the W3C validator for a long time, I realised it doesn’t like you posting in code thats not been copied directly from Dreamweaver. Somewhat tempermental. Regardless, my Dreamweaver code passed validation with two warnings, these being the standard ‘this is an experimental validator’ warnings and nothing to do with my site.

So we’ve got a valid HTML5 template. What can we do to make sure those without HTML5 compatible browsers can still understand our site? Well Google Code to the rescue…

HTML5 Shiv is a Javascript formatting tool designed to help IE browsers < v9 understand HTML5. Simply drop a couple of lines in at the end of your <head> tag, and you’re backwards compatible for IE.

I think we’ll call it a day there today, we’ve got a HTML5 basic template with a Javascript failsafe for older versions of IE, and we’ve got a CSS file ready to go. Homework today, get out a piece of paper and design your site. Chop it up into the new HTML5 tags. Define your <nav> bar, wether its going to be nested in a <header> or not, and all <section>, <article> and <aside> segments.

Tomorrow we’ll look at organizing our layout and filling it in. Heres my code so far…

<!DOCTYPE html>
<html lang=”en”>
<head>
    <!–METADATA–>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <meta name=”description” content=”DESCRIPTION GOES HERE” />
    <meta name=”keywords” content=”KEYWORDS GO HERE” />

<title>Spencer Lloyd Dixon – Music, Blog, Design, Development</title>

    <link rel=”stylesheet” type=”text/css” href=”css/style.css” />

    <!–FIX IE SUPPORT FOR HTML5–>
    <!–[if IE]>
    <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
    <![endif]–>  
</head>

<body>
    <header>
        <nav>
          </nav>
    </header>

    <section id=”homepage”>
          <article id=”firstblock”>
          </article>

        <article id=”newblock”>
          </article>

        <article id=”newsblock”>
          </article>

          <aside id=”twitterfeed”>
          </aside>
    </section>

    <footer>
    </footer>
</body>

</html>

Advertisements

4 responses to “5 Days of HTML5 (Day 1: Getting Started in One Day – Part 1)

  1. how do you create the CSS3 document? ..probably a rookie question!

  2. ahh..

  3. we’re getting there..how do you get to the validator?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s