Create a Website with HTML5 - Lesson #4
Adding the Nav and Main Division
In the last lesson we added our web page heading, formatted it with a style sheet and previewed in a browser.
In this lesson we'll add our navigation device with future page links , then the main division, fill it with content, add an image and use our style sheet to format the web page elements.
Exercise #1
In Exercise #1 we'll add a nav division 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 </header> tag for the header division.
<nav>
<p><a href="index.html">Home</a>
<p><a href="page2.html">Page 2</a>
<p><a href="page3.html">Page 3</a>
</nav>
Save mytemplate.html
Copy and paste the code shown below into the style sheet below the last entry.
nav {
width: 100%;
background: #24486B;
float: left;
border-radius: 10px;
box-shadow: 5px 5px 10px #202020
}
nav p {
float: left;
padding: .5% 2%
}
Save mystyle.css
Preview mytemplate.html
You should see something like this:
Don't worry, we'll dress up the links in a later lesson, when we add our new pages. You are looking at default colors.
Exercise #2
In Exercise #2 we'll add a main division 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 </nav> tag for the navigation division.
<div id="main">
</div>
Save mytemplate.html
Copy and paste the code shown below into the style sheet below the last entry.
#main {
width:100%;
background: #ffffff;
float: left;
margin: 1% 0;
border-radius: 10px;
box-shadow: 5px 5px 10px #202020
}
IMPORTANT!!! Now got to the top of the style sheet and delete the height setting on the div.outline division.
the code is height: 400px
Save mystyle.css
We won't preview the web page yet because the main division won't show up until we add some content.
We'll do that in the next exercise.
Division Tag
The naked code for the division tag is shown here:
<div></div>
We've added what is called an id attribute, id="main" to the opening tag so that we can give it a name and reference it in the style sheet.
To reference it in the style sheet and add settings, the name of the division is preceded by a pound sign, #main
I know you're anxious to preview your web page, but not yet. There's nothing in the division so all you would see is a blank area on the page.
At the end of the next exercise things will be different.
The animation below shows the old HTML4 way of identifying the header division.
Exercise #3
In this exercise we'll add text very similar to that found on the home page of this website to the main division.
We'll preview and see what it looks like before and after we add the style settings.
Copy and paste the code shown below into mytemplate.html below the
<div id="main"> tag.
HELP: Some are thinking, "How can all of this code go in that little space!" To create space under a tag, place your cursor at the end of the closing bracket and press Enter a couple of times. In this case you would place your cursor as shown here. <div id="main">|
Don't worry. It will fit.
<h1>Create a Website with HTML</h1>
<p>You've been surfing the internet for years and you always wanted to know how to create a website.</p>
<p>Does it require a very technical mind or do you have to have a college degree to even start?</p>
<p>This little web site was designed for people with no knowledge of web design or any technical skills.</p>
<p>You will learn <strong>how to create a website with HTML</strong>.</p>
<p>Even if you think that your computer expertise is limited to turning on your machine, you can benefit from the information contained in these web pages.</p>
<p>You won't just learn to use HTML code and format web pages with style sheets.</p>
<p>You'll also learn basic things like:<br>
how to use a simple text editor<br>
how to copy and paste<br>
how to create folders<br>
how to store files and images that make up your website<br>
how to preview web pages with a browser.</p>
<p>You will learn how to create a website <strong>The Right Way, The First time!</strong> There are a lot of tutorials on the internet that teach you how to build websites. Use them and you'll most likely be rebuilding your website to keep up with the times.</p>
<p>Use our tutorial, you'll get started right and you'll be ready to progress to some of our more advanced teaching aids.</p>
Save mytemplate.html.
Preview the web page in your browser.
You should see this:
Note: If your main division extends beyound the edge of the outline division, you didn't delete the height setting as instructed.
The text will appear but clearly needs some fixing up. We need to add some settings to the style sheet.
The header tag shown in the animation below is now called the heading tag.
Copy and paste the code shown below into the style sheet below the last entry.
#main h1 {
font-size : 20px;
text-align : center;
color : #003399;
margin: 2% 0 }
#main p {
text-align : left;
text-indent : 16px ;
margin: 2% 10% }
Save mystyle.css
Now preview mytemplate.html again, (you may need to refresh or reload the browser window) and see if you notice any changes.
This time the page looks like this:
Exercise #4
In this exercise we'll add the lighthouse image that appears on the home page and see another method used to position images on a web page.
Download Image
Right click on the lighthouse image below and Save it in your htdocs/images folder as lighthouse1.jpg.
Copy and paste the code shown below into mytemplate.html. Place it below the paragraph <p>This little web site was designed for people with no knowledge of web design or any technical skills.</p> tag.
<p><img src="images/lighthouse1.jpg" alt="Lighthouse image" style="float: left"></p>
Save mytemplate.html
Preview with your browser.
If you expand your browser window to full width, you notice that the text lays right against the image. Let's fix it.
Copy and paste the code shown below into mystyle.css below the last entry.
#main img {
margin: 4% 4%;
border-radius: 5px;
border: solid #000000 1px;
box-shadow: 4px 4px 8px #202020
}
#main img {
max-width: 100%
}
Save mystyle.css
Now preview mytemplate.html again, (you may need to refresh or reload the browser window) and see if you notice any changes.
You should now have a web page very similar to the home page of this tutorial. We still need to add the footer division.
Resize the browser window until it is just a thin column and watch as the image scales to fit the available space.
This is how the web page should perform:
The setting that produces this effect is max-width: 100%;.
The extra space above and below the image was produced using this line of code: padding: 4% 4%
Once again, if you don't like rounded corners and shadow, just leave off the code that produces it.
Liquid Demo This little demonstration shows the importance of using the proper code to add images to your web pages when building liquid websites. See The Demo
Focus on seeing the relationship between page elements like division tags and their names in the style sheet. Notice also how the page elements like paragraphs and images within the named divisions are referenced.
In Lesson #5 we'll add the footer and complete the web page.
If you think you're ready, Proceed to Lesson #5