Learn the basics of Web page creation tutorial (4) Image label

Tutorials | Getting Started | Web page

Related articles:

　　Learn the basics of Web Authoring Tutorial (1) Web authoring

　　Learn the basics of Web making (2) typography labels

　　Learn the basics of Web page creation tutorial (3) Font label

Image Label　　

1. How to use :

2. Label explanation : At present, there are two types of Web graphics, GIF and JPG two formats. GIF format is only 256 colors, but the color is relatively bright and clean and beautiful, suitable for computer graphic design. JPG format image is full color distortion compression, more suitable for a large pile of color pictures, such as photos are more suitable for use in JPG format.

3. Examples of use:

Basic usage	Usage: The most basic way to display a picture is to not add any attributes! Where/uploadpic/2007-7/200777152731585.gif is the file name of the picture.
Raw code	/uploadpic/2007-7/200777152731585.gif" > I am a model of Web teaching network!
Show results	I am a web-teaching network model!

Long width setting	Usage: set the size of the picture, in fact, can not be set, but set a better, you can speed up the browsing speed, because the browser does not have to spend time there to calculate your picture how big! You can also set the size of the picture at your own discretion.
Raw code
Show results

Plus description	Usage: When you move the mouse over the picture, the description text appears automatically. In addition, when the picture is not displayed or displayed, it will be replaced with this paragraph of text, so that users know what the picture is not displayed what is used, the Web standards strongly recommend that you add this explanation.
Raw code	move to the map to see.
Show results	Move to the diagram to see.

Picture position	Usage: Picture Position setting! Can rely on Zofang: Align=left, rely on align=top, lower Align=bottom, vertical set of align=middle, which can be left to create "text around the map" effect.
Raw code	me to the right!
Show results	I'll lean to the right!
Raw code	me to the right!
Show results	I'm on the left!
Raw code	text to Zimu head!
Show results	Words to Zimu Head!
Raw code	text to the bottom of my feet!
Show results	Text to the bottom of my feet!
Raw code	text to the middle of me!
Show results	Text to the middle of me!

Border settings	Usage: Set the border size, usually set to 0 feel more beautiful! Because the inner frame is really not very beautiful ... Especially when connecting, setting a border is simply ....
Raw code
Show results

Left and right spacing	Usage: The horizontal distance from the text, usually set a little bit, so as not to rely on the text too close, it looks like there will not be too crowded feeling.
Raw code	The character on the left right
Show results	The word to the right of the left word

Up and down spacing	Usage: The vertical distance from the text, usually set a little bit, so as not to rely on the text too close, it looks like there will not be too crowded feeling.
Raw code	The words above <br><BR>"
Show results	The words above The following words

　　Important concepts of Web page images

1. about the path : Now let's talk about the picture path, the path is not right, no matter how correct your page name is written, because the browser can not find your path to the image, so, let's see how to use the path correctly. Some people do not like to put the Web page and picture all in the same directory, such as someone put the picture in the C:\image, and the page file in the C:\Demo, so how do we write the correct path to the picture? Several common situations are sorted into the following table:

HTML file location	Position of the picture	Writing	Case Description
C:\Demo	C:\Demo		Graphics and text are in the same directory
C:\Demo	C:\demo\image		Figure in the next level of the page directory
C:\Demo	C:\		Figure on the top level of a page
C:\Demo	C:\image		Graphics and text on the same floor but different directories

Perhaps some people see not understand, first explain, "." /"is to go back to the previous level of the directory meaning. "image/" is the meaning of entering the next level of directory image, and ". /.. /image/"means to go back to the previous level and then into the directory image. All of the above we use the concept of "relative path".

2. Image Unit : Perhaps you often see PX this unit, yes, this is our most common in the production of the Web page of a unit. The complete formulation of this unit is "Pixels", which we call "pixel". Pixel, is a small point of light on the screen, but the size of this small point is not fixed, for example, the screen itself 15 inches, not because of any of your settings to become 17 inches. However, its resolution can be changed, we commonly have the following types of resolution: "640x480", "800x600", "1024x768" and so on. For one of the 640x480, it represents a 640-point light on the screen, with a height of 480 light points, and if we adjust the resolution to 800x600 its width is bound to change from 640 to 800 points of light.

3. Image format : A picture of a Web page currently only GIF format (that is, a picture with an extension of GIF, such as: bg.gif) and a JPG format (that is, a picture with an extension of JPG, such as: Bg.jpg) is accepted by the General browser. Other such as BMP format or PCX format can not be used on the Web page, unless you need to use, then use the image processing software to make the conversion of the format bar!