Img tag in HTML


Websites use illustrations to highlight the content, and to avoid users feeling uncomfortable because the text is too long. In HTML the image is indicated by an img tag. Refer to the article below to find out the img tag details in HTML.


The previous article you read with Taimienphi.vn learn about link in HTML. In the next article below, Taimienphi.vn will introduce you more about the img tag in HTML.

Img tag in HTML

Table of Contents:
1. The img tag in HTML

1.1. Alt attribute
1.2. Resize images in HTML
1.3. Use width, height, or style attributes?
1.4. Store images in another folder
1.5. Host the image on another server
1.6. Animated GIF in HTML
1.7. Use images as links (links)
1.8. Adjust image position in HTML
1.9. Image Map in HTML
1.10. Background image for HTML element
1.11. The picture element is in HTML
2. Summary

2.1. Img tag in HTML

1. The img tag in HTML

In HTML, images are indicated by tags img.
Card img is a blank tag, contains only attributes and no closing tags.
Properties src Specify the URL (website address) of the image:

the img in html

1.1 alt attribute

Properties alt specify text to replace the image if the image is not displayed (due to a slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute will describe the image.
Example 1: Here is an example of the alt attribute in HTML:

the img in html 2

The output returned after applying the alt attribute looks like this:

the img in html 3

If the image cannot be found, the browser will display the value of the alt attribute.
Example 2: The following example illustrates how the browser displays the alt attribute value in case the image cannot be found:

the img in html 4

The output will look like the following:

the img in html 5

Note: The alt attribute is required The site will display an error if this attribute is not available.

1.2 Resize images in HTML

We can use attributes style to specify the width and height of the image.
Example 1: In the example below we use the style attribute to specify the width and height of the image in HTML:

the img in html 6

The output will look like the following:

the img in html 7

We can also use attributes width and Cao.
Example 2: In this example we use the width and height attributes to specify the width and height of the image in HTML:

the img in html 8

The output will look like the following:

the img in html 9

Note:
– The width and height attributes in HTML always specify the width and height of the image in pixels.
– We must specify the width and height of the image. If width and height are not specified, the website may crash when loading images.

1.3 Using width, height or style?

The width, height and style properties are all valid attributes in HTML.
However, Taimienphi.vn recommends that you use the style attribute to prevent the stylesheets from resizing images.
For example: The following example illustrates how styles sheets resize images in HTML:

the img in html 10

The output will look like the following:

the img in html 11

1.4 Store images in another folder

If not specified, the browser will search for images in the same directory as the web page.
However, to store images in a subfolder, we must add the folder name in the property src.
For example: The following example illustrates how to store images in subfolders in HTML:

the img in html 12

The output will look like the following:

the img in html 13

1.5 Store images on another server

Some websites host images on image servers. However, in reality we can access images from any web address.
For example: In the example below the image is hosted on another server:

the img in html 14

The output will look like the following:

the img in html 15

1.6 GIF animations in HTML

HTML also allows GIF animation.
For example: The following example illustrates GIF animation in HTML:

the img in html 16

The output will look like the following:

the img in html 17

1.7 Use images as links (links)

To use images as links in HTML, we place tags img inside the card a.
For example: The following example illustrates how to use images to make links in HTML:

the img in html 18

The output will look like the following:

the img in html 19

Note: We add border: 0; to prevent IE9 and earlier versions from displaying borders around images.

1.8 Adjust image position in HTML

In HTML, we use attributes float to adjust the image position to the right or to the left of the text (text).
For example: In the example below we will use the float attribute to adjust the image on the right and left side of the text:

the img in html 20

The output will look like the following:

the img in html 21

1.9 Image Map in HTML

Card map Used to specify image-map in HTML. image-map is the image with clickable parts.
For example: Here is an example of an image map in HTML:

the img in html 22

The output will look like the following:

the img in html 23

Properties name of cards map is associated with the property usemap of cards img and create relationships between images and maps.
Element map Contains a number of tags area, used to specify clickable areas in image-map.

1.10 Background image for an HTML element

To add background image for the HTML element, we use the attribute background-image in CSS.

Example 1: Add background image on web page, specify background-image attribute in BODY element:

the img in html 24

The output will look like the following:

the img in html 25

Example 2: Add a background image on the text, specify the background-image attribute in element P:

the img in html 26

The output will look like the following:

the img in html 27

1.11 Picture element in HTML

In HTML5, an element is added picture to improve the flexibility when specifying image resources.
Element picture contains some elements source, Each element references different image sources. This way the browser can choose the image that best suits the viewing mode and on different devices.
Each element source contains descriptive attributes if the image is considered to be the most relevant.
The browser will use the element source first with the appropriate attribute values ​​and ignore the elements source next.
For example: The following example illustrates how to use the element picture in HTYM:

the img in html 28

Outputs when applying element picture Look like this:

the img in html 29

Note: We must specify the element img is the last child of the element picture. The browser does not support the element picture or if not possible source Whichever match will use the element img.

2. Summary

– Using element img in HTML to specify images.
– Use properties src in HTML to specify the URL of the image.
– Use properties alt in HTML to specify alternative image text in case if the image is not displayed.
– Use properties width and Cao in HTML to specify the image size.
– Use properties width and Cao in CSS to specify image sizes.
– Use properties float in HTML to adjust image position.
– Using element map to specify image-map.
– Using element area to specify the clickable area in the image-map.
– Use properties usemap of the element img in HTML to point to image-map.
– Using element picture to display different images on different devices.

2.1 The img tag in HTML

Below is a list of cards img in HTML:

the img in html 30

https://thuthuat.taimienphi.vn/the-img-in-html-50617n.aspx
The article above Taimienphi.vn has just introduced you about img tag in HTML. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article so you can learn HTML better. In the next article, Taimienphi.vn will introduce you further tables in HTML Please.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *