Insert a graphic file into a web page. We add images to the WEB page, as well as video and audio

How to insert a picture into an html page

To insert a picture image (photo or any graphic) onto the site, you need to specify the path to the source (to the picture file) using the img tag. The img tag is an abbreviation for the English image (image, image). Source - in English source, abbreviated src
Important: weight and size pictures (small), file name(no spaces and only latin letters and numbers), picture format(extensions: GIF, JPG, JPEG, PNG. It is possible to use animated images (GIF).
The path to the picture is indicated absolute or relative, depending on where the picture is located on your site or on the Internet. third party resources(then you need to specify the URL)

Fog. Artist Vladimir Knyagnitsky

Code. The code contains a relative address (relative to the folder on my server)

Code. The code contains the absolute address of the image

Image size and frame thickness

The actual size of this picture: Width (width) = "499" Height (height) = "434". Without resorting to Photoshop, you can make the picture on the screen look larger or smaller than its actual size. For this purpose atiributs are used width And height. For example, to make the image look 2 times smaller, specify the width (width)="250" and height (height)="217" . And add a frame 4 pixels thick( border="4"). On the left is an image with a frame, on the right, for comparison, without a frame

IMG tag attributes

align- Aligns the image to one side of the document
align="left" - Left alignment
align="right" Right alignment
align="bottom"Align by bottom edge
align="top" Top alignment
align="middle" Middle alignment

alt- Displays text to the image. Alternative to graphics if they don't load
border- Sets the thickness of the frame around the image in pixels. By default, no frame is used.

width image width in pixels or percentage
height- image height in pixels or percentage

hspace horizontal indent
vspace vertical space

Examples of aligning images with text using HTML

Text, text, text continuation of the text

The image is positioned using the align attribute with meaning middle. Added indentation using attributes HSPACE(horizontal indentation) and VSPACE. It looks like this, the code is written below.. This is where we finish with the image positioning attributes

How to use alt and title attributes.

The alt and title attributes contain the title of the image. ALT is an alternative to an image if for some reason it does not load. Title is the title inscription on the picture. It appears when you hover your mouse over the image.
If you are making a website just for yourself, then you don’t have to use these attributes. If the site is intended for people, then these attributes must be filled in with a clear, accurate description of the image.
Firstly, it is convenient for visitors, and secondly, it is necessary for search engines. It's the text inside IMG tag allows search robots index pictures, sort them by keywords and provide them based on user requests. By the way, Yandex even warns that if a picture does not have a meaningful description, it will not be included in the search. Only standard images are indexed graphic formats(JPEG, GIF and PNG). Background images and pictures opened using the script are not indexed.

CODE of an image with alt and title filled in

How to make a picture a link

Any link is made using the A tag and the href attribute (if it is a hyperlink) or name if (a link to a paragraph or element located on the same page).
Start tag Image source closing tag

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

Adding an image occurs in two stages: first, prepare graphic file the right size and format, and then it is added to the web page via the tag: . Myself HTML document is intended only to display the required picture, 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 physical dimensions images (width and height) must be limited (reduced) in 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: multifunctionality, versatility, small volume source files with sufficient good quality, served these formats good service, effectively defining them as a 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 less recognized GIF formats and JPEG.

Usually for images (pictures) they create separate folder V root directory and all the images for the site are put into 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 they write full path to the graphic file (where the image is located), as well as the name this file(pictures) 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 inserted into right place web pages (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 real figure 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 could be the matter? 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 actual sizes 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 understood 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, instead of images empty seats framed. Although before the display, the images were as they should be.

Dmitry, miracles do not 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 and then paste the codes, 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 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 don't 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))))

..........what is my error of missing image?

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 to 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 like this:

Hello dear blog readers! In this article you will learn everything about how to insert an image on html page . Do you have several images that you want to put on your page or do you want to put a logo on your site? All this is easy. After reading this article, you will be able to insert pictures into your html pages without any difficulties. To do this, we will talk in detail about tag and its attributes, we'll take a quick look at graphic file formats such as gif, jpeg and png, and also look at new HTML5 features that make it easier to insert video and audio into your site.

Due to the fact that graphic data and html text cannot be combined in one file; to display them on the site, a different approach is used than with other elements of html pages. First of all, graphic images and other multimedia data are stored in separate files. And to implement them into a web page, they use special tags that contain links to these separate files. In particular, such a tag is tag . Having encountered such a tag with an address, the browser first requests the corresponding file with an image, audio or video from the Web server, and only then displays it on the Web page.

All graphic images and, in general, any data that is stored in files separate from the web page are called implemented page elements.

Before inserting pictures and looking at the tag in detail , it's worth learning a little about graphic formats.

Graphic image formats.

There are many different graphic formats, but browsers only support a few. Let's look at three of them.

1. JPEG format(Joint Photographic Experts Group). Quite a popular format used for storing images. Supports 24-bit color and keeps all halftones in photos unchanged. But jpeg does not support transparency and distorts small details and text in images. JPEG is used primarily for storing photographs. Files of this format have jpg extensions, jpe, jpeg.

2. GIF format(Graphics Interchange Format). The main advantage of this format is the ability to store several images at once in one file. This allows you to create entire animated videos. Secondly, it supports transparency. The main drawback is that it supports only 256 colors, which is not suitable for storing photos. GIF is mainly used to store logos, banners, images with transparent areas and containing text. Files in this format have the extension gif.

3. PNG format(Portable Network Graphics). This format was developed as a replacement for the legacy GIF and, to some extent, JPEG. Supports transparency, but does not allow animation. This format has a png extension.

When creating websites, images are usually used JPEG format or GIF, but sometimes PNG is used. The main thing is to understand in which cases which format is better to use. In short:

JPEG is best used for storing photographs or grayscale images that do not contain text;

• GIF is used primarily for animation;
• PNG is the format for everything else (icons, buttons, etc.).

Inserting images into html pages

So, how do you insert an image onto a web page? You can insert an image using a single tag . The browser places the image at the location on the web page where it encounters the tag .

Code for inserting images into html the page looks like this:

This html code will place on the web page an image stored in the image.jpg file, which is located in the same folder as the web page. As you may have noticed, the address of the picture is indicated in src attribute. I already told you what it is. So, the src attribute is a required attribute that serves to indicate the address of the file with the image. Without the src attribute, the img tag is meaningless.

Here are a few more examples of specifying the address of a file with an image:

- this html code will insert a picture called image.jpg onto the page, which is stored in the images folder located at the root of the website.

The src attribute can contain not only relative links to the images. Since images are stored online along with html pages, so each image file has its own url. Therefore, you can insert the image url into the src attribute. For example:

This code will insert an image from the site mysite.ru onto the page. A URL is typically used when you are pointing to an image on another site. For images stored on your site, it is better to use relative links.

Tag is inline element, so it is better to place it inside a block element, for example inside a tag

- paragraph:

Let's practice and paste into our page from previous articles about html image. I will create an “images” folder next to the html file of my page and place a “bmw.jpg” image file there, which looks like this:

Then the html code of the page with the inserted image will be like this:

Website about cars.

Welcome to our automotive website. Here you will find many interesting and useful articles about cars, about them technical specifications and features.

Scientific language automobile This:

Mechanical motor trackless road vehicle with at least 4 wheels.

Car classification

Cars are of the following types:

• Passenger car;


• Cargo;


• SUV;


• Buggy;


• Pickup;


• Sports;


• Racing.

All rights reserved. 2010
Website about cars.

And look at the display result in the browser:

As we see, there is nothing complicated about placing images on web pages. Next, let's look at a few other important tag attributes. .

The alt attribute is a fallback option

Because image files are stored separately from web pages, the browser has to make separate requests to retrieve them. But what if there are a lot of images on the page and the network connection speed is low, then loading additional files it will take considerable time. And it’s even worse if the image was deleted from the server without your knowledge.

In these cases, the web page itself will load successfully, only white rectangles will be displayed instead of images. Therefore, to tell the user what the image is, . Using this attribute, you specify the so-called replacement text, which will be displayed in an empty rectangle until the image is loaded:

And this is roughly what it looks like:

Set the dimensions of the image

There are still a couple of img tag attributes you should know about. This is a couple of attributes width And height. You can use these to specify the image dimensions:

width="300" height="200">

Both attributes indicate the size in pixels. The width attribute tells the browser how wide the image should be, and the height attribute how tall it should be. These two attributes can be used together or separately. For example, if you specify only the width attribute, then the browser will automatically select the height in proportion to the specified width and also in the case of using only the height attribute. If you do not specify these attributes at all, the browser will automatically determine the size of the image before displaying it on the screen. It is only worth noting that specifying the image sizes will slightly speed up the browser when displaying the page.

That’s all about inserting images onto pages for now, then we’ll look at how to insert audio or video onto a website...

Inserting video and audio using HTML 5

The new html5 specification introduces several new tags that make it very easy to embed media files. This primarily applies to video and audio.

To insert audio HTML5 provides paired tag The address of the file in which the audio clip is stored is indicated using the src attribute that is already familiar to us:

Tag

By default, the audio clip is not displayed on the web page. But if in the tag

A paired tag is used to insert a video on a web page . With this tag everything is the same as with the tag

There’s not much more to say about inserting pictures and multimedia into html pages. I hope the question “How to insert an image into an html page?” I answered you. so I'll just summarize:

For inserting images in html page using a single tag and indicate the address of the file with the image in the attribute src: ;

• by using alt attribute tag you can set replacement text in case the image does not load;
• using attributes width And height you can set image sizes on a web page;
• there are paired tags for inserting audio and video in html5

If anything is not clear, ask in the comments and don’t forget to subscribe to my blog updates. See you in the next posts!

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. How to do unique picture you can read and take beautiful pictures you can .

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. For this purpose in body tag add the background attribute.

background="your_background.jpg">

Text can be displayed on the 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 people 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.

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 the tag and its attributes is very useful in 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 large number 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 " top layer» html pages.

§ 1. How to insert a picture

To insert images into HTML, use the tag IMG With mandatory 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 pictures. 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 on 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 output 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 in percentages (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 the most at the moment I'm interested in two:

• 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.