Images in HTML

So far, everything we've seen in HTML has been related to text.

It's time for us to take it a step further and look at topics related to images and how to include them on our page.

1 - Accessing Images

To access our images, we must consider where they are located. These could be hosted online, in which case we will have to use the URL provided by the browser.

Or, on the other hand, and as is most common, they will be located on our server, or in this case, on our own computer.

In our case, we have them in a folder called “img”. Why do I mention this?

It is important to keep this in mind, since to access them we need to know their absolute or relative path.

1.1   - Absolute and Relative Paths

When accessing a file:

1. Relative path
   • To locate a file using a relative path, we must start by indicating where the file is from our current position. In our case, the path would be “img/imagen1.jpg”

1. Absolute path
   • If we use an absolute path, we must start from the root directory of our computer, such as “C:/users/NetMentor/Cursos/ProgramacionWeb/Video03/Ejemplo/img/imagen1.jpg”

In the workplace, it greatly depends on what you are doing which one to choose. For example, in finance environments, you may be required to leave a file in a certain folder; in that case, you would use an absolute path. Meanwhile, for images on your website, you would usually use a relative path.

2 - Inserting an Image in Our HTML

To insert an image, we need to use the <img> tag. Once we have this tag, we must use the src attribute, which indicates the image location, whether it's online or on our own computer.

<img src="img/imagen1.jpg" />
<br/>
<img src="https://www.netmentor.es/Imagen/30d887b1-420d-44b2-abcd-4d5de48be70c.jpg"/>

3 - Additional Attributes for Images

Of course, we have a series of additional attributes to complement an image.

They are not very commonly used since we usually handle everything with CSS styles, but even so, they can be used.

1. Size Attributes
   • For example, if we want to change the size of an image, we can use the width and height attributes, which indicate width and height. For both, we can use a value in pixels or as a percentage.

<img src="img/imagen1.jpg" width="300" height="400" />

1. Alternative Text
   • When adding an image, it is recommended to include the alt attribute, which specifies an alternative text in case the image cannot be loaded.
   • Additionally, this alt attribute is mainly used by search engines when we look for images online.

<img src="img/imagen1.jpg" width="300" height="400" alt="sample image insert images in html" />