For beginners: how to draw text around a picture

In this article we will tell you about the features of HTML and CSS that are associated with images. You will learn how to insert them into an HTML document. Also in the article you will find information on how to change the parameters of the picture and organize the flow around the picture with text.

First - about inserting an image. To do this, there is an "img" tag that has several attributes. The main one is "src". It stores the address from which the browser can insert the picture. You can specify the path to the image already saved in the computer, or give a link to the web resource.

The next important attribute pair is "width" and "height". They are used to manually resize the picture (a useful option for stretching and compressing the image).

Next, the parameters "hspace" and "vspace" (distance from the image to the surrounding text). Clearly, "hspace" is horizontal indentation, and "vspace" is vertical.

The tag has attributes such as "alt" and "title". They are similar to each other, since their purpose is to describe the picture. But the "title" is written text that appears when you hover the mouse over the image, and the letter value of the "alt" attribute is displayed if the picture failed to load.

There are several more specific attributes that are present in most tags. These are "accesskey", "class", "id" and "style". "Accesskey" specifies the keyboard shortcut by which the object is accessed. "Class" and "id" are parameters related to CSS. They describe to which class the picture belongs (or its identifier). "Style" is a text attribute that allows you to specify a built-in CSS-style image.

One of the parameters that define the appearance of the image 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 around the picture with text. 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, if the value is "middle", the middle of the image will be aligned at the bottom of the text, and when "left" - the object will be on the left side of the text. But this is only one way to set the flow around the picture text - HTML.

There is another powerful tool - CSS (much more versatile). With its help, you can more effectively set the attributes of the tag, including the flow around the picture text. CSS allows you to define the parameters of not only a particular object, but all the like. For example, if you want to specify the indents of all the images in a document equal to ten pixels, then it is enough to attach to it a CSS file with only one line: "img {margin: 10px 10px 10px 10px;}" (in practice, no quotes are needed!).

And the flow around the picture with text, for example, on the left side is set like this: "img {align: left;}".

By the way, to add CSS-code does not have to write it in the file. To do this, HTML provides a "style" tag, in which you can insert CSS code. But it will work only for this document (if you want to add the same code to several HTML files, then you should create a separate style sheet).

Now you can "dilute" the site with images, using the useful properties of the tag, which is responsible for this. Feel free to apply resizing or text wrapping around the picture. Web pages without graphical components are a rather dull sight, are not they?