Inserting an image into an html document. Inserting Graphics

Hi all!!! In this article you will learn how to insert a picture into an HTML document. It's not difficult at all. But first, I would like to give you some recommendations regarding the images on the web page.

Advice: When you place pictures on a web page, do not get carried away with animated pictures, as this will distract the reader’s attention from the most important thing - the text. It's better to use regular pictures without animation.
Try to use unique images on your web pages. You can read how to make a unique picture, and you can take beautiful pictures.

Let's get started.

How to insert a picture in html?
So, as I said, there is nothing complicated here, add this html code.

kartinka is the name of the picture
jpg is the extension of the image. The extension can be gif, png, bmp.

If the picture is located in the images folder, then the path to the picture will be like this:

images - the name of the folder where the picture "kartinka.jpg" is located.

If the picture is on another site, then the code will be like this:

https://www.site is the site address.

Example :

To do this, simply enclose the image between the link element:

Attributes for images

ALIGN - this attribute is designed to wrap or align the image horizontally.
left - Left aligned, text will flow to the right.
right - Aligned to the right, text flows to the left.

Result :

right alignment

HSPACE - horizontal space from the image (in pixels).
VSPACE - vertical space from the image (in pixels).

Result :

indents from the image

HEIGHT - image height (pixels).
WIDTH - image width (pixels).

Result :

TITLE - This is the title of the picture. The title will be displayed if you hover your mouse over the image.

title=" Hello everyone - site!!!!}">

Result :

picture title

BORDER - this attribute is responsible for the size of the border around the picture. Frames appear in such cases when you make a picture a link. If you set the BORDER attribute to zero, the border will not be displayed.

Result :

And if you change the border value to 5:

Result :

Any picture can be used as a background. To do this, add the background attribute to the body tag.

background="your_background.jpg">

Text can be displayed on a picture background.

Example :

Result :

Picture as background

On this note, I could end the topic “How to insert a picture in HTML,” but I know that many are interested in the question of how to center the picture.
To center the picture, you just need to use this trick:

That's all for sure now. Let's move on to the next lesson.

Hello, dear readers of the blog site. We managed to talk in detail about which ones and in what cases it would be best to use for inserting pictures into the pages of your website in the article, the link to which is given just above.

Today we will look in detail at all aspects of using the Img tag to insert images, see how to set text to wrap around a photo in Html code, learn how to use images as a background for a site, how to change their size and set alignment (center, left and right).

Using the Img tag and its Src, Width and Height attributes

So let's see how you can use graphics on your website. Firstly, it is possible to insert an image as an element (object) into the Html code of the page. Just such an insertion is carried out using Img, which is special - inline element with replaced content, which include only four, some of which we have already mentioned, and the other three - (a modern use of frames), (for inserting video and other media content).

It behaves exactly like an inline element, but extraneous external content is displayed inside it (photo in the case of Img or video and flash in the case of Object and Embed). Any of these four elements implies the presence of an external file that will be loaded into this very area, specified in its attributes.

To indicate the path to the graphic file that should be loaded onto the page, use a special Src attribute.

The user's browser, when parsing the Html code of the page, as soon as it encounters the Img tag in it, immediately creates an area for the inline element into which an external file (for example, a photo) is loaded. The browser takes the path to the file from the contents of Src.

When an image begins to download from your server to the user’s computer, the browser determines the true dimensions of this image and expands by these same dimensions the line area that it created when it detected the Img element in the code.

If you want the browser to immediately allocate an area of ​​the required size for this element, and not then change it when receiving data about the size of the loaded image, then you will need to specify Width and Height attributes.

If you set them, then the user’s browser creates an area with the required dimensions and will fit your photo there, even if it is of a different size. By the way, sometimes you come across such an error on the websites of novice webmasters.

A huge graphic file weighing several megabytes is uploaded to the server (immediately after photographing without processing) and the path to it is written in Src. And so that the image does not occupy the entire screen, Width and Height are added to the Img tag with acceptable dimensions in width and height.

And what is the result? A visitor to such a site observes a frustratingly slow loading of the image into a relatively small area specified in the mentioned attributes (several megabytes of weight fit into the size of 300 by 400 pixels).

Therefore, immediately make pictures for posting on the Web of the same size that you will display on the site and enter in the Width and Height of the Img tag. Respect your users and don't waste their traffic (especially mobile). you can, for example, in FastStone Image Viewer or any other graphic editor, for example, .

By the way, in addition to reducing the size of images for insertion into website pages in advance, you should also approach weight optimization with the utmost care. Sometimes it is possible to achieve a multiple reduction in the weight of graphic files without loss of quality, which will lead to much faster loading and reduce the load on the hosting server. You can use a very convenient and effective tool for this purpose.

Now let's see how you can specify the path to the image file in the Src of the Img tag. Actually, you can use and, which I have already written about in some detail in the above article. It all depends on the nuances and convenience.

Those. Src may contain, for example, the following entries:

In the first case, the graphic file should be in the same folder as the file of your web page (if you use , the first two options are unlikely to suit you, although this is very convenient for setting a background image in CSS). In the second case, the graphics are located in a subfolder relative to your page file, and in the third case, the absolute path to the file with the image is indicated in Src.

In general, according to the rules of the Html language, only the document itself (web page) must be on your server, and all other documents and files (graphics, videos, scripts, styles) that will be loaded along with it can be located on different servers.

This, by the way, is one of the ways to increase. And the same visit counters that you will probably use on your resource to monitor will also load their informers and scripts from hosts other than yours.

How to insert a picture with a link, Alt and Title assignment in Img?

If Img is inherently an inline element, then it can be simply capitalize, which means there is nothing stopping us from making the image a link by enclosing this tag inside a hyperlink. In general, I already wrote about this in some detail in a recent article about, but it wouldn’t be a sin to repeat myself a little.

Ru/image/webcamxp.png">

In the IE browser, a three-pixel wide frame will appear around the image you linked. To remove it, you will need to add it to the Img tag Border attribute with value zero:

For all those cases when a graphic file for some reason cannot be loaded along with an Html document (the path to it is not written correctly or something else), a special one is provided Alt attribute.

Alt acts as an alternative image view. What happens when graphics don't load? All the same, the browser, having detected the Img element in the code, forms an area under it, which, depending on the browser used by the user, can either remain at a given size or collapse.

But so that the user has the idea that there should be a picture at this place on the page, you enter Alt in Img, where you enter text describing what should be pictured here. The contents of Alt will be displayed in the area of ​​the unloaded photo.

Well, and besides this, for pictures in Html code, as well as for other elements of the hypertext markup language (for example, all for the same hyperlinks), it is possible to show some accompanying text when the user hovers the mouse cursor over them.

This is done using a special attribute Title, which in our case is inserted into Img. It is essentially a tooltip and can be used for almost all Html code elements visible on the page when you need to further clarify something.

Previously, by the way, adding Alt text also led to a tooltip, but now this behavior is being abandoned and this attribute now mainly serves only as an alternative text, and Title is used exclusively for tooltips.

Pngе" height="71" width="90" alt="" title="">

In fact, the contents of the Alt and Title Img tag not only serve for the convenience of visitors to your site, but can also have a very significant role in the success of promoting your project.

To do this, you need to remember to use , as I have written about this many times, for example, in an article about or in a publication about .

Keywords in Alt and Title (especially in Alt) can significantly improve, as well as in services. However, with this need to be careful, because it is quite easy to get under.

Wrapping text around an image in Html - the Align attribute of the Img tag

Now let's talk about aligning inserted images in Html code. All four inline elements with replaceable content (Img, Iframe, Object and Embed) have the ability to be aligned using the attribute Align. But it actually only applies to block elements, and the tags mentioned are inline tags.

Therefore, some Align values ​​for Img (for example, setting text to wrap around an image) will mean something completely different than when using the same attribute in block elements (etc.).

In general, aligning pictures using Align when used in Img can be divided into two groups.

So, what happens when we insert a graphic file into the text of a document? In fact, it appears as one big letter:

By default, bottom alignment is used, i.e. adding the align="bottom" attribute to the Img element will not change anything. But you can try to set the image alignment to the top edge by adding align="top" to the element:

Png" align="top">

In this case, the text in the line where the photo is located was aligned along its top edge.

There is another possible value for this attribute align="middle":

Png" align="middle">

In this case, the text in the line with the picture will be aligned in the middle of this same picture.

But in addition to vertical alignment, HTML also provides flow around pictures with text, what the values ​​are used for - Left and Right. This group of Align attribute values ​​is very different from the previous one.

When using the Left and Right values ​​inside the Img element, we achieve the so-called text wrapping around the image, which is specified in the Html code. In this case, the drawing becomes and the text begins to flow around it.

For example, with align="left" we get the following result:

Png" align="left">

The Left value in Img means that the photo floats to the left, and the text flows around it to the right. In the case of align="right" the image will float to the right, and the text will flow around it to the left:

Png" align="right">

When setting text to wrap around an image, there is one caveat - the text is located too close to it, which creates an unpleasant look sticking effect. This problem is very easy to solve with the help of , but pure HTML also has its own solution.

To do this, you can use the attributes of the Img element − Hspace and Vspace. They are used to press the wrapping text away from the image. Hspace specifies the left and right padding from the image to the surrounding text, and Vspace specifies the top and bottom. Indents are set in , for example:

Png" align="left" hspace="30" vspace="30">

Background - how to make a background for a website in pure Html

Graphic files can be used not only as page code elements, but also as a fill as its background. In general, in the HTML language you can set it either by color or using background images. Well, using CSS properties is one of the main elements, because there are no design elements inserted using Img on the pages of modern sites.

Therefore, background images play a very important role in modern CSS layout (we'll talk about this in the above article). For now, we'll look at how this is all done in pure HTML using the attribute Background element Body and , shows the path to the graphic file with which the web page or table (or its individual cell) will be filled.

For example, adding the following Background attribute to Body:

We will get a background for our site, consisting of a multiplied photo, which will fill the entire visible area like a tile:

The background image, starting from the upper left corner, is repeated along two axes at once (abscissa and ordinate). The subsequent one is connected to the previous one, etc. By the way, if you want to fill the background of a page or table with one color, then for this you need to use not the Background, but the attribute bgcolor, as the value of which you can insert , for example, like this:

Then we get the following background color specified via bgcolor:

In the same way as with the background attribute, bgcolor can also be used to set the background of the entire table or its individual elements.

Good luck to you! See you soon on the pages of the blog site

You might be interested

Whitespace characters and their formatting of code in Html, as well as special non-breaking space characters and other mnemonics
Tags and attributes of headings H1-H6, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard
Tables in Html - Table, Tr and Td tags, as well as Colspan, Cellpadding, Cellspacing and Rowspan for creating them Select, Option, Textarea, Label, Fieldset, Legend - Html tags for the form of drop-down lists and text fields
Embed and object - Html tags for displaying media content (video, flash, audio) on web pages
How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex output and other programs
How to insert a link and a picture (photo) into HTML - IMG and A tags
What is hypertext markup language Html and how to view a list of all tags in the W3C validator
Html forms for the site - tags Form, Input and Select, Option, Textarea, Label and others for creating web form elements
Font (Face, Size and Color), Blockquote and Pre tags - legacy text formatting in pure HTML (no CSS used)

The visual part is one of the most important aspects when working with websites. It is, of course, inferior in functionality, but one should not discount it ahead of time. Today we will talk about how to install an HTML image on your website. Is there only one possibility for this or several? How can I insert an HTML image into my website so that other users can see it? What is better to use for this purpose – a server or a computer? What is HTML? This abbreviation can be deciphered as follows: hypertext document markup language.

Using this language, the basis of the future site is formed. The placement of all the main elements of the site is also worked out here. Then php files that are responsible for data transfer and cascading style sheets are configured here. The basis of any web page is HTML. You can also make image adjustments using this language. You can perform this operation in other ways, but if you need to ensure the initial loading of some simple object, it is better to use it. Let's start exploring the issue related to inserting an HTML image.

How to use img tag?

Let's move on to the issue of using graphics. How can you insert an image into an HTML document? First of all, this operation means inserting a file as a separate page object. The img tag is used for this addition. This tag refers to inline elements that contain replaceable content. It includes only four parts of hypertext markup language. One of them is src, height, width. We will talk about them further. Other parts are object, embed, iframe. The tag works as if it had an inline element. The difference is that extraneous external content is used and displayed. In this case, there must be a third-party file that will be loaded. If you have questions about restoring a background image in HTML, it's best to discard them right away. It will only be displayed when the computer on which the image is located is running.

Using the src attribute

We are working on the issue of inserting a graphic image into an HTML document. To specify the path to the picture that will be loaded, use src. The general scheme is as follows: you need to use this attribute, the equal sign and enter the address. When the browser reaches the tag while parsing the HTML, it will create an area in which the inline element will be displayed. The external file will be loaded into it in the future. This path should not contain errors, since this is where the program will go. If this program does not find the file, an error icon will be displayed, which does not look very aesthetically pleasing.
In order to insert an image into a table in an HTML document, you need to write all the necessary code in the desired cell.

Image Settings

Now you know how to insert an image into HTML. Let's figure out how it can be configured. When the file starts downloading to the user's computer, the size of the image will be automatically determined. If the initial parameters of the file do not correspond to the desired ones, then the width and height parameters, which are specified in pixels, can help in this case. The code in this case will be written as follows: src, and then the file address. A similar instruction also specifies width and sets the width that should be. The last parameter is height and height. Quite often, webmasters make the following mistake: they upload one large file to the server, the size of which reaches several MB. Then the path is written and the image is adjusted to the desired size. Thus, the user can see how a small image loads very slowly. From the outside it doesn't look very attractive.

Recommendations for work

To avoid negative aspects in your work, try to reduce the image size in advance. Of course, if you are not absolutely sure what parameters you need to use for an attractive appearance, then you can simply create a copy and try to experiment with it. You also need to be extra careful when optimizing image weight. It is necessary to reduce the weight of graphic files without loss of quality by converting files to other extensions, using special programs and online services. This will be appreciated not only by site users, but also by the webmaster. Such files will take up less space on your hosting and load faster.

Example of recording capabilities

Let's consider how you can specify the path to the image.

1.Set only the file name;
2. Specify the address of the image located on the local computer (server);
3. Detailed path to the location of the file, which is located on another host.

If you use the example from the first point, the image must be in the same directory. In the second case, the location is a subfolder relative to the current page. The third example specifies the absolute path where the searched image can be found. In the latter case, it is worth paying attention to the following point: the image can be on any server, if such use is not prohibited in the htaccess file, but if it is deleted from there, the image will disappear on your site. The peculiarity of the HTML language is that only a markup document is required. All other components can be downloaded from third-party servers. These methods are often used to increase download speed. Here you need to know how to use this tool.

Purpose of alt and title

What should I do if for some reason the graphic file does not load with the HTML document? If it is spelled incorrectly, you need to use the alt attribute. This attribute performs the task of an alternative representation of the picture. Let's say that the graphics don't load, but the browser will still create an area for the image. This 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 graphics. To show accompanying text, you must use the title attribute. It's essentially just a tooltip and can be used on almost any visible HTML element. This is a good thing because it helps clarify some specific aspects. The use of the two attributes given in this subheading is as follows: after height, alt is first added to the example discussed earlier, and then title. These attributes can serve not only to ensure the convenience of the visitor. They can also have a positive impact on website promotion. For this reason, you should constantly use keywords in them. This will improve the ranking of the resource in search engine image services and website ratings. However, in everything you need to adhere to rationality and caution.

Aligning pictures

The align attribute was introduced for all four markup language elements mentioned earlier. Using this attribute, you can easily change the location of the picture. It is aligned to the bottom by default. bottom is responsible for this. How to make top alignment? To do this you need to use top. In practice, it will look like this: after the src attribute, where the user specifies the image address, the align attribute and its value are added. In the line in which the picture is located, it will be aligned to the top edge. How to center an image in HTML? There is another option for aligning the image: middle. Using this function will not change anything fundamentally.

When using this code, the image will be aligned in the middle. You can make the text flow around the picture. The left and right attributes are used for this. In such cases, the image becomes floating. Shift left looks the same as other spellings. Using the right attribute produces a similar result, but with one difference: the image will be placed on the right. The use of these structures has its own characteristics. For example, one of the important problems is text being too close to the image. As a result, a so-called sticking effect is created, which is very unpleasant for the eyes. This can be corrected by using HTML code or a Cascading Style Sheet. For such changes you must use the hspace and vspace attributes. The first one sets the indents on the right and left, and the second - on the bottom and top.

How to set a background

When inserting an image into an HTML site page, the background attribute is very useful. This attribute is part of the body element. The purpose is to set the path to a graphic file that should fill a separate cell, table or page. Using this object in practice looks like this: the address of the image used is written as the value of the bodybackground parameter. The background image set in this way will be repeated along the abscissa and ordinate axes, starting from the upper left corner.

Next, we’ll look at how to insert a picture into an HTML document and configure its display. To work, you only need the above-mentioned editor and browser.

If you still don’t have Notepad++ or have a problem downloading it and you are tormented by the question - how to insert a picture into html in notepad?

The answer is simple, working in a regular notepad differs only in that it does not highlight the code in different colors for readability and separation of the code from the text itself.

How to insert a picture into an HTML page

After installing the editor, the corresponding item will appear in the context menu that appears when you right-click on any file.

Now, to edit such a file, just call up the context menu by right-clicking on it, then “Edit with Notepad++”.

A test page will be used to observe the results of changes in the code.

To insert a picture into the html code, use a single line tag img. Its main attribute is the source of the photo.

This can be any file, on a hard drive, or a link to an image existing on the network. Framed with tags < p> p>.

To add a photo, you will need to enter the following line:

.

This is how it will look in the editor:

And this is how its presence will be displayed on the page:

Src indicates the source of the image. One file name is enough if the image file is in the same directory as the html document.

If the photo is located in another directory, then you will need to specify the path to it, starting from the folder in which the html file is located.

Advice! It is important to consider that the path to a given photo file should not contain Cyrillic characters. In addition, when writing a file name, case is important.

You can use an illustration from the Internet as a source. To do this, you only need to indicate a link to it in the attribute, instead of the location on the hard drive.

File path formatting table

To resize an image you will need to add two attributes: width And height. The value is formatted in the same way as for any attribute.

After the equal sign, you must specify the size in pixels.

If there are clearly defined dimensions of the illustration, it will be displayed on the page as follows:

Aligning and editing a picture

How to insert a photo in html in the center? To assign the position of the picture on the page, use align, related to the tag p.

Several values ​​are allowed for it: center(center), left(left edge) and right(right edge).

Here's what the image looks like on the page, centered to the right edge.

Important! To assign the location of the photo relative to the text, rather than the page, the align attribute must be used in the img tag. The values ​​are the same as for the tag attribute.

Depending on the specified value, the image will change its position relative to the text.

To place an image in the text, just enter the tag img(with all borders) in a text block in .

To add a border, use the border attribute with a numeric value that indicates the thickness of the border in pixels.

To set vertical and horizontal margins, use vspace And hspace. Their numerical value means the distance from the text to the image, directly in pixels.

In the example, the attribute vspace the value is set to 50 pixels.

The horizontal padding size will indicate the distance at which the text will be placed when wrapping around the image.

Two more useful attributes - alt And title. The first one sets alternative text for the image.

With it, if the image does not load for some reason, the text specified in the attribute value will be displayed instead.

In order to try out the capabilities of the attribute, you can move the file from the directory specified in the code.

Text specified as attribute value title, will display a tooltip when you hover the mouse directly over the image. In the code, its design is no different from other attributes.

After refreshing the page the result will be like this:

Tag Attribute Table img

	Description
src=””	Image source identifier. It can be used either saved on the hard drive or located on the network (the address is indicated instead of the location on the hard drive).
width=""; height=””	Image height and width indicators. If only one is specified, the second one is automatically scaled according to the first one. The numeric value indicates the number of pixels.
align=””	Attribute for the position of the image relative to the text. Valid values: top,middlebottom,leftright.
border=””	Assigns a border around the image. The numeric value corresponds to the thickness of the frame in pixels.
vspace=""; hspace=””	Indicators of indentation from adjacent elements vertically and horizontally. The value specifies the number of pixels between elements. When wrapping text, the attribute specifies the distance to the text.
alt=””	Assigns an alternative description in case the image for some reason did not load. The value is arbitrary.
title=””	Sets the hover tooltip text. The value is arbitrary.

Once you understand the above information, working with images will no longer be a problem.

Adding, formatting and placing pictures on the page will be simple and enjoyable.

HTML Basics. How to insert an image on a web page

How to insert a picture into HTML - editing, alignment, attributes

All that is known about this man is
that he was not in prison, but why he was not in prison is unknown.
Mark Twain.

This is a lesson about how to insert a picture in HTML, how to design it, how to wrap text around a picture, etc. After all, it is known that images make a site more attractive and different from other resources, so the ability to use a tag and its attributes is very useful on the modern Internet. But the main thing here is a sense of proportion!

An excess of graphics will make the html page heavier and, accordingly, increase its loading time. In addition, the presence of a large number of images will distract visitors from the main content of the site (unless, of course, graphics are the main content of the site). So, keep it in moderation and use it only where it is needed. And you will be happy!

In the lesson about, I already talked about how you can use pictures as the background of an HTML document. Now let's talk about how graphics are used in the “top layer” of an html page.

§ 1. How to insert a picture

To insert images into HTML, use the tag IMG With compulsory attribute SRC. This attribute tells the browser the path to the image file. Those. to insert a picture with the name logo.jpg to a certain place on the page (provided that both the page and the picture are located in one folder(directory)) you need to insert the following html code in this place:

src="logo.jpg">

If the picture and page are located in different directories (folders), then you need to specify the path to the image relatively pages. For example, if an html page is located in the directory (folder) site, in the same directory (folder) there is a subdirectory (folder) images, in which our image logo.jpg is located, then to insert it you need to write like this:

images/logo.jpg">

Or you don’t have to worry and point out full address of the picture. For example, like this:

http://www..png">

In the latter case, the browser will display the code like this:

Note. If the picture is located on your computer, but you want to insert it to the Internet page, then nothing will come of it. To do this, you must first move the image to some place in the Internet(For example, ). And indicate the full address in the page code up to this point with a picture.

In addition to the required attribute SRC at the tag IMG There are a few more optional attributes. Let's take a closer look at them.

§ 2. Specifying the size of the picture

Let's start with the attributes that allow you to set picture dimensions(more precisely, stake out space for these dimensions on the pages). Here they are:

• width- image width in pixels or percentage;


• height- the height of the image in pixels or percentages.

If these attributes are used, it will first allocate space for the graphics, prepare the document layout, display the text, and only then load the image. At the same time, it will place the image in a rectangle of the selected size, even if the actual width and height of the image are larger (compress) or smaller (stretch). In the case when these attributes are not used, the browser will load the image immediately, and the display of the text and other elements following it will be delayed.

The width and height of images can be specified both in pixels (the size of the image will be constant regardless of the screen resolution) and as a percentage (the size of the image will depend on the resolution of the user’s screen). For example:

width="50" height="20">

width="10%" height="5%">

§ 3. Alternative text

If the user has disabled the display of images in the browser settings, then instead of the picture, alternative text can be displayed that would explain what kind of graphics should be there. This is achieved by using the attribute ALT:

In this case, the browser will reserve space on the page for the image, but instead of the image itself, it will show the text that you write in the attribute value ALT:

I repeat, this will happen if the user has disabled the display of graphics. If not, the image will hide the alternative text.

§ 4. Aligning the picture

Using an attribute you already know align you can control the alignment of pictures relative to other elements of the html page. At attribute align There are several meanings, but we are most interested in two at the moment:

• left- the image is located at the left edge of the page, and the text flows around the image on the right;


• right- the image is located at the right edge of the page, and text and other elements flow around the image on the left.

For example, HTML code

the browser will show like this

And this HTML code:

will look like this:

To stop text from wrapping around an image, you can use the tag BR(familiar to us from the previous section about). At the tag BR there is an attribute clear, which can take three values:

• left- stop text wrapping around left-aligned images;


• right- stop text wrapping around right-aligned images;


• all- stop text wrapping around images aligned both left and right.