Image manager - img tag

Table of contents:

Image manager - img tag
Image manager - img tag
Anonim

The picture is not just inserted directly into the text. The browser is told its name and instructed where and how to position it on the screen. To do this, use a single HTML img tag. It specifies the location of the graphic object on the web page.

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

  • - this will display the goat-j.webp" />
  • - with this parameter of the img tag, the browser will load the image posted on the Internet on the site megasellmag.ru.

Alignment attributes

To position images on a 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 text wrapping.

img tag
img tag

By default, the browser places the image in the center of the screen, and the text does not wrap around it. The img tag will allow you to express your disagreement with the browser using the align attribute (alignment).

- the picture will be positioned at the left edge of the page, and the text will go around it on the right.

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

Settings and sizes

In order to prevent text from creeping into images, the img tag has acquired special attributes -hspace (horizontal/horizontal margins) and vspace (vertical/vertical margins), which determine the amount of text indentation from the edges of images in pixels.

img tag attributes
img tag attributes

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

The geometric dimensions of images are very important, which are not only desirable, but sometimes simply necessary to specify for the correct display of the image. For this, the attributes width (width) and height (height) are used, the value of which is set in pixels or percentages.

If you specify only the width, the height will be selected automatically with the original proportions. Percentage sizes allow you to place the image in the right part of the page, regardless of the size of the browser window, and this need often arises.

Other options

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

The border can also have a seemingly meaningless zero-width (border='0'), but that is until the image becomes a link, when the browser automatically circles it with a blue border without waiting for instructions.

Some impatient users, furious with low internet speeds, will simply disable the display of pictures. For such cases, the alt parameter is provided, which allows you to enter alternative text that the user will see in the box where the image is in a hurry to load.

If you don't like the possibilities of the alt parameter, the img tag can offer a longdesc attribute, the value of which is the URL of a document with a more detailed description.

The usemap and ismap attributes tell the browser that the image will be a picture in which the hyperlinks are separate areas (link map), only the usemap parameter determines the navigation map on the server, and ismap - the map on the client side.

Description of link 1 in the figure below:

html img tag
html img tag

Exotic items

The lowsrc attribute instructs the browser to first download a copy (or other alternative) of the original image with a lower quality and, therefore, a "lighter" one. This trick is provided in case of low Internet speed for the user. The original image, when loaded, replaces the "fake".

The less commonly used galleryimg attribute of the img tag invokes the image control panel (when hovered over), allowing you to open the default My Pictures folder and print, save or email the image. You can disable the panel by setting the galleryimg parameter to no/false, and enable it by setting yes/true.

In the new HTML5 specification, a number of tags have some parameters deprecated. For example, the lowsrc, border, longdesc, and name attributes of img have been retired.

Recommended: