Images on web pages. Graphics on the Web page in HTML

To insert the image in the text of the web page, use single tag (Table. P 1). Attributes of this tag set all the parameters of the image posted on the page. Mandatory is the SRC attribute that determines the address and name of the graphic file. If the SRC attribute is not installed, only an empty image icon will be displayed.

Tag structure The SRC attribute is:

.

If the graphic file named the Institute is in the same folder as the Web page, it should be written to its placement:

.

File Name Format

To accommodate a graphic file with the name Minsk, on the address D: \\ Collection \\ city \\ Minsk.gif, you should record .

Using tag The web page hosts a graphic file located on another computer in the global Internet "Internet".

To create a Web page with a photo of our institute, which is shown in Fig. 4.1, you need to enter the following HTML code:

Our institute

Fig. 4.1. Web page with photo Institute

In the above example, the height of the photo (Height) is 200 pixels, and width (width) is 300 pixels. To accommodate the photo, an paragraph is created with alignment in the center.

Horizontal lines

Accommodation on the Horizontal Line Web page is carried out using a single tag

---

. Using the attributes Size, Width, Color and Align, the thickness, width, color and method of alignment of lines are changed accordingly.

Consider a few examples explaining the placement of the Gori-umbrella lines:

1.

---

- horizontal line for the entire page with a thickness of 2 pixels.

2.

---

Width \u003d "200" Align \u003d "Right"\u003e - a horizontal line of green color 15 pixels, a width of 200 pixels and leaving on the right edge.

3.

---

- Horizontal blue line on the entire page with a thickness of 25 pixels.

4.

---

Width \u003d "300" Align \u003d "Left"\u003e - a horizontal line of red color 20 pixels thick, 300 pixel width and alignment along the left edge.

Displaying lines for four recorded examples is shown in Fig. 4.2.

Fig. 4.2. Lines on the Web page

Tables

Creating Tables

Creating a table is carried out using a pair tag

… . This tag creates a table in the place where it is added
In the HTML code.

Any table consists of lines, and lines are from cells. For the form-mating rows and cell cells, the following tags are used:

... - new line;

... - Cell header;

... - normal table cell.

These tags are recorded inside the pair tag

… .

The formation of the table occurs on the rows - one line is specified and the required number of cells is specified in it, then the second line, etc.

In order to get a table on the Web page shown in Fig. 5.1, you need to dial the next HTML code:

Fig. 5.1. Page with Table

The text in the table header cells (Fig. 5.1) is displayed by half-bold font with alignment in the center of the cell, and in conventional cells the text is not highlighted and aligned to the left edge.

It should be noted that in the HTML code of the above tag

Cars	Price	Ford	5000	Golf	6000

Contains the Border attribute with the value "1". This means that in the table shown in Fig. 5.1, the thickness of the outer boundary is equal to
1 pixel. If you record

… ,

the thickness of the outer boundary will be equal to 6 pixels. To the table boundaries are not displayed, the Border attribute is necessary to assign a value equal to 0, or simply to omit this attribute.

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 you want to put on your page or do you want to put a logo on your website? All this is easy. After reading this article, you can insert pictures on your HTML pages without any difficulties. To do this, let us talk in detail about IMG tag and its attributes, briefly consider the formats of graphic files, such as GIF, JPEG and PNG, as well as let's see the new features of HTML5, which simplify the insertion of video and audio to the site.

Due to the fact that the graphic data and HTML text cannot be combined in one file, another approach is used to display them on the site, rather than with other HTML pages. First of all, graphic images, and other multimedia data are stored in separate files. And for their implementation, special tags are used in the Web page that contain links to these individual files. In particular, the tag is iMG tag. Having met such a tag with the address, the browser first requests the appropriate file with the image, audio or video, and only then displays it on the Web page.

All graphic images are generally any data that is stored in individual files from the web page are called implemented Page elements.

Before inserting pictures and consider the "img" tag in detail, it is worth a little learning about graphic formats.

Graphic image formats.

There are many different graphic formats, but browsers support only a few. Consider three of them.

1. JPEG format(Joint Photographic Experts Group). Pretty popular format used for storing images. Supports a 24-bit color and retains all halftone in photos unchanged. But JPEG does not support transparency and distort small details and text in the images. JPEG is used mainly for photo storage. This format files have JPG, JPE, JPEG extensions.

2. Gif format(Graphics Interchange Format.). The main advantage of this format is the ability to store several images in one file at once. This allows you to create whole animated rollers. Secondly, it supports transparency. The main disadvantage is support for only 256-colors, which is not suitable for storing photos. GIF is mainly used for storing logos, banners, images with transparent sites and containing text. This format files have a GIF extension.

3. PNG format(Portable Network Graphics.). This format was developed as replacing the outdated GIF, as well as to some extent, JPEG. Supports transparency, but does not allow creating animation. This format has an extension of PNG.

When creating sites usually use images in JPEG or GIF format, but sometimes use PNG. The main thing to understand in what cases what format is better to use. If briefly, then:

JPEG is best used to store photos or halftone pictures not containing text;

• GIF is used mainly for animation;
• PNG is a format for the rest (icons, buttons, etc.).

Inserting pictures in HTML Pages

So how do you still insert the image on the web page? Insert the image allows single iMG tag. The browser places the image in the place of the web page where IMG will meet.

Insert code pictures in HTML The page has this kind:

This HTML code will place the image stored in the image.jpg file on the web page, which is in the same folder with a web page. How could you notice the address of the picture indicated in sRC attribute. What I already told. So, the SRC attribute is a mandatory attribute that serves to specify the address of the file with the image. Without an attribute of the SRC, the IMG tag does not make sense.

I will give some more examples to specify the address of the file image:

this HTML code will insert a picture with the image.jpg name to the page, which is stored in the Images folder located in the root of the website.

In the SRC attribute you can specify not only relative links to images. Since the images are stored on the network along with HTML pages, so each file with the image has its own URL. Therefore, the SRC attribute you can insert the image URL. For example:

This code will insert the image from MySite.ru to the page. URL ADPEC is usually applied if you specify an image on another site. For images stored on your site, it is better to use relative links.

The IMG tag is a lower case element, so it is better to put it inside the block element, for example, inside the "P" tag - paragraph:

Let's practice and insert the image to our page from previous articles on the HTML image. I will create next to the HTML file of your page "Images" folder and put the file with the picture "bmw.jpg", which looks like this:

Then the HTML page of the page with the inserted picture will be like this:

And we look at the display result in the browser:

As we see nothing complicated in the placement of images on web pages. Next, consider several other important attributes of the "IMG" tag.

Alt attribute - as a spare option

Since image files are stored separately from web pages, then for their receipt, the browser has to do separate requests. And what if the images on the page there will be a lot and the speed of connection to the network is small, then the download of additional files will require considerable time. And worse if the image was removed from the server without your knowledge.

In these cases, the web page itself will be successfully loaded, only white rectangles will be displayed instead of images. Therefore, to inform the user information that the image is used. Using this attribute, the so-called replacement text is indicated, which will be displayed in an empty rectangle while the image does not boot:

And it looks like this:

Set the size of the image

There is still a couple of IMG tag attributes that you should know about. This is a pair of attributes width. and height. You can use them to specify image dimensions:

In both attributes, the size is indicated in pixels. The width attribute indicates the browser what width should be an image, and the height attribute of which height. These two attributes can be applied together and separately. For example, if you only specify the width attribute, the browser will select the height automatically proportional to the specified width and also if only the HEIGHT attribute is used. If you do not specify these attributes at all, the browser can automatically determine the size of the image before the output of it on the screen. It is worth only noting that the image size specifies slightly accelerates the work of the browser when the page is displayed.

On this about inserting images on the pages, all, then consider how to insert audio or video to the site ...

Insert video and audio with HTML 5

In the new HTML5 specification, several new tags appeared with which you can easily insert multimedia files. This primarily concerns video and audio.

For insert audio HTML5 provides a pair tag Audio.. The address of the file in which the audio ring is stored, is indicated by the SRC attribute already familiar to us:

The "Audio" tag creates a block element on the page. By default, the browser will not reproduce the audio ring. Whatever he did, in the Audio tag, you must specify a special attribute autoPlay. Special, because it does not matter. One of the presence of this attribute in the tag so that he began to act.

By default, the audio ring is not displayed on the Web page. But if in the "Audio" tag put an attribute without meaning controls.The browser will display in the place of the web page where the Audio tag is located, the playback controls of the audio ring. They include the start button and pause playback, playback scales and volume control.

Definition 1.

Web page is a text file created in HTML and located in World Wide Web (WWW). The web page except text may contain hypertext links for which you can transition to other web pages and view them, as well as inserts in the form of graphics, animations, video clips and music.

Using the HTML language, you can:

1. Create and edit Web Pages.
2. Edit HTML-format documents from the Internet, taking into account the functioning of all objects implemented in the document (pictures, animations, etc.).
3. Using hypertext links and the ability to introduce into a document HTML-format drawings, diagrams, animations, video clips, musical and speech accompaniment, text special effects, creating multimedia presentations, slideshows, demonstration projects.

Note 1.

Graphic images are usually stored in separate files. In HTML, there are special tags, with the help of which in the codes of Web pages are prescribed links that are actual addresses of these files on the Internet. Meeting such tags, the Web browser makes a request to the Web server to the appropriate file with the image, an audio or video and brings it to the Web page into the location of this tag. Any data (images, audio and videos, etc.), which are stored in individual files from the Web page, are called embedded Web pages. Consider a Read more of the process of adding an image to the Web page.

Adding images to a Web page

The attractiveness of the Web pages is precisely in the graphics and other different objects used on them. Add image to the page is not difficult. And add graphics capable of making the look of the Web page more presentable and professional, much more difficult, special knowledge will be required.

Add an image to the page can be using a source tag of an image that looks:

where - the tag itself, and SCR is his attribute. Since the SCR attribute is mandatory, it can be said that all this entry is one common tag. In the source tag, the corresponding closing party is not used, since the source tag is self-sufficient, and therefore when it is used, it is necessary to add a closing oblique line at the end :.

Adding alternative inscriptions

On the Internet, you can very often find various inscriptions that are displayed when you hover the mouse pointer to any graphic object of the Web page. These inscriptions usually contain additional information about the image itself or about the area of \u200b\u200bthe page on which it is located.

Below is the NTML code in which the Alt attribute is added inside the tag. This attribute is similar to the SRC attribute informs the browser for some additional information about the image and it can also be used together with the TEG.

alt \u003d "(! lang: it's a picture!" />!}

The attribute function ALT is to determine for the graphic element of alternative text added to the Web page. It is called alternative because it is displayed on the screen as an alternative for the image itself. The Alt attribute performs another important feature. It allows the web designer to be sure that if the page visitor does not see the image on his screen, he anyway at least be able to familiarize himself with the textual information added to this image.

When using the Alt attribute for each tag, it is important to be attentive to not assign text messaging in graphical elements. For example, it makes no sense in adding alternative text inscriptions to the elements of the appearance of the page. To avoid such errors, you can assign an empty value attribute of these elements (alt \u003d "). If you do not specify the values \u200b\u200bto other attributes, the browser will reproduce the image in the original size, while lines the upper edge of the image with the top edge of a series of text string. However, you can change both of these parameters using the style tags.

Image attributes

The tag has attributes that allow you to change the size of images. Here is some of them:

• height - With it, it is determined by the height of the image in pixels or percentages;
• width - using it the width of the image in pixels or percentages is determined.

Adjusting the height and width of the image

The dimensions of the images posted on the Web pages can be set using the above attributes. Moreover, their values \u200b\u200bare specified either as a fixed number of pixels, or as a percentage relative to the size of the page. In the HTML code below, the first tag contains the sizes of the original image in pixels (60 pixels vertically and 60 pixels horizontally), the second tag width of the same image sets equal to 6% of the width of the page, and the height is 10% relative to the height of the page.

alt \u003d "This is a picture!" Weight \u003d "60" width \u003d "60" /\u003e

alt \u003d "This is a picture!" Height \u003d "10%" width \u003d "6%" /\u003e

Note 2.

When playing images in your window, the browser is equally well coping with the processing of the values \u200b\u200bof both species. However, it is necessary to remember that visitors of Web pages on computers can be installed on-screen resolution other than yours. Therefore, when the image size changes, you must definitely set both image values \u200b\u200b(height and width). When you change only one of these values, the image may be stretched on the screen or horizontally.

You can use the creation of an illusion of a faster image loading. To do this, you should always specify the values \u200b\u200bof the HEIGHT and WIDTH attributes regardless of whether the image dimensions are changed or not. Since they inform the browser important information on the number of space required to place the image on the page. In response, the browser indicates the space you need for the image and continues to build other elements of the page, without stopping the download of the image itself. In this regard, it seems that the page is loaded faster, since its visitors do not have to wait for a full load of the image to see other information on the page.

In order for the image on any screen, regardless of its permission, it took exactly a specific space over the width of the page, you must use percentage values. If it is necessary that the permanent is permission of the drawing itself (its size in pixels), it is necessary to use values \u200b\u200bin pixels.

Leveling text and graphics

To align the image on the right (Right) or left (Left), the edge of the text string uses the Align tag attribute. For example:

alt \u003d "This is a picture!" Weight \u003d "60" width \u003d "60" align \u003d "right" /\u003e

To align the image vertically relative to the text string, you can also use this attribute that can take Top, Bottom and Center values. The Top value indicates the alignment of the upper edge of the image along the upper edge of its surrounding text. The Bottom value indicates the alignment of the lower edge of the image along the lower edge of its surrounding text. The center value indicates the image center alignment in the text string center.

Using images as references

Images are also used to design hyperlinks to other documents. In the HTML, the image turns into a hyperlink as well as the inscription. To do this, the TEG is used in which the element of the page is (in our case, the image), which should be a reference. The following link will be switched to this image.

Miniatures of images

In addition to the above method, in which the image acts as a hyperlink, it can also be used as a hyperlink that transitions from one image to another. This is necessary in cases where the image size that is wanted to publish on the Web page is quite large and will be loaded for a very long time, which is unacceptable for many visitors. Therefore, create a reduced copy of this image (thumbnail) and represent it hyperlink. If the page's visitor is interested in this image, he, by clicking on the thumbnail, will be able to go to view the full-fledged image. We give an example code:

alt \u003d "Click to see the normal image."

weight \u003d "60" width \u003d "60" /\u003e

Secrets of successful use of images

Images carry a lot of visual information for visitors, and it makes them attractive, besides, they are quite pretty to add to the Web page, but at the same time you need to adhere to certain rules for creating the site, if we want it to become popular on the network.

When creating pages, you must try to place images of small sizes on them, since large-dimensional images will require a lot of time to download, and some users still use low bandwidth channels to access the network, and therefore the size of the downloaded files have for them fundamental importance.

Note 3.

The overall size of the entire HTML document file is important, which, in turn, will depend not only on the size of the images contained in it, but also on their quantity. You need to be attentive when using the Alt attribute so that the text message content always corresponds to the image itself. And in the opposite case: it is necessary to ensure that the image corresponds to the text information presented on the page.

When using images borrowed on the Internet, on the page being created, you must check whether these images are protected by copyright.

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

With the help of HTML tags

Insert images in HTML document

1. Tag

Element Represents the image and its backup content that is added using the Alt attribute. As item is a line, then it is recommended to place it inside the block element, for example,

Or