The visual part is one of the most important when working with sites. Of course, it is inferior to the functionality, but it should not be discounted. Let's talk about how to set an HTML image from a computer to your website. Is there one possibility for this or several? How to insert an image in HTML so that other people can see it? What is better to use - a computer or a server?
What is HTML?
The markup language of hypertext documents is how this abbreviation is deciphered. With its help, the backbone of the future site is formed, the placement of the main elements is being worked out here. Then cascading style sheets and php files responsible for data transfer are already configured. But any page is based on HTML. With its help, by the way, images are configured. It is possible in other ways, but if it is necessary to ensure the initial loading of something simple, for example, a picture, then use it. Now let's move on to asking how to embed an image in HTML.
Using the img tag
Getting started using graphics. How to insert a background image into an HTML document? And in the first place, this means inserting a file as a page object. For such an addition, img is used. This tag is a line item that has replaceable content. Only four parts of the hypertext markup language are referred to it. One is src, height and width, which will be discussed later. The other three are object, embed (to embed media content) and iframes (using flames). The tag works as if it had a string element. The only difference is the use of extraneous external content, which is displayed. In this case, there must be a third-party file, which, in fact, will be uploaded. If you have a question about how to embed a background image in HTML, it is best to drop it. Because it will be displayed only when the computer itself is running, on which the image is located.
Using src attributes
So, we are working on the question of how to insert a graphic image into an HTML document. To specify the path to the drawing to be loaded, use src. The general scheme is as follows: you must use this attribute, the equal sign and specify the address.
As soon as the browser reaches the tag when parsing the HTML, it will immediately create an area in which the line element will be displayed. It is in it that the external file will be loaded. The path should not contain errors, since the program will go exactly along it. And if she does not find the file, an error icon will be displayed, which does not look very aesthetically pleasing. How to insert an image into the table of an HTML document? It is necessary to register all the necessary code in the desired cell.
Setting the image on the server: height and width in the img tag
So we know how to embed an image in HTML. Now let's figure out how to configure it. As soon as the file starts to be downloaded to the user's computer, the image size will be determined immediately. But what if its initial parameters do not correspond to the desired ones? In this case, the height and width parameters (indicated in pixels) can help. In this case, the code will be written as follows: first src and the file address. Then, by a similar construction, width is indicated, and what width should be. And the last one is height and height. Webmasters often make this mistake: they upload a large file to the server, the size of which is several megabytes. The path is registered and the image is adjusted to the required size. As a result, the user can see how a small image is loaded quite slowly. It does not look very attractive from the side.
Work recommendations
To avoid negativity, reduce the size of the image in advance. If you are not sure which parameters are needed for an attractive appearance, create a copy and experiment with it. You should also carefully approach weight optimization. Without loss of quality, it is necessary to reduce the weight of graphic files by transferring to other extensions or using special online services and programs. This will be appreciated not only by users of the site, but also by the webmaster - because such files will load faster and take up less space on the hosting.
Example Recording Capabilities
Let's look at how you can specify the path to the image:
1. One file name.
2. Indication of the address of the image located on one local computer (server).
3. A detailed path to the location of a file located on another host.
When using the example from the first paragraph, the image should be in the same directory as the image. The second location is a subfolder relative to the current page. In the third example, the absolute path is indicated where you can find the desired image. In the latter case, note that the picture can be on any server (if such use is not prohibited in the .htaccess file). True, if it is deleted, then the image on your site will disappear. The peculiarity of HTML is that it requires only the markup document itself, and everything else can be loaded from third-party servers. These methods are often used to increase download speed (but here you need to know how to use this tool).
Appointment alt and title in img?
What to do when for some reason the image file is not loaded with the HTML document? If the path or something else is incorrectly written, you must use the alt attribute. It performs the task of an alternative representation of the picture. Let’s say that the graphics are not loaded. But the browser will still form an area under the image. It is also necessary in cases where the user is waiting for loading, and it is necessary to show him that the program is preparing to accept the schedule.
A special title attribute is used to demonstrate the accompanying text. This is essentially a tooltip, and you can use it for almost any visible HTML element. This is good because it allows you to clarify certain aspects. The use of the two attributes given in this subtitle looks like this: to the example considered above, first, alt is added after height, and then title.
Moreover, these attributes can not only serve to create convenience for the visitor. They can have a positive effect on website promotion. So, for this you should constantly use keywords in them. This will improve the ranking of the resource in the ranking of sites and image services of search engines. But everything should be careful and rational.
Align the pictures
For images, and indeed all 4 elements of the markup language that were previously mentioned, the align attribute was introduced. With it, you can change the location of the picture. By default, it is aligned to the bottom. The bottom is responsible for this. And how to do the top? This requires top. In practice, it will look like this: after src, where the address of the image is indicated, we add the align attribute and its value.
And in the line where the picture is located, it will be aligned to the top edge. How to insert an image in the center in HTML? There is another recording option - middle. When using it, nothing changes dramatically. When using this code, the picture will be aligned in the middle. You can also make the text flow around the picture. The attributes right and left are used for this. In such cases, the image becomes “floating”. Offset to the left looks the same as other spellings. Using right will give a similar result with the difference that the picture will be placed on the right. The application of these instructions has its own nuances. So, a significant problem is that the text is too close to the image. Because of this, a sticking effect is created, which is rather unpleasant for the eye. But this can be fixed with a cascading style sheet or HTML code. Use the vspace and hspace attributes for such changes. The first sets the indentation from the bottom and top, and the second - to the right and left.
Make background
How to insert an image into the HTML page of the site? A very useful attribute is the background attribute. It is part of the body element. Its purpose is to show the path to the image file, which should fill the page, table or a single cell. In practice, the use is as follows: the image address is already registered as the value of the bodybackground parameter. The background image set in this way is repeated along the ordinates and abscissas, starting from the upper left corner. Previous here are docked with subsequent ones. If you want to fill something with just one color, and not use a picture, you can use this brief description: the gamma number is indicated as a characteristic for the body bgcolor parameter. There have been small changes. As you can see, the bgcolor attribute is already used. For him, it is only necessary to indicate what color the page or its part will be filled in. Here's how to embed an image in HTML from a computer to make it a background and change color. In general, to fully master HTML, it is enough to devote a week to it, and this is more than enough.
Conclusion
HTML, although it cannot pretend to be a full-fledged programming language, is nevertheless extremely valuable when creating a site. He is a genuine skeleton. And we can say with confidence that now you know how to work with background and stationary pictures, as well as attach links to them. Therefore, the answer to the question of how to embed an image in HTML should be clear.