One of the most attractive features of the WWW is the ability to include links to graphics and multimedia files that make a web page more attractive and interesting. This may include icons, drawings, photographs, image maps, and the use of audio, video, and animation data.
2.2.1. Inserting graphics into an html document
The importance of graphic images in the aspect of creating electronic documents cannot be overestimated; documents become more expressive and vibrant and will be perceived easier and more natural. However, one should always remember about a sense of proportion in everything. Oversaturation of a document with illustrative material will unjustifiably distract users’ attention from the true content of the page, and will also lead to the page loading more slowly due to the presence of a large number of pictures.
The graphic components of a web page can be divided into three broad categories according to their purpose:
– illustrative graphics, including accompanying text photographs, explanatory drawings , drawings, diagrams;
– functional graphics, which represents controls (navigation buttons, counters and interactive form elements);
– decorative graphics – page design elements included in it for beauty and not carrying an information load (background images, dividers made in the form of graphic files, headers and much more).
Graphic formats. Due to the use of the Internet, downloading graphics takes a certain amount of time. And the shorter this time, the more convenient it is for the user. Therefore, the three most popular formats are now used for graphic images: GIF, JPEG and PNG. They contain various lossy image compression algorithms, which can significantly reduce the size of the target file.
GIF-format. In 1978, Israeli researchers Jacob Ziv and Abraham Lempel developed a new data compression algorithm for that time without data loss (LZ78 is the name of the project). A few years later, American programmer Terry Welch improved it (LZW) and also presented his development for use by everyone.
In 1987, Bob Berry created a fundamentally new graphic format, GIF, based on the LZW algorithm. The essence of the compression algorithm: reducing the size of a graphic file is achieved by mixing similar shades into one; information about the image in the GIF file is recorded line by line, i.e. it is an array of descriptions of lines one pixel high. Properties: mixing similar shades into one, operating with a fixed palette of 256 colors.
The GIF format is used in an HTML document only to display business graphics: diagrams, logos, buttons, other page design elements - and pictures with a color palette of 256.
Another property of GIF is interlacing, i.e. the image is not loaded entirely, but in parts (the 1st, 5th, 10th lines are read, then the 2nd, 6th, 11th, etc. ), that is, it seems to manifest itself.
In 1989, CompuServe released a new version of GIF89a, which uses the so-called “alpha channel” - which is a mask of the transparency of the image - to create an image of a transparent background by saving it along with the file. Colors that are saturated as transparent become invisible in the browser.
Another feature of GIF89a is that this format allows you to store several different images in a formula with one physical title, displaying them on the screen sequentially one after another.
JPEG-format. The JPEG standard is used to post photographs, reproductions of paintings and images with a large number of colors and color transitions. JPEG format, created on the basis of a one-way image compression algorithm with loss of quality, encoding not identical elements, like LZW algorithms, but interpixel intervals.
The compression mechanism consists of three stages.
The image is converted into a LAB color image, which decomposes the image into three independent channels: L – preserving color intensity, A and B – for storing color information.
Compression: Approximately three-quarters of the color information is removed from the resulting color model, then the image is split into 8x8 pixel sections and converted into a numeric data array. The title of each block describes the dominant color of the area, the rest of the information describes less noticeable shades.
At the third stage of compression, a certain part of the information describing secondary shades is removed from the data array, and the amount of data removed depends on the quality of the resulting image selected by the user.
And finally, the finished file is compressed according to the Hoffman algorithm, which involves replacing the most frequently occurring characters in the data array with a more compact two-bit encoding.
JPEG decompression is done in reverse order.
The maximum number of colors that a JPEG image can contain is 16 million.-format. PNG
This format was developed in 1995 to replace the GIF format after Unisys copyrighted its LZW compression algorithm. At the same time, some technical characteristics were developed, in particular improving quality and increasing the number of supported colors.Enabling graphics inweb-page. < Integrating graphics into an HTML document is done using a single tag >.
IMG
The SRC (source) attribute specifies the URL of the image (Figure 2.3). < Integrating graphics into an HTML document is done using a single tag >
Rice. 2.3. Example display example with tag < Integrating graphics into an HTML document is done using a single tag > This attribute is required in the tag
(Table 2.2).
Table 2.2< Tag attributes>
|
IMG |
Purpose |
Attribute value |
|
|
Recording examples |
|
||
|
Image address |
Positioning objects on the screen (optional attribute) leveling LEFT – left RIGHT – right MIDDLE – along the line line TOP – at the top |
|
|
|
BOTTOM – at the bottom |
Image width (optional attribute) |
|
|
|
in pixels |
Image width (optional attribute) |
|
Height (optional attribute)
|
IMG |
Purpose |
Attribute value |
|
|
End of table. 2.2 |
Tooltip (optional attribute) |
|
|
|
contains some alternative text |
Framing the image |
|
|
|
thickness in pixels |
Image width (optional attribute) |
|
|
|
Empty space above the image |
Empty space left and right |
|
Pixel value">!}
HEIGHT="215" BORDER="5" ALT="lily
Using a tag in this example allows you to place an image from a file on the right side of the browser window, sets the size of this image and places it in a frame (see Figure 2.3).
It is thanks to the graphics on Web pages that WWW has become the most popular Internet service, and it is to it that we owe all this variety of pages.
There are two main file formats used for use on Web sites: GIF and JPG. A new format for web graphics called PNG (pronounced "ping") is being promoted, but it is not yet widely used and not all browsers understand it, so we will not deal with this format for now.
So, let's start analyzing the GIF and JPG formats, describe their main properties and features.
GIF format
Supports no more than 256 colors (less is possible and often necessary);
Uses a color palette;
Uses lossless compression using the LZW method (which is similar to that used in the PKZIP archiver, and therefore GIF files are practically not compressed);
Supports interlace scanning;
It is a streaming format, i.e. the picture display starts during pumping;
Allows you to assign the transparent attribute to one of the colors in the palette, which is used when creating so-called transparent GIFs;
It has the ability to save several images in one file, which is used in the production of animated GIFs;
Supports the ability to insert control blocks into a file, which allow you to insert comments into the file (for example, about copyright:), delay between displaying images, etc.
And now a little clarification - what these properties can lead to. GIF supports a maximum of 256 colors, which means that all images we save in the GIF format either explicitly or implicitly reduce the number of colors to meet this limit (different programs with varying success). And hence the conclusion - if you need to place a beautiful photograph with smooth transitions and subtle shades of color, then after the transformation everything will be much worse - the shades will no longer be subtle, and the entire photograph will take on an unnatural, unrealistic look. Therefore, if you still need to save the photo in GIF format and convey all the shades, then you have to resort to tricks. For example, you can apply some artistic filter to a photograph and turn it into a drawing or apply toning. But there are no problems with saving pictures and drawings in this format; they, as a rule, are well compressed and do not contain many colors. Now let’s look at the properties and features of the second most popular format on the Internet.
JPEG format
Allows you to save full-color images with a number of colors of 16.7 million colors (or 24bpp), and if the picture has fewer colors, then before saving the file it is still converted to a full-color image; Uses lossy compression, due to which it achieves wild levels of file compression; Supports progressive scan, i.e. The image appears at first with poor quality, and gradually improves during the loading process. Perhaps these are all the advantages of the JPG format, and its main purpose is to store photographic quality images.
Graphics optimization
All graphics processing work is done in an intermediate format
Let's look at some features of working with graphics. Despite the fact that we save images in a GIF file with support for 256 colors or in a JPG file with 16.7 million colors, we need to work with the image in some intermediate format that allows us to save the image without distortion and without loss of depth colors (for example, TIFF and internal formats of editors such as PSD). The fact is that during the work you will need to change or distort the image many times, which ultimately leads to repeated rewriting of the file. Repeated recording in the GIF format will lead to the loss of shades of the image, and in the JPG format, each new overwriting of the file will introduce new distortions, and after a while the photo will look terrible. Therefore, all work on graphics processing is done in an intermediate format (although it has large file sizes) and only at the very last stage is the image converted to the desired format (often simultaneously with file size optimization).
For web pages, the issue of photo size is very important. What size should I make them? Will they take too long to load? When optimizing, you can reduce the file size, but it’s hardly worth optimizing a photo that doesn’t carry any meaning. The very first stage of optimization is highlighting the main thing in the photograph (discarding everything else) and focusing on the illustrated element. This is achieved through the operation of cropping and finding the most expressive part that conveys the meaning of the photograph. After this operation, you can already optimize the image, and in this case it will actually have the smallest size.
And with the size of photographs, you need to adhere to a certain compromise - do not make them too small, in which you can’t see anything even under a magnifying glass, and you should not make them too huge, so as not to stretch time into eternity. Although, of course, there are exceptions: a properly optimized large photo can take a transfer time equivalent to the time it takes to send a regular photo, and, conversely, a poorly optimized small picture will take until the end of days to load. A regular photograph can be considered a photo that is approximately 250x300 pixels in size and takes up about 6-10 kilobytes. This does not mean that all photographs should be of this size, but the area of the photograph should be equivalent to it. These recommendations apply to photographs that “illustrate” text and do not apply to drawings that serve as navigation elements.
Working with graphics in the Word processor can be done in three directions.
1. Inserting an object created in another graphics editor (for example, Paint, MicrosoftDrawing, Paintbrush, etc.).
2. Drawing in the document itself (using the tools of the Drawing panel).
3. Use ready-made drawings from the Clipart collection to design texts.
Below we will look at all of the listed ways to work on placing graphics in a document.
Run Word in any way known to you.
Exercise 1. Inserting an object created in another graphics editor
Inserting an object created in another graphics editor, editing it after insertion, and becoming familiar with the method of creating captions.
1.1. Creating a graphic image in a graphics editor.
1. Launch the Paint graphic editor. To do this, click the button Start, in point Programs select Standard and click on the item Paint .
2. Create an image in a graphic editor, for example, as shown in Fig. 4.1
3. Select an image using the button Select graphic editor (Fig. 4.2).
4. 
Copy the image to the clipboard. To do this, run the command Edit
ÞCopy or press hotkeys [
Ctrl+
c].
1.2. Inserting an image in Word.
1. Go to the Word editor. If it was launched, then just click on the corresponding icon in the Windows95 taskbar. If you haven't launched Word yet, now is the time to do it - launch Word in any of the ways you know.
2. Paste an image from the buffer. To do this, place the cursor in the place where you need to place the image and click the button Insert on the toolbar. Your image will be placed in the open document.
3. Click on the entered object. Square “nodules” appear around the image. If you left-click on such a node and hold it, you can move the mouse to change the size of the image. Set the image sizes you need.
Rice. 4.2. Graphics editor Paint and the selected image
1.3. Placing an image in the text.
An object placed in a text document can be located anywhere, but not where you need it. In order to place the image exactly in the place of the text where you want to see it, you need to use the Image Adjustment toolbar.
1. Open the panel Image Settings. To do this, run the command View Toolbars ÞImage settings. A panel should appear in front of you Image Settings .
2. Press the button Text wrapping. In the menu that appears, select the wrapping option you need and click on it. For example, if you choose Around the office, then when entering text it will be located around the outline of the image, since Fig. 4.1 in this manual.
1.4. Editing an image.
To edit an object, double-click on it. As a result, the editor in which this image was created will be launched, and the image itself will be placed in it. If the editor in which the image was created is not available, then the image can be changed using the editor built into Word.
1.5. Creating a caption.
1. Turn on the panel Drawing. To do this, click the button Drawing on the toolbar.
2. Place a text block below the picture. To do this, click the button Inscription on the panel Drawing. Place the mouse cursor under the picture, click the left mouse button and hold it down and set the size of the text block in width equal to the size of the picture, and in height to approximately 1 cm. 
As a result, you will get a rectangular block in which you can place text (Fig. 4.3). If you “drag” the “node” on the block with the mouse, you can change the size of the block.
3. Enter a caption for the picture, for example, “ Fig.1. My art" The inscription must be entered Italic .
In the Fill group, in the Color drop-down list, set the value to No fill, and in the Lines group, in the Color list, set the value to No lines. Click OK. As a result, the border around the block will disappear and the text will be visible through it, even if the block overlaps the text entered into the document.
5. Set the desired text flow around the frame. To do this, open the Label Format window in the same way as in the previous case and go to the Wrapping page. In the Wrap group, click On Path and click OK.
If you did everything correctly, then you will get exactly the same result as in the picture on the right.
Exercise 2: Drawing on a Document
Editor's Drawing panel Word. Introduction to the tools, the ability to select a line type, insert a text frame, set the line color and fill for it.
Let's try to draw a regular parallelepiped (Fig. 4.6). If you want to simplify the task, limit yourself to one parallelepiped without coordinate axes and vertex designations.
Before you begin the task, carefully analyze the order of construction.
What geometric shapes can this parallelepiped be made of?
You can start with a rectangle ABB 1 A 1. You'll probably want to copy it and paste the same rectangle CC 1 D 1 D, which is incorrect. CC 1 D 1 D cannot be a single geometric figure, since it consists of lines of different styles (solid and dotted).
Rice. 4.6
Key to the task
You can suggest the following construction order (all used buttons from the panel Drawing. To call it, press the button Drawing on the toolbar):
1. draw a rectangle ABB 1 A 1 ;
2. draw one of the inclined lines, for example, A 1 D 1;
3. copy A 1 D 1 and paste three times BC, B 1 C 1 and AD;
4. draw lines CC 1, DD 1, DC and D 1 C 1;
5. highlighting the corresponding segments, select Stroke type– punctuate;
6. complete the coordinate axes by selecting the tool Line and style - Line with arrow. To select an autoshape style, right-click over the object and select the item from the context menu that appears AutoShape Format. As a result, a window will appear in front of you AutoShape Format, in which you can set the desired type of shape, for example, add an arrow to a line.
The most time-consuming process in this exercise is naming the vertices.
In order to place the letter in the desired place, turn on the button Inscription on the panel Drawing and stretch the frame using the mouse to the required size.
Pressing the button Line color(the frame must be selected), select from the suggested palette No Line similarly Fill color - No fill, Your frame has become transparent. You can place text in it (we only need one letter - the designation of the vertex).
Select your frame, copy and then paste 10 times (deselect the original frame before pasting).
The new frame can, after insertion, fit on top of the previous one. In this case, it seems that the insertion has not occurred, but in fact it is enough to move the top frame to the side.
The subscript is obtained using the command Format ÞFont... if on the Font tab in the radio button group Effects intensify Subscript. Frames are moved around the sheet using the mouse.
The drawing is ready.
It is advisable to present it as a single graphic object. To do this, turn on the button Selecting objects, drag a dotted frame around the entire picture (select the picture) and click Actions, and in the menu that appears, select Group.
Now you can move the entire drawing across the sheet.
Moreover, you can change its proportions by selecting the picture and dragging the nodes (squares on the selection frame) with the mouse.
Exercise 3: Insert a picture from the Clipart gallery and place text on top of it
An unusually simple and effective task.
Rice. 4.7. Window for selecting a collection pattern Clipart
2. Change the proportions and dimensions of the drawing (similar to the previous task).
3. Draw a text frame over the picture ( Line color- No, Fill color- No) in the same way as the vertices were designated in the previous task.
4. Finally, type the text of the invitation, formatting it as you wish.
Exercise 4: Creating a business card
Let's create our own business card. In addition to inserting pictures and using the Text Frame, you will be able to remember all the concepts of the paragraph formatting section. Here are several options for designing a business card:
· a simple business card, formatting uses paragraph indents and spacing, various types of paragraph alignment, font styles (exercise 4.1);
· a business card created based on a frame from the Clipart collection (exercise 4.2);
· a business card placed in a Text Frame using paragraph framing elements (Exercise 4.3). We did not consider paragraph framing separately, since it is completely identical to table cell framing and is performed using the same operations.
Before we begin to describe each of them, let's consider the general provisions.
1. Placement on a sheet.
Depending on the type of equipment on which your products will be printed in the future, you need to place either one or the maximum number of business cards on the sheet. In either case, one business card is created and then replicated (via copying and pasting). First you need to set the appropriate document margins (calculate the optimal margins to accommodate the maximum number of business cards measuring 5x9 cm). Before you start typing your business card text, you need to create a text frame of a certain size for it (you can use inserting an unlined table instead of a text frame). To do this, “stretch” an arbitrary text frame, then press the button Line type , choose 3 pt (the border should be selected at this time). It is with this procedure that you will have to start working with any of the proposed business cards.
2. Text formatting.
· Selection of font typeface and size;
· use of various types of text alignment and indentation, font spacing;
· insertion of symbols (-,-, etc.);
Framing paragraphs
· use of non-stretchable spaces to format text;
· creating a frame by inserting a picture from the Clipart collection;
· inserting a picture.
Now let's directly comment on each type of business card.
Exercise 4.1: Create a business card using paragraph indents, spacing, different paragraph alignments, and font styles
Exercise 4.2.Creating a business card framed from the Clipart collection
Key to the task
1. Prepare a Text Frame of a given size.
2. A picture from the Clipart collection (frame) is inserted into the Text Frame.
3. The text of the business card is typed in the Text Frame, which you “stretch” over the picture.
4. All formatting techniques are the same as the previous task, only the paragraph containing the last name has a frame at the bottom Format ÞBorders and shading... and equal padding on the left and right (so that the underlining line does not reach the very edges of the business card) . ^
 |
Exercise 4.3: Applying Paragraph Framing Elements to Business Card Design
Key to the task
1. All text is centered.
2. The font size was used to type the position.
3. Paragraph framing has been applied.
4. For a paragraph containing the name of the organization, there is a frame at the bottom with a double line, for an address with a phone number there is a frame (after the address, you can insert a forced end of the line).
5. To ensure that the framing lines do not reach the very edges of the business card, all text is given the same amount of indentation on the left and right.
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 graphic format file onto a page is done using the 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 LOWSRC attribute (additional parameter), which takes the address of the graphic 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 in conjunction with text, so the challenge 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 fields 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 consider an example of the combined use of 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 >
Rice. 657. Text wraps around the image on the rightWide 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.
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 through which you can navigate to other Web pages and view them, as well as inserts in the form of graphics, animation, video clips and music.
Using HTML you can:
- Create and edit Web pages.
- Edit HTML documents from the Internet, taking into account the functioning of all objects embedded in the document (pictures, animations, etc.).
- Using hypertext links and the ability to embed drawings, diagrams, animations, video clips, music and speech, text special effects into an HTML document, create multimedia presentations, slide shows, and demonstration projects.
Note 1
Graphic images are usually stored in separate files. The HTML language has special tags with which links are written in the codes of Web pages, which are the actual addresses of these files on the Internet. When encountering such tags, the Web browser makes a request to the Web server for the corresponding file with an image, audio, or video and displays it on the Web page at the location of this tag. Any data (images, audio and videos, etc.) that is stored in files separate from the Web page are called embedded elements of Web pages. 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 and other various objects used on them. Adding an image to a page is not difficult. But adding graphics that can make a Web page look more presentable and professional is much more difficult and requires special knowledge.
You can add an image to a page using the image source tag, which looks like:
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 closing tag because the source tag is self-contained and therefore requires a closing slash at the end when used: .
Adding alternative captions
On the Internet, you can often find various inscriptions that are displayed when you hover your mouse over any graphic object on a Web page. These captions 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 in conjunction with a tag.
alt="This is a picture!" />!}
The function of the alt attribute is to define alternative text for a graphic element 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 see the text information added to this image.
When using the alt attribute for each tag, it is important to be careful not to assign inappropriate text messages to graphic elements. For example, there is no point in adding alternative text labels to page design elements. To avoid such errors, you can set the alt attribute of these elements to an empty value (alt=" "). If you do not set any other attributes, the browser will render the image at its original size, but will align the top edge of the image with the top edge of the adjacent text string. However, you can change both of these settings using stylesheet tags.
Image Attributes
The tag has attributes that allow you to resize images. Here are some of them:
- height – it is used to determine the height of the image in pixels or percentages;
- width – it is used to determine the width of the image in pixels or percentages.
Adjusting image height and width
The sizes of images placed on Web pages can be set 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%" />
Note 2
When displaying images in its own window, the browser does an equally good job of processing both types of values. However, you need to remember that visitors to Web pages may have a different screen resolution than yours on their computers. Therefore, when resizing an image, you must specify 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.
It can be used 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 has been resized or not. Because they tell the browser important information about the amount of space required to place an image on a page. In response, the browser allocates the space required for the image and continues to build other elements of the page without stopping loading the image itself. This makes the page appear to load faster because visitors don't have to wait for the image to fully load before seeing other information on the page.
To ensure that the image on any screen, regardless of its resolution, occupies exactly a certain amount of space across the width of the page, it is necessary to use percentage values. If you want the resolution of the picture 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 or left edge of a text line, use the align attribute of the tag. For example:
alt="This is a picture!" height="60" width="60" align="right" />
To align an image vertically relative to a text string, you can also use this attribute, which can take the values top, bottom, and center. The value top specifies that the top edge of the image should be aligned with the top edge of the surrounding text. The value bottom specifies that the bottom edge of the image should be aligned with the bottom edge of the surrounding text. The center value specifies that the center of the image should be aligned with the center of the text line.
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 text box. To do this, a tag is used that encloses a page element (in our case, an image) that should become a link. The link will be followed by clicking on this image.
Thumbnail images
In addition to the above method, in which an 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 size of the image that you want to publish on a Web page is quite large and will take a very long time to load, which is unacceptable for many visitors. Therefore, they create a reduced copy of this image (thumbnail) and represent it with a hyperlink. If a page visitor is interested in this image, he can click on the thumbnail to view the full image. Here's a code example:
alt="Click to see normal image."
height="60" width="60" />
Secrets to Using Images Successfully
Images provide a lot of visual information for visitors, and this makes them attractive, and they are also quite simple to add to a Web page, but there are certain rules for creating a site that must be followed if we want it to become popular on the Internet.
When creating pages, you should try to place small images on them, since large images will take a long time to load, and some users still use low bandwidth connections to access the network, and therefore download file sizes are limited for them fundamental importance.
Note 3
The overall 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. You need to be careful when using the alt attribute so 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 on the page you are creating, you need to check whether these images are protected by copyright.
