Of course, I do use pictures, but I use 'em as accents, and they're generally tiny little things. If not, I put in a thumbnail and let people click on it if they want to see the bigger graphic, or put them on a separate page altogether, and warn people that it's slow loading. I would strongly advise all of you to do the same if you want to be a good designer. (All this is of course In My Humble Opinion only, but a lot of people agree with me, especially for personal home pages).
Graphics really divides into two parts here -- how to get 'em and get 'em on-line, and then how to use them in HTML. I'll briefly address the first, then move on to the specifics of working them into your pages.
The photos I scanned in with the help of the graphic design people in the office. I then played with them a bit using Adobe Photoshop (a very cool program), but pretty much left 'em as is. Saved them as a GIF or JPEG file (all you need to know about this is that they're two types of graphic files. I think JPEG's give you better definition and detail, but they take up much more room. Generally stick to GIF's. When you save, a GIF file should be something like picture.gif and a JPEG should be picture.jpg. There are other types of graphic files, but I never use 'em). Used ftp (file transfer protocol, and if you don't know what that is, I'm not going to go into it here -- ask your sysadmin; it's not hard) to get them online and into the appropriate account, and I was ready to rock.
I used Aldus Freehand to modify a graphic.
All the other graphics I pretty much either simply linked to, or downloaded from other graphics that were already on-line. This is dangerous, as you may infringe copyright if you're not careful. There are huge archives of publically available clip art, though, which will give you a nice start. For example check out...
Okay, so the first thing you need to know is that HTML uses the command <IMG SRC> for graphics. I'm going to use a very small graphic to demonstrate all of this, a divider bar (btw, <HR> will automatically put in a bar for you, and it's what I always use, but if you want to get fancy....).
So here's my bar:
Cute, huh? My file is called redjeep.gif, and it's in a separate directory called images (all of my graphics are in an images directory, for my own convenience -- you don't need to do that). So to get this graphic to come up, I typed:
<IMG SRC="images/redjeep.gif" ALT="Red Jeep">
Clear? IMG SRC is the command, the filename goes inside the quotes, just as it would in a link. You're probably wondering what the ALT is for -- it's an alias, so that people using nongraphical browsers have some idea what was there. It's not entirely necessary if your graphics are solely ornamental -- but I think it's polite to put them in. Up to you.
<A HREF="images/vangogh.jpg"><IMG SRC="images/vangogh.jpg" ALT="Van Gogh"></A>
...which gives you:
All I did was nest a thumbnail image within a link to the larger picture. Cool, huh?
<A HREF="writelinks.html"><IMG SRC="images/map.gif" BORDER=0 HEIGHT=50></A>
...which gave me:
The link is fairly obvious, yes?
Two other subtleties -- the BORDER=0 means that you get rid of that automatic little highlighted border around a picture link, which I find ugly, and the HEIGHT command allows me to size the picture (there's a WIDTH command too). It's strongly recommended that you make those modifications in a graphic design program, getting the picture to the right size FIRST....but if you're lazy, you can shoehorn it in with the HEIGHT and WIDTH commands. Keep in mind that if you do that, they will take just as long to load as if they were the original size, which is the major reason to resize it in a graphic design program if you're trying to make thumbnails. The tags are actually intended to be used to define the height and width of every picture you use (not changing it, just defining it for the program), and I'm sure that it would be better if I did do that, but I'm not going to. Your mileage may vary. I'm reliably informed that a major advantage of height/width tags in graphics is that the remaining text can all load and display on the browser immediately. This lets your readers read through everything, which allows the graphics to be truly "optional".
P.S. Feel free to write me with comments on this page or suggestions for improving it.