Using Images & Page Layout
Alt in IMG Tags
Tools to Use
Using Frontpage
Easier to read layout
Alt attribute is used in the img tag to offer alternative text if the picture does not display. A great benefit is that the text will show if you float your cursor over the image. I have used this feature in the past in online photoalbums so that the alt tag would tell who all was in the picture. Something else to note about the ALT attribute is that some search engines use this to help rank your page. Float your cursor over the image of circles below to see the ALT attribute in action.
Before you run out and buy a package to optimize your images for the web,
take a look at the tools already on your PC (or mac). In just the same way that
there are existing packages on your machine that can create images, the same
packages can be used to crop, resize and optimize images for web use.
In class, we used Paintbrush (MSPaint) to create an image 50x50 pixels to be
used as a wallpaper.
Although our images looked good in that box, once they were used as
wallpaper they appeared too bold and made the text of the webpage difficult to
read. (Click here to view this page with that wallpaper)
We decided to use MS Photoeditor (comes with Microsoft Office) to adjust the
color balance to make it look more washed out. (See that page here).
We also played with the transparent setting to have our SMILEY image blend in better with the page like the following image.
I just tried another cool feature that shrunk the www wallpaper from 14kb to 6kb. I opened the image in PhotoEditor and used the smudge utility to smudge the edge of a couple of the letters. Just File-Save (I didn't play with the compression or anything else) and this jpg went to less than half it's size! A real good example of the funky way compression works with JPEG files.
One of the benefits of these graphical tools is their ability to let you position your images where you want to. We were able to move our pictures into position and then resize that picture to a suitable size. After saving that file, we reopen in Notepad to eliminate the garbage code and see how the img tag works.
To make the page easy to read and easy to navigate, we looked at using bookmark tags (like the tags in this page that jump to different positions in the document). Our example was to create a page for Bubba and his trusty, rusty Pickup truck. Notepad once again was our versatile tool to setup the tags and readjust to taste.
Randall Perry Copyright © 2002. All rights reserved.
Revised: 04/22/02.