The Image tag
<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.
Be aware though, that in Firefox
(my browser of choice) alt tags don't work when moused over, so if you're using Firefox and wondering why you're not seeing them, 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:
If you'd like us to alert you when new tutorials arrive,
join our email list (on the menu to the left)
You can email us at
Sorry, no individual questions answered,
though we may use yours as the basis for a new article.
©2009 www.WebsiteBeginner.com
