Image formats for web use. Lesson summary on the topic "images on web pages" Inserting images in an HTML document

Lesson Objectives:

expansion and deepening of ideas about the HTML hypertext markup language;

formation of skills to create web pages with graphics;

development of logical thinking, the ability to analyze, compare, systematize, generalize.

Lesson type: a lesson in mastering new knowledge and skills.

Students should be able to: create a web page in Notepad editor
with graphics.

Software and methodological support of the lesson: Notepad editor;
textbook "Informatics 11", § 3 ( item 3.2); applications for lesson 6;
ESU W eb11 6 .

1. Checking the knowledge of the previous lesson (reproductive teaching method, individual and frontal forms of work).

Performing individual tasks on a computer: arrange the text on the web page proposed by the teacher in accordance with the picture of the exercise to§3 ( 3.1) benefits or ESU W eb11-5 .

Suggest at We wish to answer the questions: What is the hypertext markup of documents? What is the structure of an HTML document? What is the paragraph tag? Jump to a new line? What tags define bold and italic characters? How to set the background and text color of an entire web page? What tags and attributes set the font, size and color of characters? It is possible to use the test (appendix to lesson 6; ESU W eb11 5).

2. Updating knowledge and motivating students to learn new material ( frontal form of work).

Before starting to explain new material in the form of a frontal conversation, discuss the role that graphic objects play in the design of web pages: photographs, drawings, background images (wallpaper), dividing lines. They not only make pages more attractive and visual, but in many cases they are the main source of information. Show examples ( ESU W eb11 6 ).

Emphasize that web page images can be created and edited in various graphic editors. They can be obtained with a digital camera, scanner, or from the Internet. Most preferred graphic formatsgif , jpg And png , files of which are small in size, which allows you to speed up the download process. Remind that in the formatjpg usually save photos. Format gif supports animation and transparency.

3. Explanation of new material (explanatory-illustrative teaching method combined with partial search , frontal form of work).

Start your explanation with a question: are the images stored on the web page itself? P emphasize that all the images that we see on a web page are stored in separate files, and in the HTML code there are only links to them. The tag is used to display pictures.< img> , whose integral attribute is the name of the graphic file.

Next, demonstrate the effect of some tag attributes < img>. So, the height and width of the picture displayed on the screen are set by the values ​​of the attributesheight And width, and the thickness of the frame around the image by the value of the attributeborder. In low-level classrooms, this is done by the teacher using a video projector. With sufficient preparedness, students can be invited to conduct an independent study, followed by a frontal discussion of the results.

It is important to emphasize that specifying dimensions allows you to increase or decrease only the image visible on the screen (while the original image and the file in which it is stored remain unchanged). If dimensions are not specified, text and other objects on the screen may change as the picture loads. Therefore, it is useful to always explicitly set these attributes. Attribute valuesalignindicate the alignment of the text relative to the picture, or the way the text flows around.

With an attributealtyou can set the message textI, which will be displayed instead of the picture if it is not found or display is disabled in the browser. In addition, this message is shown as a tooltip when the mouse cursor moves over the drawing. Demonstrate the utility of explicitly setting attributesheight, width And altYou can by unchecking the default checkboxShow images tab Additionally dialog boxBrowser properties.

Finally, demonstrate using an image from a file as the background of a web page using the attributebackground tag< body>. Optionally offer to create greeting card(example 3 from §3 ( 3.2) benefits, ESU W eb11 6 .

5. Summing up the lesson

Students demonstrate the created pages. The stages of work and the difficulties of students are discussed.Features are briefly formulated using images on web pages,

6. Homework

study material§ 3 ( P. 3 .2 ) study guide , answer questions 1 3,prepare for the practical implementation of one of the tasks of exercise 2

Hello dear blog readers! In this article, you will learn all about how to insert image in html page. Do you have some 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 images into your html pages without any difficulties. To do this, we will talk in detail about img tag and its attributes, take a quick look at graphic file formats such as gif, jpeg, and png, and take a look at the new HTML5 features that make it easy to embed video and audio on your site.

Because graphics and html text cannot be combined in one file, they are displayed on the site in a different way 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 in a web page, special tags are used that contain links to these individual files. In particular, this 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 embedded 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 consider three of them.

1. JPEG format(Joint Photographic Experts Group). A fairly popular format used to store images. Supports 24-bit color and keeps all midtones intact in photos. But jpeg does not support transparency and distorts fine details and text in images. JPEG is mainly used for storing photographs. Files of 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. It allows you to create whole animated videos. Second, it supports transparency. The main drawback is the support for only 256 colors, which is no good for storing photos. GIF is mainly used to store logos, banners, images with transparent areas and containing text. Files of this format have the gif extension.

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

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

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

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

Inserting images into html pages

So how do you insert an image into a web page? Insert image allows single img tag. The browser places the image at the location on the web page where it encounters the img tag.

Image embed code in html the page looks like this:

This html code will place on the web page the image stored in the image.jpg file, which is located in the same folder with the web page. As you may have noticed, the address of the image is indicated in src attribute. What is it I have already said. So, the src attribute is a required attribute, which serves to specify the address of the image file. Without the src attribute, the img tag has no meaning..

I will give 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 on the web along with html pages, each image file has its own url. Therefore, the url address of the image can be inserted into the src attribute. For example:

This code will insert an image from mysite.ru into the page. The URL address is usually used if you are pointing to an image located on another site. For images stored on your site, it's best 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 - a paragraph:

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

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

And we look at the result of the display in the browser:

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

alt attribute - as a fallback

Since 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 considerable time to download additional files. And even worse if the image was removed 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, in order to inform the user of information about what an image is, . With this attribute, the so-called replacement text is specified, which will be displayed in an empty rectangle until the image is loaded:

And this is how it looks like:

Set the dimensions of the image

There are still a couple of img tag attributes that you should be aware of. This is a pair of attributes width And height. You can use them to specify the dimensions of an image:

Both attributes indicate the size in pixels. The width attribute tells the browser how wide the image should be, and the height attribute how high 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 adjust the height automatically 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 image sizes will slightly speed up the browser when displaying the page.

That's all about inserting images into pages for now, then we'll look at how to insert audio or video on the site...

Embed Video and Audio with HTML 5

The new html5 spec has some new tags that make it very easy to embed media files. This primarily applies to video and audio.

For insert audio HTML5 provides pair tag AUDIO. The address of the file in which the audio clip is stored is indicated using the already familiar src attribute:

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, a special attribute must be specified 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 in any way on the web page. But if you put an attribute without a value in the "audio" tag controls, the browser will display in the place of the web page where the audio tag is placed, the controls for playing the audio clip. They include a play and pause button, a playback bar, and a volume control.

Definition 1

A web page is a text file created in HTML and hosted on the World Wide Web (WWW). In addition to text, a Web page may contain hypertext links that allow you to navigate to and view other Web pages, as well as inserts in the form of graphics, animation, video clips, and music.

With HTML, you can:

1. Create and edit Web pages.
2. Edit HTML-format documents from the Internet, taking into account the functioning of all objects embedded in the document (pictures, animations, etc.).
3. Using hypertext links and the ability to embed images, diagrams, animations, video clips, musical and speech accompaniment, text special effects into an HTML document, create multimedia presentations, slide shows, and demonstration projects.

Remark 1

Graphic images are usually stored in separate files. There are special tags in the HTML language, with the help of which links are written in the codes of Web pages, which are the actual addresses of these files on the Internet. Upon encountering such tags, the Web browser makes a request to the Web server for the corresponding image, audio, or video file and displays it on the Web page at the location of the given tag. Any data (images, audio and video clips, etc.) that is stored in files separate from the Web page are called embedded Web page elements. Let's take a closer look at the process of adding an image to a Web page.

Adding Images to a Web Page

The attractiveness of Web pages lies precisely in the graphics used on them and various other objects. Adding an image to a page is easy. And add graphics that can do appearance Web pages more presentable and professional, much more complex, require specialized knowledge.

You can add an image to a page using the image source tag, which looks like this:

where is the tag itself, and scr is its attribute. Since the scr attribute is required, we can say that this entire entry is one common tag. The image source tag does not use a corresponding end tag, because the source tag is self-sufficient and therefore must be appended with a closing slash: .

Adding Alternative Labels

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

Below is the HTML code with the alt attribute added inside the tag. This attribute, similar to the src attribute, tells the browser some additional information about the image and can also always be used with a tag.

alt="(!LANG:This is a picture!" />!}

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

When using the alt attribute for each tag, it is important to be careful not to assign text messages to graphic elements that do not correspond to them. For example, there is no point in adding alternative text labels to the elements of the external design of the page. To avoid such errors, you can set the alt attribute of these elements to an empty value (alt=” ”). If you don't set any other attributes, the browser will render the image at its original size, while aligning the top edge of the image with the top edge of the adjacent text string. However, you can change both of these settings using style sheet tags.

Image attributes

The tag contains attributes that allow you to resize images. Here are some of them:

• height - with the help of it the height of the image is determined in pixels or percentages;
• width - with the help of it the width of the image is determined in pixels or percentages.

Image Height and Width Adjustment

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

alt="This is a picture!" height="60" width="60" />

alt="This is a picture!" height="10%" width="6%" />

Remark 2

When rendering images in its own window, the browser handles both kinds of values ​​equally well. However, be aware that Web visitors may have different screen resolution settings than yours on their computers. Therefore, when resizing an image, it is necessary to set both image values ​​(height and width). If you change only one of these values, the image on the screen may appear stretched vertically or horizontally.

You can use it to create the illusion of faster loading of images. To do this, you must always specify the values ​​of the height and width attributes, regardless of whether the image is resized or not. Because they tell the browser important information about the amount of space required to fit an image on a page. In response, the browser allots the space it needs for the image and continues to build other elements on the page without stopping the image itself from loading. As a result, the page appears to load faster because visitors don't have to wait for the image to fully load to see other information on the page.

To ensure that an image on any screen, regardless of its resolution, occupies a precisely defined space across the width of the page, you must use percentage values. If you want the resolution of the image itself to be constant (its size in pixels), you must use values ​​in pixels.

Aligning text and graphics

To align an image to the right (right) or left (left) edge of a text string, use the align attribute of the tag. For example:

alt="This is a picture!" height="60" width="60" align="right" />

You can also use this attribute, which can be top, bottom, and center, to vertically align an image relative to a text line. The top value indicates that the top of the image is aligned with the top of the surrounding text. The bottom value specifies that the bottom of the image is aligned with the bottom of the surrounding text. The center value specifies the alignment of the center of the image to the center of the text string.

Using Images as Links

Images are also used to create hyperlinks to other documents. In HTML, an image becomes a hyperlink in the same way as a label. For this, a tag is used, which contains a page element (in our case, an image), which should become a link. The link will be followed by clicking on this image.

Image thumbnails

In addition to the above method in which the image acts as a hyperlink, it can also be used as a hyperlink that jumps from one image to another. This is necessary in cases where the size of the image that they want to publish on a Web page is large enough and will take a very long time to load, which is unacceptable for many visitors. Therefore, a reduced copy of this image (thumbnail) is created and presented as a hyperlink. If the visitor of the page is interested in this image, by clicking on the thumbnail, he will be able to go to view the full image. Here is a code example:

alt="Click to see normal image."

height="60" width="60" />

Secrets of successful use of images

Images carry a lot of visual information for visitors, which makes them attractive, and they are also quite simple to add to a Web page, but there are certain rules for creating a site if we want it to become popular on the web.

When creating pages, you should try to put images in small sizes on them, since large images will take a long time to download, and some users still use low bandwidth connections to access the network, and therefore the download sizes for them are fundamental importance.

Remark 3

The total file size of the entire HTML document is also important, which, in turn, will depend not only on the size of the images contained in it, but also on their number. Care must be taken when using the alt attribute to ensure that the content of the text message always matches 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 from the Internet in the page you are creating, you need to check if these images are protected by copyright.

Colors in the table

How to build a table on a page

Lists within lists

Definition Lists

numbered list

bulleted list

How to create a list on a page

There are three main types of lists: bulleted, numbered, and definition lists. The main difference between the listed types is the method of numbering and structure.

The most commonly used unnumbered, or bulleted list. The bulleted list is specified by tags, and the list items between these tags are specified by the tag