HTML image

Examples

Norwegian Mountain Trip

try it"

Online examples

Insert an image
This example demonstrates how to display images in a Web page.

Insert pictures from different locations
This example demonstrates how different folder or server images to display Web pages.

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

HTML image - the image tag (<img>) and a source attribute (Src)

In HTML, images are defined by the <img> tag.

<Img> tag is empty, which means that it contains attributes, and not closing tag.

To display the image on the page, you need to use the source attribute (src). src refers to the "source". Value of the source attribute is the URL of the image.

Custom image syntax is:

URL refers to the location for storing images. If the image is named "boat.gif" located www.w3school.com.cn the images directory, then the URL is http://www.w3school.com.cn/images/boat.gif.

The browser will display the image in the document where the image tag appears. If you put an image tag between two paragraphs, the browser will first display the first paragraph, and then display the image displayed last second paragraph.

HTML images - Alt Attribute

alt attribute is used as an alternative definition of a string of text images prepared.

Replace text properties values ​​are user-defined.

When a browser can not load images, replace text attributes tell readers they lose information. In this case, the browser will display the alternate text instead of images. The image on the page are combined with the substitution text property is a good habit, which helps to better display information, and for those who use plain text browser is very useful.

HTML Images - Set the image height and width

height (height) and width (width) property for setting the width and height of the image.

The default attribute value in pixels:

Tip: A good image of the specified height and width of the habit. It will retain the size specified if the image height is specified width, when the page loads. If you do not specify the size of the picture, it is possible when the page loads would undermine the overall layout of the HTML pages.

Basic precautions - useful tips:

Note: If an HTML file contains ten images, then in order to display this page correctly, you need to load 11 files.Load picture takes time, so our advice is: caution picture.

Note: When the page is loaded, to pay attention to insert page image path, if the position of the image can not be set correctly, the browser can not load the image, the image tag will display a broken image.

More examples

Arrangement pictures
This example demonstrates how to arrange the images in the text.

Floating Images
This example demonstrates how to make the image float to the left or right paragraph.

Setting image link
This example demonstrates how to use the image as a link.

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

HTML image tag