Inserting Graphics Into A Web Page

<img src=""> This is it. Notice it doesn't require a closing tag, which is great because we have enough to remember.

See this image? The source code for it is:
<img src="images/elephant-butt.gif" alt="Elephant Butt" width="70" height="117">

By looking at the markup above (and having just finished our fabulous lesson on hyperlinks), we can see that this image is in my images folder and that the picture is called elephant-butt.gif. We can also deduce the height and width of it from their respective tags. Lastly, if we mouse over the image, we'll see the alt text that says "Elephant Butt".

Now let's talk about these image attributes in more detail:

The Alt attribute

Why bother with Alt at allt?(I'm so funny) Some people actually browse with their images off (I know, crazyness, but who am I to say?) so the text that comes from an alt tag is their only clue of what those graphics are supposed to be. Whether they're visually impaired or have such a slow connection that they browse sans graphics, to some, the alt tag is very important.

I've recently switched over to Firefox for my browser of choice (it's sooo much better than IE). However, the alt tags don't work when moused over, so if you have Firefox and don't see any alt tags, that's why!

Width and Height attributes

In general, you want to specify the width and heigth of all images on your website. Why? Because by telling the browser what to expect, it'll leave a placeholder for the image as it downloads, which leaves your visitors thinking your pages are loading quickly.

Also, you never want to resize a photo by using the height and width tags. Why? Because it looks crappy. Like these:

See how they pixelate and look rougher than the original? It's like many things in life...sh*t in, sh*t out. The moral is: Start with the proper size and your images will look great.

That said, there are a couple special situations where it's cool to resize, but I'll go into that in a future tutorial. But for now, repeat after me: I will always resize images in my graphics program, not on the webpage.

Image Alignment

You have the option of aligning text around your images in a few different ways.

Default (if you don't specify align) Baseline <img src="images/person.gif" alt="guy" width="17" height="22" align="baseline"> Top <img src="images/person.gif" alt="guy" width="17" height="22" align="top"> Middle <img src="images/person.gif" alt="guy" width="17" height="22" align="middle"> Bottom <img src="images/person.gif" alt="guy" width="17" height="22" align="bottom"> Left <img src="images/person.gif" alt="guy" alt="guy" width="17" height="22" align="left"> Right <img src="images/person.gif" alt="guy" width="17" height="22" align="right">

Horizontal and Vertical Space

You also have the option of adding space around your image, using hspace and vspace attributes:

I've added a horizontal and vertical space of "10" around this picture, so no matter what, it'll have 10 pixels of air around it.

Borders

The last image attribute we'll discuss are image borders. This guy has a border of 4 pixels around him. The code looks like this:
<img src="images/person.gif" alt="guy" width="17" height="22" border="4">

Don't steal other peoples' images. Not only is it against the law, it's really bad karma.

Time to start thinking about web page design, beginning with Web Programs