Simple Graphics

Formatting Images in HTML

As you've now seen, adding images to your web page is pretty easy. The "tough" part is getting those images to sit exactly where you want them to on the page. In later months, you'll learn how pages such as this one utilize broken graphics and tables to create it's layout. But first, you need to learn the basics of moving an image around on a page.

You can easily align your graphic with the sides of the web page by using the "ALIGN" attribute within your IMG tag.

To align the image above the text that surrounds it, use ALIGN=BOTTOM

To align the image below the surrounding text, use ALIGN=TOP

To align the middle of the image to the text, use ALIGN=MIDDLE

To force the image to the left of the page and have the text wrap around it, use ALIGN=LEFT

To force the image to the right of the page and have the text wrap around it, use ALIGN=RIGHT

So if we wanted our balloon image to be on the left of our page with the text wrapping around it, the new tag would look like this -

<IMG SRC="balloon.gif" ALT="Drawing of a bunch of balloons." ALIGN=LEFT>

Try It Now!

Play around with the various alignment settings and see where your graphic works best.

That's it for this week! Next week's lesson will be posted here.