A picture is not just inserted directly into the text. The browser is informed of its name and indicates where and how to position it on the screen. To do this, use a single HTML img tag. It sets the location of the graphic on the web page.
If many attributes for tags are, in principle, not necessary, then the img tag must have at least one parameter - the address of the picture. This attribute is called src:
- <img src = 'goat.jpg'> - in this place the goat.jpg file is displayed, which is stored in the current directory;
- <img src = 'http: megasellmag.ru/design/images/Shape5.png'> - with this parameter of the img tag, the browser will download the image posted on the Internet at megasellmag.ru.
Alignment attributes
To position images on a page using HTML, the img tag is used precisely, the attributes of which are responsible for placing the image on the page and the nature of its flow around the text.
By default, the browser places the image in the center of the screen, but the text does not wrap around it. The img tag will allow disagree with the browser using the align attribute.
<img src = 'goat.jpg' align = 'left'> - the image will be located at the left edge of the page, and the text will bypass it on the right.
The behavior of the text will be similar if the picture is placed to the right (align = right), in the middle (align = middle), above (align = top), below (align = bottom) and in the center (center).
Indent and size options
To prevent the text from creeping into the images, the img tag has got special attributes -hspace (horizontal / horizontal fields) and vspace (vertical / vertical fields), which determine the amount of indentation of the text from the edges of the image in pixels.
<img src = 'goat.jpg' align = 'left' vspace = '15 'hspace =' 30 '>
The picture not only obediently moves away from the text by the specified amount, but also moves away from the edge of the page, so it is better to avoid large indents.
The geometric dimensions of the images are very important, which are not only desirable, but sometimes it is just necessary to specify for the correct image display. To do this, use the attributes width (width) and height (height), the value of which is specified in pixels or percent.
<img src = 'goat.jpg' width = '625' height = '450'>
If you specify only the width, the height will be selected automatically with the original proportions. The sizes specified in percent allow you to position the image in the desired part of the page, regardless of the size of the browser window , and such a need often arises.
Other parameters
The border attribute encloses the picture in a frame of the specified thickness, which the browser does not do by default.
<img src = 'goat.jpg' width = '500' height = '360' border = '5'>
The frame may have a seemingly meaningless zero thickness (border = '0'), but this is until the picture becomes a link, when the browser automatically surrounds it with a blue frame, without waiting for directions.
<a href = 'megasellmag.ru'> <img src = 'images / opana.gif' width = '250' height = '250'> </ a>
Some impatient users furious with the low speed of the Internet will simply turn off the display of images. For such cases, the alt parameter is provided, which allows you to enter alternative text that the user sees in the box where the image is in a hurry to upload.
If you are not comfortable with the alt parameter, the img tag may offer the longdesc attribute, which uses the URL of a document with a more detailed description as its value.
The usemap and ismap attributes indicate to the browser that the image will be a picture in which individual areas are hyperlinks (link map), only the usemap parameter defines the navigation map on the server, and ismap defines the map on the client side.
<img src = 'Quad_Band_Phone.gif' width = '145' height = '126' alt = 'Mobile phones' usemap = '# phones'>
Description of link 1 in the image below:
<img src = '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 '>
Exotic elements
The lowsrc attribute instructs the browser to download first of all a copy (or other alternative) of the original image with lower quality and, therefore, more “lighter”. This trick is provided in case of a low Internet speed for the user. The original image, loading, replaces the "fake".
The not so often used galleryimg attribute of the img tag brings up 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 parameter to no / false, and enable it by setting yes / true.
Some HTML tags are outdated in the new HTML5 specification. So, for img, the attributes lowsrc, border, longdesc and name were resigned.