Creating the Home page

In this lesson you will start creating your Home page. You will base it on the content page you completed in the previous lesson.

Do a 'save as' of your content page. Save it in the root directory (not in the 'pages' directory) as home.htm, replacing the existing file of that name.

HTML changes

<head> section

Make the following changes to the <head> section:

Change the page title and the content description.
Change the file path to the stylesheet. The Home page is adjacent to the stylesheet in the root directory – on the same level – so there is no need to go 'up' a level. You should therefore delete ../ from the file path.

screen shot of practice web page — Your 'Home' page will look like this (Click to open)

<body> section

Make the following changes in the <body> section:

In the <body> tag, change the value of the ID attribute from treecontentpage to treehomepage.
Delete the link tags from the header text. Be careful to remove just the link tags, opening and closing, without affecting the text between them.
Delete the 'Home' link – the opening and closing link tags as well as the single-word paragraph between.
In the <h1> element, insert an ID attribute with a value of treehomepagetitle. The <h1> element will now have both a class and an ID attribute. (Remember that IDs have a higher specificity than classes.)
The <article> will be styled differently, so change treecontentarticle to treehomearticle.
Delete '../' from the file path for the hoop_pine_200.jpg image. Do the same with image it links to, hoop_pine_440.jpg.
Change the footer text to My wonderful world of trees.

Open the Home page with your browser (click on the Home link in the content page, or navigate to it with your browser). The Home page should look like this (different tab) at this time.

CSS styling

Here is an explanation of the styling you will be applying to the home page.

Firstly, the ID of <treehomepage> specifies a different background colour for the home page ("lemonchiffon").

					
#treehomepage {
  background-color: lemonchiffon;									
  }

The ID of <treehomepagetitle> specifies a larger top margin for the title text (<h1>). Being an ID, it overrides the class styling already applied to that element (Lesson 18).

					
#treehomepagetitle {
  margin-top: 3em;
  }

The <article> treehomearticle has a width of only 50% (compared to 60% for the <article> on the content page), and it has been shifted to the right; this will leave a wide empty space on the left for the navigation list (next lesson).

There is 30% of the page width available for the left margin. One starts with a total page width of 100%; take away the width of the article (50%) and the width of the right margin (20%), and this leaves 30%.

					
#treehomearticle {
  float: right;
  margin-right: 20%;
  width: 50%;
  }

Entering the CSS

Copy the rulesets for #treehomepage, #treehomepagetitle and #treehomearticle 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="The awesome power of 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>													  
<article class="treehomearticle">
<h2 class="majorheading">What we all need to know about Hoop Pine
</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/hoop_pine_440.jpg"><img src="../images/hoop_pine_200.jpg" class="treeimageright" alt="pic of hoop pine"></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%;
	}
	
#treehomepage {
	background-color: lemonchiffon;	
	}
	
#treehomepagetitle {
	margin-top: 3em;
	}
			
.treehomearticle {
	float: right;
	margin-right: 20%;
	width: 50%;
	}

See how it looks

If you haven’t already opened the home page, do so now (control + o) to see how it looks Note the background colour, and how the page title set a bit lower. The block of main text is relatively narrow and offset to the right.

<Previous lesson

Next lesson>