Aligning images with text can be tricky.

The top, middle, and bottom values in the align attribute simply arrange the picture in relation to the line of text. In any line of text, the embedded picture can be top aligned , meaning that the picture will follow the text as it is coded but the alignment of text and picture is such that the top edge of the picture lines up with the text. Or it can be middle-aligned with the midline of picture set at the level of the text that runs on each side, or it can bottom-aligned with the bottom of the picture sitting even with the bottom of the textline. If not specified, the default is bottom alignment. The picture will be oriented to the line of text, and how that text is automatically wrapped will determine where on the page it ends up. Different browsers will wrap the text at different points, so the picture could be anywhere (left, right, or inbetween). The align attribute just says where the picture will be in relationship to the text on each side of it.

You might choose to just place the picture to one side, right or left, and let the text wrap around it. That is similar to how they are printed in newspapers. You can accomplish this using right or left as the value for align. But then the text is right against the picture, as you see. It is often better to use hspace or vpace to add some 'white area' around the picture and set the text back a bit from it. Hspace deals with the horizontal and vspace with the vertical. Both hspace and vspace are measured in pixels, and both have to be used to provide space completely around the picture. So you can create whatever type of text-wrapping you want. Keep in mind that different browsers/systems/viewers will have different settings, so the line wrap may come at different points. So your picture may not be inserted exactly the same place every time. It will be to right or left if so specified, but the exact words ending the lines may differe because of the differences in browsers and how they choose to wrap the text provided. So you cannot count on a specific word being the last word. In this example, the left aligned image is listed in the code after the word "newspapers" at the end of the second sentence. But the image on the web page appears next to whatever text fits within the alignment as specified by the coding, and not next to the text as listed in the HTML code.

And if you want to set the picture off even more, the border attribute will allow you to give the image a thin or thick black border, determined by how many pixels you choose to set it at. Thin (2 pixels) or thick (20)

But watch on borders to images. Images can be used as a link, and when they are they gain a blue border around the image.
When an image is used as a link, it is very helpful to use the title attribute on the a href so passing the cursor over it will tell where the link is going, as well as putting a text link with it.Teaching site