How to Create a Web Page with HTML5 and CSS

Adding a Menu for Navigation

You should complete these lessons in order.

If you haven't completed the first 3 exercises, go back and start at the beginning.

If you are going to have more than one page in your website, your users will need an easy way to navigate the pages.

Your navigation device will be contained in your nav element.

We will use an unordered list to create it because it can be used to build a drop down menu later on in the last lesson.

Fourth Exercise

Copy and Paste the code shown in drk red inside the nav element of the body section as shown:

<nav>


<ul class="hnavbar">
<li><a href="index.html">Home</a></li>
<li><a href="#heading">Media Queries</a></li>
<li><a href="#heading">Drop Down Menu</a></li>
<li><a href="#heading">Contact</a></li>
</ul>

</nav>

Save myfirstpage.html

Our navigation device is constructed using an unordered list (<ul></ul>) of links made using anchor tags. It can be easily converted to a drop down menu by adding nested lists and some style settings to your CSS. For now we'll add only the first tier.

The Media Queries button will not be used as a link to a web page. This will be the button we use to create our drop down.

Because empty links are considered errors in your code, we add a url #heading that will jump to the id tag in the opening header tag. Clear as mud?

You should really look at the page before you add the settings to the style sheet to see how it changes the appearance.

New in HTML5

The nav element is another new addition in HTML5. You can use it just like a division to add a navigation device of any kind to your web page.

Copy and paste below the last entry in your style sheet.

/*  horizontal navbar  */
.hnavbar{
	list-style:none;
	margin-bottom: 0;
   float:left;
	position:relative;
	z-index:5;}
.hnavbar li{
	float:left;
	margin-right:10px;
	margin-bottom: 0px;
	position:relative;}
.hnavbar a{
	display:block;
	padding:5px;
	color:#fffffe;
   border: solid #696969 1px;
	text-decoration:none;}
.hnavbar a:hover{
	text-decoration:none;
   border: solid #c0c0c0 1px;}
/* End first tier hnavbar */

Save myfirstpage.html

Now preview the web page and see the changes. RWD Demo 6

Amazing? Run the mouse pointer over the buttons. A little action created by changing the border colors in the a and a:hover definitions

Are you beginning to see the POWER of CSS? Oh, and where's lmenu?

Just a bit of Content

Let's add a little content to the main element.

Copy and Paste the code shown in drk red between the <main> </main> tags.

<main>

<h1>Responsive Web Design</h1>

</main>

Note: This is the proper use of the h1 tag. Remember, only one to a web page.

Copy and Paste this code below the hnavbar block in your style sheet:

main h1 {
font-size: 24px;
font-weight:100;
margin: 1% 0;
text-align: center
}

Save myfirstpage.html Refresh and Preview

The Result

If this is what you see, you are ready to continue:

web page in browser

Were you successful?

If not, check the code that you added to your HTML page and style sheet.

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.

Want to speed things up with a free HTML editor? Get NoteTab Light for Windows. 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

Don't go on unless you have a basic understanding of the procedures presented so far.

What's Ahead

Next we'll add more content and then we'll finish the footer.

Helps

Lovely Keyboard Laptop users: I just can't believe how much faster and easier I can work on my laptop since I added a wireless mouse and keyboard.

I bought a MOFII Lovely for my wife as a birthday present and she loved it. I borrowed it one day just to see if it would speed things up on my laptop.

Trying to do web development on a laptop can really be a pain if you've got a lot to do.

So, I bought one for myself and plugged the little nano 2 in 1 receiver into my USB port. Started cranking out pages instantly.

Kick myself now for not getting it sooner.

Desktop or laptop, I highly recommend MOFII wireless mouse and keyboard.

Check it Out!

Need something more advanced. Check out our Web Development Resources page for some more advanced tutorials and reference guides for HTML5, CSS3, Responsive Design and SEO.

Free Tools and Resources We Recommend

Need something more advanced. Check out our Web Development Resources page for some more advanced tutorials and reference guides for HTML5, CSS3, Responsive Design and SEO.

Free Responsive Web Design Certification freeCodeCamp: freeCodeCamp is a proven path to your first software developer job.; More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.; Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.; FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3: "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light: All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp: Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users: If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.; For image resizing we've found the easiest Linux tool to be Krita.