Create a Website with HTML5 - Lesson #5
Adding the Footer Division
In the last lesson we added our navigation device and main division with content, formatted it with a style sheet and previewed in a browser.
In this lesson we'll add our footer , with information and add the style settings.
The <footer> tag is another new tag added in HTML5. It's simply another division tag given a name for a specific purpose like the header tag.
Exercise #1
In Exercise #1 we'll add a footer to the page and add it's style settings to the style sheet.
Copy and paste the code shown below into mytemplate.html below the closing </div> tag for the main division.
<footer>
<address>© Copyright 2012 All Rights Reserved www.yourdomain.com</address>
</footer>
Save mytemplate.html
Copy and paste the code shown below into the style sheet below the last entry.
footer {
width: 100%;
background: #336699;
float: left;
margin: 0 0 .5% 0;
border-radius: 10px;
box-shadow: 5px 5px 10px #202020
}
address {
font-size : 16px;
text-align : center;
color: #efefef;
padding: 1% 0;
text-shadow: 1px 1px 0px #202020
}
Save mystyle.css
Preview mytemplate.html.
You should have a pretty good idea of what you should be looking at.
In the next exercise we'll use our finished web page as a template to create 3 new web pages which can be accessed from the navigation bar.
What's a Web Template?
A web template is a predesigned web page that can be used to create the pages of our website.
When creating your own template you should get the template page as complete as possible.
Try to plan the site and get as many of the future pages listed in the navigation device as you can.
In this example we have planned for three pages. (index.html, page2.html and page3.html )
Complete all information in the footer.
Get everything the way you want it and you are ready to use the template to create new web pages.
The Procedure
We will use mytemplate.html as a template to create the 3 pages of our website.
We will use the Save as filter of NotePad to save mytemplate.html as index.html, which the the default name given to the main or home page of any website..
We will use the Save as filter of NotePad to save index.html as page2.html, make a change to the heading tag on the page and save it again.
The we'll use the save as filter to save page2.html as page3.html, make a change to the heading tag and save it again.
When we finish we'll have a 3 page website.
Exercise #2
Before we start creating new pages, we'll dress up the navigation bar by adding a couple of lines to the style sheet.
Copy and paste the code shown below into mystyle.css below the last entry.
nav a {
color: #efefef;
text-decoration: none
}
nav a:hover {
text-decoration: underline
}
nav a:visited {
color: #99ccff;
}
Save mystyle.css.
Preview the web page in your browser.
Creating index.html
Click File on NotePad and use the Save as filter to save mytemplate.html as index.html.
Creating Page 2
Click File on NotePad and use the Save as filter to save index.html as page2.html.
Now find the h1 tag under the id="main" division:
<div id="main">
<h1>Create a Website with HTML</h1>
Change it to:
<div id="main">
<h1>This is Page #2</h1>
Save page2.html again.
Creating Page 3
Click File on NotePad and use the Save as filter to save page2.html as page3.html.
Now find the h1 tag under the id="main" division:
<div id="main">
<h1>This is Page #2</h1>
Change it to:
<div id="main">
<h1>This is Page #3</h1>
Save page3.html again.
Preview the 3 page website and use the links in the navigation bar to traverse the different pages.
You should have a web site that closely resembles this tutorial.
Resize the width of the browser window when you view the page and see if the images scale in size to fit the available space of the window.
If it does and everything looks neat and clean you're ready to go again.
Delete all your work and start again.
The more you see the HTML and CSS code, the more you will remember!
This time through concentrate on your copy and paste routines and identifying the proper position within the code for pasting your HTML code.
The main focus of this tutorial as you have discovered, is not really to learn HTML and CSS, but to become familiar with looking at code, copy and paste procedures and previewing changes in your browser.
When everything in this tutorial is second nature you'll be ready to tackle our more advanced tutorials that teach you to create columns, create multiple pages and link them together and learn the why and wherefores of how things work on a web page.
Then you'll be able to concentrate on actually learning HTML and CSS.
Proceed to the Overview and start again.
Ready to Advance
If you've worked your way through several times and are comfortable with looking at code and previewing web pages you can proceed to our more advanced tutorial on Creating Liquid Websites
Our Advanced tutorial will show you how to add multiple columns.
Free Liquid Templates
Free Liquid Templates If you think you learned enough from this tutorial to start creating a simple liquid website, you should visit our newest free web template collection.
Start in the Modifying Your Template section and if the information make sense, browse the template collection.
We're also building a free headers section that contains headers that are over 1900 pixels wide for those building websites on high resolution machines.