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

Working with images

Working with images

Graphics on Web sites play an important role. Violating the monotony of long text pages, it can convey the meaning of the context, be an element of the aesthetics of the pages or serve as advertising (important in commercial activities). With all the merits of images, they can not be abused. The reason is that most Internet users have not yet opted for high-speed access because of its high cost, and a large number of pictures cause them an exorbitant wait at boot, which turns into a "limit" of patience. The optimal balance of graphic files is 50-80 kb per page. To fit within this framework, compress the files in GIF or JPEG format, optimize the finished images in these formats (on the basis of the "size-quality" principle).

When you start describing HTML tools for placing images on a Web page, compile the images into one folder. So you will save a lot of time.

To insert image files on the page, there is only one <IMG> tag . Here are its attributes:

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

Attributes to the <IMG> tag are applied as needed, except for the first one. 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">

Note that there is no closing </ IMG> tag .

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

Especially we want 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 containers <P> </ P> and <DIV> </ DIV> , positioning among themselves). Example: <P ALIGN = "left"> <IMG SRC = " address " ALIGN = "right"> text </ P>
  • relative to the table (the image code is inserted into the cell of the table - container <TD> </ TD> and aligned relative to the cell)
  • relatively blank page

Note: The image can not be aligned vertically with 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 reference map is a way of applying links by means of an image that is conditionally divided into parts where each part serves as a reference. It is based on the Cartesian coordinate system, where (0,0) is the upper-left corner of the image. The code for such reference cards is quite laborious, if you type it manually. Therefore, beginners are advised to refer to graphical HTML-editors, they output the link code in the finished html file.

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

To fully understand this process, one theory is not enough, so start practical training on your PC.