Home > Developer > Web Develop
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.
8.2 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.
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.
8.3 Background image<body background= "/i/eg_background.jpg" >
Tips:
Both GIF and JPG files can be used as HTML backgrounds.
If the image is smaller than the page, the image repeats.
8.4 Arranging pictures① an image that is not set to alignment:
<p> image in text </p>
② an image that has the alignment set:
<p> image in text </p>
<p> image in text </p>
<p> image in text </p>
<p> Note that bottom alignment is the default alignment method. </p>
8.5 Floating Pictures①
A paragraph with an image. The Align property of the image is set to "left". The image floats to the left of the text.
②
A paragraph with an image. The Align property of the image is set to "right". The image floats to the right of the text.
8.6 Adjusting the image sizeYou can zoom in or out of an image by changing the value of the "height" and "width" Properties of the IMG tag.
8.7 Making Image Links<a href= "/example/html/lastpage.html" >
</a>
8.8 Creating an image mapPlease click on the planets on the image to enlarge them.
(Example: Http://www.w3school.com.cn/tiy/t.asp?f=html_areamap)
Src= "/i/eg_planets.jpg"
Border= "0" usemap= "#planetmap"
alt= "Planets"/>
<map name= "Planetmap" id= "Planetmap" >
<area
Shape= "Circle"
Coords= "180,139,14"
href = "/example/html/venus.html"
target = "_blank"
alt= "Venus"/>
<area
Shape= "Circle"
Coords= "129,161,10"
href = "/example/html/mercur.html"
target = "_blank"
alt= "Mercury"/>
<area
Shape= "Rect"
Coords= "0,0,110,260"
href = "/example/html/sun.html"
target = "_blank"
alt= "Sun"/>
</map>
Note: the "Usemap" attribute in the IMG element references the "id" or "name" attribute in the Map element (depending on the browser), so we have added the "id" and "name" attributes to the map element at the same time.
8.9 converting an image to an image map<p> please move the mouse over the image to see how the status bar coordinates change. </p>
<a href= "/example/html/html_ismap.html" >
</a>
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.
HTML Learning Document-8, HTML image
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
