How to Create Web Pages with HTML5
Attention: If you skipped the first lesson, go back and start there.
Creating Your Page Structure
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>
<div class="main">
</div>
<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 , #00ccff, #ffffff);
}
nav{
width:90%;
background:#0e0e0e;
padding:0 0;
float:left;
margin:1% 5%;
box-shadow: 4px 2px 8px #000000}
div.main{
width:80%;
padding:0 10%;
float:left}
footer{
width:100%;
background:#2e2e2e;
float:left;
box-shadow: 0px 4px 16px 0px #000003;
margin-bottom:20px}
Save template-402.html.
The Class Attribute
The class attribute, class="name of element", is used to give a name to a page element so that it can be referenced in the style sheet in order to create a customized version of the element.
The diagram shows how it is defined in the style sheet.
The name of the element is preceded by div..
Tip: You can omit the div for faster processing by the browser.
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 div.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!
QuizTime
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.
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.
Free Tools We Recommend
- 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 Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- 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 BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.