HTML image

HTML image

---

Define <img> HTML page using the hashtag. <img> properties: src alt .

---

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

Insert pictures from different locations
This example shows how to display pictures of other folders or servers into a Web page.

(More instances can be found at the bottom of this page.) ）

HTML Images - Image Tags (lt;img)) and Source Properties (Src)

---

In HTML, the image is <img> by the label.

<img> it contains only properties and does not close the label.

To display an image on a page, you need to use the source src src "source". The value of the source property is the URL address of the image.

The syntax that defines an image is:

The URL refers to where the image is stored. If an image named ".gif" is in the images directory of the www.w3cschool.cn, its URL is //www.w3cschool.cn/images/boat.gif.

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

HTML image - Alt property

---

alt property is used to define a string of pre-prepared replaceable text for the image. Practice how to use the alt in Programming Testing.

The value of the replacement text property is user-defined.

When the browser is unable to load the image, the replacement text property tells the reader what information they have lost. T he browser displays this alternative text instead of the image. It's a good habit to add replacement text properties to images on the page, which helps to display information better and is useful for those who use plain text browsers.

HTML Image - Sets the height and width of the image

---

height (height) and width properties are used to set the height and width of the image. You can resize an image in a programming test.

The default unit of property values is pixels:

Tip: A good habit of specifying the height and width of an image. I f the image specifies a height width, the specified size is retained when the page loads. If you do not specify the size of the picture, loading the page can break the overall layout of the HTML page.

Set the image border

---

In <img> border border to specify the border weight in pixels. A thickness of 0 indicates that there is no border around the picture.

Set the image alignment

---

By default, the image appears as left-hand alignment on the page, and in <img> can use the align property to set the alignment of the image: center (center) right (right).

Basic considerations - helpful tips:

---

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

Note: When loading a page, pay attention to the path to insert the page image, if the location of the image is not set correctly, the browser can not load the picture, the image label will display a broken picture.

---

Arrange the pictures
This example shows how to arrange images in text.

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

Set up an image link
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 clickable areas. Each of these areas is a hyperlink.

HTML image label

---

Label	describe
<img>	Define image
<map>	Define image map
<area>	Define the click area in the image map