May 02, 2021 HTML
3. HTML Images - Image Tags (lt;img)) and Source Properties (Src)
5. HTML Image - Sets the height and width of the 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.) )
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:
<img src="url" alt="some_text">
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.
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.
<img src="boat.gif" alt="Big Boat">
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.
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:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
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.
In
<img>
border
border
to specify the border weight in pixels.
A thickness of 0 indicates that there is no border around the picture.
<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">
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).
<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">
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.
Label | describe |
---|---|
<img> | Define image |
<map> | Define image map |
<area> | Define the click area in the image map |