Images

Image files come in different types (depending on the process by which the image was converted into data).

Type	Full Name	Description	Extension
GIF	Graphics Interchange Format	Used for things like logos and basic drawings	.gif
JPEG	Joint Photographic Experts Group	Designed for photographic images	.jpeg/.jpg
PNG	Portable Network Grapghics	Intended as a replacement for GIF files	.png

To include an image you use the <img> tag with the source attribute src:

<img src="URL"  alt="" />

The img element is an empty element so you need to use /> to close the element
The alt attribute should be used to make your page more accessible and in XHTML it is required.

The most common type of images that appear on a web page are called inline images, because you specify their location as if they were part of a line of text. That is you place the <img> tag on a line in your HTML document, and the browser displays the image as part of that line.

You can change the alignment of the image by using a style definition for the img element.
To specify that all the images on the page are vertically aligned in the middle of their line:
set the vertical-align property to the value middle (or top to have the top of the image aligned with the top of the line):

<style type="text/css">
	img{vertical-align:middle;}
</style>

The style above sets the vertical alignment to the middle:

Interdum volgus videt, est ubi peccat.

Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.

(To apply the style to only certain images, use the local style).

You can get better looking results by specifying that the text wrap around the image, either to the left or to the right. You need to use the float style property with the value left or right. The value specifies which way the image will be placed. A value of left means the image will float down to the next open line and be placed against the left margin, with the text flowing around its right side.
A value of right means the image will float down to the next open line and be placed against the right margin, with the text flowing around its left side.

<head>
<title>Flowing text</title>
<style type="text/css">
	img.leftside{float:left;}
	img.rightside{float:right;}
</style>
</head>

<body>
<p>Interdum volgus videt, est ubi peccat. <img src="images/image.jpg" 
alt="" width="72" height="134" 
class="leftside"/>Si veteres ita miratur
laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.</p>

Produces this:
Interdum volgus videt, est ubi peccat.

Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo. Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror. Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, iniuste totum ducit venditque poema.

<head>
<title>Flowing text</title>
<style type="text/css">
	img.leftside{float:left;}
	img.rightside{float:right;}
</style>
</head>

<body>
<p>Interdum volgus videt, est ubi peccat. <img src="images/image.jpg" alt="" 
width="72" height="134" class="rightside"/>Si veteres ita miratur
laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.</p>

Produces this:
Interdum volgus videt, est ubi peccat.

To get a border around your image:

<head>
<title>Flowing text</title>
<style type="text/css">
	img.leftside{float:left;}
	img.rightside{float:right;}
	img.borderleft{
		float:left;
		border-style:solid;
		border-width:1px;
	}
	img.borderright{
		float:right;
		border-style:solid;
		border-width:1px;
	}
</style>
</head>

<body>
<p>Interdum volgus videt, est ubi peccat. <img src="images/image.jpg" alt="" 
width="72" height="134" class="borderleft" />Si veteres ita miratur
laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.</p>

Produces this:
Interdum volgus videt, est ubi peccat.

Images