Introduction
In this tutorial, you will learn how to add an image to your website and also how to turn it into a link to another page using HTML. Every modern website should have images in it as it makes the website much more attractive.
What you’ll need
Before you begin this guide you’ll need the following:
- An image or several images (they should be .jpg, .png, .gif or other possible format)
- Access to the server (in which website files are stored)
- HTML file editor (it can be specialized one or even a simple text editor)
Step 1 — Uploading Files to the Server
You should upload all the necessary files to the server. HTML or PHP (depends on your websites) files should be uploaded, same as the images you are planning to use. They can be uploaded to the same directory or you can move all the images to a folder which can be easily created and named ‘images’, for example. In order to upload files you can use File Manager or FTP client.
Step 2 — Checking Names of Image Files
You should know the exact names of your image files. You should write them somewhere or just open a directory with images on another tab. Here is an example of File Manager view on the server with images:
In the image provided above, you should pay attention not to the file name only but to file extension also (in this example there are .gif and .png file formats. Another very popular format is .jpg. Extension is as important as the name because the image will not load if the extension is not specified. You can now move to Step 3 in which it’s explained where this file name is used.
Step 3 — Editing the HTML file
Open your website HTML file and navigate to the line of the file where you would like the image to appear. The logo of the website is usually placed on the top of every website. So it should be in one of the first lines of your <body> content.
Here’s the HTML format for placing an image:
<IMG SRC="logo.jpg" ALT="some text" WIDTH=60 HEIGHT=40>
Explanation of image element parameters:
- IMG stands for “image.” The browser is informed where the image should be placed on the website using this tag.
- SRC meaning is “source.” This is a command inside IMG command. Source command tells the browser the path of the image. It’s recommended to place images in a subdirectory called ‘images’ or ‘img, for example. This helps us to easily define a path to the images like this: images/imagename.jpg or img/imagename.jpg. It’s also possible to place any URL instead of a path to an image. If you find an image on the Internet, which has no copyrights, you can use the link of the image and put it in the source tag.
- logo.jpg is the name of the image. You should define the full name of the image as it’s explained in the STEP 2.
- ALT stands for “alternate text”. This text appears if the image cannot be loaded for some reason. It explains to the user what image is about, so it can be called image description also. This text appears when a user hovers the mouse on the image.
- “some text” is where you put the text describing your image.
- WIDTH is simply the width of the image in pixels. It can range from 1 pixel to any number. Of course, it makes no sense to set image width bigger than the width of the browser screen.
- HEIGHT stands for the height of the image in pixels. Rules are the same as for the width – it can start from 1 pixel and should not be bigger than the height of the user’s screen.
This is how the HTML code looks like where there is nothing else but default tags of HTML and image placed using the IMG tag:
This is how this code appears on the browser when a website is visited:
As you can see in the screenshot above, there is inspect panel opened also in which we can see that the size of this image is the same as we defined in the HTML code (300px width and 200px height). The path to this image is also the same as we defined in the HTML file (https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2017/03/logo.png).
Conclusion
This is a simple way to add an image to your website. It’s also possible to do that using a separate stylesheet file however if it’s the first time you are trying to build a website – adding it directly to an HTML file is an easier solution. Images are things which are very important for a visual appearance of the website so it’s very useful to learn how to use them correctly.
Thank you! This helped me a lot 🙂