Using an image can make the website design and appearance look good. Not like the beginning, the website is just showing a text.
To put an image on a web page, we can use the simple way by using the <img> element. Now, in this tutorial, we'll learn more about HTML Image usage, attribute, and example.
HTML Image Element
The HTML Image element is represents by the <img> tags. The <img> tag does not have a closing tag but, the <img> tag requires the "src" attribute to make the element works. The "src" attribute defines a source of an image. This is an example of how it works.
Example 1:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="twitter.png">
</body>
</html>This is how the HTML code above will be displayed in a browser:
This method only works if your images placed in the same folder.
HTML Image Alt Attribute
HTML Image has an "alt" attribute. Use the "alt" attribute to provide an alternate text for an image. This attribute will show text if your connection to slow or if a browser cannot find an image.
Example 2:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="facebook.png" alt="Facebook">
</body>
</html>The value of the "alt" attribute will show like this:
As you can see, the image does not appear, there only show a text from the value of the "alt" attribute.
HTML Image Width and Height Attribute
HTML allows you to resize the image as you like. You can change the image size using the "width" and "height" attribute. For another way that you can use, is by using the "style" attribute and followed by the CSS property.
Example 3:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="flower.jpg" alt="flower" width="220px" height="140px">
<img src="beach.jpg" alt="Beach" style="width:220px; height:140px">
</body>
</html>Images will display like this::
The image has been resized. The "width" and "height" attribute or the "style" attribute is valid in HTML.
Images from Another Folder or Server
You must know, in the previous example, the images place in the same folder with an HTML document. Now, we'll try to put an image from another folder or server to the HTML document.
Example 4:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="img/smartphone.jpg" alt="Smartphone" width="200px" height="100px">
</body>
</html>result:
Here's the HTML File Paths format:
<img src="picture.jpg"> (picture.jpg is located in the same folder as the current page)
<img src="images/picture.jpg"> (picture.jpg is located in the images folder in the current folder)
<img src="/images/picture.jpg"> (picture.jpg is located in the images folder at the root of the current web)
<img src="../picture.jpg"> (picture.jpg is located in the folder one level up from the current folder)You can access images from any web address in the world:
Example 5:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">
</body>
</html>The HTML code above will display like this:
Animated Images
HTML allows animated image GIFs. To add an animated image, use the same syntax as before. There's no difference. The difference is only in the image format. Let's see the example below.
Example 6:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="google.gif" alt="Google" width="400px" height="250px">
</body>
</html>The HTML code above will display like this:
Image as a Link
HTML Image element is not only showing an image. The image shows can modify as a link.
If you want to use an image as links. You only need to place the <img> tag inside the hyperlink elements (<a>...</a> tags).
Example 7:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<a href="https://google.com">
<img src="google.gif" alt="Google" width="400px" height="250px">
</a>
</body>
</html>The HTML code above will display like this:
HTML Image Floating
Use the CSS float property to let the image float to the right or to the left of a text.
Example 8:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<p><img src="Smiley.svg" alt="Smiley" style="float:right;width: 30px; height: 30px">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perspiciatis, culpa dolores laborum rem at adipisci harum iure assumenda aliquam animi esse. Voluptates hic possimus obcaecati fugiat voluptate cum dolore tempora, architecto praesentium veritatis iste eligendi repellat qui fuga consequuntur.
</p>
<p><img src="Smiley.svg" alt="Smiley" style="float:left;width: 30px; height: 30px">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos perspiciatis, culpa dolores laborum rem at adipisci harum iure assumenda aliquam animi esse. Voluptates hic possimus obcaecati fugiat voluptate cum dolore tempora, architecto praesentium veritatis iste eligendi repellat qui fuga consequuntur.
</p>
</body>
</html>The HTML code above will display like this:
As you can see, the image position is on the right and left of the text. Here is another float property:
* none - The element does not float (will be displayed just where it occurs in the text). This is default
* inherit - The element inherits the float value of its parent
HTML Image Maps
An image map is a list of coordinates relating to a specific image, created to hyperlink areas of the image to different destinations.
If you want to add clickable areas on an Images, you can use an Image Maps using this following syntax.
Example 9:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<p>Click on the facebook icon or the instagram icon to go to a new page:</p>
<img src="pexels.jpeg" alt="Pexels" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="204,162,227,140" alt="Facebook" href="https://facebook.com" target="_blank">
<area shape="rect" coords="236,154,260,130" alt="Instagram" href="https://instagram.com" target="_blank">
</body>
</html>When you click the Facebook or Instagram icon on this image, you will go to a new page:
The image is inserted using the <img> tag with the "usemap" attribute.
The usemap values start with a hashtag # followed by name of the image map, the name attribute in the <map> element used to create a relationship between an Image and Image Maps.
For Example, We have an "img" tag with a "#workmap" as an usemap values. So, the value of the "name" attribute on the "map" element must be "workmap".
<img usemap="#workmap">
<map name="workmap">A clickable area is defined using an <area> element.
The coordinates come in pairs, one for the x-axis and one for the y-axis.
Here is the coordinate illustration:
Before you add the coordinate, make sure to define the shape first. You can choose one of these values, to define the shape areas:
- rect - defines a rectangular region
- circle - defines a circular region
- poly - defines a polygonal region
- default - defines the entire region
Background Images
You can use the HTML image as a background in your HTML document. Use the "style" attribute followed by CSS background-image property.
Example 10:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<div style="background-image: url('flower.jpg');">
<h2 style="color: white">Background Images</h2>
<p style="color: white">You can add a background image in "div" or "body" element with "style" attribute.</p>
</div>
</body>
</html>The HTML code above will display like this:
Your background image will be repeating horizontally and vertically if your image smaller than the element until it has reached the end of the element.
If you don't want it. You only need to use "background-repeat" property like this.
Example 11:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<div style="background-image: url('emoticon.jpg'); background-repeat: no-repeat;">
<h2>Background Images</h2>
<p>You can add a background image in "div" or "body" element with "style" attribute.</p>
</div>
</body>
</html>The HTML code above will display like this:
Picture Element
The picture element allows you to show a different image with the different screen sizes. The picture element contains the number of "source" elements, referring to different image sources. The browser will choose the image that has the best view for the current device or screen.
If you have a small screen, the browser will use the first <source> element with matching attribute values.
Example 12:
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="flower.jpg">
<source media="(min-width: 465px)" srcset="beach.jpg">
<img src="pexels.jpeg">
</picture>
</body>
</html>The HTML code above will display like this:
That is a basic tutorial about the HTML image, and it just a little example. To make it easier to understand, you can find and try the full source code of these examples on our GitHub.
That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!
