In this article, I will show you how to use the img tag in HTML to create images, making the website more vivid.

There is a saying " a beautiful website must have images, clear layout and many eye-catching effects ". This statement alone is enough for us to list the technologies that must be used to create it.

• Create beautiful shapes => Use HTML tags to build, typically img tags.
• Clear layout => Use CSS to divide the layout.
• Eye-catching effects => Use HTML5 and CSS3 or Javascript libraries like jQuery.

Too much knowledge, right? But don't worry, we have to go slowly, not in a hurry, so in this article we will learn how to use img tags to create images first.

What is img tag in HTML?

Img stands for image, it is an HTML tag used to create images on web pages. 100% of websites use this tag.

To display images on the web, you use the img with the following syntax:

 <img src="link"/>

Where the main link is the link that points to the image. It must be a link that exists on the internet, not a link on the client's computer. So you have to upload the image to the hosting, any computer accessing the website can see it.

Example : Create an image with the link of the image already uploaded to web888's hosting.

 <img src="https://web888.net/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Attributes of the img tag in HTML

To work smoothly with the a tag, you must understand the meaning of all its attributes, the most typical are the following attributes:

src . attribute

This is an attribute that contains the path that points to the image file. There are many different types of images such as png, jpg, gif , … and all can be displayed on the website. Particularly for the value of the URL must be in one of two forms, that is the URL with the domain or the URL in the current directory ( all uploaded to hosting ).

Alt attribute

This is the property that will be displayed in case you pass the wrong image URL, this time it will display this text instead of the image.

 <img src="url_khong_ton_tai" alt="hình ảnh"/>

For SEO people, this attribute helps Google's bot engine know the meaning of the image.

Width and height properties

This is the property that sets the width ( width ) and height ( height ) for the image. You can also use CSS to set it up.

 <img width="500px" height="200px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/> <img width="200px" height="100px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Usually we will use CSS to set the width and height instead of using the above two properties. However, since we haven't learned CSS yet, you can use those two properties instead.

Some ways to use img tags in html

We can use img in combination with other tags to create a website interface.

Combine a tag to create image links

If you want when the user clicks on the image, the browser will redirect to another page, then you can use an a tag around the image.

 <a href="https://hocvietcode.com"> <img src="http://code.web888.vn/upload/config/images/hoc-lap-trinh-online.png" title="Học lập trình"/> </a>

Combine the map tag to assign the link to a small position in the image

Let's say you have a satellite image and in the image there is a small angle that is a photo of the sun. You want when you click on the small corner of the sun in that image, it will switch to a full image of the sun, how to do it like the example below.

 <img src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/sun.gif"> </map>

Explanation :

• In the img there is an attribute usemap="#planetmap" that is meant to specify the map to be applied to this shape, because its value is #planemap so it will take the map tag with name="planemap" .
• In the map tag defines an area with attributes
  • shape="rect" ie rectangle
  • coords="0,0,82,126" i.e. a list of coordinates that make up the area , taking the above image as the standard to measure and measured in pixels.
  • alt="sun" is when hovering the mouse over the location with the above coordinates, this title will be displayed
  • https://freetuts.net/upload/tut_post/images/2014/08/14/123/sun.gif is the link when you click on this area to go to.

In the article, I introduced how to use img to create simple images in HTML, and I introduced some ways to use img in combination with other tags like a tag, map tag to do different functions. useful. In fact, when you do it, you have to combine it with CSS, the new interface is beautiful and the effects are eye-catching.