<< .. Go to : : Home : : Exercise 3 : : Demo 3A : : Demo 3B : : Demo 3C : : Demo 3D : : Demo 3E : : Demo 3F : : All Class Demos .. >>

Exercise 3 Demo: Part B : Image Alignments

This is the HTML you will need for Part B of Exercise 3. H

HTML image alignments are being depricated. They are being replaced with CSS alignments. We will review them anyway, as there as so many websites that still use these alignments, particularly the left and right alignments. The hspace and vspace attributes are also being depricated and replaced with using margins in CSS.

Aligning Images and Text

This is the default position for text and an image if you simply insert an image inline with text. I am going to add a picture of my puppy, Stella, and we will see how she interacts with the text I have written. Let's put her image here. I am not adding any breaks, no alignment, nothing fancy. Watch Stella move around when you play with the browser window width. See how it effects the text and image relationship. Not exactly predictable, is it?

Let's add the align="x" attribute to the <img> tag. The code will look like this:

<img src="Stellasm.jpg" align="x" >

Possible values for the ALIGN attribute include:

Some of the alignments seem almost the same.

If we use the <img src="Stellasm.jpg" align="left"> Stella moves to the left and the text that I write aligns to the top of the image and fills in the space to the right of the image. It will keep aligning text next to the image until the space is filled up. Then the text will wrap around the bottom of the image and continue. To fill up the space I will tell you about Stella. She is part dalmatian and probably part pitbull. She loves to chew on things as you can tell from the picture. She is 18 months old and we love her a lot. We rescued her through the internet. She is very sweet and very smart. She loves to "sit" in your lap and will give you big wet kisses if you let her. She is so cute we used her in a commercial where she gets to chew up a cushion.

If we use the <img src="Stellasm.jpg" align="right"> Stella moves to the right and the text that I write aligns to the top and fills in the space to the left of the image. It will keep aligning text next to the image until the space is filled up. Then the text will wrap around the bottom of the image and continue. Here is more space filler... We have two other dogs as well. Hammie and Howie. They all come to work with us every day and lay on the floor. Hammie likes to lay under my desk and Stella lays under my husband's desk. Howie likes to sit on your lap because he is little. Sometimes they all lay in the middle of the room and there is barely any room to walk. When they do that I call it the dog pile-up. We also have two cats, Sophie and Lily, who are sisters. They don't come to work with us. They stay home and loaf around the house.

Look what happens when I use this attribute <img src="Stellasm.jpg" align="middle">.

Put a <p> break to bring the next line of text below the image. The "top" and "bottom" values work in a similar fashion. Be sure to try them out as well.

What if you want to make a photo caption, then have the next paragraph continue below the the image? To stop aligning the text next to the image and have it move down below, you use an attribute or value of the <br> tag called clear="x"

Here is a picture of my dog Stella. Isn't she cute? <br clear="left">
Now the text continues below Stella's picture. Use the value "left" for left-aligned images, <br clear="right"> for right-aligned, <br clear="all"> to clear both margins.

Simply using <br> or <p> will not produce consistent results and in not recommended at all.

Align an image, or several images,
using the <img src="images/Stellasm.jpg" align="top"> The "middle" and "bottom" values work similarly.

Let's align the images with CSS and give them a little breathing room. Go to Part C of Demo 3.

Go back to the Exercise 3 page.

© Claudia Faulk. Created in 2008. Updated 1.15