Chapter 6 images on HTML webpages
Key points of this Chapter
IMG mark
Attributes of images on webpages
Text Mixing
Set image attributes using CSS style sheets
Directory:
6.1 add images to the webpage
6.2 text and Image Layout
6.3 webpage background image
6.4 add images to webpages using CSS styles
6.1 IMG tag and Its Attributes
Source file of the SRC Image
Alt prompt text
Width, height width, height
Border border
Vspace Vertical spacing
Horizontal Distance
Align Arrangement
6.2 text and Image Layout
The align attribute is used to set the arrangement between images and texts. The absolute alignment of the image is different from that of the Relative Text. The effect of absolute alignment is the same as that of text. There are only three types: left, right, and center. Relative Text alignment refers to the relative position of an image and a line of text.
The middle line of top text is above the picture
The middle line of the middle text is in the middle of the image
Bottom's text center is located at the bottom of the image.
Left image on the left side of the text
Right: The image is on the right of the text.
The bottom line of absbottom text is at the bottom of the image.
The bottom line of the absmiddle text is in the middle of the image.
Baseline alignment of English text line
Texttop English text alignment
6.3 webpage background image
1. Set the page background color
The bgcolor attribute in the subject tag <body> allows you to set the background color of the entire page.
<Body bgcolor = "color_value">
Similar to the text color, it also uses the color name or hexadecimal value to show the color effect. Color_value refers to the color value.
2. Set the background image of the page
The jpg or GIF image can be used as the background image of the page, which is implemented by the background attribute in the subject mark <body>. It is different from inserting an image into a webpage. It is placed at the bottom layer of the webpage, and texts and images are all placed on it. Text and images will overwrite the background image. By default, the background image appears repeatedly in the horizontal and vertical directions until the entire page is fully covered.
<Body background = "img_file_url">
Img_file_url refers to the path of the image file.
6.4 add images to webpages using CSS styles
1. Apply CSS image borders
2. Use CSS to set text and text wrapping
The float, margin, and padding attributes can be used to enclose an image.
Float: sets the element to float left or right;
Margin: sets the spacing between images and other elements;
Padding: Set the padding between the image and the border;
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
