Images. Illustrated tutorial on Web graphics Adding images to a Web page

Tag has a required src attribute, the value of which is the absolute or relative path to the image:

For tag The following attributes are available:

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 in px. Syntax: height="300" .
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 is a descendant of the element 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. The value is associated with the value of the tag's name or id attribute
width	The width attribute specifies the width of the image in px. Syntax: width="500" .

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 or 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 go up one level, to the 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 is displayed on the page in its actual 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 are ideal for photographs and can contain millions of different colors. Images compress better than GIFs, 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 the best features of 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). An image format based on the PNG format. Allows you to store animation and also supports transparency.

SVG format (Scalable Vector Graphics). An SVG drawing consists of a set of 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). It is an uncompressed (original) bitmap 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. The 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 website 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.

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 or Paint.

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

This tutorial looks at how to decorate a web page by adding graphics to it. We will get acquainted with the most common image formats, find out which tag is used to add pictures to the page, and understand alternative labels and alignment of text and graphics. We will also get acquainted with the basic attributes of images and learn how to adjust the width and height of the image. Next, a few words about using images as links and what image thumbnails are. In conclusion, here are some general tips for using graphics on a web page.

Adding images to a web page
If there is nothing on the web page other than text information, it may seem interesting to someone, thanks to the information presented on it, but it is unlikely that anyone would dare call it attractive. Adding images to a web page is very easy. Adding graphics that can give a page a professional look requires some knowledge. That's what today's lesson is about.

The two most commonly used image formats on the Internet are GIF and JPEG. The format, developed and named by the JPEG (Joint Photographic Experts Group) group, is typically used to save images with smooth color transitions, such as photographs.

Almost all other graphic elements are saved in the GIF format (Graphics Interchange Format) - a graphics interchange format. Currently, there is another new graphics format that is becoming increasingly popular: PNG (Portable Network Graphics). It is expected that it will eventually replace the GIF format. However, do not rush to save all your graphic files in this format, as it is not yet supported by all browsers.

All images are added to a web page using the same tag, called the image source tag . Probably, now you yourself can determine that this entry consists of the actual tag , its attribute (scr) and the value of this attribute (location). However, since the use of the scr attribute is mandatory, it is more convenient to talk about this entry as one general tag. You may also have noticed that the image source tag does not have a corresponding closing tag. This is a separate, self-contained tag, so don't forget to add a trailing slash at the end: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> First images e> This picture was added to my first web page.r >

Adding alternative captions
While traveling on the Internet, you have probably noticed more than once various inscriptions that are displayed when you hover your mouse over some graphic element of a web page. These labels usually provide some additional information about the image itself or the area of ​​the page it occupies.

The example HTML code below shows how the alt attribute is added inside a tag . Like the src attribute, the alt attribute tells the web browser some additional information about the image, and it can also always be used in conjunction with a tag .

The alt attribute specifies alternative text for a graphic element added to a web page. This text is called alt text because it can appear on the screen as an alternative to the image itself. The alt attribute has another very important purpose. Many Internet visitors who use low data rates may instruct their browsers not to load or display graphic information. This allows them to load web pages faster on their computers.

Also, remember that not all browsers are capable of displaying graphics in their windows. For example, the Lynx browser does not support this feature at all. Thus, the alt attribute allows a web designer to be sure that if a visitor to his web page does not see an image on his screen, he will at least be able to see the textual information added to that image.

Although the alt attribute can be defined for each tag , be careful not to assign to some graphic elements text messages that do not correspond to them. For example, it doesn't make sense to add alternative text labels to various elements external design of the web page. To avoid such errors, you can assign the alt attribute of such elements to an empty value (alt=""). If you do not set any other attribute values, the browser will render the image at its original size, aligning the top edge of the image with the top edge of the adjacent text string. You can change both of these options using stylesheet tags.

Image Attributes
For tag Attributes are provided that allow you to resize the image. Some of these attributes are listed below.
height— Specified in pixels or percentages — Determines the height of the image
width— Specified in pixels or percentages — Determines the width of the image.

Adjusting image height and width
The dimensions of an image placed on a web page can be specified using the height and width attributes. The values ​​of these attributes are specified either as a fixed number of pixels or as a percentage relative to the page size. Take a look at the HTML code below. In the first tag, the dimensions of the original image, which you have already seen in the previous drawings of this lesson, are set to 60 pixels vertically and 60 pixels horizontally. In the second tag, the width of the same image is set to 6% of the page width, and the height to 10% of the page height. The picture shows how both of these images look in a browser window.

When displaying an image in its window, the browser is equally good at processing values ​​specified in pixels and percentages. Be aware, however, that the computers of visitors to your web page may be set to a different screen resolution than the one installed for your monitor. What follows from this? For example, the monitor resolution is set to 800x600. In the previous example, the width of the graphic being added to the web page was set to 6% of the page width, which at this resolution would be 48 pixels. If you view the same image on a monitor with a resolution of 1024x800, the specified 6% of the page width will correspond to a width of 61 pixels.

When resizing an image, be sure to set both values ​​to match its height and width. If you change only one of these values, the image itself will appear vertically or horizontally stretched on the screen. Alternative option consists of adjusting the image size using a graphic editor.

You can create the illusion of more fast loading Images. Regardless of whether the image is resized or not, always provide values ​​for the height and width attributes, as they will tell the browser important information about how much space should be allocated on the page to accommodate of this drawing. In this case, the browser can designate the space required for the image and continue building other elements of the page without stopping loading the image itself. This way, the page appears to load faster because visitors won't have to wait for the image to fully load before finally seeing other information presented on the page.

If you really need the image to occupy a specific amount of space across the width of the page, use percentage values. In this case, on the screen of any monitor the image will occupy the same part of the page as on your screen. If you want the resolution of the image itself (its size in pixels) to remain constant, use values ​​expressed in pixels.

Aligning text and graphics
Tag align attribute allows you to align the image to the right (value right) or left ( left value) edge of the text line. Examples of using this attribute are shown in the figure.

The same attribute can also be used to align an image vertically (again, relative to the text string). It can take three other values: top, bottom and center. If the align attribute is set to top, the top edge of the image is aligned with the top edge of any surrounding text. If the align attribute is set to bottom, the bottom edge of the image is aligned with the bottom edge of the surrounding text. If the align attribute is set to center, the center of the image is aligned to the center of the text line.

Using images as links
Images are good for more than just web page design. They can be successfully used as hyperlinks to other documents. IN HTML given the task is solved simply, since images are turned into hyperlinks in exactly the same way as inscriptions. To do this, you must also apply a tag, enclosing a web page element that should become a link to another document. Thus, if a hyperlink is to be followed after clicking on an image, the tag must include the tag for that image.

In this case, after a web page visitor hovers the mouse over this image, the text message “This is my self-portrait!” will be displayed next to the cursor. Clicking on the image will open the DOC2.htm document to which the hyperlink points.

Thumbnail images
Another common way to use HTML's ability to create hyperlinks is to use some images to link to others. Why is this necessary? The fact is that quite often the size of the images you want to publish on a web page is too large, and there is no guarantee that visitors will have the patience to wait for them to finish loading. In such cases, a smaller copy of the original image is created, called a thumbnail, which the browser can load much faster. If a visitor is interested in the image and wants to download a full copy of it, all he needs to do is click on this thumbnail. Here's what the corresponding HTML codes look like.

As you can see, clicking on the thumbnail.jpg image opens another image file (image.jpg). Text string, given as the value of the alt attribute, tells the visitor how to open the main image.

Secrets to Using Images Successfully
Images are interesting and attractive, provide a lot of visual information, and are very easy to add to web pages, but you should still follow some of the following rules if you really want to create a site that will become popular among Internet users.

The larger the image file size, the longer it will take to download it to the user's computer. Since most Internet visitors still use low-speed communication channels to access the network, throughput, the size of the uploaded files is still of fundamental importance for them. Be sure to take this into account and try to place images on your web pages as small as possible.

It's not just the file size of an individual image that matters, but also the overall file size of the entire image. HTML document. The more images you add to a web page, even small ones, the larger the file size of the final document will be. Preview your page in different browsers and estimate how long it will take each browser to download it.

Because the alt attribute is so important (it is recommended to define it for each tag , be careful when using it. Make sure that the content of the text message always matches the image itself, otherwise visitors to your page may be misled. The same point applies in reverse: make sure that the images match the textual information presented on the web page. A photo of an airplane would be appropriate on a website about air travel, but completely out of place on a website about wildlife.

You can find many interesting images on the Internet and easily save them on your computer. However, many of these images are copyrighted. If you find an image you like on a commercial site, check to see if there are any copyright notices there and whether the image is available for free use.

If the image presented on the web page is not protected by copyright, you can copy it to your computer's memory. To do this, just click on this image right click mouse and select the Save image as command in the menu that opens. Once you save the image to your computer, you can use it further like any other picture.

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 that you want to put on your page or do you want to put a logo on your site? All this is easy. After reading this article, you will be able to insert pictures into your html pages without any difficulties. To do this, we will talk in detail about img tag and its attributes, we'll take a quick look at graphic file formats such as gif, jpeg and png, and also look at new HTML5 features that make it easier to insert video and audio into your site.

Because graphic data and html text cannot be combined in one file, they are displayed on a site differently than with other elements of html pages. First of all, graphic images and other multimedia data are stored in separate files. And to embed them into a web page, special tags are used that contain links to these individual files. In particular, such a tag is img tag. Having encountered such a tag with an address, the browser first requests the corresponding file with an image, audio or video from the Web server, and only then displays it on the Web page.

All graphic images and, in general, any data that is stored in files separate from the web page are called implemented page elements.

Before inserting pictures and looking at the “img” tag in detail, it’s worth learning a little about graphic formats.

Graphic image formats.

There are many different graphic formats, but browsers only support a few. Let's look at three of them.

1. JPEG format(Joint Photographic Experts Group). Quite a popular format used for storing images. Supports 24-bit color and keeps all halftones in photos unchanged. But jpeg does not support transparency and distorts small details and text in images. JPEG is used primarily for storing photographs. Files in this format have the extensions jpg, jpe, jpeg.

2. GIF format(Graphics Interchange Format). The main advantage of this format is the ability to store several images at once in one file. This allows you to create entire animated videos. Secondly, it supports transparency. The main drawback is that it supports only 256 colors, which is not suitable for storing photos. GIF is mainly used to store logos, banners, images with transparent areas and containing text. Files in this format have the extension gif.

3. PNG format(Portable Network Graphics). This format was developed as a replacement for the legacy GIF and, to some extent, JPEG. Supports transparency, but does not allow animation. This format has a png extension.

When creating websites, they usually use images in JPEG or GIF format, but sometimes they use PNG. The main thing is to understand in which cases which format is better to use. In short:

JPEG is best used for storing photographs or grayscale images that do not contain text;

• GIF is used primarily for animation;
• PNG is the format for everything else (icons, buttons, etc.).

Inserting images into html pages

So, how do you insert an image onto a web page? You can insert an image using a single img tag. The browser places the image at the location on the web page where it encounters the img tag.

Code for inserting images into html the page looks like this:

This html code will place on the web page an image stored in the image.jpg file, which is located in the same folder as the web page. As you may have noticed, the address of the picture is indicated in src attribute. I already told you what it is. So, the src attribute is a required attribute that serves to indicate the address of the file with the image. Without the src attribute, the img tag is meaningless.

Here are a few more examples of specifying the address of a file with an image:

This html code will insert an image on the page called image.jpg, which is stored in the images folder located at the root of the website.

The src attribute can contain more than just relative links to images. Since images are stored online along with html pages, so each image file has its own url. Therefore, you can insert the image url into the src attribute. For example:

This code will insert an image from the site mysite.ru onto the page. A URL is typically used when you are pointing to an image on another site. For images stored on your site, it is better to use relative links.

The img tag is an inline element, so it is better to place it inside a block element, for example inside the “P” tag - paragraph:

Let's practice and paste into our page from previous articles about html image. I will create an “images” folder next to the html file of my page and place a “bmw.jpg” image file there, which looks like this:

Then the html code of the page with the inserted image will be like this:

And look at the display result in the browser:

As we see, there is nothing complicated about placing images on web pages. Next, let's look at a few other important attributes of the "img" tag.

The alt attribute is a fallback option

Because image files are stored separately from web pages, the browser has to make separate requests to retrieve them. But what if there are a lot of images on the page and the network connection speed is low, then it will take a significant amount of time to download additional files. And it’s even worse if the image was deleted from the server without your knowledge.

In these cases, the web page itself will load successfully, only white rectangles will be displayed instead of images. Therefore, to tell the user what the image is, . Using this attribute, you specify the so-called replacement text, which will be displayed in an empty rectangle until the image is loaded:

And this is roughly what it looks like:

Set the dimensions of the image

There are still a couple of img tag attributes you should know about. This is a couple of attributes width And height. You can use these to specify the image dimensions:

Both attributes indicate the size in pixels. The width attribute tells the browser how wide the image should be, and the height attribute how tall it should be. These two attributes can be used together or separately. For example, if you specify only the width attribute, then the browser will automatically select the height in proportion to the specified width and also in the case of using only the height attribute. If you do not specify these attributes at all, the browser will automatically determine the size of the image before displaying it on the screen. It is only worth noting that specifying the image sizes will slightly speed up the browser when displaying the page.

That’s all about inserting images onto pages for now, then we’ll look at how to insert audio or video onto a website...

Inserting video and audio using HTML 5

The new html5 specification introduces several new tags that make it very easy to embed media files. This primarily applies to video and audio.

To insert audio HTML5 provides a paired tag AUDIO. The address of the file in which the audio clip is stored is indicated using the src attribute that is already familiar to us:

The “audio” tag creates a block element on the page. By default, the browser will not play the audio clip. For it to do this, you need to specify a special attribute in the audio tag autoplay. Special because it doesn't matter. The mere presence of this attribute in the tag is enough for it to take effect.

By default, the audio clip is not displayed on the web page. But if you put an attribute without a value in the “audio” tag controls, the browser will display controls for playing the audio clip in the place on the web page where the audio tag is placed. They include a play/pause button, a playback bar, and a volume control.

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

There are two ways to place graphics on a page:

• insertion of individual pictures;
• filling the background with a picture.

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

Inserting Graphics

Inserting a graphic image from a file onto a page graphic format produced using a tag (from English, image - image) indicating the file address as an argument of the SRC attribute:

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

The graphic file address is either a URL or a file name, possibly with a path. For example, to display a graphic file logotip.jpg you should write the tag:

< IMG SRC = "logotip.jpg" >

To increase the transfer speed of a graphic image in a tag you can use the attribute ( additional parameter) LOWSRC, which takes the address of a graphics file as an argument. You can create two graphic files: one (for example, let's say logotip.jpg) contains a high-resolution image, and the other (for example, logotip.gif) contains a low-resolution image. Then the tag:

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

...instructs the browser to first download the logotip.gif file, and then replace it with the logotip.jpg file as it is received.

Another way to speed up graphics loading is to set the size of the rectangular area in which the graphic will be placed using attributes WIDTH(width) and HEIGHT(height), measured in pixels. If you specify these attributes, the browser will first allocate space for the graphics, prepare the document layout, display the text, and only then load the graphics. Note that the browser compresses or stretches the image to fit within the specified frame size. An example of specifying image dimensions:

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

Graphics are usually used together with text, so the problem of aligning text and graphics arises. This problem is solved using the attribute ALIGN tag using various arguments. For example, we might want text to flow around an image to the right or left. Usually the picture is embedded closely with the text, which can be ugly. To avoid this, you can set empty margins around the illustration. Fields are created using attributes VSPACE for top and bottom margins and НSPACE for side margins in a tag . The arguments to these attributes are specified as numbers that specify the size of the fields in pixels. To cancel text wrapping around graphics, use the tag
.

The following tag sets the graphics from the logotip.jpg file to wrap to the right (the image will be located to the left of the text):

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

If you want to place a picture to the right of the text, then you need the attribute ALIGN assign argument RIGHT:

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

To set the margins around the image, you need to write a tag like:

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

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

Let's look at an example sharing graphics and texts. Open Notepad ( text editor Notepad) Windows. Write HTML code in it using the tags discussed above. Below is a program that outputs some text and graphics. You can use any of the files you have as a graphic file. The file used here is logotip.gif.

< HTML >

< HEAD >

< TITLE >Exercise 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

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

< H1 >Text wraps around graphics on the right< / H1 >

Wide possibilities for precise 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 place pictures, texts and other elements in the cells of this table.