The correct example of an image insertion into an HTML document. How to insert a picture in HTML - editing, alignment, attributes. List of free photobanks

.

Tag It has a mandatory SRC attribute, the value of which is an absolute or relative path to the image:

For tag The following attributes are available:

Table 1. Tag Attributes

Attribute	Description
Alt.	The Alt attribute adds alternative text to the image. It is displayed at the site appearance before loading it or when the graph is disabled, and is also displayed with a pop-up tip when you hover the mouse cursor to the image. Syntax: Alt \u003d "(! Lang: image description" . !}
Crossorigin.	The Crossorigin attribute allows you to upload images from other domain resources using CORS queries. Images loaded in canvas using Cors queries can be reused. Permissible values: Anonymous - Cross-Origin query is performed using an HTTP header, and the credentials are not transmitted. If the server does not give the credentials to the server from which the content is requested, the image will be damaged and its use will be limited. Use-Credentials - Cross-Origin query is executed with the transfer of credentials. Syntax: Crossorigin \u003d "Anonymous".
Height	HEIGHT attribute sets the image height. It may be indicated in px or%. Syntax: HEIGHT: 300PX.
ismap	The ISMAP attribute indicates that the picture is part of an image-card located on the server (map image - an image with interactive areas). When you click on the image map, the coordinates are transmitted to the server as a query string URL. ISMAP attribute is allowed only if the element It is a descendant element With the actual href attribute. Syntax: ISMAP.
Longdesc.	Extended image description URL that complements the Alt attribute. Syntax: LongDesc \u003d "http://www.example.com/description.txt".
SRC	The SRC attribute sets the path to the image. Syntax: SRC \u003d "Flower.jpg".
Sizes.	Specifies the image size depending on the display parameters. It works only with a specified SRCSET attribute. The attribute value is one or more lines specified through the comma.
SrcSet.	Creates a list of sources for the image that will be selected based on the screen resolution. It can be used together or instead of the SRC attribute. The attribute value is one or more rows separated by the comma.
usemap	The usemap attribute defines the image as a map image. The value must begin with the # symbol. The value is associated with the Name attribute value or tag ID
width.	The width attribute sets the width of the image. It may be indicated in px or%. Syntax: width: 100%.

1.1. Image address

The image address may be fully indicated (absolute URL), for example:
URL (http://anysite.ru/images/anyphoto.png)

Or through the relative path from document or root catalog Site:
URL (../ images / anyphoto.png) - relative path from the document,
URL (/Images/anyphoto.png) is a relative path from the root catalog.

This is interpreted in the following way:
../ - Means to climb up one level, to the root catalog,
Images / - Go to the image folder,
anyphoto.png - indicates the image file.

1.2. Image dimensions

Without specifying the image size, the drawing is displayed on a real size page. You can edit the image dimensions using Width and Height attributes. If only one of the attributes is specified, the second will be automatically calculated to preserve the pattern proportions.

1.3. Formats of graphic files

JPEG format (Joint Photographic Experts Group). JPEG images are ideal for photos, they may contain millions of different colors. Squeeze images better than GIF, but text and large areas with solid color can be covered with spots.

Gif format Graphics Interchange Format). Ideal for compressing images in which there are areas with solid color, such as logos. GIF files allow you to set one of the colors transparent, so that the web page background can manifest themselves through part of the image. Also, GIF files may include simple animation. Gif images contain only 256 shades, because of which the images look spotted and unrealistic color as posters.

PNG format PORTABLE NETWORK GRAPHICS). Includes the best features of GIF and JPEG formats. Contains 256 colors and makes it possible to make one of the colors transparent, while compressing the images into a smaller size than the 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). SVG drawing consists of a set geometric figuresdescribed in XML format: line, ellipse, polygon, etc. Supported both static and animated graphics. A set of functions includes various transformations, alpha masks, filter effects, the ability to use templates. Images in SVG format may vary in size without reducing quality.

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

ICO format (Windows Icon). File storage icons in Microsoft Windows.. Also, Windows Icon is used as an icon on the 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 chromaticity of each of which is set separately. The size of the icon can be any, but most used square icons with parties 16, 32 and 48 pixels.

2. Tag

Tag

The tag is available at the NAME attribute, which specifies the name of the card. NAME attribute value for tag

Element

3. Tag

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

Table 2. Tag Attributes

Attribute	Short description
Alt.	Specifies alternative text for the active map.
coords.	Defines the position of the area on the screen. The coordinates are set in units of length and are separated by commas: for circle - center coordinates and radius of the circle; for rectangle - coordinates of the upper left and right lower corners; for polygon - The coordinates of the vertices of the polygon in the desired order, it is also recommended to indicate the latest coordinates equal to the first, for the logical completion of the figure.
Download	Complements the HREF attribute and tells the browser that the resource must be loaded at the time when the user clicks on the link, instead of, for example, to pre-open it (as a PDF file). By specifying the name for the attribute, we thus set the name to the downloadable object. It is allowed to use the attribute without specifying its value.
href.	Specifies the URL for reference. An absolute or relative link address can be specified.
hreflang.	Specifies the language of the associated web document. Used only with the href attribute. The received values \u200b\u200bare an abbreviation consisting of a pair of letters denoting language code.
Media.	Determines for which types of devices the file will be optimized. The value may be any media query.
REL.	Complements the HREF attribute with information on the relationship between the current and associated document. Total values: Alternate - Link to alternative version document (for example, printing page, translation or mirror). Author - link to the author of the document. Bookmark is a permanent URL used for bookmarks. Help - reference link. License - reference to copyright information on this web document. NEXT / PREV - Specifies the link between the individual URL. Thanks to this markup, Google can determine that the content of page data is connected in a logical sequence. Nofollow - forbids search engine Go on the links on this page or for a specific link. Noreferrer - Indicates that the browser link should not send the HTTP request header (referrer), which records the site visitor from which page. Prefetch - indicates that the target document must be cached, i.e. The browser in the background loads the contents of the page to your cache. SEARCH - indicates that the target document contains a search tool. Tag - Indicates keyword For the current document.
shape	Specifies the form of an active area on the map and its coordinates. Can take the following values: RECT - active area of \u200b\u200brectangular shape; Circle is an active area in the form of a circle; Poly is an active area in the form of a polygon; Default - the active area takes the entire area of \u200b\u200bthe image.
target.	Specifies where the document will be downloaded when the link is shown. 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-parent; _Top - Page is loaded into the full browser window.
Type	Specifies the MIME type of reference files, i.e. file extension.

4. An example of creating a map image

1) Mark the original image on active areas necessary form. Coordinates of the areas can be calculated using a program for processing photos, for example, Adobe Photoshop. or Paint..

Fig. 1. An example of an image markup to create a card

2) We ask the name of the card by adding it to the tag

JPG "Alt \u003d" (! Lang: Flowers_foto" width="680" height="383" usemap="#flowers"> !}
Fig. 2. An example of creating a map image, when you press the mouse cursor on the flower, transition to the page describing

1. In the folder HTML. Create folder Lesson3.In it we will save all the Web-Pages obtained during our occupation.

2. To graphic objects that can be included in Web.-Strants include various kinds of drawings, photos and video clips. Often use sound support Web.Stranger. We will only consider the insertion of images. Browsers are able to display only three types of graphic files: format files GIF., JPEG and PNG.. Format files GIF. allow you to create animated images. JPEG - Files are usually used to save photographic images. Recently appeared format PNG. Provides good quality Images and small graphic file.

To insert an image to the composition Web.The assistant is used by TEG With a multitude of attributes. This tag does not have a closing double. The main and mandatory tag attribute is attribute SRC. As the value of this attribute, the address of the inserted graphic file is used, or, if you are accurate, its URL.

Tag may also include an attribute Alt \u003d "[Text]". Having met such a tag, the browser will show the text on the screen "Picture" and starts uploading to his place a picture from the file picture.gif.. Attribute Alt. It may be necessary for old browsers that do not support images, as well as in case the browser is disabled automatic download Images. In the event that the graphic image is still shown by the browser, the text of the alternative text view is displayed in the form of a hint, a short text tip when the user hits the mouse over this graphic image.

3. In the folder Lesson3. Copy the file. picture.gif. (\\\\ Tserver \\ Students \\ VKT \\ IP \\ Technology work with software \\ files for work).

4. Create B. Notepad new file and type text in it HTML.-document. Save this file under the name page1.htm. in folder Lesson3. And look at it in the browser window.

5. By default, the graphic image is shown exactly in the form in which it was created, while preserving the size vertically and horizontal. However, we have the opportunity to explicitly set the dimensions of the pattern at their discretion. For this use attributes Height and Width. Their values \u200b\u200bare set in pixels or percentages from the size of the browser window.

It should be noted that the browsers seek to keep the pattern proportions, so the explicit task of the size, changing the proportions, can be ignored by the browser, and it will choose such dimensions that would be as close as possible to the specified user, but did not violate the image proportions. Usually for Web.-Strants prepare drawings of those sizes that will be applied when they are displayed in the composition Web.Stranger. If one image should be displayed several times with different sizes, it is easier to prepare several graphic files than to give your drawings for an uncontrolled browser display, which can break the entire web pages laying. Change the dimensions inserted into HTML.-document page1.htm. Images. Save the file under the same name and browse it in the browser.

6. There are attributes Hspace. and Vspace.allowing to indicate the amount of pure space that will separate the graphic image from the surrounding other design elements Web.-Rearters, in other words, set the penny penny. Attribute Hspace. Sets the indent horizontally in pixels, and the attribute Vspace. - vertically. Please note that these attributes can only be defined by numeric values \u200b\u200bindicating distances in pixels. The zero value for these attributes is not provided, but usually each browser uses a small non-zero value. Change HTML.-document page1.htm. By adding the following code fragment:

7. Save the file under the same name and see it in the browser. Change the browser window sizes, make it a narrow, half of the monitor screen. As we can see, the image is inserted immediately after the first sentence, where we placed tag . If we reduce the sizes of the browser viewing window horizontally so that the first sentence and drawing cannot fit on one line, then the offer will be displayed first, and the drawing, pressed to the left edge of the viewing window. To the right of it will begin to display the following text after it in such a way that the base line line coincides with the bottom edge of the pattern.

8. Set the drawing indentation from the text by changing HTML.-document page1.htm. in the following way:

9. Save the file under the same name and look at it in the browser.

10. For alignment graphic object The attribute is used relative to the flowing text. Align.. Its value may be one keyword from a predefined set. Values Bottom, Middle and Top. Apply to positioning the first line of the text that flows around the drawing vertically. Value Top. shifts it up Bottom - down, and Middle Allows you to center the vertical string.

Value horizontal leveling applies values Left. and Right. First meaning Left.as it is easy to guess, shifts the drawing to the left edge of the block in which it is displayed, and Right - To the right.

Add B. HTML.-document page1.htm. in tag attribute Align. with meaning Left. And see how the location of the drawing and text has changed around it.

11. Change in Tag HTML.- Document page1.htm. Attribute value Align. on the Middle And see how the location of the pattern and the text around it will change.

The first line of the text, which is after tag insertion, is displayed vertically in the center of the free space to the right of the picture. The remaining text is under the drawing. If we assigned an attribute Align. value Top.The first line would appear next to the upper cut. When using the value Bottom The first line of the text is displayed next to the bottom limit of the pattern.

It should be noted that the browser recognizes only one attribute Align., i.e. we can specify either vertical or horizontal alignment. If the built-in positioning and leveling means is not enough, you can refer to the layout process using tables.

12. Using the attribute Border. We can set the thickness of the border surrounding the drawing. The attribute value is the number indicating the thickness in pixels. By default, the zero value that makes the border invisible. Set for drawing a border with a thickness of 5 pixels.

13. Color Gamma HTML.-document is determined by attributes placed inside the tag .

· bgcolor - Determines the color background of the document.

· tEXT. - Determines the color of the text of the document.

· lINK. - Determines the color of the dedicated text element, when you click on which is the transition by hypertext link.

Tag may also include an attribute background \u003d "[File Name]"which sets an image that serves as background for text and other images. Like any other image, the background should be presented in format GIF. (file with extension * .gif.) or JPEG (file with extension * .jpg or * .jpeg). Browsers are filled with multiple copies of the image-background. The entire window of the window in which the document is opened, just as in construction, large wall spaces are covered with small (and the same) tiles.