English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The colorful and diverse web pages we see today are all because of the role of images. In the past, the entire web was made up of plain text pages, which were very monotonous. This shows the importance of images in web design. Images can be inserted into HTML pages, and the commonly used image formats on web pages are jpg, png, gif, etc.
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Basic Tutorial(oldtoolbag.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>Test and see ‹/›
Inserting images
This example demonstrates how to display images on a webpage.
Inserting images from different locations
This example demonstrates how to display images from other folders or servers on a webpage.
(More examples can be found at the bottom of this page.)
In HTML, images are defined by the <img> tag.
<img> is an empty tag, meaning it only contains attributes and has no closing tag.
To display an image on a webpage, you need to use the source attribute (src). 'src' refers to 'source'. The value of the source attribute is the URL address of the image.
The syntax for defining an image is:
<img src="url" alt="some_text">
URL refers to the location where the image is stored. If the image named "default.jpg" is located at www.oldtoolbag.com's images directory, then its URL is https://www.oldtoolbag.com/run/html/default.jpg.
The browser displays the image at the location where the image tag appears in the document. If you place the image tag between two paragraphs, the browser will first display the first paragraph, then the image, and finally the second paragraph.
The alt attribute is used to define a string of alternate text for the image.
The value of the alternative text attribute is user-defined.
<img src="boat.gif" alt="Big Boat">
When the browser cannot load the image, the alternative text attribute tells the reader what information they have lost. In this case, the browser will display this alternative text instead of the image. It is a good habit to add an alternative text attribute to all images on the page, which helps to display information better and is very useful for those who use text-only browsers.
height (height) and width (width) attributes are used to set the height and width of the image.
The default unit of attribute values is pixels:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Tip: Specifying the height and width of an image is a good habit. If the height and width of the image are specified, the page will retain the specified size when loading. If the size of the image is not specified, it may destroy the overall layout of the HTML page when loading the page.
Note: If an HTML file contains ten images, then to display this page correctly, it is necessary to load 11 a file. Loading images takes time, so our suggestion is: use images sparingly.
Note: When loading the page, pay attention to the path of the inserted page image. If the image position cannot be set correctly, the browser cannot load the image, and the image tag will display a broken image.
Aligning Images
This example demonstrates how to align images within text.
Floating Images
This example demonstrates how to float an image to the left or right of the paragraph.
Setting Image Links
This example demonstrates how to use an image as a link.
Creating Image Maps
This example shows how to create an image map with clickable areas. Each area is a hyperlink.
| Tag | Description |
| img | Define images |
| map | Define image maps |
| area | Define clickable areas in image maps |