Completing the Home page
In this lesson you will complete your Home page.
HTML changes
<h1> page title
Change the page title text in the <h1> to Welcome to my tree website.
<nav> section
The navigation list goes in the wide space to the left of the text. It is an unordered list (with no bullets), with each list item being a link to a content page. The others are just there for show at this time. You can use them and add to them when you create more content pages.
The navigation list is placed within a <nav> container, a semantic element. Both the list and the container have an ID attribute so they can be styled.
<nav id="treenav">
<ul id="treenavlist">
</ul>
</nav>
Here's how it all looks with the list items. At this time there is just one content page; note that there is a link to this included in the code below. Copy the code and paste it into your HTML document between the page title (h1) and the <article> (treehomearticle). Note how it's outside the <article>, so it is separated from the other text.
<nav id="treenav">
<ul id="treenavlist">
<li><a href="pages/content.htm">Hoop pine</a></li>
<li><a href="#">Branch out</a></li>
<li><a href="#">Take root</a></li>
<li><a href="#">Turn over a new leaf</a></li>
<li><a href="#">Go out on a limb</a></li>
<li><a href="#">Bark up the wrong tree</a></li>
<li><a href="#">What a sap</a></li>
</ul>
</nav>
<article> changes
There are only a few changes to be made to the <article>:
- Change the text in the <h2> (majorheading) to 'The awesome power of trees'.
- Change the image and the linked image. This is described below.
Changing the image and the linked image
At this stage your Home page still has the picture from the content page, and it links to the larger picture for the content page. You will now change it to the correct picture for the Home page and the correct linked, larger picture. Click on the links below to open the images. Save them in the 'images' directory.
- tree_200.jpg (Home page picture)
- tree_700.jpg (larger, linked version)
In the HTML, find the code for the existing image and change the name to that of the new image (tree_200.jpg). Do the same for the linked, larger image (tree_700.jpg). Change the alt text as well.
The Home page should look like this (different tab) at this time.
CSS
CSS styling
You will need to add the rulesets for the <nav> container, the navigation list, the list items and the navigation links.
The styling locates the navigation list container and the look and spacing of the list items.
#treenav { /* nav container */
width: 15%;
float: left;
margin-left: 12%;
margin-right: 3%;
}
#treenavlist { /* list container */
list-style-type: none;
font-size: 110%;
font-weight: 500;
}
#treenavlist li { /* list items */
padding-bottom: 1em;
}
#treenavlist a { /* links */
text-decoration: none;
}
Notice how the declarations for the navigation list (#treenavlist) apply to the list items; the values apply to the list items through inheritance. The setting for padding has to be in the ruleset for the list items because that property is not inherited.
One of the rulesets (#treenavlist a) applies to links in the navigation list. This prevents the browser default underlining being applied to these links. Underlining is not needed for the navigation list items because (by convention) the user expects them to be links, even if they don't look like they are.
Entering the CSS
Copy the rulesets for #treenav, #treenavlist, #treenavlist li and #treenavlist a and paste them into your CSS as shown.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<link rel="stylesheet" href="mystylesheet.css">
<meta charset="UTF-8">
<meta name="description" content="What we all need to know about trees">
<meta name="keywords" content="html, css">
<meta name="author" content="My Name">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body id="treehomepage">
<header class="treeheader">
<p>My wonderful world of trees</p>
</header>
<h1 class="treepagetitle" id="treehomepagetitle">The splendours of Hoop Pine
</h1>
<nav id="treenav">
<ul id="treenavlist">
<li><a href="pages/content.htm">Hoop pine</a></li>
<li><a href="#">Branch out</a></li>
<li><a href="#">Take root</a></li>
<li><a href="#">Turn over a new leaf</a></li>
<li><a href="#">Go out on a limb</a></li>
<li><a href="#">Bark up the wrong tree</a></li>
<li><a href="#">What a sap</a></li>
</ul>
</nav>
<article class="treehomearticle">
<h2 class="majorheading">The awesome power of trees
</h2>
<h3 class="minorheading">Habitat
</h3>
<p class="treebodytext">
Araucaria cunninghamii is a species of Araucaria known as <i>Hoop Pine</i>. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham,<a href="../images/tree_700.jpg"><img src="../images/tree_200.jpg" class="treeimageright" alt="pic of impressive tree"></a> who collected the first specimens in the 1820s.
</p>
<h3 class="minorheading">Habitat
</h3>
<p class="treebodytext">
Araucaria cunninghamii is a species of Araucaria known as <i>Hoop Pine</i>. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s.
</p>
<h3 class="minorheading">Habitat
</h3>
<p class="treebodytext">
Araucaria cunninghamii is a species of Araucaria known as <i>Hoop Pine</i>. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s.
</p>
</article>
<footer class="treefooter">
<p>
My wonderful world of trees
</p>
</footer></body>
</html>
CSS
html {
color: black;
font-family: sans-serif, sans;
font-weight: normal;
font-variant: normal;
font-style: normal;
text-align: justify;
}
* {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
img {
max-width:100%;
border: none;
outline: none;
}
#treecontentpage {
background-color: lightcyan;
}
.treepagetitle {
text-align: center;
font-size: 290%;
font-weight: 700;
line-height: 5em;
}
.majorheading {
text-align: left;
font-size: 160%;
font-weight: 700;
margin-bottom: 0.8em;
}
.minorheading {
text-align: left;
font-size: 115%;
font-weight: 500;
margin-bottom: 1%;
}
.treebodytext {
margin-right: 6%;
margin-bottom: 4%;
}
#treehomelink {
margin-top: 2vh;
margin-left: 5vw;
font-size: 110%;
font-weight: 600;
}
.treecontentarticle
width: 60%;
margin-right: auto;
margin-left: auto;
}
.treeheader {
background-color: gray;
height: 10vh;
width: 100%;
}
.treeheader p {
font-size: 200%;
font-weight: 600;
text-align: left;
color: white;
line-height: 10vh;
margin-left:5vw;
}
.treeheader a {
text-decoration: none;
}
.treefooter {
position: fixed;
bottom: 0;
width: 100%;
height: 4em;
background-color: firebrick;
}
.treefooter p {
text-align: center;
line-height: 4em;
color: white;
}
.treeimageright {
float: right;
margin: 2% 0 2% 2%;
}
#treehomepagetitle {
margin-top: 3em;
}
#treehomepage {
background-color: lemonchiffon;
}
#treehomearticle {
float: right;
margin-right: 20%;
width: 50%;
}
#treenav { /* nav container */
width: 15%;
float: left;
margin-left: 12%;
margin-right: 3%;
}
#treenavlist { /* list container */
list-style-type: none;
font-size: 110%;
font-weight: 500;
}
#treenavlist li { /* list items */
padding-bottom: 1em;
}
#treenavlist a { /* links */
text-decoration: none;
}
See how it looks
Refresh your browser to see how it looks. It should look like this (different tab). Feel free to experiment with the properties and values to see what happens.
Congratulations
You have created your own website! These two pages, content.htm and home.htm, are enough to set you on your way. Your 'content' page will serve as a template; do a 'save as' under another name to create another. Use the second link in the home page nav list to link to the new page in the same way as the existing content page is linked. Have fun. Experiment. As you get better at it your pages will develop and become more interesting.