To place images on WEB pages is used. Illustrated tutorial on web graphics. Alt attribute - as a spare option

Definition 1.

Web page is text filecreated in HTML and placed 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:

Create and edit Web Pages.
Edit HTML-format documents from the Internet, taking into account the functioning of all objects implemented in the document (pictures, animations, etc.).
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 appearance Web pages are more presentable and professional, much more complicated, 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 reports some kind of browser additional information On the image and it can also be used to be used with the team.

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 source sizeAt the same time levets the top 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 created pageYou 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 and can be created card images with active areas.

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 block element, eg,

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 in px. Syntax: Height \u003d "300".
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 and creates a connection between the elements and . Attribute cannot be used if the element It is a descendant element or
width	The Width attribute sets the width of the image in PX. Syntax: width \u003d "500".

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 as follows:
../ - 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 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). The SVG drawing consists of a set of geometric shapes described in XML format: line, ellipse, polygon, etc. Supported both static and animated graphics. A set of functions includes various conversions, alpha masks, filter effects, the ability to use templates. Images in SVG format may vary in size without reducing quality.

BMP format (Bitmap Picture). It is an uncompressed (original) bitmap, 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 Serves for representation graphic image In the form of a map with active areas. Active areas are determined by changing the type of mouse cursor when hovering. By clicking on active areas, the user can move to the associated documents.

The tag is available at the NAME attribute, which specifies the name of the map. NAME attribute value for tag Must match the name in the USEMAP element attribute :

...

Element Contains a number of elements defining interactive areas in the map image.

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 - reference to an alternative version of the document (for example, printing form Pages, 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) Location the original image on the active areas of the desired 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 map

2) We ask the name of the card by adding it to the tag Using the Name attribute. The same value assign the attribute of usemap 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

Most Web pages are scheduled. It allows you to color and clearly present information. In many cases, it is better to show a picture than to give a long text description.

There are two ways to place image pages on the page:

inserting individual pictures;
filling the background with a picture.

In any case, the graphic image is taken from the file.

Insert graphic images

Insertion on the graphic page from the graphical format file is made using tag (from the English, image - image) with an indication of the file address as an argument of the SRC attribute:

< IMG SRC = "адрес_графического_файла" >

The address of the graphic file is an etolybo URL, or the file name, possibly indicating the path. For example, to display a graphic file Logotip.jpg should be written tag:

< IMG SRC = "logotip.jpg" >

To increase the speed of graphic image transmission in Tag You can use the attribute ( additional parameter) LowsRC, which takes the address of the graphic file as an argument. You can create two graphic files: one (for example, let it file logotip.jpg) contains a picture obtained with high resolution, and the other (for example, logotip.gif) is a picture obtained with a low resolution. Then tag:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... It will preize the browser first to download the logotip.gif file, and then as you receive to replace it with the logotip.jpg file.

Another way to accelerate the download of graphics is to specify the size of the rectangular area, in which the graphic image will be placed using attributes Width (width) and Height (Height) measured in pixels. If you specify these attributes, the browser will first highlight the place under the schedule, prepare the layout of the document, displays the text and only then load the schedule. Note that the browser compresses or stretches the image, embedding it into the frame specified size. An example of an indication of the image size:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Graphics are commonly used with the text, so the text alignment task and graphic image occurs. This task is solved using the attribute Align. Tag. With the use of various arguments. For example, we can wish the text lying on the right or left. Usually the picture is embedded closely with the text, which may be ugly. In order to avoid this, you can set empty fields around the illustration. Fields are created using attributes Vsras For upper and lower fields and Nspace. For side fields in tag . The arguments of these attributes are indicated in the form of numbers that determine the size of the fields in pixels. To cancel the flow around graphics, the text serves a tag
.

The next tag sets the flow around graphics from the logotip.jpg file to the right (the picture will be left of the text):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

If you want to locate the picture to the right of the text, then you need an attribute Align. Assign an argument Right:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

To set fields around the picture, you need to write a tag of the form:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Here, numbers 20 and 10 determine the size of the fields.

Consider an example of sharing graphics and texts. Open the Notepad (text editor Notepad) Windows. Write in it HTML code using tags discussed above. Below is a program that displays some text and graphics. As a graphic file, you can use any of your files available. Here is used logotip.gif.

< HTML >

< HEAD >

< TITLE > Exercise 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 > The text streams the schedule to the right< / H1 >

Fig. 657.. The text strengthens the picture on the right

The wide possibilities of accurate positioning of images (as well as other elements) on the page provide tables and styles. These HTML elements will be discussed later. For example, you can define a table without visible frames, and in the cells of this table, it is pictures, texts and other elements.

There are hundreds of graphic formats, but only some of them are supported by web browsers. In this article we describe various graphic formats of files that are available for web designers and, inversely, they should be used.

Graphic formats of files that are supported by most popular web browsers are: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and vector graphics. Some properties of graphic files:

Transparency - this property allows the image to be in different degrees of transparency from a solid state to fully transparent.
Compression is a property that allows the image to be stored in a much smaller file, using mathematical algorithms for processing a group of pixels as a single element.
Weave - allows the image to be loaded first by odd lines, and then even. This allows the visitor to see the image more.
Animation - creates the visibility of movement using a series of consecutive snapshots. For an animated GIF, a plugin in the browser is not required and it can work almost on all devices.
Progressive loading is similar to interweaving by the fact that it loads only a part of the image initially, but not based on alternating lines.

GIF was founded in 1980 and accepted by web designers in the early 1990s as the main graphic format for web pages. GIF files use the compression algorithm that makes the size of the file small for quick download. GIF is limited to 256 colors (8 bits), support for transparency and firmware. It is also possible to create animated graphics using this format. All browsers can display GIF files without problems.

GIF advantages:

The most widely supported graphic format
Schemes look better in this format
Support transparency

Files are compressed, but support "true colors" (24 bits) and are a preferred format for photos where the quality question is very important. JPEG supports a progressive format that allows you to almost instantly see an image that improves in quality when the download is over.

Unlike GIF files, web designers can control compressed JPEG files, which allows you to have different levels of image quality and file sizes.

JPEG advantages:

Big compression means a faster download speed.
Produces excellent quality for photos and complex drawings.
Support 24-bit color.

PNG is a relatively recent format that was entered as an alternative for GIF files. PNG supports up to 24 bit color, transparency, interlacing and may contain a short text description of the image that is used in search engines.

Advantages of PNG:

Overcomes 8-bit color of restrictions in GIF
Allows text description of images for search engines
Supports transparency
Schemes look better than JPEG

Vector graphics

Most web graphics are raster image Or a pattern that consists of a grid of color pixels. Illustrations must be created in a vector graphic, which consists of a mathematical description of each element that makes up lines and image colors. Vector graphics is created by attracting programs such as Adobe Illustrator or CorelDRAW. Vector graphics must be converted to any GIF, JPEG or PNG format for use on web pages.

What format should be used?

Web designer can choose either GIF or JPEG format for most applications. But since the size of the GIF files is usually small compared to the size jPEG fileMost web designers will use gif format For background, boxes, frames and any other graphic elements that look perfectly using an 8-bit color.

Most designers will choose jPEG format For photos and illustrations where compression does not compromise visual image quality.

As mentioned, HTML is today the basis for writing any web page in the World Wide Web. When using CSS, the codes in the HTML language changes radically. You can say goodbye to repugrnation of clumsy HTML tagov just to achieve one or another visual effects. On some HTML tags or attributes, such as, for example, an outdated tag ...

the main

Order a website and deal with business!

This phrase can be heard and see on many sites, and this is not in vain!

Website — This is the face of the company. And it is the most modern and efficient communication channel with a potential consumer. Only the capabilities of the Internet site allow you to fully use all ways to report the information message to the user. Text, audio and video information can be filed within one site to familiarize the consumer with them.

Via software The site can be received by payments, talk on the phone, database, send and receive faxes, exchange SMS messages and make many other actions. Modern Internet site is an information center not only any company, but also of any Internet user.

And this is a win-win method of effective and at the same time a simple and visual reporting of their ideas or developments to the widest audience. And today, Web documents written in the HTML hypertext markup language continue to remain the main form of data presentation in the WEB environment.

The most important advantages of HTML are:

Easy, allowing you to learn HTML into the shortest time.
Ability to create your own Web pages
And HTML works absolutely the same on all existing platforms today, buying additional equipment is not necessary. And it is enough to use any available text editor, for example, notepad.

In this site, I tried to describe in detail the whole process of creating a website's own website, namely publishing a finished project in the Internet in order to provide access to all users.

I hope many of my articles will be very useful, because I'm not a programmer myself, but this work is very inspired by me.