We started out the semester with a plain HTML5 template. It used to be that not all browsers would interpret HTML or CSS the same way, and there was a need for a boilerplate that normalized all the differences, but those days are gone. Google’s rendering engine Chromium split from Apple’s Webkit, and the only other rendering engine is Firefox’s Mozilla, and its future does not always look secure, which is unfortunate. Slim pickings compared to the way it used to be. Competition and diversity are good, but no one misses Explorer’s many exceptions.

Using a boilerplate will make your life a little more complicated, but it takes care of any contingencies that make building a professional website more challenging.

The HTML5 Boilerplate

The HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

We are using the most recent HTML5 boilerplate. I expect everyone to use it as the basis for the midterm and final. Head on over to the Support Documents

The boilerplate is everything for everybody, from the novice to the professional, so it’s stacked with goodies that you would not be able to incorporate on your own at the level you are at.

Features

• HTML5 ready. Use the new elements with confidence.
• Cross-browser compatible (Chrome, Safari, Firefox).
• Designed with progressive enhancement in mind.
• Includes [Normalize.css](http://necolas.github.com/normalize.css/) for CSS normalizations and common bug fixes.
• The latest [jQuery](http://jquery.com/) via CDN, with a local fallback.
• The latest [Modernizr](http://modernizr.com/) build for feature detection.
• Placeholder CSS Media Queries.
• Useful CSS helpers.
• Default print CSS, performance optimized.
• An optimized Google Analytics snippet.
• Apache server caching, compression, and other configuration defaults for Grade-A performance.
• Cross-domain Ajax and Flash.
• “Delete-key friendly.” Easy to strip out parts you don’t need.
• Extensive inline and accompanying documentation.

Documentation

Take a look at the table of contents. This documentation is bundled with the project, which makes it readily available for offline reading.

If You Want To Know More

There is comprehensive documentation. Learn more about HTML5, browser compatibility, javascript libraries and all the other goodies that make up this boilerplate.

Instructions in a Nutshell

Implementing the HTLM5 Boilerplate is easy. Transfer your CSS to the external CSS style sheet provided, and the HTML markup to the index.html file where indicated.

Where to put the CSS

Enter your CSS code on the external style sheet provided. It is already linked to the index.html page.

The CSS style sheet normalizes the browser in a more nuanced way than the browser reset. These have to come before your own user styles, which are entered in the middle of the document after these instructions:

/* ==========================================================
   Primary styles
   Author: 
   ============================================================ */

If you put your declarations in these commented-out instructions, your code will also be commented-out. I’ve seen that happen before, and the student came up to tell me that the template does not work. I’ve also seen students use the index.html page by itself. That also does not work. Keep the folder intact.

After the user styles there are a number of preset styles that can be called to perform a number of tasks. You want these to remain intact after your styles.

All you have to do is create your styles in this middle Primary Styles Author section. and ignore the rest of the style sheet if you do not understand what it does.

Where to put the HTML

Once again, ignore everything that you do not understand.

put the title of the page between the title tags:

<title></title>

Next enter a description of the page/site:

<meta name="description" content="">

Fill in the author:

<meta name="author" content="">

As long as you did not change this name of the style sheet, the default link should work.

<link rel="stylesheet" href="css/style.css">

Enter all of your HTML replacing the code below

Ignore everything else that you do not yet understand.

        
Hello world! This is HTML5 Boilerplate.

Google Analytics code is already in place. You already have an id if you signed up and followed the instructions . You need to replace “UA-XXXXX-X” with your account number. This way the page is tracked by google’s analytic software, and you can check up on who visits you, how long they stayed, which pages they navigated and more.

            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];

Turning a Single Page Into a Website

Work on the index file till you have made it just like your Photoshop comp / wireframe, with everything as you want it.

Include in this file a styled navigation with links to all of the files that you wish to target. Examples are about.html or bio.html, drawing.html, etc.

When you feel you have achieved this to the point of perfection, duplicate the index.html file and rename each copy to the appropriate page name that you specified in the navigation. This way the site is almost already build as soon as you finish the first page.

The Boilerplate is for Your Own Good

This is not much more complicated than before, as long as you can ignore some of the extra code.

Just know that your HTML5 and CSS3 will be more compatible with other browsers than if you did not use this template. That said, if anyone wants to learn this stuff, I recommend going through this boiler plate carefully, read the documentation, and follow all of the links, for you will learn a lot.

Adding Google Analytics and SEO

Follow the instructions in Google Analytics to get a google analytics account number. Place that number in the index.html file.

Building a standards compliant website with good content is best for search engine optimization. The problem many of you will face is that all your work is composed up of pictures. Search engines prefer words. Make sure that you describe your pictures will in accompanying text or use the alt tag to let the people who use search engines reach your pictures.