There are times when not everything is to generate a form within our HTML documents, many times we must include other elements such as images within some tags to shape our page, for this we will see in this tutorial how to do it and the different features included in the same.
Embed an image
To be able to display an image within our HTML document we must use the img element which has the following attributes:
- src
- alt
- height
- width
- usemap
- ismap
At this time we are going to focus on the first two attributes, src and alt ; src allows us to give the route from which the browser is going to look for the image, it can be a relative path or even a URL, the alt attribute allows us to place a text, this text will be shown only when the image is not available whether it is not in the route in which it was specified in the src or even the browser cannot interpret it.
Let's see an example how to include an image in our HTML document:
Example Here is a common form for representing the three activities in a triathlon.The first icon represents swimming, the second represents cycling and the third represents running.
In this example we also see two more attributes, the width and height these as their names indicate is to regulate the width and height of the image, with this we can guarantee that the image will remain within the sizes established by us, also If the image is larger than that it will be resized, however you have to be careful since the image will have the same weight, so it is advisable to place the already edited image of the required size and that our page loads faster.
Embed an image in a Hyperlink
Another quite common use is to use an image as a link for other pages, either by placing the icon of a computer, a following arrow for example, of course, now with the new CSS frameworks this could be less common, however let's see how it is done to have this option within our portfolio of HTML tools.
To embed the image we will simply place the img element inside an element You are referring to a page such as:
Example Here is a common form for representing the three activities in a triathlon.The first icon represents swimming, the second represents cycling and the third represents running.
With this we achieve that the image is now our link as we will see in the following screen the image does not change in the way it is shown:
If we click on the image it will take us to the destination placed inside the element ; if we use the ismap attribute additionally we will send the coordinates of the position in the image where we clicked so that we could work with those numbers at the next moment of our navigation process. With this we finish this tutorial, we can make more rich pages using images, being able to interact with them even with the points where a user could click.
- 0
Articles