Exercise 3 Demo: Part B : Image Alignments
This is the HTML you will need for Part B of Exercise 3. H
TML image alignments are being depricated. They are being replaced with CSS alignments. We wil 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 dalmation 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.
Adding Space Around Images
I am sure by now you have noticed that the text and the image are really close, almost touching. Give your images some breathing room by adding vertical or horizontal space around them. Add these attributes to the <img src> tag - vspace="x" or hspace="x". My HTML code looks like this <img src="Stellasm.jpg" alt="my puppy" width="144" height="123" align="left" vspace="10" hspace="10" />. Change the values to create different spacing effects. You don't have to use both attributes at one time.
If you are asked to work on older websites, you most likely will see much of this type of coding. It is good to be aware that it exists. But it is better if you learn how to align images with CSS, so we will try that in the next demo.
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.10