Setting Up a Web Page - Part 3

If you haven't read part 2, click here to go back.

STEP 2 - Writing your pages. (continued)

Pictures!

Now, don't get too excited. Before I tell you how to include pictures, I'm going to tell you why you shouldn't use 'em, most of the time. They're slow loading. Some users can't see 'em, so you have to alias them with text anyway. They hog your memory. A lot of people web browse with pictures turned off anyway.

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. I'll be using examples from my own pages rather than Sexy Sandra's, 'cause I think it'll be clearer (and she doesn't have any pictures anyway).

How to Get Graphics Online

Hmmm...I think the easiest way to do this is just to talk about some of the ways I got my own graphics. All the graphics program I use I taught myself by fooling around with 'em.

The photos (of myself, Sri Lanka and the University of Chicago), I scanned in with the help of the graphic design people in the office I was temping in at the time. 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.

The globe of Sri Lanka, I used Aldus Freehand to modify a graphic I stole (coloring in Sri Lanka and adding the pointer and text). Then saved as above.

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. See my graphics library to give you some ideas of copyright categories (very slow loading).

So go do some of that and get some graphics to play with. When you have some nice .gif's waiting in your account, you're ready to move on to...

Inserting Graphics in HTML

Oof. I'm getting tired. If this section is too skimpy, let me know.

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:

A divider bar Cute, huh? My file is called eye_bar.gif, and it's in a separate directory called Pics (all of my graphics are in a Pics directory, for my own convenience -- you don't need to do that). So to get this graphic to come up, I typed:

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.

Linking Small Graphics to Bigger Ones

I said earlier that at times you might want to link a thumbnail sketch to a bigger version. That's very easy (an example is on my home page, the picture of the lovers. To get that, I typed:

...which gives you:

All I did was nest a thumbnail image within a link to the larger picture. Cool, huh?

Pictures which link to other pages

And finally, the third basic thing. If you want to have a graphic linked to another page, you simply nest the graphic within the link, as above. For example, when I put the writing graphic on my home page that links to the main writing page, I typed:

...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".

So I think that covers the basics of designing a web page -- I may at some point add a page on some little subtleties I've uncovered in making my own, but my best advice to you now is to go do it -- and when you find something you want to do but don't know how, go trudge through the technical manuals. If you're feeling really nice, then you can send me your notes, and I can incorporate them in here for the benefit of some other poor souls. Hope this was helpful! -- Mary Anne

P.S. Feel free to write me with comments on this page or suggestions for improving it.

Home