HTML Basic Tutorial (--html) Image--

By using HTML, you can display images in your document.

Instance

Inserting images

This example shows how to display an image in a Web page.

Insert a picture from a different location

This example shows how to display a picture of another folder or server to a Web page.

(You can find more instances at the bottom of this page.) ）

Image label () and source attribute (SRC)

In HTML, the image is defined by the tag.

is an empty label, meaning that it contains only attributes and does not have a closed label.

To display an image on a page, you need to use the source attribute (SRC). SRC refers to "source". The value of the Source property is the URL address of the image.

The syntax for defining an image is:

URL refers to the location where the image is stored. If the image named "Boat.gif" is in the images directory of www.w3school.com.cn, its URL is http://www.w3school.com.cn/images/boat.gif.

The browser displays the image in the document where the image label appears. If you place an image label between two paragraphs, the browser first displays the first paragraph, then displays the picture, and the second paragraph is displayed.

Replace Text property (ALT)

The ALT attribute is used to define a string of prepared, replaceable text for an image. The value of the replacement Text property is user-defined.

alt="Big Boat">

When the browser fails to load the image, the replacement Text property tells the reader what information they have lost. At this point, the browser will display this alternative text instead of the image. It is a good practice to add alternate text attributes to the images on the page, which helps to better display the information and is useful for those who use a plain text browser.

Basic considerations-Helpful tips:

If an HTML file contains 10 images, you need to load 11 files in order to display the page correctly. Loading pictures takes time, so our advice is: Use images with caution.

More examples

Background image

This example shows how to add a background picture to an HTML page.

Arranging pictures

This example shows how to arrange an image in text.

Floating image

This example shows how to float a picture to the left or right of a paragraph.

Adjust image size

This example shows how to resize a picture to a different size.

Display alternate text for a picture

This example shows how to display alternate text for a picture. When the browser fails to load the image, the replacement Text property tells the reader about the lost information. It is a good practice to add alternate text properties to the images on the page.

Making image Links

This example shows how to use an image as a link.

Create an image map

This example shows how to create an image map with a clickable area. Each of these areas is a hyperlink.

Convert an image to an image map

This example shows how to set a normal image as an image map.

Image label

tags	description
	defines the image.
<map>	defines the image map.
<area>	defines the clickable area in the image map.