Use quote marks to find an "exact phrase"

Print version

print icon

34: Creating a content page 6

Adding an image

In this lesson you will be adding a small image to your content page. It will link to a larger version of the same image.

Obtain the images

Click on the links below to open the images. Save them in the 'images' directory.

HTML for the image

Below is the HTML for the small image you will be inserting in the first paragraph of your page. Have a look at the file path and note how it goes up a level to the images directory.


<img src="../images/hoop_pine_200.jpg" alt="pic of hoop pine">				
					

Here is the class attribute you will be adding to the <img> element.


<img src="../images/hoop_pine_200.jpg" class="treeimageright" alt="pic of hoop pine">				
					

To make the small image a link to the larger one, you need to add link opening and closing tags before and after your image HTML. Note that the file path for the larger image is nearly the same as that for the small image, as they are both kept in the same place; the only difference is the number in the name of the image.


<a href="../images/hoop_pine_440.jpg"><img src="../images/hoop_pine_200.jpg" class="treeimageright" alt="pic of hoop pine"></a>				
					

Insert the line above into your HTML, as shown in the HTML box below.

CSS for the image

Insert this ruleset for the treeimageright class into your CSS, as shown. This will float the image to the right and create margins on three sides.


.treeimageright {
  float: right;
  margin: 2% 0 2% 2%;
  }				
					

HTML

	
<!DOCTYPE html>		
<html lang="en"> 
 <head>		
  <title>Hoop Pine</title>
  <link rel="stylesheet" href="../mystylesheet.css">
  <meta charset="UTF-8">
  <meta name="description" content="What we should all know about Hoop Pine">
  <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="treecontentpage">
<header class="treeheader"> <a href="home.htm"><p>My wonderful world of trees</p></a> </header> <a href="../home.htm"><p id="treehomelink"> Home </p></a> <h1 class="treepagetitle">The splendours of Hoop Pine </h1> <article class="treecontentarticle"> <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> Hoop Pine </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%;
	}															
										

See how it looks, check links

Open the page in your browser and refresh the page to see how it now looks. It should look like this. Feel free to experiment with the properties and values to see what happens. Click on the image and the 'Home' link to check that they function (the linked 'Home' page is still blank). Make a habit of checking links.

You have completed your content page.