Working with images

Aligning images

Here is an image that uses align="top" with the following markup:

<img src="skull.gif" align="top" alt="This is a skull, dude" />

This picture could be a great button.

Here is an image that uses align="middle" with the following markup:

<img src="punchy3.gif" align="middle" alt="Who's knocking on the door?" />

This image is animated - it will load and reload over and over.

Here is an image that uses align="bottom" with the following markup:

<img src="redball.gif" align="bottom" alt="A red ball" />

This could be used in a list instead of boring bullets.

Here is an image that uses align="right" with the following markup:

<img src="big.book.gif" align="right" alt="A book" />

This image could be used as a button or for decoration.

You can also put photographs on your pages. Want to see how text aligns around one? First, the image is placed along the right margin using the following markup:

<img src="puddy1.jpg" align="right" alt="The hardest working cat in the computer biz" />

Then the text is typed in below this markup. When it is viewed with the browser, notice that only the first part of the text aligns. The rest shows up under the image

So you are looking at a photograph of the hardest working cat in the computer business. Notice how he is calmly reflecting on the work being done. Also notice what happens when the text continues below the bottom of the image. This is a way for you to begin experimenting with interesting types of page design and layout

Return to text

Changing the size of images

Here's the markup for an image that is displayed at its original size:

<img src="../Images/maczilla.gif" alt="Maczilla" />

And here's the image:

Notice the difference when we use the height and width attributes to increase the size of the image. The markup is:

<img src="maczilla.gif" width="400" height="450" alt="Maczilla">

It looks like this:

Now, we'll make it smaller. Here's the markup:

<img src="maczilla.gif" width="50" height="50" alt="Maczilla">

And here's what it looks like:

As you can see, increasing and decreasing the size of an image means that you trade off the appearance of the image on the screen

Here's another example which uses the width attribute to shrink or stretch an image

Here's the markup for the original image:

<img src="../Images/barbed_wire.gif" alt="barbed_wire.gif">

And here's the image:

Now here's the markup to stretch the image:

<img src="../Images/barbed_wire.gif" width="100%" alt="barbed_wire.gif" />

And here's the image:

Here's the markup to shrink it:

<img src="../Images/barbed_wire.gif" width="30%" alt="barbed_wire.gif" />

And here's the image:

Return to text

Some images to use

Here are some lines that you can use.

And some buttons

So, back to the page about color and images.