Inserting an image in HTML. Inserting a graphic file into a web page

In this material I will tell you about very important HTML tags for inserting pictures and graphics onto the page, because without this it is difficult to create a beautiful and good website.

Pictures will make your website unique and make it stand out from the crowd. However, remember that excessive use of graphics on a website can be a bad thing.

Don't overload your html page with pictures; the page should be light and not scare away visitors. The visitor should always assimilate the main information and not be distracted; insert images into the HTML only where necessary.

on the BODY tag Attributes page, I already said that pictures can be the background of an html page, and now I’ll tell you how these same pictures can be used at a higher level than the background.

And so, in order to insert a picture into an HTML page, you will need a tag , which has the most important attribute SRC. This attribute is required to indicate the address of the image. Let's say you need to put a picture image.jpg in some place on an html page, and our picture will be located in the same folder (directory) with the page, then you need to write the following html code:

If the picture and the html page are in different folders or directories, then you need to write the path to the image relative to the page. For example, our html page is located in the folder or directory news, in the same directory or folder there is a subdirectory (folder) pop, in which our image image.jpg is located, then to insert it you need to write like this:

In addition to the src attribute of the tag There are a couple more optional but important attributes:

• width — image width (you can specify pixels or percentages);
• height — image height (you can specify pixels or percentages).

If you do not specify these attributes, the browser will load the actual dimensions of the image. However, you should not overdo it with the values ​​of these attributes, because increasing the length or width of the picture can distort it, which will ruin it, for example, a photograph of a person, where the proportions of the person will change.

As I already wrote, the dimensions of the image can be specified both in pixels and as a percentage. Let me give you just an example:

Another example of html code:

There are cases when the ability to display graphics, including pictures, is disabled in the browser, and so that your page does not lose its meaning, use the alt attribute, in which we write alternative text if the picture is not loaded onto the page. html code as an example:

• left - the image will be located on the left, and the text next to it will be on the right;
• right - the image will be located on the right, and the text next to it will be on the left.

Here's the HTML code:

Text next to the picture.

and the browser will output the following:

Text next to the picture.

HTML code for the right value:

Text next to the picture.

the html page will look like this:

Text next to the picture.

To prevent text from wrapping around the image, you can use the previously mentioned BR tag on the Formatting Text in HTML page. By the way, the BR tag has a clear attribute, with its own value values:

• left - do not wrap text, which will be aligned to the left;
• right - do not wrap text, which will be aligned to the right;
• all - do not wrap text, which will be aligned to the left and right edges.

Without the align attribute, the text will wrap around the right of the image by default and almost flush. If you want the text not to wrap closely around the image, you can use the following attributes:

• vspace - makes the top and bottom margins in pixels;
• hspace - makes the side margins (left and right) in pixels.

I will give a simple html code as an example:

This is such a beautiful picture.

Try to see for yourself what happens in this example.

You can also create a frame around the image using the border attribute and specify its size in pixels. The higher the value, the larger the frame around the image. The HTML code will be like this:

the html page will look like this:

I have written the basic HTML tags needed to insert images into an HTML page. Next, I will tell you how to create links in HTML, as well as how to make an image a link.

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

Good day to everyone, my dear friends, readers and guests of my blog. It’s like you’re on vacation, but you don’t have enough time for anything. Everything is somehow in a hurry. But this phenomenon is temporary, everything will settle down soon. And today we will continue to learn the basics of html. Friends, what do you think, without which any Internet page will be faceless, gray and boring? That's right, without graphic content, be it photographs, logos or backgrounds.

So, inserting a picture into html is also one of the most important components, so anyone who is going to make websites on their own should definitely know it. This is exactly what we will do today with all this bacchanalia)))

Well, let's get started. As you already understood from the title, the tag is responsible for inserting the image , but it has two nuances:

1. The tag is single, so there is no need to close it
2. The tag always works in conjunction with the attribute, which specifies the path to the image.

In general, let's look at an example to consolidate all this action. Am I right? Download the lesson materials and open the html file in Notepad. And now before the main text write the following:

All. This short entry will provide us with a picture on our website. Try writing it in a document.

Now save the file and run it in your browser. Let's see what we can do. I did it like this.

Attributes

As I said above, the img tag immediately comes complete with the src attribute. Well, I think you already understand this, so let's study the rest. There is room to expand here. There are just a ton of attributes here. Pardon my French).

Alt

If suddenly the picture for some reason has not loaded or is inaccessible, you will see the text that was written in the value of the Alt attribute. Usually what is written here is what is shown in the picture, i.e. if something about nationalities is depicted, then in the alt it is best to write “Men and women of different nationalities.” In an example it looks like this:

As a result, if the picture for some reason cannot be displayed, then our inscription will appear.

In principle, you don’t have to enter anything at all as an alternative text, but it’s better to leave the attribute itself, even if it’s empty.

Width and Height

For those who know English, it is not difficult to guess that these two attributes are responsible for the width and height of the image. I decided to combine these two things into one item, since they perform similar functions, one might say - brothers (or sisters).

Width is responsible for the width of the image, and its values ​​include the size itself. In general, if you have an image, for example, 640*480 pixels, and you need to display it on a 320*240 website, then you will simply need to do the following:

All. Now, when you save the document and open it using a browser, you will see a thumbnail image. Note that we only changed the width parameter, and the image was reduced proportionally, i.e. the height decreased automatically.

Height , as you might guess, is responsible for the height of the image. Here everything works exactly the same, but vertically. Let's take the same picture, but we won't set the width, but set only the height.

Save and go to the document. As you can see, the image has been reduced to the same size as in the previous example, although this time we only set the height. You already understand that everything here operates within the framework of proportions, so in principle there is no point in setting both parameters.

Let’s try, just for fun, to set the attributes of both width and height at the same time, but we’ll just give them disproportionate parameters. Well, then we'll see what we can do.

We save and now look at what was given to us. Hmm, this is something disproportionate). In general, I think you get the gist of it. Practice a little yourself to consolidate the work with dimensions, and then move on to the next attribute.

Align

Well, you are already familiar with this attribute from that article when we went through it. And you probably already guessed that he is responsible for the location of the image.

There are a total of five parameters for align:

• left — left alignment
• right — right alignment
• middle — align the image to the baseline of the line (you’ll see what this means in the example)
• top - the top border of this image is aligned in height with the tallest element in the given row
• bottom — align the bottom border of the image to the text

Well, let’s not list it here, but according to tradition, I’ll show everything with an example. Download the finished html document from here and open it. There you will see 5 identical paragraphs. Insert pictures with the described attributes there:

Well, now we save our document as usual and see what we got. Well? Do you see the difference? Now you know how these parameters differ).

Border

The border attribute is set to indicate the thickness of the frame on the image. And the larger it is, the thicker the frame accordingly. Try adding this attribute to a picture, but constantly change its value and you will see for yourself how much thicker the frame becomes.

Hspace and Vspace

Well, let’s look at the latest attributes of the img tag for today. Space (English) is translated as space, space, space (key), etc. The prefixes H and V mean horizontal and vertical. There shouldn't be any questions here.

So what do these attributes do? They set the vertical and horizontal margins from the image to the surrounding text (or other content). That is, if you don’t like the picture to be too close to the text, then you can increase the distance between them. Let's see what this looks like with an example.

Do you see? The margins have increased both vertically and horizontally. This is what we wanted.

By the way, you can also insert these pictures as a header for websites, make pictures as links, etc. I talked about all this in.

Well, in general, I seem to have everything. I've told you the basics of inserting images, but if you want to learn HTML and CSS like a pro, I highly recommend you download amazing course on this topic, where thanks to this markup language and cascading style sheets you can easily create three types of sites: business cards, blogs, online stores. Everything is told in simple and understandable language. It's just a bomb!

Well, I say goodbye to you for today. In just a couple of lessons, I plan to give you the last lesson on the basics of HTML, after which we will consolidate all the knowledge we have acquired in practice and create a simple three-page website. In general, everything will be cool)

Well, in order not to miss all the most interesting things on my blog, be sure to subscribe to article updates. And of course, look at other articles. I'm sure you will find a lot of useful information for yourself. Good luck to you. See you in other articles. Bye bye!

Best regards, Dmitry Kostin

While traveling on the Internet, you of course see various pictures, banners, photographs, and graphic images on many sites. Today we will learn how to insert images into an HTML page.

Adding an image occurs in two stages: first, a graphic file of the required size and format is prepared, and then it is added to the web page via the tag: . The HTML document itself is intended only to display the required image, while without changing it at all.

There are a few things to consider when preparing your images.

1. Since the web page is loaded over the network, a significant factor is size ("weight") of the graphic file, embedded in a web document. The smaller it is, the faster the image will be displayed.

2. Quite often, the physical dimensions of an image (width and height) need to be limited (reduced) by width and height. For example, set the width to no more than 700-800 pixels. Otherwise, the entire image will not fit in the browser window, and scroll bars will appear.

Graphic formats for websites

The two main formats that are most widely used for web graphics are: GIF And JPEG. Such qualities as multi-functionality, versatility, a small volume of source files with sufficiently good quality have served these formats well, in fact, defining them as the standard for web images.

There is also a format: PNG, which is also supported by browsers when adding images and comes in two flavors: PNG-8 And PNG-24. However, the popularity of the PNG format is much inferior in recognition to the GIF and JPEG formats.

Usually, a separate folder is created for images (pictures) in the root directory and all the images for the site are placed in it. Sometimes there are several such folders (if the site structure requires it or it’s easier for you to navigate). This folder is most often called: img or images (Images). In the web page code, write the full path to the graphic file (where the image is located), as well as the name of this file (picture) that you want to insert into the html document.

We write code to insert a picture into a web page

To insert images into an HTML document, use the construction specified in Listing 8.1. This code is inserted into the desired place on the web page (where you want to see the picture).

On our we-page dedicated to cars, I prepared and inserted two images. You can see the embed code for the first image in Listing 8.1.

Listing 8.1.

This is what the first inserted image on the site’s web page will look like:

And now I will comment in more detail on what is written in Listing 8.1.

The image itself is “inserted” using the tag: img src. The full entry looks like this: img src="img/mers1.jpg", Where "img/mers1.jpg"– indicates that our picture is in the folder: img, and the name of the graphic file (picture): mers1.jpg.

In principle, this is already enough to insert an image onto a web page, the remaining parameters are optional, but I still recommend that you always register them, otherwise the picture may be subject to geometric distortions.

Let's look at the additional options:

border="0"– indicates that there is no frame around the image, try changing 0 to another number, for example to 1 , - corresponds to the thickness of the frame around the image in 1 pixel, 2 – corresponds to the thickness of the frame around the image of two pixels, etc.

Important! If you plan to make an image a link, be sure to indicate the value: border="0".

width="400"– indicates that the image width is: 400 pixels(put a real number for the width of your images).

height="209"- indicates that the image height is: 209 pixels(put a real number for the height of your images).

If you do not specify parameters: width And height, then the image may receive geometric distortions.

hspace="20"– indicates a 20 pixel indentation of text around the image.

align="left"– this is a tag already familiar to you….. That’s right, it means left alignment, it can also take the meaning: right- right alignment.

alt="Front view of the car" !}– alternative text is written here, which is displayed when you hover the mouse over the image.

In exactly the same way, we will “insert” the second image onto the web page, with the only difference being that it will be aligned to the right.

Comments on this article (lesson):

Please tell me where exactly should I create the img folder?

The img folder is just a conventional name, you can call it whatever you want, as long as you understand it later. You can create it anywhere, for simplicity, create it in the root directory and put all the images there.

The thing is that the picture is not displayed, only the inscription. What can be wrong? Thank you.

Take a close look at Listing 8.1 above. Take it all to yourself. In the root directory (where all the HTML files of your site are located), make an img folder. Place all your images in this folder. In the listing, change mers1.jpg to the name of your file. Also change the width and height values ​​to the actual dimensions of your file. Good luck.

Thank you very much, everything worked out.

Hello. I have the same situation as the previous speaker: I write the code like yours, I change only the file name: instead of mers.1/jpeg I insert the link Mercedes/jpeg. Only a window appears on the page with the inscription at the top “Front view of the car”, and there is no image. In my opinion, the browser cannot find the path to the photo or it is not written correctly. HERE IS MY CODE: b

Look carefully at your img/mercedes/jpeg code. You understand correctly, the browser does not find the path to the graphic file. 2. The file name is incorrect, see how I have mers1.jpg

Well, I copied the code and pasted it, I have an oval without a picture, in the oval there is a link at the top!

Hello! The problem is the same, I created a folder called img in the same place as the site documents, images with the name 1.jpg are saved in this folder, I write everything as in your example.

If you noticed my picture is in the img folder

A very useful article for beginner webmasters. The only caveat to the "alt" attribute. In relation to the figure, the article gives the following interpretation: "alt="Front view of the car" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

here is my code SO WHY IS THE PICTURE PUT ON THE SIDE WHEN THE TASK FOR IT IS CENTER?

And if I take an image from someone else’s site, will it not be a violation of copyright?

Explain why, when uploading an HTML document to the server, there are empty spaces in the frame instead of images. Although before the display, the images were as they should be.

Dmitry, miracles don’t happen, you made a mistake somewhere, check all the paths to the pictures, i.e. how the pictures are written in the code.

This is my code, everything is revealed on the page except the image, I've been trying all day in every possible way but nothing. please tell me what to do

AndreyK, please contact me in my letter. I can’t insert an image in any way, I enter everything correctly but nothing, only the frame and inscription appear

Elvira, I read your letter, as well as all the other comments and letters. But where should I answer... to my grandfather’s village???

I don’t know why everyone is so upset!? You just need to not copy the codes and then paste them, but write them yourself and everything will work... here is the text of my picture

I copied your listing, pasted my values ​​- there is a picture. Then I type in the same thing below (manually) there is no picture - what a miracle?

AndreyK please tell me where is the error? No matter how many times I try it doesn’t work((

Andrey, tell me why I can’t see the picture. My code: There is an inscription, but no picture. My address: [email protected] Thank you.

I also suffered for a long time, but it worked! Indeed, the imj folder must be opened in an HTML document.

I'll definitely try it, thank you

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

I also suffered for a long time, it turns out that the folder with pictures should be in the same place as index.html, thank you Elena

Andrey I insert:

Andrey I insert: and I don’t have a picture in the document, just an inscription!!! My address: [email protected]

my code...no picture either. The img folder is in the same folder as index... please help. [email protected] Thank you!

Well I do not know. I read all the comments. I tried everything. I copied and pasted my information. Nothing works. The folder with pictures (img) is located in the same place as index.html. But there is no picture. Instead there is a red cross and an inscription. I work in the IE browser. Here's what I entered:

I looked at the HTML code of the page in place of the photo in the lesson: The code on the page is different from what is in the listing. Why? and, by the way, on the page the code “mers1.jpg” is underlined. Copy with underline failed. I tried to insert it like that. Still no picture. What's the matter?

We ask ourselves, we answer ourselves. I suffered for a long time and the picture was not inserted. It turned out: 1, instead of the src tag I had srk 2. I got confused when I was composing the path to the picture. I renamed the folder to IMG and everything worked.

I spent almost two days on this, but it was worth it.

Love, but now you will remember this for the rest of your life:) I’m joking, of course, don’t be offended. But seriously, if a person does not leave a return address, then it is almost impossible for me to help him.

Hello, tell me how to place one image on top, the second below on the left, and the third on the bottom on the right))))

Everything in the code is correct, if nothing is messed up, everything should work. But write the name of the file (picture) in English letters. Many servers do not accept the Latin alphabet.

But here’s what’s strange... while I was calling the folder different names, the picture didn’t want to appear, even though the path was written correctly. As soon as I called IMG, she immediately appeared. What's the catch?

Marina, there is no trick or provocation :). In the code of Listing 8.1. it is indicated that this image is in the folder: img. If you change the name of the folder for images on your host, then change it in the listing, that’s the whole trick.

I'm trying to insert an image!!! I write everything down using a notepad, I’m doing everything correctly, maybe it’s not worth using a notepad??

And I open everything in Mozilla Fire Fox latest))

The path of my picture is C:Documents and SettingsdenisDesktopkoffevinogradwwwImg and the picture itself is called gif, also the name includes 1.gif...I do this in notepad I did it and the full path doesn’t come out, the mozilla doesn’t see the explorer photo and highlights it with a red cross

Denis, rename the Img folder to img, i.e. all in capital letters, and rename the path to it too. Many servers do not display capital case correctly.

I still have the same question: why not images, but only the inscription. I created a separate folder for the site: it contains a Web page and a drawing. Inserted: HELP WHAT IS MY MAIL ERROR: [email protected]

How can you make a picture so that it can be enlarged or reduced?

For some reason the picture doesn’t center for me either. What's the catch?.. The code is:

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 the 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 relative to 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

null 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: