Aligning Text with Images

Sometimes, of course, you won’t want an image to stand all by itself. Instead, you will want to incorporate it into other elements of your Web page. One neat thing that you can do is wrap text around an image. This means that the text automatically places itself around an image that you place on the page. Believe it or not, you have already learned all the tags and attributes necessary to do this. See how this text wraps around the image of the computer? All I had to do was use this tag:

<IMG SRC="images/computer.gif" ALIGN="left">

followed by the text that wraps around it. That’s it! If you want your image to justify to the right, simply use this tag:

<IMG SRC="images/computer.gif" ALIGN="right">

followed by the text that wraps around it. I will show you one more trick. Sometimes when you wrap text around an image, it’s nice to have some space between the text and the image. Look at this tag:

<IMG SRC="images/computer.gif" ALIGN="right" HSPACE="10" VSPACE="10">

Whew! This tag is getting pretty long, isn’t it? I added two new attributes. The HSPACE attribute stands for "horizontal space", and it creates horizontal space between the image and the text, measured in pixels. You can make the space as big or as small as you want to. The VSPACE stands for "vertical space", and it creates vertical space between the image and the text. Look at the difference. Here is this tag:

<IMG SRC="images/computer.gif" ALIGN="left">

This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image.

and here is this tag:

<IMG SRC="images/computer.gif" ALIGN="right" HSPACE="10" VSPACE="10">

This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image. This text is wrapping around the image.

One More Attribute

Here’s a neat trick, the ALT attribute. If you are using Internet Explorer right now, move your mouse over this image:

Hi there!

Did you see the little box that popped up that said, "Hi there!"? Here is how I did it:

<IMG SRC="images/computer.gif" ALT="Hi there!">

You can type anything you want in the ALT attribute. It’s a nice touch to add on your Web pages.

Changing Image Size

Let me remind you that images on a computer are not like photographs. Computer images are made up of a lot of little colored dots. They're known as picture elements or "pixels" for short. So, just remember that during this part of the lesson, the numbers that we will use refer to pixels rather than inches, or centimeters, or any other unit of measurement.

Now that we know that every image is made of pixels, we can describe an image by how many pixels high and how many pixels wide an image is. For example, the "computer.gif" image (that you’re probably getting sick of by now) is 100 pixels high by 100 pixels wide.

How did I know that, you might ask? Here’s a neat trick. You can open up an image in using Netscape Navigator. Do that by opening Netscape Navigator and then choosing OPEN FILE under the FILE menu. When the picture pops up, look at the title bar along the very top. The height and width should be there.

Anyway, let’s say that you thought that the image of the computer was the wrong size for your Web page. Can you make it bigger or smaller? You sure can! All you need to do is use the HEIGHT and WIDTH attributes with the IMG tag.

For example, here is our original image:

<IMG SRC="images/computer.gif">

Here is the same image with a height and width of 200 pixels.

<IMG SRC="images/computer.gif" HEIGHT="200" WIDTH="200">

And here is the same image with a height and width of 50 pixels.

<IMG SRC="images/computer.gif" HEIGHT="50" WIDTH="50">

We can even do some goofy things if we’d like to. Check out these dimensions:

<IMG SRC="images/computer.gif" HEIGHT="25" WIDTH="150">

<IMG SRC="images/computer.gif" HEIGHT="250" WIDTH="80">

You can play with the HEIGHT and WIDTH numbers to get an image to the exact size that you would like it to be. Now, I need to say something here. If you plan on becoming a professional Web developer, or even just a really good amateur, at some point, you will want to learn to use some imaging editing software. Adobe Photoshop is a great program; so is Macromedia Fireworks. For this class, we aren’t going to complicate things by learning more software. But just know that if you are really serious about designing super-looking Web sites, after this course, your next task should be learning how to edit images like the professionals do.
 

 
Make a Free Website with Yola.