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.
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).
An 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.
<!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>
x10hosting offers free and fast web hosting as well as other extras for your website such as custom email address and SQL databases. Creating a free or premium account using this link will help support this site.