Web page creation question: Image file path

This article is original by 123WORDPRESS.COM Lightninger. You can remove this sentence when reprinting it, but do not change the content of the article under any excuse or in any way, otherwise you will be at your own risk! Please indicate the author and source when reprinting.
A long time ago until now, many netizens have asked me similar questions, especially after copying some graphic image special effects codes from this site, there are always problems such as pictures not being displayed. Here I write a relevant tutorial specifically for these beginners. If you don’t have any questions in this regard, please walk away!
Regarding the issue of applying images in web pages, that is, the application of image tags in web pages, let me summarize it for you below!
1) Overview of image labeling.
If a web page only has text but no images, it will seem to lose a lot of vitality. Images are a very important aspect in web page production. HTML professionally provides the <IMG> tag to output images to web pages. This tag has SRC, ALT, ALIGN, BORDER, WIDTH, and HEIGHT attributes.
2) Attribute introduction.
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:
<IMG SRC="parameter value">
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 its appeal. If these image files are to be added to the HTML document, the HTML document will become very large and will inevitably be slow to transmit over the network.
The <IMG> tag does not actually add the image to the HTML document, but tells HTML: which image file is it? Where? So that the HTML goes to the original location of the image file to call it. The function of the SRC attribute is to answer these two questions, so the parameter value of the SRC attribute must include 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; its parameter value must also include the path of the image file so that HTML knows where to find the image file.
How to write the path of the image file in the parameter value of the SRC attribute 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 in 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, the code can be written as <IMG SRC="logo.gif">; if the image file is placed in a subdirectory of the directory where the current HTML file is located (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 as <IMG SRC=”../king/home/logo.gif”>.
Other properties. The ALT, ALIGN, BORDER, WIDTH, and HEIGHT attributes of the <IMG> tag are optional. The ALIGN attribute is the alignment of the image, and its 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; the WIDTH and HEIGHT attributes are the width and height of the image, and the default unit of their parameters is pixels; the ALT attribute is the text displayed when the mouse moves over the image. Here we remind everyone to use this attribute when making web pages. What is the purpose of doing this? When an image cannot be displayed for some reason, a prompt text can be displayed, which increases user friendliness.

<<: Start nginxssl configuration based on docker

>>: Implementation of MySQL scheduled backup script under Windows