This page has been robot translated, sorry for typos if any. Original content here.

Work with images

Work with images

Web graphics play an important role. Breaking the monotony of long text pages, it can convey a sense of context, be an element of page aesthetics, or serve as advertising (not least in commercial activities). With all the merits of images, they cannot be abused. The reason is that the majority of Internet users have not chosen high-speed access because of its high cost, and a large number of pictures cause them to be exorbitant when loading, which turns into a "limit" of patience. The optimal balance of graphic files is 50-80 kb per page. To fit into these frames, compress files to GIF or JPEG format, optimize ready-made images in these formats (on the principle of "size-quality").

Getting to the descriptions of the means of the language of HTML, intended for placing images on a Web-page, collect the necessary images in one folder. So you will save a lot of time.

To insert image files on the page is a single <IMG> tag . Here are its attributes:

  • SRC - indicates the address of the image. Always applies to the <img> tag
  • WIDTH - image width. (measured in pixels (px))
  • HEIGHT - picture height (px)
  • ALIGN - a way to align the image on the page (values ​​left (left), right (right), top (top), bottom (bottom), middle (middle))
  • VSPACE - vertical indent from text (px)
  • HSPACE - horizontal indent from text (px)
  • ID or NAME - assigns a name (if an internal link is made to the image)
  • BORDER - frame thickness (px)
  • USEMAP - reference map
  • ALT - comments that will be visible when you hover over the image

Attributes to the <IMG> tag are applied as necessary except for the first. And the code in the page might look like this:

<IMG SRC = "img / tchk.gif" WIDTH = "5" HEIGHT = "5" HSPACE = "5" VSPACE = "5" BORDER = "0" ALIGN = "left">

Please note that there is no closing tag </ img> .

Image dimensions should be indicated - real, in order to avoid incorrect display of pictures on the screen.

We would especially like to note the important attribute ALIGN . With its help the image is positioned on the screen:

  • relative to the text (the image code is inserted into the <P> </ P> and <DIV> </ DIV> containers, positioning each other). Example: <P ALIGN = "left"> <IMG SRC = " address " ALIGN = "right"> text </ P>
  • relative to the table (the image code is inserted into the table cell — the <TD> </ TD> container and aligned with the cell)
  • relatively blank page

Note: The image cannot be aligned vertically by the usual method. To do this, place it in the container <P> </ P> or <DIV> </ DIV> , where in the latter put " ALIGN " with the desired values.

A map of references is a method of using links with an image, which is conventionally divided into parts, where each part serves as a link. It is based on the Cartesian coordinate system, where (0,0) is the upper left corner of the image. The code of such reference maps is quite laborious if manually typed. Therefore, we advise beginners to turn to graphic HTML editors, they display the link code in the finished html file.

Instead of the attributes VSPACE , HSPASE , BORDER and ALIGN , it is common practice to use cascading style sheets.

In order to fully understand this process, one theory will not be enough, so start practical exercises on your PC.