How to insert image or logo using HTML on your site

How the Sincerely Hatter found solutions to unemployment on the internet
WP Super Cache vs W3 Total Cache: what is the best WordPress cache plugin?

In this tutorial you will learn how to insert a picture HTML on your website and also how to turn it into a link directing to another page. All website can and should know how to use images to make the site more attractive and eye-catching for users.

What will you need

To add a logo or insert HTML image on your site, you will need:

  • One or several images (and should be in .jpg, .png, .gif, or other possible formats).
  • Access to the server (where the website files are stored).
  • HTML file editor (can be a specific editor or even a simple editor).

Step 1 – Upload the files on the server

You should upload all the necessary files to the server. Both HTML or PHP files (depending on your site) as well as the images that you are planning to use. You can upload all in the same directory , or you can move all images to a folder that can be easily created and named “images”, for example. To upload files you can use the File Manager or FTP client .

Step 2 – Checking names image files

You must know the exact name of image files. Write them down or open a directory with images in a new tab. Here is an example of how the File Manager looks on the server with pictures:

As the image files are displayed in the file manager

In the image above, pay attention not to the file name but the extension (in this example you see the formats .gif and .png , but another very popular format is .jpg ). The extension is as important as the name because the image will not load if the extension has not specified correctly. In the next step, let’s understand where the file name is used.

Step 3 – Editing the HTML file

Open the file from your website and navigate to the line of the file where you want to insert the image into HTML. Let’s use the logo as an example in this tutorial. The logo of the site is by default located at the top of the page so you must be one of the first lines of the contents of the <body>.

To insert image in HTML use the following code:

<Img src = "logo.jpg" alt = "some text" width = 60 height = 40>

See the explanation of the parameters of image elements:

  • IMG stands for “image”: is tag tells the browser where the image should be located on your site.
  • SRC stands for “source” (source): This command is entered in the IMG command. The Source command tells the browser which the path to the image. It is recommended to store the images in a directory called “pictures” or “img”, for example. This makes it easy to set the path to the images, eg images / nomedaimagem.jpg or img / nomedaimagem.jpg . You can also enter a URL instead of the path to the image. If you find an image on the Internet that does not require use rights, you can use the image link and insert in source tag.
  • logo.jpg is the image name. You must create the full name of the image as explained in Step 2.
  • ALT stands for “alternate text”. This text will be displayed when the image does not load for other reasons, such as the connection for example. It is also important when it comes to SEO and can have great impact on the ranking of your website in search engines. The alt tag explains what it is the image and also appears when users hover over the image.
  • “Some text” here you enter text describing your image.
  • WIDTH indicates the width of your image in pixels and can range from 1 to any other number. But of course that does not make sense to set a picture with a width greater than the width of the browser screen.
  • HEIGHT indicates the height of the pixels in images. The rules follow the same width. From 1 pixel and is proportional to the size of your user ‘s browser screen.

Therefore, when inserting image in your site’s HTML, the code should be as shown below. All tags used here are standard and sufficient to display its logo on your site.

  1. <! Doctype html>
  2. <Html>
  3. <Body>
  4. <img src = “images / logo.png” alt = “some text” width = 300 height = 200 >
  5. </ Body>
  6. </ Html>
<! Doctype html>
<Html>
<Body>
<Img src = "images / logo.png" alt = "some text" width = 300 height = 200>

</ Body>
</ Html>

And now to visit your site, you should find something like this:

result of entering logo image in html site

As you can see in the image above, with the panel inspecting open you can see that the size of the image is the same as defined in the HTML code (300px width and 200px height) and also the path to the image (https: //www.hostinger .com / tutorials / wp-content / uploads / sites / 2/2017/03 / logo.png).

Conclusion

This is a simple way to insert an HTML image on your site. You can also do this using a style file layered, but if this is your first time running this, HTML is the easiest way.

Images are important elements in appearance and performance of your website and so you must learn to use properly.