A single tag is used to insert an image into the text of a Web page. (Table P 1). The attributes of this tag set all the parameters of the image placed on the page. The SRC attribute is required, defining the address and name of the graphic file. If the SRC attribute is not set, then only the blank image icon will be displayed.

Tag structure with the SRC attribute looks like:

.

If a graphic file named Institute is located in the same folder as the Web page, then to place it you should write:

.

File name Format

To place a graphic file with the name MINSK, located at D:\Collection\Cities\MINSK.GIF, you should write .

Using a tag The Web page contains a graphic file located on another computer on the Internet.

To create a Web page with a photo of our institute, which is shown in Fig. 4.1, you need to enter the following HTML code:

Our Institute

Rice. 4.1. Web page with photo of the institute

In the example above, the height of the photo (HEIGHT) is 200 pixels and the width (WIDTH) is 300 pixels. To place the photo, a paragraph is created with center alignment.

Horizontal lines

Horizontal lines are placed on a Web page using a single tag

---

. The SIZE, WIDTH, COLOR, and ALIGN attributes change the thickness, width, color, and alignment of the lines, respectively.

Let's look at a few examples to explain the placement of horizontal lines:

1.

---

- a horizontal line across the entire page, 2 pixels thick.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – a horizontal line of green color, 15 pixels thick, 200 pixels wide and aligned to the right.

3.

---

– a horizontal blue line covering the entire page, 25 pixels thick.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – a horizontal line of red color, 20 pixels thick, 300 pixels wide and aligned to the left.

The line display for the four recorded examples is shown in Fig. 4.2.

Rice. 4.2. Lines on a Web page

TABLES

Creating tables

The table is created using a paired tag

… . This tag creates a table at the location where it is added
in HTML code.

Any table consists of rows, and rows – of cells. The following tags are used to form table rows and cells:

... – new line;

... – header cell;

... – a regular table cell.

These tags are written inside a paired tag

… .

The table is formed row by row - first one row is specified and the required number of cells is indicated in it, then the second row, etc.

In order to get the table shown in Fig. 5.1, you need to type the following HTML code:

Rice. 5.1. Table page

The text in the table header cells (Fig. 5.1) is displayed in semi-bold font and aligned to the center of the cell, while in regular cells the text is not highlighted and is aligned to the left.

It should be noted that in the HTML code of the above page the tag

Cars	Price	Ford	5000	Golf	6000

contains the BORDER attribute with the value "1". This means that in the table shown in Fig. 5.1, the thickness of the outer border is
1 pixel. If we write

… ,

then the thickness of the outer border will be 6 pixels. To prevent table borders from being displayed, you must set the BORDER attribute to 0, or simply omit this attribute.

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 to 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 a picture 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 >

Rice. 657. Text wraps around the image on the right

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.

Definition 1

Web page is 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 and view other Web pages, as well as inserts in the form of graphics, animation, video clips and music.

Using HTML you can:

1. Create and edit Web pages.
2. Edit HTML 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 drawings, diagrams, animations, video clips, music and speech accompaniment, text special effects into an HTML document, create multimedia presentations, slideshows, demo 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. And add graphics that can do appearance Web pages are more presentable and professional, much more complex, and will require 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 trailing 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 must 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 need to 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-speed communication channels to access the network. throughput, and therefore the size of the downloaded files is of fundamental importance for them.

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.

As mentioned, HTML today is the basis for writing any web page on the World Wide Web. When you use CSS, creating HTML code changes dramatically. You can say goodbye to repurposing clunky HTML tags just to achieve certain visual effects. About some HTML tags or attributes, such as the deprecated tag...

Home

Order a website and start doing business!

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

Website — this is the face of the company. And it is the most modern and effective channel of communication with potential consumers. Only the capabilities of an Internet site allow you to fully use all methods of conveying an information message to the user. Text, audio and video information can be presented within one site to familiarize the consumer with them.

By using software On the site, you can accept payments, talk on the phone, maintain databases, send and receive faxes, exchange SMS messages and perform many other actions. A modern Internet site is an information center not only for any company, but also for any Internet user.

And this is a win-win way to effectively and at the same time simply and clearly convey your ideas or developments to the widest audience. And today, Web documents written in the hypertext markup language HTML continue to be the main form of data presentation in the Web environment.

The most important advantages of HTML are:

• simplicity, allowing you to learn HTML in the shortest possible time.
• ability to create your own Web pages
• and HTML works exactly the same on all platforms existing today; there is no need to buy additional equipment. And it’s enough to use any available text editor, for example Notepad.

In this site, I tried to describe in detail the entire process of creating your own Web site, namely publishing the finished project on the Internet in order to provide access to it to all users.

I hope my articles will be very useful to many, because I myself am not a programmer, but I am very inspired by this work.

Graphic images placed on a Web page not only contribute to better perception of information, but also make the pages more vivid and memorable. You can prepare graphic images yourself or use the services of designers. You can also use graphics file libraries from software products such as Microsoft Office, CorelDraw, etc.

Let's place a graphic image from the Clip Art library included in Microsoft Office on the home page of the Web site we are creating. To do this, follow these steps:

1. Open the created Web site.
2. Open home page by double-clicking on the index.htm file name in the panel Folder list(Folder List).
3. On the menu Insert(Insert) select command Drawing Pictures(Clip Art). A panel appears in the FrontPage program window Inserting a picture(Insert Clip Art).
4. Select the command from this panel Collection of pictures(Media Gallery). A dialog box opens allowing you to select a graphic image (Fig. 15.8).

Rice. 15.8.

At the top of the dialog box, in addition to buttons that control the display of objects shown in the window, as well as copying and deleting objects, there are assignment buttons (see table).

1. Panel List of collections contains your computer's folders with multimedia files, as well as Clip Art library picture files. Open the folder of the category of pictures you are interested in. Images of this category will appear in the working area of ​​the window. When you place the cursor on an image, a hint is visible indicating the name, size of the image and the file it contains, as well as the format of the graphic image (Fig. 15.9).

1. Click the arrow button on the right side of the selected image. A context menu appears.
2. Select the command from the context menu Copy(Sora).
3. Go to a Web page and paste an image from the clipboard onto it using any convenient tool. For example, press the key combination +.
4. Save the Web page containing the graphic image by clicking the button Save(Save) on the standard toolbar. A dialog box appears Saving embedded files(Save Embedded Files) (Fig. 15.10), offering to save the image placed on the page in a folder images Web site under the name with which the file was located in the library. This window contains the following buttons:
   • Rename(Rename) - allows you to rename the file.
   • Change folder(Change Folder) - opens a dialog box Change folder(Change Folder), containing folders of the current Web site, allowing you to select a different folder to save the file.
   • Action(Set Action) opens a dialog box Action task, allowing you to change the value Save Save the Action column to Don't save(Don't Save). When selecting a value Save The drawing is saved in the Web site folder you specified, otherwise the Web page will contain a link to the image located in the Clip Art library.

Region Drawing(Picture preview) shows the image being placed. By setting in the dialog box Saving embedded files desired parameters, press the button OK. The graphic file will be saved in the Web site folder you specified.

Rice. 15.10.

Placing a graphic image from a file

We looked at placing a graphic image from the Clip Ait library on a Web page. To place a graphic image from a file on a page, do one of the following:

• On the menu Insert(Insert) select command Drawing(Picture), and then in the submenu that opens - the option From file(From File)
• Click the button Add a picture from a file(Insert Picture From File) on the standard toolbar
• Click the button Add a picture from a file(Insert Picture From File) on the toolbar Drawings(Pictures)

When you perform any of these actions, a dialog box opens Drawing(Picture) (Fig. 15.11). Using this window, find the required graphic file and click the button to place it on the Web page Insert(Insert). The dialog box will close and the image will be placed on the page.

Rice. 15.11.

Setting image properties

After placing an image on a Web page, you need to configure its properties using the dialog box Picture properties(Picture Properties) (Fig. 15.12). To open it, click on the image, and then do one of the following:

• On the menu Format(Format) select command Properties(Properties)
• Select a team context menu Picture properties(Picture Properties)
• Press the key combination +

Dialog box Picture properties contains three tabs: General(General), Video recording(Video) View(Appearance). Let's take a closer look at the customization options using this display window.