How to Create a Web Page with HTML5 and CSS

Creating Your Page Structure

Attention: If you skipped the first lesson, go back and start there.

In this exercise we'll add the elements that make up our web page structure. We will create a single column web page. It's just easier for learning.

We'll complete the web page structure by making additions to the style sheet.

New in HTML5

We use three new tags or elements added in HTML5: <header></header>, <nav></nav> and <footer></footer>

Second Exercise

Copy and Paste this code into the HTML Body section below the <body> tag:

<header id="heading">

</header> 
<nav>

</nav> 
<div class="lmenu"><a href="lmenu.html">Menu</a></div>
<main>

</main> 
<footer>

</footer>

Define the Structure

Now we need to add the code to our style sheet to define the settings for our head, main and footer divisions.

The code will be the same for each except for the color settings.

Copy and Paste this code into the style sheet below the closing bracket for the definition of the body section:


header{
	width:90%;
	float:left;
	padding: .5% 5%;
	background:linear-gradient(to bottom right , #99ccff, #ffffff);
	}

nav{
	width:90%;
	background-color:#6699cc;
	padding:0 0;
	float:left;
	margin:1% 5%;
	box-shadow: 2px 2px 4px #000000}

main {
 	width:90%;
	padding:0 5%;
	float:left}

footer {
	width:98%;
	float:left;
	padding: .5% 1%;
   background-color: #6699cc;
   margin: 0 0 1% 0;
   border: solid 1px #000000;
   box-shadow: 6px 6px 10px #000001;
}

Save myfirstpage.html.

Once you get everything added to the style sheet and saved, look at the HTML page with a browser or Preview function of HTML Editor. Refresh or reload if the page is already open.

The Result

Not much change. Just a blue line at the top and a link that reads menu.

Notice that the header element, division and footer element use the float: left property. This gets them to line up properly on the page.

Notice also that the width of the main element is reduced to 80% because of the 10% padding that was added to the right and left sides. That's all clear as mud right now but the more we do it the sooner the light will come on.

The little 'menu' link that seems to not belong is the beginning of our lmenu which we're going to learn to hide until we get ready to use it. Oh, the magic of CSS!

Test Your Comprehension

Take a quiz on the information presented so far.

Ready to Proceed

When you get everything working with the desired result in your browser, you are ready to proceed to the next exercise. Don't go on unless you have a basic understanding of the procedures presented so far. Go to Next Lesson

Want to speed things up with a free HTML editor? Get NoteTab Light for Windows users. I wish I could still use it on Linux.

Don't be afraid to delete all your work and start over from the beginning!

Think you're ready for the kit? Download Template #402 - 6 Page Kit

What's Ahead

In the next lesson we're going to add some text to our header element and learn to hide things with the Magic of CSS.

Top

General

9 Step Tutor