Create a Website with HTML5 - Lesson #3
HTML5 added several tags that act like the division tag that we used in the last exercise.
These tags header, nav and footer can be used to develop your web page structure. You might think of them as division tags given assigned names for specific purposes.
The <header></header> tag not to be confused with the old header <h1></h1> tag that was used to add large text to pages, is used to add headers to your webpages.
You can have more than one header tag on a page and it accepts Global attributes.
The <nav></nav> tag is used to add navigational devices to your pages.
You can use more than one nav on the same page and it accepts Global attributes.
The <footer></footer> tag is used to add a footer to your page.
You can use more than one footer on the same page and it accepts Global attributes.
We'll see what all this means through the course of the tutorial.
Adding a Web Page Header
The key to building web pages with HTML is learning to manipulate divisions, including those with assigned names.
Just think of divisions as 4 sided boxes that you can stack or align side by side to create columns.
We won't be building columns in this tutorial, but we will be stacking 4 divisions on top of each other to produce a header, a navigation device(nav), a main division which will contain our page content and a footer at the bottom of the page.
Exercise #1
In Exercise #1 we'll add a header to the page and add it's style settings to the style sheet.
Once again, the header tag was added in HTML5 and is simply a division designed for a specific purpose.
Copy and paste the code shown below into the top text editor window below the <div class="outline"> tag.
<header>
<h1>Create a Website with HTML5</h1>
</header>
Save mytemplate.html
Copy and paste the code shown below into the style sheet below the last entry.
header {
width: 100%;
background: #336699;
float: left;
margin: 1% 0;
border-radius: 10px;
box-shadow: 5px 5px 10px #202020
}
Save mystyle.css
Now Preview the web page in a browser.
Refresher: Read Help Before You Preview!!
HELP: Some with very basic computer knowledge will struggle with navigating the browser at first.
You can return to the lesson after previewing by clicking the Back arrow, top left of browser.
One click takes you to the Folder Index.
The second click takes you to the lesson.
Preview the web page.
HELP: To Preview your web page type: file:///c:/htdocs/ in the URL box at the top and hit enter. If you've followed directions to this point you will see your web page mytemplate.html in the Folder Index that pops up. Just click on the web page file to open it in the browser..
Note: I highly recommend using the Google Chrome browser for previewing your web pages. FireFox is my second choice. I detest the Internet Explorer browser, but if that's your choice and you know how to work it, that's fine.
You should see something similar to this:
Notice the rounded corners again.
Rounded corners can be added to many page elements. The code is the same for all: border-radius: 10px;. You can experiment by increasing or decreasing the numberof pixels to change the corner rounding. If you want square corners just don't add the code.
The heading tag displays in its default size for the h1 tag. The font family was set under the body selector.
Notice also that once again you see a shadow on the right side of the header block. Shadow gives your page a three dimensional appearance.
The shadow code looks like this: box-shadow: 5px 5px 10px #202020
If you don't want box shadow, don't add the code.
Now we'll add the style settings to format the heading tag characters.
Heading Tag
Basic Attributes:
Sizes: h1-h6 (h1 is largest by default)
font-family:
font-size:
font-style:
font-weight:
text-align:
color:
margin:
padding:
border:
text-shadow:
(All attributes should be defined using style sheets )
Exercise #2
Format the heading tag.
Copy and paste the code shown below into the style sheet below the last entry.
header h1 {
color: #AAD5FF;
font-size: 28px;
text-align: center;
padding: 4% 1%;
text-shadow: 5px 5px 10px black
}
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 see something like this:
We added text shadow to the heading text. It is a little hard to see on the darker background color. It adds a nice appearance when using light text on pastel backgrounds. Don't use it with dark colored text.
The code to add it looks like this: text-shadow: 5px 5px 10px black
If you don't want shaded test, don't add the code.
Resize the browser window until it is just a thin column and watch as the heading text adjusts to fit the available space.
Focus on the opening and closing tags for web page headers, divisions and heading tags.(Code: <h1></h1>)
In Lesson #4 we'll add our navigation, main division and some content and see how to format it.
If you think you're ready Proceed to Lesson #4