He was absent. Today I will show you a method that can be applied to absolutely any HTML tags and again we use styles (CSS), or rather the style attribute. The general syntax is:

<тег style="background:url("адрес картинки")">...

Be sure to enclose the image address in single quotes as shown. And if you want to make a background image for the entire page, then use the style inside the tag .

<тег style="background:#цвет url("адрес картинки")">...

Please note that there is no need to put a semicolon in the middle, since both values ​​​​relate to the background. When recording this way, the browser first shows the background image, not the color. Now imagine that your background image is a drawing in dark colors, and you have set the text color on the page to white. And everything looks great... Until the user disables displaying images in the browser. Then its background will most likely become white, like your text color.

Example of creating background images in HTML

Constellations in the sky-high distance
Many have been doomed to vain thoughts.
Think again, save your sanity -
The wisest ones have reached a dead end.
Omar Khayyam.

Tables

Most often, tables in HTML are used not for their intended purpose - displaying tabular data, but to create a global page framework. That is, a table is created, stretched to the full width of the page, and then one menu is made in its left column, another in the right column, basic information is placed on average, and so on.

There are three types of layout: tabular, which I told you about above; layers (block), requiring an average level of knowledge of styles (CSS) and combined. In many respects, block layout is still preferable, therefore, if the layout designer can complete the task using both tables and blocks, then the latter is usually chosen.

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 actually 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 them 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

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 there is already a URL, 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">!}

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 a picture in 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 indents, 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