Novice web designers: how to make text flow 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 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.

text wrapping around a picture




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).

"hspace" "vspace" ( ). , "hspace" – , "vspace" – .

, "alt" "title". , . "title" , ,   "alt" , .





, . "accesskey", "class", "id" "style". "Accesskey" , . "Class" "id" – , CSS. , ( ). "Style" – , CSS- .

, , "border". ( ).

html text wrapping around a picture




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.

– CSS ( ). , . CSS , . , , CSS- - : "img { margin: 10px 10px 10px 10px; }" ( !).

css text wrapping around




, , : "img { align: left; }".

, CSS- . HTML "style", CSS-. ( HTML-, ).

"" , , . . - - , ?




All Articles