Hello dear blog readers! In this article you will learn everything about how to insert an image into an 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.

Because graphic data and html text cannot be combined in one file, they are displayed on a site differently than with other elements of html pages. First of all, graphic images and other multimedia data are stored in separate files. And to embed them into a web page, special tags are used that contain links to these individual 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 in this format have the extensions jpg, 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 the extension png.

When creating websites, they usually use images in JPEG or GIF format, but sometimes they use PNG. 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 an image 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 more than just relative links to 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 an inline element, so it is better to place it inside a block element, for example inside a tag

- paragraph:

Let's practice and insert an image from previous articles about html onto our page. 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, their technical characteristics and features.

Scientific language automobile This:

Mechanical motorized 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 it will take a significant amount of time to download additional files. 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 a 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!

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

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

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

How to insert a picture into an HTML page

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

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

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

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

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

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

.

This is how it will look in the editor:

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

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

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

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

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

File path formatting table

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

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

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

Aligning and editing a picture

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

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

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

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

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

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

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

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

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

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

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

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

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

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

After refreshing the page the result will be like this:

Tag Attribute Table img

vote[s]

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

This makes it possible to display the contents of another page within one page. For example:

Most of the images that a person sees on websites are also content from another page. Here, in particular, is the address of the emoticon in .gif format:

Here are ways to add a picture to a site, which can be highlighted if you look at the page code:

HTML: tag
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="smiley" height="30" width="30"> !}
CSS: properties and
CSS: pseudo elements and
HTML: vector graphics tag
CSS: no URL

How to find out the address of a picture and copy it

There are several ways to copy the image address:

1. Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to copy the URL, click on the required item.
   Fig.1 If you point at the photo and click on the right mouse button, a context menu with the following items will open in Mozilla Firefox
2. Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to study the characteristics of the photo, click on the required item (in Fig. 1, see the “Image Information” item; in Internet Explorer, see the “Properties” item), in the window that opens, select the address of the picture,
   • Right-click on the mouse and click on “Copy” in the context menu that appears.
   
   Fig.2 If you point at a photo in Mozilla Firefox, right-click on the mouse, select “Image Information” in the context menu that appears, a window will open where you can see a list of pictures used on the page, their address, alternative text (content in the alt attribute), actual size and scale used
3. Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to go to the picture page, click on the required item (in Fig. 1, see the “Open image” item). A page will open containing only one image. Full height if it was previously reduced using or using CSS. Select the address of the page that opens in the address bar of the browser,
   • Press the keyboard shortcut Ctrl + C.
   
   Fig.3 This is what the emoticon page looks like.
   Her URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
4. On touch devices (smartphone, tablet), hold your finger over the photo for a long time without moving; in the context menu that appears, you will be asked to go to the picture page, click on the required item (it may be called “View picture”). A page will open containing only one image. At full height if it was previously reduced in size using or using CSS. Then long press on the address in the browser address bar. After the sliders appear and the entire URL is selected (if necessary, the sliders can be moved to the required distance), click the “Copy” button in the appeared panel.
5. Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to go to the background image page, click on the required item. A page will open containing only one image. Full height if it was previously reduced using CSS. Select the address of the page that opens in the address bar of the browser (see Fig. 3),
   • Click on the right mouse button and select “Copy” in the context menu that appears.
   • Press the keyboard shortcut Ctrl + C.
   
   

How to save an image

Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to save the picture, click on the required item (in Fig. 1, see the item “Save image as...”), in the window that opens, select a folder on your computer, where the drawing will be saved.

If the photo is a background image, then you must first go to the image page (see Fig. 3).

How to add a picture to a web page

First, the image must be uploaded from your computer to the site hosting, to a social network (VKontakte, Google+ etc.), Yandex.Disk or Google.Disk, so that the picture has its own address on the Internet.

If there is a visual editor, then the sequence of actions is usually as follows:

1. place the mouse cursor in the place where the photo should appear,
2. click on the icon similar to or to,
3. select a file from your computer,
4. if possible, fill in the alternative text (aka image description).

Result: the image will be inserted onto the site page, and most importantly, uploaded to the web project server. She will now have her own address on the Internet. And now you can edit the code provided by the visual editor on the “HTML” tab, since the visual editor often adds unnecessary tags, and the capabilities of HTML and CSS are incomparably greater.

If the URL already exists, but from another little-known site, then it is still better to save such a photo on your computer and then upload it to the site server, if this action is permitted by the owner of the photo, so as not to violate copyrights, since

• Some sites may prohibit the use of image addresses on other resources (read more about prohibiting hotlinking).
• sites are short-lived and after a while, when the web project is deleted, the picture on your site will also disappear, leaving in its place, at best, only alternative text.

If there is no visual editor, then the sequence of actions is usually as follows:

1. create an image folder,
2. create a .htaccess file in the image folder, the contents of which will be # close access to http://site.ru/image/ Options -Indexes # close access to http://site.ru/image/.htaccess order allow, deny deny from all
3. upload an image into the image folder, which is called, say, plain.gif (in the future, all pictures will also be uploaded to this folder),
4. on an HTML page use a URL like http://site.ru/image/plain.gif, for example, http://site.ru/image/plain.gif" alt="smiley" height="30" width="30">!}

HTML images added to web pages using a tag . The use of graphics makes web pages more visually appealing. Images help better convey the essence and content of a web document.

Using HTML tags

Inserting images into an HTML document

1. Tag

Element represents an image and its fallback content, which is added using the alt attribute. Since the element is lowercase, it is recommended to place it inside a block element, for example,

Or