Your Image
ALT tags: There are vast numbers of people on the Internet who aren't even using graphic browsers, or who browse with images turned off because they are looking for information, with speed -- they see text, and text only. All images show up as the stunningly informative [IMAGE], or perhaps the equally evocative [INLINE] -- unless you have had the forethought to include the attribute ALT="This is the cutest picture of a cat you never did see." in your IMG tag. EXAMPLE: If you are using a graphics browser and all is right with the world, you see a picture of Thalia, Muse of Comedy, and one of Her Favorites. If you are using a text browser, or one of the Internet's Immortal Imps has interrupted transmission, chewed on and corrupted my image file, or some other imaginative trick, you see the words "Thalia, with Guinness". The code for this reads <IMG SRC="thalia.gif" height=144 width=164 ALT="Thalia, with Guinness" ALIGN=right>
Another advantage to using the ALT tag: people with visual impairments can get their browsers to display text extra-large more easily than they can get their browsers to display graphics extra-large. The ALT tag makes your page more accessible. If that sounds like sheer altruism, consider this: how much work would you put into getting 20% more hits for your page? If you ignore visitors with visual or other disabilities, you are cutting your hits by at least 20%.A final argument for ALT tags: search engines pick up on ALT tags like any other text. If you are indexing a page under "newspapers", an informative tag like "Sid the Real Change office cat sleeping on the newspapers" also gives extra weight to the word "newspapers".
A tip about speed. Not everybody on the Web, regrettably, is willing to wait five minutes to see all your stunning effects -- you would be amazed to know how few are, really. But if you give them something to begin to read, they might still be around when all the images finally download. The way to do this is to include the WIDTH and HEIGHT attributes in every IMG tag -- as I did above. This makes the images seem to load faster; at least it allows the server to immediately begin filling in the text around the places where the images will be.
You can get text to wrap around an image by using the ALIGN tag. ALIGN=right places the image to the far right of the screen and forces the text to the left -- until the end of the image. ALIGN=left forces the image to the left and the text to the right.
For even more control over where the text falls in relation to the images, you have additional attributes for the <BR> line. <BR clear=left> says "Don't start another line until the page is clear to the left." <BR clear=right> says "Don't start another line until the page is clear to the right." <BR clear=all> says "Don't start another line until the page is clear, period."
A note about tables and graphics: Netscape 2.02 browsers are not going to see any of the colors you defined for your tables: rows, columns or borders. They are going to see only the color you set for the page as a whole in the BODY tag. If you set the overall page to black and set each particular cell to a different bright color, with black lettering in it, you would have a very vivid web page -- to advanced browsers. But to the older generation of browsers, you would be invisible -- a portrait of a black cat at midnight in the coal factory. And not all the old browsers are dead yet. According to my webpage stats, about 20% of the people visiting my pages use Netscape 2.x -- think of it as getting a 20% percent increase in traffic for a lot less effort than you'd spend getting listed in Yahoo, and use background graphics to make separate color areas on your screen. (This was written three years ago. I believe Netscape 2.x is now officially extinct.)
Copy graphics to your own server, for several reasons.
- If you are using a graphic that is kept on someone else's server, then every time your page loads, the other party's server is forced to respond. With the increasing load on the Internet, server resentment of providing files without getting any visibility for their own pages is growing. Some, like Tripod, have cut off service of graphics files to external servers entirely. If you link to a graphic file on any Tripod page, including mine, from a non-Tripod page all you will see when you load is a Tripod logo.
- You have more control if the image is on your own server. The other party's page might move, she might re-arrange all her files, she may go offline entirely, her server might go down.
- The loading of your page may go slightly faster if the browser doesn't have to reach all over the World Wide Web for your graphic files.
Copying an image:
- On a PC: Right-click to get a menu; click the "Save as ..." option.
- On a Mac: Click and hold to get a menu; click the "Save as ..." option.
Where to put the image: I find it less confusing to put images in a sub-directory of their own.
Exercise:
If you choose to do this as a workshop, write the code to display a photo of you or an image that symbolizes your interests and arrange the introduction to your page around it. Post it to webwriter@yahoogroups.com
Webpage Workshop Main Page
Anitra's Design Page
Anitra's Home Page