As in HTML, insert an image graphically, background. How to insert an image in HTML from the computer, in the center, into the table

The visual part is one of the most important when working with sites. Of course, it is inferior to the functional, but it should not be discarded. Let's talk about how to install an HTML image from your computer to your site. One possibility for this is provided or a few? How in HTML to insert an image so that other people see it? What is better to use - computer or server?

What is HTML?

Markup language for hypertext documents - that's how this abbreviation stands. With its help the backbone of the future site is formed, here the placement of the main elements is being worked out. Then cascading style sheets and php-files, responsible for data transfer, are already configured. But at the heart of any page is HTML. With its help, by the way, the images are adjusted. You can and in other ways, but if you need to ensure the initial loading of something simple, for example, a drawing, then use it. And now we turn to the question of how to insert an image in HTML.

Using the img tag

We begin to use graphics. How do I 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 in which there is a replacement content. To it carry only four parts of language of hypertext marking. One is src, height, and width, they will be discussed later. The other three are object, embed (to embed media content) and iframe (use of flames). The tag works as if it contains a lowercase element. The only difference is that external content is used, which is displayed. In this case, there must be a third-party file, which, in fact, will be loaded. If you have a question about how to insert a background image into HTML, then it's better to drop it. Because it will be displayed only when the computer itself, on which the image is located, is running.

Using the 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 image that should be loaded, use src. The general scheme is as follows: you must use this attribute, the equal sign and specify the address.

Once the browser reaches the tag when parsing the HTML, it immediately creates an area in which the line item will be displayed. It is in it and will be loaded external file. The path must not contain any errors, since it is the program that will run on it. And if she does not find the file, then the error icon will be displayed, which does not look very aesthetically. How do I insert an image into an HTML document table? It is necessary to write down all the necessary code in the desired cell.

Configuring the image on the server: height and width in the img tag

So we know how to insert an image in HTML. We'll figure it out now, how to set it up. As soon as the file starts to be downloaded to the user's computer, the picture size will be determined immediately. And what if its initial parameters do not match what you want? In this case, the height and width parameters (indicated in pixels) can help. In this case, the code will be written as follows: first the src and the file address. Then a similar design specifies width, and what should be the width. And the last is height and height. Webmasters often make such a mistake: they upload a large file to the server, the size of which is several megabytes. The path is prescribed and the image is corrected to the required size. As a result, the user can see how a small image is loaded quite slowly. This is not very attractive looks from the outside.

Recommendations for work

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. Also, care should be taken to optimize weight. It is necessary to reduce the weight of graphic files without loss of quality by transferring them to other extensions or using special online services and programs. It will be appreciated not only by users of the site, but also by a webmaster - after all, such files will be loaded faster and take up less space on hosting.

Example of recording capabilities

Let's look at how you can write the path to the image:

1. One file name.

2. Specify the address of the image located on one local computer (server).

3. The detailed path to the location of the file on the other host.

When using the example from the first point, the image should be in the same directory as the image. The second location is a subfolder relative to the current page. The third example specifies the absolute path where the desired image can be found. In the latter case, note that the picture can be on any server (if such use is not prohibited in the .htaccess file). However, if it is removed, then the image on your site will disappear. The peculiarity of HTML is that you only need the markup document itself, and everything else can be loaded from third-party servers. These methods are often used to increase the download speed (but here you need to know how to use this tool).

Assigning alt and title to img?

What should I do when a graphic file is not loaded with an HTML document for some reason? If there is an incorrect path or something else, you must use the alt attribute. It performs the task of alternative representation of the picture. Suppose that the schedule is not loaded. But the browser will still form the area under the image. Also it is necessary in cases when the user expects a load, and it is necessary to show him that the program is preparing to accept the schedule.

To display the accompanying text, use the special title attribute. In fact, this is a tooltip, and you can use it for almost any visible element of the HTML code. This is good because it allows us to explain certain aspects. The use of the two attributes shown in this sub-heading looks like this: to the example above, after height, alt is first added, then title.

And these attributes can not only serve to create convenience for the visitor. They can positively affect the promotion of the site. So, for this you should always use keywords in them. This will improve the ranking of the resource in the ranking of sites and services of images of search engines. But in everything you should be careful and rational.

Align Pictures

For images, and generally all 4 elements of the markup language, which were previously mentioned, the attribute align was introduced. With it, you can change the location of the picture. By default, it is aligned to the bottom edge. For this, the bottom is responsible. And how to do on the top? This requires top. In practice, it will look like this: after src, where the address of the image is specified, add the attribute align and its value.

And in the line where the picture is located, it will be aligned on the top edge. How in HTML to insert the image on the center? There is one more possibility of recording - middle. With its use, nothing fundamentally changes. If you use this code, the image will be aligned in the middle. You can also make the text wrap around the picture. To do this, the right and left attributes are applied. In such cases, the image becomes "floating". The offset to the left looks the same as the other spelling variations. Using right will produce 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, the problem is that the text is too close to the image. Because of this, an adhesion effect is created, which is quite unpleasant for the eye. But you can fix this with a cascading style sheet or HTML code. Use the vspace and hspace attributes for such changes. The first one specifies the indentation from below and from above, and the second one - from the right and from the left.

Making the background

How to insert an image into the HTML page of the site? The background attribute is very useful for achieving this goal. It is part of the body element. Its purpose is to show the path to the graphic file, which should fill a page, table or a separate cell. In practice, the usage looks like this: the address of the image is already written as the value of the bodybackground parameter. The background image set in this way is repeated along the ordinates and abscissa axes starting from the upper left corner. Previous here dock with the following. If there is a desire to fill something with just one color, and not use a picture, then you can use such a 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 it, you only need to specify which color the page or its part will be filled with. Here's how to insert an image into HTML from your computer to make it a background and change the color. In general, in order to fully master HTML, it is enough to give him a week of time, and that's enough with a vengeance.

Conclusion

HTML, although it can not claim a full-fledged programming language, is nevertheless extremely valuable when creating a website. He is the true skeleton. And we can say with confidence that now you know how to work with background and stationary pictures, and also attach links to them. Therefore, the answer to the question of how to insert an image in HTML should be clear.