We started out the semester with a plain HTML5 template. But not all browsers understand HTML5 (or CSS3). There are old browser you really do not want to know about. Then there are a lot of good things that we could do underneath the hood, like automatically compressing files, etc.

Though it makes your development life a little more complicated, it automatically takes care of the many contingencies that make building a professional website much more difficult.

The HTML5 Boilerplate

We are using the HTML5 boilerplate 5, and I expect everyone to use it as the basis for the midterm. Watch the Video

The boilerplate is everything for everybody, from the novice to the professional, so it’s stacked.

Check out the HTML5 Boilerplate Showcase.

Get the Template

Click the DOWNLOAD button.

Features

• HTML5 ready. Use the new elements with confidence.
• Cross-browser compatible (Chrome, Opera, Safari, Firefox, Internet Explorer).
• 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 so that you can extend and customise the HTML5 boilerplate. This is a great learning resource for advanced students.

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.

Options

You are given a choice, to download the standard HTML5 Boilerplate, which is what we will do in class.

The other option is to get a custom build template.

If you decide on customizing it, get the Bootstrap version. Read all about it. Bootstrap has many goodies built in to make your site will look and work professionally.

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.

Technical Note

The HTML5 Boilerplate is shipped with a lot of things to make life better, but one thing trips the school server, and you need to take it out.

If you drag the entire folder over, you will include the invisible file “.htaccess”. The operating system hides it from you on your computer, but it will transfer that file, and that file contains the instruction Options -MultiViewsthat has to be removed.

If you do not take it out, you will see, when you go to the directory:

Locate the file in the folder using Fetch, edit it, and search for Options -MultiViews , delete it, and save the file.

That should fix the problem.