In this article, we will tell you about the features of HTML and CSS that are associated with images. You will learn how to embed them in an HTML document. Also, the article provides information on how to change the parameters of the picture and organize the flow of text around the picture.
First, about inserting an image. There is an img tag for this , which has several attributes. The main one is src. It stores the address from which the browser can insert a picture. You can specify the path to the image already saved on the computer, or provide a link to a web resource.
The next important pair of attributes is "width" and "height". They are used to manually resize the image (a useful option for stretching and compressing the image).
The following are the parameters "hspace" and "vspace" (the distance from the image to the text surrounding it). Clearly, "hspace" is the horizontal indentation, and "vspace" is the vertical indent.
The tag has attributes such as "alt" and "title". They are similar to each other, since their purpose is to describe the picture. But in the "title" the text is displayed, which is shown when you hover over the image, and the literal value of the "alt" attribute is displayed if the image could not be loaded.
There are a few more specific attributes that are present in most tags. These are "accesskey", "class", "id" and "style". "Accesskey" sets the key combination with which access to the object is carried out. "Class" and "id" are CSS related parameters. They describe what class the picture belongs to (or its identifier). "Style" - a text attribute that allows you to set the built-in CSS-style of the image.
One of the parameters that determine the appearance of the picture is "border". It determines the thickness of the frame around the object and can be specified by any positive integer (in pixels).
The next attribute is "align". It describes the flow of text around a picture. This parameter can take the values "bottom", "middle", "left", "right" and "top". Each of the values determines where the picture will be relative to the text. For example, with a value of "middle", the middle of the image will be aligned with the lower border of the text, and with "left", the object will be on the left side of the text. But this is only one of the ways to specify text flow around the image - HTML.
There is another powerful tool - CSS (much more versatile). Using it, you can set tag attributes much more efficiently, including wrapping text around a picture. CSS allows you to define the parameters of not only a specific object, but of all similar ones. For example, if you want to set the indentation of all the images in a document to ten pixels, then just connect the CSS file with one single line to it: "img {margin: 10px 10px 10px 10px;}" (in practice, quotation marks are not needed!).
A text flow around the picture, for example, on the left edge is defined as: "img {align: left;}".
By the way, to add CSS code you don’t have to write it in a file at all. To do this, HTML provides a "style" tag in which you can embed CSS code. But it will work only for this document (if you need to add the same code to several HTML files, then you should create a separate stylesheet).
Now you can "dilute" the site with images, using the useful properties of the tag, which is responsible for this. Feel free to use resizing or text wrapping around the picture. Web pages without graphic components are a rather dull sight, aren't they?