HTML Learning (vi) images

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.

Example 1: Inserting an image

<! DOCTYPE html>
Example 2. Display a picture of another folder or server to a Web page.
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.
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.
Example 3: Adding a background map
Example 4. The arrangement of images in text
Example 5. Shows how to float a picture to the left or right of a paragraph
Example 6: Resizing an image
Example 7. 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.
Example 8. Making Image Links
Example 9. Demonstrates how to create an image map with a clickable area. Each of these areas is a hyperlink.
Example 10. Shows how to set a normal image as an image map.
<! DOCTYPE html>
<area> tags
Definition and usage
<area> tags define the area in the image map (note: Image mapping refers to an image with a clickable area).
Area elements are always nested in the <map> tag.
Note the Usemap property in the: tag is associated with the Map element name property, creating a link between the image and the map.
The difference between HTML and XHTML
,<area> does not have an end tag in HTML.
In XHTML,,<area> must be closed correctly.
Note the Usemap property in: can refer to the ID in <map> or the Name property (as determined by the browser), so we need to add both the ID and the name two properties to <map>.
Required Properties

 
          
 
  
           
 
            
 
             
Property
 
             
Value
 
             
Describe
 
            
 
            
 
             
Alt
 
             
Text
 
             
Defines the alternate text for this area.
 
            
 
           
 
 
          
Optional properties

 
          

  
           
 
            
 
             
Property
 
             
Value
 
             
Describe
 
            
 
            
 
             
Coords
 
             
Coordinate values
 
             
Defines the coordinates of a clickable area (an area that is sensitive to the mouse).
 
            
 
            
 
             
Href
 
             
Url
 
             
Defines the destination URL for this zone.
 
            
 
            
 
             
Nohref
 
             
Nohref
 
             
Excludes an area from the image map.
 
            
 
            
 
             
Shape
 
             
Default
 
             
Defines the shape of the area.
 
            
 
            
 
             
 
             
Rect
 
             
 
            
 
            
 
             
 
             
Circ
 
             
 
            
 
            
 
             
 
             
Poly
 
             
 
            
 
            
 
             
Target
 
             
_blank
 
             
Specifies where to open the target URL specified by the href attribute.
 
            
 
            
 
             
 
             
_parent
 
             
 
            
 
            
 
             
 
             
_self
 
             
 
            
 
            
 
             
 
             
_top
 
             
 
            
 
           
 
          
Cases:
image map with clickable area :
<map name= "Planetmap" id= "Planetmap" ><area shape= "Circle" coords= "180,139,14" href = "venus.html" alt= "Venus"/><area shape= "Circle" coords= " 129,161,10 "href =" mercur.html "alt=" Mercury "/><area shape=" rect "coords=" 0,0,110,260 "href =" sun.html "alt=" sun "/></map>
HTML Learning (vi) images