How to use img tag in HTML and img
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.
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:
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.
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 ).
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://web888.vn/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/> <img width="200px" height="100px" src="https://web888.vn/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://web888.vn"> <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://web888.vn/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://web888.vn/upload/tut_post/images/2014/08/14/123/sun.gif"> </map>
- In the
imgthere is an attribute
usemap="#planetmap"that is meant to specify the map to be applied to this shape, because its value is
#planemapso it will take the
- In the
maptag defines an
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.gifis 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
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.