Advanced HTML: Graphics & Images

The HTML to include graphics is the img: some examples to get started:

To put an image [check] in a line:
<img src="images/check.gif" alt="[check]">
[simpletext] To put an image on the left or right side of the window and have text flow around it:
<img src="images/simpletext.gif" alt="[simpletext]" align=right>

Having a few nice graphics can result in a nice, finished feel for a Web page. There are four primary sources of graphics:
  1. Drawings from drawing program
  2. Screen-capture
  3. Scanned pictures
  4. Other Web sites
All of which may be combined with sophisticated image processing programs such as Adobe Photoshop (or, for those working in UNIX and interested in freeware, ImageMagick, or gimp, which are infinitely cheaper and, in the case of gimp, close to as powerful).

Getting images from other Web sites is easy: surf the Web until an attractive image is found, and then

  1. Click on the image with the mouse and hold the mouse button down (on a PC or UNIX box, click and hold the right mouse button); a pop-up menu will appear.
  2. From the menu, select Save this image as...
  3. A selection box will appear---make sure that it says Format for saved document: Source, and give it a file name and location to save it.
And Voíla! the image is ready to be referenced in an img tag.

All of the images in this workshop are from the first two of these. For drawing, I use xfig (a freeware Unix application); other options include Paintbrush or something like Adobe Freehand. I used Flash -It to capture all of the Mac screen shots, and use ImageMagick to capture pictures of UNIX (X11) screens. In each case, I modified the images with ImageMagick and Photoshop to (1) Edit them (cut & paste), (2) Crop, Cut and Paste to get the images that I wanted, and (3) Reduce the color mapping--Photoshop, in particular, allows an indexed color mode--saving in indexed color with 3 or 4 bits per color dramatically reduces the size of an image (the largest is the sample page on the second "do it" page, and is still only 9K large). Because images are transferred over the Internet (sometimes at very slow transfer rates), having small images can make a huge difference to the accessibility of a page.

[advhtml] [colors] [reuse] [valid] [images] [objects] [imaps] [tables] [frames] [forms]
[title] [objectives] [www uses] [the works] [basic html]
[adv html] [editors] [resources]   [feedback]

last modified (( Wed Jun 2 21:33:28 CDT 1999 ))
HTML/WWW Wkshop: Adv HTML-Images
©1997 Gavin LaRose
Comments to: glarose@NebrWesleyan.edu