Insert a graphic file into a web page. Inserting graphics into an HTML document

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.

HTML tag responsible for displaying the image

HTML image Can be any image in PNG, JPEG and GIF format.
HTML code for the image defined by tag .
HTML image can be the background of a web page.
HTML image can be defined as a hyperlink.

In the D\My_first_site\ folder or any other folder where you have the index.html file, place an image with an extension, say, .jpg, name it whatever you like, for example, xxx.

Inserting an image into the HTML code of a page:

Tag - unpaired. Pay attention to the way it is closed.

Attributes and values

- required, it indicates the source of the image.
alt="" - defines alternative text, a comment that is read by a search robot when analyzing the content of a web page. It also needs to be designated.
width="" - specifies the width of the image in pixels.
height="" - specifies the height of the image in pixels.

Indicate actual dimensions - this way you will maintain the original image quality.

For web development, images of three formats are applicable: PNG (.png), JPEG (.jpg) and GIF (.gif). Adobe Photoshop is a specialized tool for creating graphics for websites. It can be used to convert one image format to another.

HTML image | Horizontal and vertical margins

or the horizontal and vertical distance between image and text

Result:

Attributes and values

hspace="" - defines horizontal distance between image and text.
vspace="" - defines vertical distance between image and text.

HTML background image

or page background defined by an image

We have the following image:

Let's write the code for a separate page:

The background and background-image attributes are discussed in .

Inserting an image and its order → ../images/primer-img.jpg → see.

HTML image - link

Example code:

border="0" - cancels the border of the graphic link.

or all possible ways to center images

Example code:

HTML image centered on page

What do you need to pay attention to here? → Firstly, the fact that the dimensions are indicated - this speeds up the loading of the image. Secondly, alt="" attributes are specified, which is also highly desirable to do even if there is no alternative text. In the first case, the centering was determined HTML parameter, and in the second - using the linear inclusion of cascading style sheets.

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 margins on the right and left, and the second sets the margins on the bottom and top.

How to set the background

When inserting an image into an HTML website 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.

We hope that this article will be useful to you. Happy reading!

Images instantly let us understand how interesting a given site or article may be for us, they create a mood, and they can reveal a topic in a new way. Sometimes one photo is worth a thousand words.

But you shouldn’t partake of them if you don’t have Instagram or an online store. It is advisable that the images:

were informative
match the color scheme of your site
were appropriate

If you do not have a suitable photo, you can use the so-called photostock (photobank) - a place where many photographs, illustrations and vector graphics are stored. There are a lot of such resources, you may have even heard about one of the largest - Shutterstock, but downloads there are paid.

For those who do not like to overpay, at the end of the article we have prepared bonus- a list of several photo banks where you can download a huge amount of high-quality beautiful materials absolutely free :)

Image formats

There are mainly 3 types of images used on the World Wide Web:

gif(Graphics Interchange Format - image exchange format)

This is the first format that began to be used on the Internet. The advantages of this format are the availability animations and small size, the page loads quickly. In addition, it supports transparency. Disadvantage - only used 256 colors(that’s actually why the size is small), i.e. it cannot be used for full color images.

jpeg, aka jpg(Joint Photographic Experts Group - Joint Photographic Experts Group - this is the name of the development organization)

suitable for creating full-color, high-quality images, photos. The size of such images is large, so they usually place a large load on the server. If you need to compress a jpeg (for a smaller image weight), we recommend taking the size of the final image multiple of eight , so the loss of quality will be minimal.

png(Portable Network Graphics - Portable Network Graphics. Pronounced the same way as ping, i.e. )

this format was originally developed for the web, i.e. The image usually weighs little and does not slow down the page when loading. This format was created to replace the outdated gif, but unlike it, it does not support animation. Png-8, like gif, uses only 256 colors. Format png-24 supports 16 million colors, although it’s already quite heavy. Png-32 contains the same number of colors as png-24, and plus it allows you to get an image with transparent background , and you can adjust the degree of transparency. When reducing the size of png there is no loss in color quality.

Let's summarize

gif- for animation

jpeg- for photographs

png- for icons, buttons, backgrounds, logos, screenshots, drawings, texts, photographs with a transparent background

Inserting an image into an html file

To add a picture to the page, use tag (from the English image - image, picture). This is a single tag and does not need a closing tag. This tag contains attributes inside.

Attribute src(from the English source - source) indicates the path to the file (the place where the image is located). If the picture is on your computer (the site is still under development) or on your server, use a relative link. If the image is from the network, then an absolute link is needed. Read how to do this in the article "Links".

So, to connect an image to your web page, you need to write code like this:

alt attribute(from the English alternative - alternative) indicates the text that the user will see if the image does not load. The path is incorrectly indicated, the picture has been deleted, bad Internet - there can be many reasons, and it is desirable that the person understands what lies behind this hated icon.

Search engines pay close attention to ensuring that this attribute is filled out. And the html validator (a resource for checking code for correctness) will perceive the absence of the alt attribute as an error. If all the attributes will be filled out, and also contain keywords if possible - the visibility of your site will significantly increase, i.e. it will be shown more often in searches. This is from the field of SEO, and at this stage it is enough for us to know that there is such an attribute, and a “live” site must have it filled in. While the site is on our disk, it can be left empty.

In the example below, we deliberately specified a non-existent path for the image so that you can see how the alt attribute works

Height and width of images

You can also set the height and width of the image if the original image is e.g. more than you need.

In HTML5 it is recommended to do this using CSS or style attribute , like this:

In this example, we took 30% of the width, not of the original image, but of the browser window size. When width = 100%, the image opens to the full width of the browser. Remember this feature percent, as units of measurement.

By the way, if we had written only the width, the result would have been the same, try:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg"

alt = "panda in the tree" style = "width:30%;" >

You can also set the width and height in pixels. In the case of our panda, whose original dimensions are 1196 x 796 pixels, so that the animal does not suffer when compressed, we need to maintain the proportions, and here you can’t do without a calculator. Let's say we want to reduce the size of the picture by 3 times, then we need to set the dimensions to 399 x 265 pixels.

Please note that if we enlarge the image proportionally, then it is enough to specify only one parameter, for example. width. The smart browser itself will calculate the full size of the image.

Try running this code and look at the result:

< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg"

alt = "panda in the tree" style = "width:399px;" >

Always set the image dimensions. Typically, images take longer to load than the rest of the html code. If the browser knows how much space to reserve for images, it can continue loading the site without waiting for the images to load.

A little mothball

If you happen to tinker with the code of a site created in HTML-4 or even earlier, you will notice that image sizes are set using special width attributes And height. This is a deprecated method, although still valid in HTML5. However, we recommend using style, because The width and height attributes can be affected by internal or external styles that will live in the browser or your CSS file. We'll go into more detail about this when we look at CSS, but for now just look at an example of how styles affect the height and width attributes.

There are 3 tabs in this window: on the first you see the html code, on the 2nd CSS code, and on the last - as always, the result. This works as if the first tab were an index.html file, the second a style.css file, and the third a browser. So, now our CSS says that all elements with the img tag have a width of 100%. The default sizes of the width and height attributes are in pixels, so there is no need to add any units here.

The difference in results is obvious :)

Also in older versions of html the following attributes were used:

align, which was used to align the image horizontally or vertically.

hspace- indentation on the left and right of the image to the surrounding content (for example, text or an adjacent image)

vspace- indentation above and below from the image to the content around it.

border- set the thickness of the frame around the image (by default it is zero)

Nowadays, all this manipulation (and much more) is done using CSS, so we decided not to bother you with it here. If you are still interested in how to work with these attributes, write in the comments, we will add this item :)