Remember to keep the images simple and functional. It's fine to have a snazzy opening graphic at the head of your page, but any other graphics should be used for functionality. For example, the bold opening graphic could be followed with small graphical icons representing the other pages on your site, and these small graphics could double as clickable links to these other pages. Using full-sized images as navigation buttons, however, would not be wise because the size and load time of the images far outweighs the purpose of the buttons. Likewise, when you insert images into the text of a document, be certain that each image serves a valuable and useful function for the reader. For instance, if you are discussing the iconography of a painting or discussing geographic proximities on a map, the incorporation of an image is clearly useful. In fact, as we'll learn shortly, examples such as these would justify the use of a rather large and readable image which could be accessed from a smaller version which would be inserted in the text.
The following links demonstrate good use of images. To return to this page, just click the back button on your browser screen.
Start with one of the red bars on these pages, whether you like them or not. You'll need a mouse and a formatted disk to insert into the disk drive on your computer. Move the cursor to the image, then click on the right mouse button, if you are working on a PC (Mac Users need only click the mouse button). If you are using Netscape 1.0 or later, you'll see that one of the options you are given is "Save this image." Drag the cursor to that choice and then a dialog box with Save options will appear (For Mac users, the computer will save the image for you). You can save it to your hard drive or to a disk. (If you are at a public lab, save it to your disk.) The computer will save it under the name the writer of whichever page you're on has given it, but you can change the name to something else if you prefer. Now you've got the image on your disk and can transfer it to your public_html directory. More on that in a moment.
Let's say that you've got a stash of the perfect images for your page. Perhaps you are completing a photo essay about Valley Forge and want to use your own photos or you've discovered the perfect graphic or image in a old magazine or textbook. You can use any of these by becoming familiar with scanning. A scanner is a special piece of equipment attached to a software package that will read your image digitally and then display it on the screen. From there, you can play with the color balance, brightness, focus, contrast, or image size to make the image just right. If you plan to keep up with web technology or are considering a permanent location on the web, get familiar with scanning. It's relatively easy to learn and is an invaluable skill to know. If you are here at UVa, your scanning resource center is the Electronic Text Center at Alderman Library. The Etext staff can give you a crash course in the art of scanning both images and text. Contact them at either firstname.lastname@example.org or 924-3230. Click here for the on-line scanning resources offered by the Etext Center.(Remote users contact your local Computing Center for assistance)
Course Assignment Suggestion
If you really want to individualize your page, try creating your own graphics, logos, and images. You'll need to learn the ins and outs of the many image packages available to you, and this can take time. If you are a student or faculty member at UVa, a valuable resource in these programs is the Multimedia Resource Center in Wilson Hall. (If you are accessing this workshop from another location, consult your school's multimedia center) The MRC offers occasional workshops in packages like Adobe Photoshop, and can be very helpful in answering your questions about image manipulation. You can contact them by email at email@example.com. The best way to learn about these programs is to spend an afternoon playing around with them. Reserve some time on a machine and see what you can do. Each program has step-by-step online help menus which can guide you through the endless capabilities and features of each one. It's not easy to master, but once you catch on to it, image manipulation and creation is an enjoyable way to personalize your web site. The four personal home pages below all use special image manipulation through Adobe Photoshop to convey their very personalized looks.
I said that any image on the web was up for grabs, technically. The technology will allow you to take anything you want for your own use, but the law does not always agree with it. Be aware that many of the images you find on the web or in books you'd like to scan are indeed copyrighted. If you use these items without permission from their owners, you are violating copyright laws, and legal action can be taken against you. Copyright and fair-use guidelines for the web are still very nebulous areas, but things change fast in cyberspace. Don't let yourself become an example for the "web police." Using graphics like buttons, arrows, and lines aren't going to get you in trouble with anyone, and any image you use and modify or change dramatically becomes your own, but be advised that if you are going to download a Mickey Mouse icon or a corporate logo, you will be asking for attention from the corporate lawyers. Use caution and keep the adage "when in doubt, don't" in mind.
Images come in many different file types, but the two most common ones are .GIF and .JPG formats. Both are known as compressed formats, meaning that they take up less space on your disks and are therefore faster to load. It is a good idea to have all your images in one of these two formats when you insert it into your page. Both image formats give good quality, 256-color presentations and keep load time to a minimum.
Most images you find on the web will be in one of these two formats, but any image you scan or create in an image processing program will not be. In order to make your images conform to these formats, you will have to save them as either .gif or .jpg, which you can do through the "Save as..." option in any of these packages. If you present your image in formats called .RGB, .PSD, or .TIF, you will be saving huge amounts of image information that is not necessary for presentation on the web. Saving your image in one of these files also saves specific color and shading information for photo-quality image reproduction. While you will occasionally find these images somewhat sharper and more detailed than their .GIF or .JPG counterparts, the difference is often minute, if even noticeable. The chief difference between the two is in load time and file size, which becomes considerably greater in formats other than .GIF or .JPG.
OK, you've got your images on disk. You've "stolen" them using the mouse buttons, scanned in your own, and created a few in your favorite image software, and they're all in either .GIF or .JPG format. How do you get them on the net? The first thing you need to do is to move your disk copies into your public_html account using a File Transfer Protocol, or FTP, application. If you are not familiar with these programs, read up on the process of moving files when you're ready to do so by following the previous link. Once your files are in place, you'll be ready to use the image tags in your document.
Once you have moved the file from your disk to your UNIX account, and once it is in your public_html directory, it is ready to be inserted into your document using the HTML image tags. You tag image filenames just as you would any other HTML text. When you construct the document, make room for the images. Use <p> tags or <pre> tags to block off space to separate your images and your text. It can take some trial and error before the image appears on the page the way you like it.
The main image tag is the Image Source tag, which tells the browser the filename of the image to display. The command is enclosed in brackets and does not require a closing tag.
The image tag has two primary attributes, which give the browser further instructions for presenting your image. These are the ALIGN= and the ALT= commands. The ALIGN command tells the browser where the text should be displayed in reference to the image, indicated by the following instructions:
The ALT tagis an oft forgotten but sometimes useful attribute which consists of text to display in case the browser does not read images or the user stops the download before the images are there. This way, you can at least indicate that there are images on the page, allowing the user to decide if they may or may not be useful to see.
The ALIGN and ALT commands would be written like this:
Note that all the attributes are followed by an = sign and the quality of the attributes is put in quotation marks, and all information is contained within the IMG SRC tag.
Images can work as links much the same way as text. They require the same set of Anchor tags and work just as a text link would. Having images as links is a good way to use graphics wisely on a web page. You could use a few small graphical icons to represent other pages on your site, and then make these images the actual link to your other pages. You can also incorporate images in your text and then make them link to full-sized versions which would be too large to place directly in your document. This is called making a thumbnail image. The thumbnail could be a small part of the image you have cropped in Image Assistant or in Adobe Photoshop, or it can simply be a reduced version of the full image. In either case, the tagging is identical and appears like this:
<A HREF="name of targeted page or image"><IMG SRC="name of image that will act as link"></A>
where the HREF indicates the name of the page or image to see when clicking on the image specified in the IMG SRC tag. If you are using thumbnails, the thumbnail will be the image in the IMG SRC tag, and the full-sized version will be in the HREF tag.
There's a lot to remember when it comes to graphics, but if you keep the following list of guidelines in mind, you'll be able convey the proper image--so to speak:
Sketch your page layout with graphics to determine the right place and size
Focus on overall page look and content: don't sacrifice either for the sake of images
Keep all images small and simple
Use compressed GIF's or JPG's
Use graphics as links when possible; Use thumbnails instead of putting the large version directly in the page
Use graphics sparingly for maximum effect
Images and graphics should enhance the text information
Once you've gained a little confidence with this process, start enhancing your page with some other appropriate graphics you find, scan, or create. Mastering the possiblities of image work will take some time; have patience.
Course Assignment SuggestionBy this point in the workshop, you should have enough tools to build a high-impact home page. Believe it or not, that's all there is to it--a couple of tags and some image tricks. There are other factors which will enhance your knowledge, and I outline them in the advanced tagging section, but you've got most of the skills you need now. Read the next section on page design tips to get a few elements of web style that will allow you to bring all these pieces together into a sharp looking home page.
Sponsored by the American Studies Group at UVA ©1996
Maintained by Joshua Johns