After copying some graphics and image special effects codes from some websites, problems such as the pictures not being displayed always arise. Here is a related tutorial specially written for these beginners! Regarding the application of images in web pages, that is, the application of image tags in web pages, let me summarize it for you!
1) Overview of image markup.
If a webpage only has text but no images, it will lose a lot of vitality. Images are a very important aspect in webpage production. HTML Professional provides the <IMG> tag to output images to the webpage. This tag has SRC, ALT, ALIGN, BORDER, WIDTH and HEIGHT attributes.
2) Introduction to attributes.
SRC attribute. For the <IMG> tag, its SRC attribute is a necessary attribute, that is, SRC must be assigned a value in the <IMG> tag and is an indispensable part of the tag. At this time, IMG should be written in the following format:
The following is a quotation fragment:
<IMG SRC="parameter value">
Among them, the parameter value is the full file name and path of the image.
We know that image files generally take up much more space than plain text files such as HTML documents, and web design often requires adding many images to increase appeal. If these image files are added to the HTML document, the HTML document will become very large. Large, transmission on the network will inevitably be very slow.
The <IMG> tag does not actually add the image to the HTML document, but tells HTML: Which image file is it? Where? So that HTML can call it from the original location of the image file. The function of the SRC attribute is to answer these two questions, so the parameter value of the SRC attribute must have the full file name of the image file, that is, the file name and extension, such as logo.gif, which answers the question of which image file it is; The parameter value must also have the path to the image file so that HTML knows where to find the image file. Among the parameter values of the SRC attribute, how to write the path of the image file is often a problem for beginners.
The path to the image file can be a relative path or a URL. The so-called relative path refers to the path formed by the relative position of the file to be linked or embedded into the current HTML document and the current HTML file. If the HTML file and the image file (assuming the name is logo.gif) are in the same directory, you can write the code as <IMG SRC="logo.gif">; if the image file is placed in a directory where the current HTML file is located subdirectory (assuming the subdirectory is named images), the code should be <IMG SRC="images/logo.gif">; if the image file is placed in the upper directory of the directory where the current HTML file is located (assuming the upper directory is named home ), the relative path must be a quasi-URL, that is, use "../" to represent the developer's website, followed by the path of the image file in the developer's website. For example, assuming that home is a directory under this website, the code should be <IMG SRC=”../home/logo.gif”>. If home is a subdirectory under the directory king under the website, the code should be written is <IMG SRC=”../king/home/logo.gif”>.
Other attributes. The ALT, ALIGN, BORDER, WIDTH, and HEIGHT attributes of the <IMG> tag are optional. The ALIGN attribute is the alignment of the image, and the parameter values are left, center, and right; BORDER is the border of the image, and its parameter is greater than or equal to 0, and the default unit is pixels; WIDTH and HEIGHT attributes It is the width and height of the image, and the default unit of its parameters is pixels; the ALT attribute is the text displayed when the mouse moves over the image. I would like to remind everyone that you must use this attribute when making web pages. What is the purpose of doing this? It can display prompt text when the image cannot be displayed for some reason, which increases user friendliness.