Inserting images

To embed an image in a document, use the <IMG> tag that has the required src parameter, which specifies the address of the image file and alt , which specifies the alternate text.

The general syntax for adding an image is as follows.

<Img src = "URL" alt = "alternative text">

A closing tag is not required, the URL (Universal Resource Locator) is the path to the graphic file. To specify it, you can use both absolute and relative addresses.

Let's consider several directions of the path to the drawing for posting it on a web page. For example, take the file with the picture shown below, it is called sample.gif and placed in the images folder of the site root.

  • If the beginning of the address is a slash (/), it means that the count is from the root of the site. For example, the address of the site is http://baklan.narod.ru, which means that after writing the path to the image as /images/bird.jpg , we, by the way, tell the server what to show follows the file http://baklan.narod.ru/ Images / bird.jpg. Note that such links with a slash in front only work on the web server, they will not work on the local computer.
  • If before the address is added the mention of the protocol http (http: //), then it is an absolute reference. The image will always be downloaded from the specified Internet address, even if you save the web page to the local computer.
  • The colon with the slash (../) at the beginning of the address indicates that both the picture and the web page are in different folders that are placed on the same level. In Fig. 1 shows the file index.html, in which you want to place the picture pic.gif. Then the relative path to the image from index.html will be ../images/pic.gif . There are cases when files are stored that the conversion from one file to another turns into a set of colons, for example: ../../../images/pic.gif .

    • Fig. 1. Example of file placement

    Fig. 1. Example of file placement

  • The name of the folder at the beginning of the path, without any slashes and colons, indicates that both the current file and the image folder are at the same level. As shown in Fig. 2, the relative path to the picture pic.gif from the file index.html will be images / pic.gif .

    • Fig. 2. Example of file placement

    Fig. 2. Example of file placement

Example 1 shows several ways to add a picture to a web page.

Example 1. Inserting an image into a document

Valid code
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Images </ title>
</ Head>
<Body>

<P> <img src = "http: //www.htmlbook/images/sample.gif" alt = "This is the absolute image location"> </ p>
<P> <img src = "/ images / sample>" alt = "The image placement address relative to the site root"> </ p>
<P> <img src = "images / sample.gif" alt = "Image location relative to the current HTML document"> </ p>

</ Body>
</ Html>

As a rule, the format of the graphic file is GIF and JPEG.

Copyright © www.htmlbook.ru