Image Manager - img tag

A picture is not just inserteddirectly into the text. The browser is told her name and indicates where and how to arrange on the screen. To do this, use a single HTML-tag img. It specifies the location of the graphic on the web page.

If many attributes for tags are not required in principle, then the img tag must have at least one parameter - the address of the picture. This attribute is called src:

  • <img src = "/ images / goat.jpg"> - in this place the file goat.jpg will be displayed, which is stored in the current directory;
  • <img src = "/ images / http:"> - with this parameter of the img tag the browser will download the image posted on the Internet on the website.

Alignment attributes

To position images on the page using HTML, the img tag is used, the attributes of which are responsible for placing the image on the page and the nature of its flow around the text.

img tag

By default, the browser has an image in the center of the screen, and the text does not wrap around it. The img tag will allow Express your disagreement with the browser using the align attribute.

<img src = "/ images / goat.jpg" align = "left"> - the picture will be located at the left edge of the page, and the text will bypass it to the right.

The behavior of the text will be similar if the picture is placed on the right (align = right), in the middle (align = middle), on top (align = top), at the bottom (align = bottom) and center (center).

Indentation and size parameters

That the text did not crawl on pictures, the tag img got special attributes -hspace (horizontal / horizontal fields) and vspace (vertical / vertical fields), which determine the amount of text indentation from the edges of the images in pixels.

<img src = "/ images / goat.jpg" align = "left" vspace = "15" hspace = "30">

tag img attributes

The picture will not only obediently move away from the text by the specified amount, but it will also move away from the edge of the page, so it's better to avoid large indentations.

Very important geometric dimensions of images,which are not only desirable, but sometimes just need to be specified for the correct display of the picture. To do this, the width and height attributes are set, the value of which is specified in pixels or percentages.

<img src = "/ images / goat.jpg" width = "625" height = "450">

If you specify only the width, the height will beis automatically selected with the original proportions. The sizes specified in percent, allow to place the image in the necessary part of page, irrespective of the size of a window of a browser, and such necessity arises quite often.

Other parameters

The border attribute encloses the picture in the frame of the specified thickness, which the browser does not by default.

<img src = "/ images / goat.jpg" width = "500" height = "360" border = "5">

The frame can have and, it would seem, meaninglesszero width (border = "0"), but this is until the picture becomes a link when the browser automatically traces it with a blue border, without waiting for instructions.

<a href = ""> <img src = "/ images / images / opana.gif" width = "250" height = "250"> </ a>

Some impatient users, furiouslow speed of the Internet, just turn off the display of pictures. Here for such cases the parameter alt is provided, allowing to enter the alternative text which the user will see in a square where the image in a hurry to load.

If you do not like the alt option, the img tag can offer the longdesc attribute, the value of which is the URL of the document with a more detailed description.

The attributes usemap and ismap indicate to the browser thatthe image will be a picture where the hyperlink is a separate area (link map), only the usemap parameter specifies the navigation map on the server, and the ismap is the map on the client side.

<img src = "/ images / Quad_Band_Phone.gif" width = "145" height = "126" alt = "Mobile Phones" usemap = "# phones">

Description of the link 1 in the picture below:

<img src = "/ images / img / map.jpg" width = "328" height = "236" border = "0" usemap = "# Dvostok"> <map name = "Primorye">

<area shape = "rect" coords = "60,20,110,50,105,80,35,80" href = "Lsd022_1.html" target = "_ blank" alt = "Lesozavodsk">

html img tag

Exotic items

The lowsrc attribute instructs the browser to load inFirst of all, a copy (or other alternative) of the original image with a lower quality and, accordingly, more "easy". This trick is provided for the case of low Internet speed for the user. The original image, loaded, replaces the "fake".

Not so commonly used galleryimg attribute of the tagimg calls the image control panel (if you hover over it), allowing you to open the standard My Pictures folder and print, save or send the picture by email. You can disable the panel by setting the galleryimg to no / false, and to enable it by setting yes / true.

In the new HTML5 specification, some of the parameters have become obsolete. So, img attributes lowsrc, border, longdesc and name are sent in retirement.</ strong </ p>

  • Rating: