To add an image to an HTML page, use the tag IMG. Image formats supported: PNG, GIF and JPEG. Mandatory tag attributes include the attribute src, which specifies the address of the image file.

A simple way to insert a picture into an html website:

But in this form, the image will be displayed with its original dimensions, without alignment, without additional information. Therefore, in order to add a picture more beautifully and correctly, you need to use additional parameters. Let's look at them in more detail.

IMG Tag Attributes

To display a picture using a tag IMG The following parameters are used:

• width/height- indicates the width/height of the image (in percentage or pixels);
• align- image alignment (right, left, center);
• border- determines the thickness of the frame around the picture (in pixels). If the attribute is not set explicitly, the default value (border=0) is used;
• hspace/vspace- indicates the size of the horizontal/vertical indent from the image to the surrounding content.

Let's now consider how to make a picture in html code:

Here the dimensions are given in pixels.

Adaptive image sizes using HTML

If you are creating a “fluid” or “adaptive” website design, then in the html code of the image you should indicate the dimensions as a percentage. Try creating an HTML page with the code below (after placing an image named “img.jpg” next to the HTML file) and resizing the browser window. You will see that the image size will change depending on the size of the window.

Paragraph 1

Paragraph 2

In the Nubex website builder, you can add a picture using the editor tools. You can learn more about this from the article.

26.06.2015

Hi all!
We continue to diligently study the basics of HTML.
In this lesson I will tell you, how to insert a picture in HTML-document, how to make a picture as a background, picture size, text wrapping around a picture, how to align a picture. I will support all the listed possibilities with examples and results.
So, images on web pages can be either background or regular. What's the difference between a background image and a regular image?

Background image placed as a background on top of which you can insert other pictures, text, tables, etc.

Normal image will push away other elements of the page (other pictures, text, tables, etc.). Using the example, you will then see and understand everything.
For web pages, it is recommended to use JPEG (JPG), GIF and PNG image formats.

○ How to make a picture as a background inHTML

To make a picture the background for a tag you need to specify the “background” attribute:

Now let's look at the full example. Insert the image file “fon.jpg” next to the HTML file.

and insert this code into the HTML file:

Jpg">

The result will be like this:

Attention

Wrong name:

Correct name:

○ How to insert an image intoHTML

To insert an image into an HTML document, use the tag with the “src” parameter, which specifies the path or address to the image.

Now let's look at the full example. Insert the image file “kartinka.jpg” next to the HTML file and write this code in the HTML file:

Hello, this is my first page on the site.

The result will be like this:

Attention: The name of the picture must be written in Latin, otherwise the picture will not be displayed.

Wrong name:

Correct name:

I think you have understood everything up to this point. Now let's try to combine the two examples together. Let's create a background for the web page, insert an image and text.

Jpg">

○ How to insert a picture if it is in the folder "img" or "images"?

If the picture is in the “img” or “images” folder, then you need to specify the path from the HTML file to the “img” or “images” folder, and then just enter the name of the picture with the extension. It will look like this:

If the picture is on another site or blog, then you need to indicate the site address and, if necessary, the folder where the picture is located. Well, of course, you need to indicate the name of the image with its extension.

Previous post
Next entry

Lesson #5
Adding a photo to an HTML document

In this tutorial, we will look at how adding a photo to an HTML page.

Since our article from the last lesson talked about the snow leopard, the photo will be of him:

You need to copy this photo to your Desktop, this is done like this:

1. right click on the photo
2. then along the line: Save image as...

Save the photo to your desktop

You already have a file index.html on your desktop, now there is also a photo of a snow leopard, file irbis.jpg

In order to insert a photo into an HTML page, there is a tag , this tag has a property (attribute) src=" ", the value of which is the address of the photo:

Where:
— a tag that indicates that there will be a photo here,
src=" " - tag property , which points to the address of the photo,
photo address—the value of the src=" " property, the photo address.

Since the files index.html and irbis.jpg are located in the same folder, namely on the Desktop, in order to indicate the address of the file irbis.jpg, simply write its name irbis.jpg

By pasting this code under the title

, our HTML document will look like this:

Snow Leopard

The snow leopard (irbis, ak leopard) is a large predatory mammal from the cat family. It lives in the mountains of Afghanistan, Burma, Bhutan, India, Kazakhstan, Kyrgyzstan, China, Mongolia, Nepal, Pakistan, Russia, Tajikistan and Uzbekistan. The snow leopard is distinguished by a thin, long, flexible body, relatively short legs, a small head and a very long tail. The length of the snow leopard including its tail is 200-230 cm, weight up to 55 kg. The fur color is light, smoky gray with ring-shaped or solid dark spots.

The snow leopard hunts mainly mountain goats and sheep; its diet also includes wild boars, pheasants and even gophers. Due to the inaccessibility of the species' habitat, snow leopards still remain poorly studied. However, according to rough estimates, their number varies around 10 thousand individuals. As of 2013, hunting snow leopards is prohibited everywhere.

Save your changes in Notepad by pressing Ctrl + S on your keyboard or File > Save.

Open the index.html file with a browser, you should see

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.

Working with images in HTML (how to insert a picture, change its size, make the picture a link).

Inserting an image

An unpaired tag is used to insert an image into an HTML document , which is placed at the location in the document where the image should be inserted. This tag has a required parameter src, the value of which specifies the path to the desired image in the directory of your site.

For example, to place an image on a page:

The following line is placed in the right place in the document:

This lets the browser know that the site's root directory www.mysite.com there is a subdirectory img 1.png

Here we have specified the full path (or absolute address) to the image. Can you specify relative address Images:

The browser interprets this line as follows: in the directory where this html document is located, there is a subdirectory img, it contains an image with the name 1.png, which should be placed on the page.

Here is an example of specifying a relative image address if your site has a more complex structure and the previous example is not suitable:

The browser interprets this line as follows: a combination of characters ../ means that you need to go up one level from the directory where this html document is located; and then as in the previous example: in the directory where we find ourselves there is a subdirectory img, it contains an image with the name 1.png, which should be placed on the page.

For security reasons, it is preferable to indicate the relative address of the image, except in cases where you place an image located on another site on your page.

Image Dimensions

The size of each image is specified by two parameters: width and height. At the tag There are corresponding parameters: width And height. These parameters take values ​​in pixels (px).

You can set the actual dimensions of the image:

This is not necessary, but it is useful because... slightly speeds up the process of loading a page by the browser (the browser does not have to calculate these values ​​independently). If the image dimensions are immediately specified in the tag parameters , then space on the page will be allocated for this image, and the structure of the page will no longer change when loading - the text will jump, for example.

Or you can enlarge or reduce the image by assigning parameters width And height other meanings. Moreover, if you want to change both parameters proportionally, it is enough to indicate a new value to only one of them, and simply omit the second. The browser will calculate it automatically.

For example, to enlarge our image by 1.5 times, we can write:

or

The result will be the same:

More options width And height can take values ​​in percentages. But! Please note that these are percentages of the browser window size. In this case, you can also specify only one parameter and omit the second.

For example, if we want the image to occupy exactly half of our page in width, we need to write the following:

And we will get:

Frame around the image

At the tag there is one more optional parameter border. Use it to set the thickness of the frame around the image. By default, the image frame thickness is zero, i.e. no frame.

For example, this is how you can add a 3 pixel thick frame to our picture:

This is what the browser will show us:

The border color matches the text color on the page specified using the parameter text tag (See Lesson 6. Page properties - body tag parameters), the default color is black.

And if you don't want to see the frame, force the parameter border null value:

Alternative text

Alternative text is displayed by the browser in place of the image until it is loaded. Or instead of a picture, if for some reason it is not displayed.

When and if the picture is loaded, alternative text will be shown when you hover your mouse over this very picture.

To add alternative text, use the option alt tag , which is assigned a string value, which must be enclosed in quotes.

You can create multi-line alternative text.

To do this, just insert a line break in the HTML document.

text">

Image Alignment

For an image, as for a paragraph, there is the concept of alignment with the text and other images on the page. You can also set the alignment type using the parameter align tag .

Below is a table of possible parameter values align:

Options texttop, top, middle, absmiddle, baseline, bottom set the vertical alignment of the image. And the parameters left And right let the browser know which side the text should be on flow around image.

Padding around the image

To keep the text from wrapping close to the image, you can set padding around the image. You can do this using the parameters hspace(left and right padding) and vspace(spaces at the top and bottom) of the tag .

The following example shows text wrapping around an image, with the image aligned left and with 5 pixels of padding around it:

In the city of Stockholm, on the most ordinary street, in the most ordinary house, lives an ordinary Swedish family named Svanteson. This family consists of a very ordinary dad, a very ordinary mother and three very ordinary children - Bosse, Bethan and Baby.

Here is the result in the browser:

In the city of Stockholm, on the most ordinary street, in the most ordinary house, lives an ordinary Swedish family named Svanteson. This family consists of a very ordinary dad, a very ordinary mother and three very ordinary children - Bosse, Bethan and Baby.

Splitting an image into parts

There are times when you need to place a large image on a page. But then the page will take a long time to load. What to do?

One of the possible The best way out is to cut the image into pieces and place it on the page using a table. To make the image look like a whole, it is necessary to remove the border of the table and all the padding inside and between the cells. Those. assign to the corresponding tag parameters

zero values: border="0", cellspacing="0", cellpadding="0".

In the following example, we split the image into 4 parts. This is what the table will look like:

And here is the result: