Coders' Guidebook

How to add images to your website

Images can greatly enhance the appearance of your website. Fortunately, adding images to your HTML script is also quite simple and this tutorial will show you everything you need to know. If you do not have an image of your own you would like to use, then you can save the below image of a tree. Save the image in the same folder on your computer as your index.html file and 'main.css' stylesheet.

tree.jpg

HTML code for adding an image

To add the image of the tree to your website, type the following code into the body element of one of your webpages (e.g. the index.html file):

<img src="tree.jpg" alt="Tree" class="photo"/>

Let's dissect that code a little. First, the img tag tells the web browser all the code within the angle brackets refers to an image. Next, the src attribute specifies the location and file name of the image. The location can be a web address (e.g. https://images.freeimages.com/images/large-previews/c0e/lonely-tree-1393586.jpg - the website the image of the tree was originally sourced from) or file directory for images you upload yourself (e.g. tree.jpg or images/tree.jpg).

warning.pngAn important note about using images hosted by other websites: using a link to another website as your image src is called 'hotlinking'. Hotlinking is discouraged (and in some cases illegal) because every time the image is loaded on your website, it drives traffic to the server which hosts the file. Increased traffic often means increased costs for the person(s) who uploaded the image. Furthermore, in hotlinking images, you run the risk that the owner of the image may one day remove it from their server or introduce measures to block hotlinking. It is recommended you upload images you intend to use for your website yourself because it is good web etiquette and helps ensure the image always loads correctly.

When linking to images you upload yourself, it is important to consider what folder the image is in relative to the HTML file. For example, <img src="tree.jpg"> will only work if the image can be found in the same folder as the HTML file. If the image was one folder deeper then we would have to edit our src attribute to include that folder name followed by a forward slash. For instance, if our tree.jpg file was in a folder called 'images' then our src attribute would look like this: <img src="images/tree.jpg">. On the other hand, if our image was in a parent folder relative to the HTML file then we would need to link to the folder above by including ../ before the file name. For example, if our tree.jpg file was two folders above the HTML file then our src attribute would look like this: <img src="../../tree.jpg">

The next part of our image declaration is the alt attribute. The text specified in the alt is usually a short description of the image. It will only be displayed if for whatever reason the image fails to load.

Finally, we define a class. Classes identify HTML elements in the CSS stylesheet. All elements sharing a class to be styled identically. For example, if we had five images on our webpage and three of them were assigned the class 'photo', then we could modify the style of all three images by referencing the 'photo' class in the main.css stylesheet. There are many options for styling images and we will begin to explore them in the next tutorial.

<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title>Home</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<h1>My nature and wildlife blog</h1>
	<img src="tree.jpg" alt="Tree" class="photo"/>	<!--THIS IS HOW WE LINK TO AN IMAGE IN THE SAME HOLDER AS THE HTML FILE-->
</body>
</html>

<<< Previous

Next >>>