Img - Html tag for inserting a picture (Src), aligning and wrapping text around it (align), as well as setting the background (background)

Description

To insert graphic images into an HTML document, use the HTML tag (img abbreviation from English words image- image). Images are not inserted directly into the web page, the tag only contains a link to the image and creates the required size of space in which the image is displayed in graphic format GIF, JPEG or PNG:

• JPG is the most common format for photographs. Images with the .jpg extension display millions of colors, which is especially important for accurately displaying the different tones and gradients in photos. However, such images cannot contain transparent areas.
• GIF is used for simple graphics such as logos. GIF images are not used for photographs because they cannot contain as much color information as JPG images. However, GIF images can have transparent areas and can be compressed into very small file sizes. Also GIF format supports animation.
• PNG is an image format that, like JPG, allows you to display millions of colors and contain transparent areas. However, as a rule, images with a .png extension have several larger size than JPG or GIF.

HTML tag has two required attributes: src and alt.

The src attribute plays an important role in displaying graphics on the page - it sets the path (relative or absolute) to the image, which is not technically inserted into the page: the browser displays the image to which the link leads.

The alt attribute specifies alternative text for the image, which will only be displayed when the image cannot be displayed (the path specified is incorrect or the image has been deleted).

If necessary, the image can be made a link; all you need to do is place a tag inside the element. In this case, a frame will appear around the image, which can be easily removed using CSS:

Images can also be used as image maps - this is where one image contains multiple hotspots different shapes, each of which is separate link. Such a map appearance no different from a regular image.

Note: To add images to a web page, you can also use the background-image CSS property, which allows the usual the background replace the element with an image.

Attributes

src: Tells the browser the location (URL) of the desired image. Example » alt: Provides text description

pictures, displayed on the screen only if the picture for some reason cannot be displayed. Note: to create a tooltip when you hover over an image, you need to use the global title attribute . The attribute value is an arbitrary string in which you can indicate Additional information

about the picture. Example » If a picture is used as a decoration for a web page and does not carry any semantic meaning, then instead of describing the picture, you can leave an empty line (alt="") as the value. height: Specifies the height of the image in pixels. ismap: The ismap attribute is a Boolean attribute. Its presence indicates to the browser that the picture is part of an image map located on the server (an image map is an image with interactive areas).

Valid values Boolean attribute ismap: When you click on the interactive area of ​​the image map, the click coordinates are sent to the server in the URL query string. Note: the ismap attribute is only used if the element is

child element

and creates connections between elements And . .

Example »

Note: the usemap attribute cannot be used if the element

is a descendant of the element

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

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

on the Attributes page tag BODY I have already said that pictures can be the background of an html page, and now I will tell you how these same pictures can be used on more high level, rather than the background.

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

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

Except src attribute at the tag There are a couple more optional but important attributes:

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

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

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

Another example of html code:

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

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

Here's the HTML code:

Text next to the picture.

and the browser will output the following:

Text next to the picture.

HTML code for the right value:

Text next to the picture.

the html page will look like this:

Text next to the picture.

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

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

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

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

I will give a simple html code as an example:

This is such a beautiful picture.

What will happen this example try to see for yourself.

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

the html page will look like this:

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

Publication date: May 15, 2012

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 the “top layer” of an html page.

§ 1. How to insert a picture

To insert images into HTML, use the tag IMG With compulsory 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 of the picture. 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 in 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 display 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 as a percentage (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 this 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 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.

Images on web pages can be used in two ways: as a background and as an independent image. It is recommended to use three graphics formats: JPEG, GIF and PNG. All browsers support them; other formats may require special tools.

As a rule, all images for a site are stored in separate folder, for example, images. And the paths to the images are written in the same way as in the links. If you forgot, take a look.

In all subsequent examples, the paths to the images will be written based on the fact that the pictures are in the images folder, and the pages are in the site folder, located at the same level.

Background images

The background image fills the entire space of the element for which it is specified. So, indicating in the tag attribute background="fon.gif", the fon.gif image will fill the entire browser window.

Sample code: Result

By asking background picture document, do not forget to also specify the parameter bgcolor. This is due to the fact that the user may have disabled loading images and your beautiful background he won't see. Then the browser will use the parameter bgcolor.

Embedding Images

The tag is used to place images on the page , which has a single required parameter src, which specifies the URL of the image.

Example code:

img tag Rest of document content

Result:

Rest of document content

Agree, the text next to the picture doesn’t look very nice.

In order for our images to look the way we want, we need to align them. And the parameter will help us with this align.

This parameter has several meanings. Let's look at them all with examples.

Example code with parameter align="left"

img tag with the align="left" parameter The image is on the left, and the text flows around it on the right, and this text can occupy several lines.

Result:

The picture is on the left, and the text flows around it on the right, and this text can take up several lines.

Example code with parameter align="right"

img tag with the align="right" parameter The image is on the right, and the text flows around it on the left, and this text can occupy several lines.

Result:

The picture is on the right, and the text flows around it on the left, and this text can occupy several lines.

Example code with parameter align="top"

img tag with align="top" The top border of the image is aligned to the tallest element current line. The image seems to be embedded in the line. If the image is large, then the line is expanded to this height.

Result:

The top border of the image is aligned to the tallest element of the current line. The image seems to be embedded in the line. If the image is large, then the line is expanded to this height.

Example code with parameter align="texttop"

img tag with align="texttop" The top border of the image is aligned to the highest text element of the current line ( capital letter lines).

Result:

The top border of the image is aligned to the highest text element of the current line (the capital letter of the line).

Example code with parameter align="middle"

img tag with align="middle" parameter Aligns the middle of the image to the baseline of the current line.

Result:

Aligns the middle of the image to the baseline of the current line. * large font made for clarity of the difference between middle absmiddle

Example code with parameter align="absmiddle"

img tag with align="absmiddle" parameter Aligns the middle of the image to the middle of the current line.

Result:

Aligns the middle of the image to the middle of the current line.

Example code with parameter align="bottom"

img tag with align="bottom" parameter Aligns the bottom border of the image to the baseline of the current line.

Result:

Aligns the bottom border of the image to the baseline of the current line.

Example code with parameter align="absbottom"

img tag with align="absbottom" parameter Aligns the bottom border of the image to lower limit current line.

Result:

Aligns the bottom border of the image to the bottom border of the current line.

If we want the text to be located under the image, then we need to use the tag
with parameter clear, which prohibits flow around. Flow around can be prohibited with right side(right), on the left side (left) and on both sides (all).

Example code:

Prohibition of image wrapping
Other elements of the document

Result:

Other elements of the document

Image sizes

Any image has a size specified in pixels. When embedding an image on a page, you may need to reduce the size of the original image.

For this purpose the tag there are parameters width- width and height- height. They are specified in pixels or percentages (percentage of screen width)

When you load an image, the browser will automatically scale your image to given parameters width and height. Just keep in mind that inaccurate setting of parameters can lead to a change in the proportions of the picture, and consequently to its distortion.

Example code:

Result:

Separating images from text

You probably noticed that the text sticks very closely to the pictures. It's not always pretty. There are options to solve this problem hspace- horizontal indentation and vspace- vertical indent. Indents are specified in pixels.

Example code:

The img tag is indented. The rest of the document content is no longer stuck to the image.

Result:

Alternative text

If the user has disabled the image loading mode, then instead of the picture he will see a red cross (in Internet Explorer) or another icon (in other browsers). It would be nice to give him a hint of what is shown in the picture. To do this, use the parameter alt. The text from this option will be displayed instead of the image (if the image loading mode is disabled). If the picture is displayed, this parameter gives a hint when hovering the mouse cursor, although not in all browsers.

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 block element, For example,

Or

.

Tag It has required attribute src whose value is absolute or relative path to the image:

For tag The following attributes are available:

Table 1. Tag attributes

Attribute	Description, accepted value
alt	The alt attribute adds alternative text to an image. Displayed where the image appears before it is loaded or when graphics are disabled, and is also displayed as a tooltip when hovering the mouse over the image. Syntax: alt="image description" . !}
crossorigin	The crossorigin attribute allows you to load images from resources on another domain using CORS requests. Images loaded into canvas using CORS requests can be reused. Allowed values: anonymous - Cross-origin request is made using an HTTP header, and no credentials are transmitted. If the server does not provide credentials to the server from which the content is requested, the image will be corrupted and its use will be limited. use-credentials — Cross-origin request is performed by passing credentials. Syntax: crossorigin="anonymous" .
height	The height attribute specifies the height of the image. Can be specified in px or %. Syntax: height: 300px.
ismap	The ismap attribute indicates that the picture is part of a map image located on the server (a map image is an image with clickable areas). When you click on a map image, the coordinates are sent to the server as a URL query string. The ismap attribute is only allowed if the element And with a valid href attribute. Syntax: ismap.
longdesc	An extended image description URL that complements the alt attribute. Syntax: longdesc="http://www.example.com/description.txt" .
src	The src attribute specifies the path to the image. Syntax: src="flower.jpg" .
sizes	Sets the image size depending on the display options. Only works when the srcset attribute is specified. The attribute value is one or more strings, separated by commas.
srcset	Creates a list of image sources that will be selected based on screen resolution. Can be used together with or instead of the src attribute. The attribute value is one or more strings, separated by commas.
usemap	The usemap attribute specifies the image as an image map. The value must begin with the # symbol. Meaning is associated with meaning name attribute or tag id
width	The width attribute specifies the width of the image. Can be specified in px or %. Syntax: width: 100% .

1.1. Image address

The image address can be specified in full ( absolute URL), For example:
url(http://anysite.ru/images/anyphoto.png)

Or via a relative path from document. root directory website:
url(../images/anyphoto.png) - relative path from the document,
url(/images/anyphoto.png) - relative path from the root directory.

This is interpreted as follows:
../ - means to go up one level, to root directory,
images/ - go to the folder with images,
anyphoto.png - points to an image file.

1.2. Image Dimensions

Without setting the image dimensions, the drawing appears on the page in real size. You can edit the dimensions of the image using the width and height attributes. If only one of the attributes is specified, the second will be calculated automatically to maintain the proportions of the picture.

1.3. Graphic file formats

JPEG format (Joint Photographic Experts Group). JPEG images ideal for photographs, they can contain millions various colors. Compress images better GIF, but text and large areas of solid color may become splotchy.

GIF format (Graphics Interchange Format). Ideal for compressing images that have areas of solid color, such as logos. GIFs allow you to set one of the colors to be transparent, allowing the background of a web page to show through part of the image. GIF files may also include simple animation. GIF images contain only 256 shades, which makes the images look blotchy and unrealistic in color, like posters.

PNG format (Portable Network Graphics). Includes best features GIF and JPEG formats. Contains 256 colors and makes it possible to make one of the colors transparent, while compressing images in smaller size than a GIF file.

APNG format (Animated Portable Network Graphics). Image format based on PNG format. Allows you to store animation and also supports transparency.

SVG format (Scalable Vector Graphics). An SVG image consists of a set geometric shapes described in XML format: line, ellipse, polygon, etc. Both static and animated graphics are supported. Feature set includes various transformations, alpha masks, filter effects, the ability to use templates. SVG images can be resized without losing quality.

BMP format (Bitmap Picture). Represents the uncompressed (original) raster image, whose template is a rectangular grid of pixels. A bitmap file consists of a header, a palette, and graphic data. The header stores information about the graphic image and file (pixel depth, height, width and number of colors). The palette is indicated only in those Bitmap files that contain palette images (8 or less bits) and consist of no more than 256 elements. Graphic data represents the picture itself. Color depth in this format can be 1, 2, 4, 8, 16, 24, 32, 48 bits per pixel.

ICO format (Windows icon). File icon storage format in Microsoft Windows. Also, Windows icon is used as an icon on websites on the Internet. It is a picture of this format that is displayed next to the site address or bookmark in the browser. One ICO file contains one or more icons, the size and color of each of which can be set separately. The icon size can be any size, but the most common are square icons with sides of 16, 32 and 48 pixels.

2. Tag

Tag

The tag has a name attribute available, which specifies the name of the map. The value of the name attribute for the tag

Element

3. Tag

Tag describes only one active region as part of a client-side image map. The element does not have a closing tag. If one active area overlaps another, the first link from the list of areas will be implemented.

Table 2. Tag attributes

Attribute	Short description
alt	Sets alternative text for the active map area.
coords	Determines the position of the area on the screen. Coordinates are given in length units and separated by commas: For circle— coordinates of the center and radius of the circle; For rectangle— coordinates of the upper left and lower right corners; For polygon- coordinates of the vertices of the polygon in in the right order, it is also recommended to specify the last coordinates equal to the first for the logical completion of the figure.
download	Complements the href attribute and tells the browser that the resource should be loaded the moment the user clicks the link, instead of, for example, having to open it first (like a PDF file). By specifying a name for an attribute, we are thus giving a name to the loaded object. It is allowed to use an attribute without specifying its value.
href	Specifies the URL for the link. Can be specified absolute or relative address links.
hreflang	Specifies the language of the associated web document. Only used in conjunction with the href attribute. Accepted values ​​are an abbreviation consisting of a pair of letters indicating the language code.
media	Determines what types of devices the file will be optimized for. The value can be any media query.
rel	Expands the href attribute with information about the relationship between the current and related document. Accepted values: alternate - link to alternative version document (for example, printed form pages, translation or mirror). author — link to the author of the document. bookmark - Permanent URL used for bookmarks. help - link to help. license - link to copyright information for this web document. next/prev - indicates the relationship between individual URLs. Thanks to this Google markup can determine that the contents of given pages are related in a logical sequence. nofollow - prohibits search engine follow links on this page or a specific link. noreferrer - indicates that when following a link, the browser should not send an HTTP request header (Referrer), which records information about which page the site visitor came from. prefetch - indicates that the target document should be cached, i.e. browser in background loads the contents of the page into its cache. search - Indicates that the target document contains a search tool. tag - indicates keyword for the current document.
shape	Specifies the shape of the active area on the map and its coordinates. Can take the following values: rect — rectangular active area; circle — active area in the shape of a circle; poly — active area in the shape of a polygon; default — the active area occupies the entire area of ​​the image.
target	Specifies where the document will be downloaded when the link is clicked. Takes the following values: _self — the page is loaded into the current window; _blank — the page opens in a new browser window; _parent — the page is loaded into the parent frame; _top - the page loads in the full browser window.
type	Specifies the MIME type of the link files, i.e. file extension.

4. Example of creating an image map

1) Mark the original image into active areas of the desired shape. The coordinates of the areas can be calculated using a photo processing program, for example, Adobe Photoshop . Paint.

Rice. 1. Example of image markup to create a map

2) Set the name of the card by adding it to the tag

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Rice. 2. An example of creating an image map, when you click the mouse cursor on a flower, you go to a page with a description