Intermediate HTML
Intermediate HTML
I have to issue this disclaimer with regard to graphics: I have had only minimal training, and exhibit little facility, with graphics programs and in other "artistic" areas as well. I share with you here what I have learned in doing what I have done with graphics on the web, but none of these accomplishments are very sophisticated. Sometimes they look o.k., but even then I'm often not sure why they do. I urge you to consult real experts in this area with questions that range much beyond what is here. A couple of good general guides are: Graphics and Multimedia at Builder.com and the Web Design Group's Image Use on the Web, and there are others in my listing of good sites.
When you use images on your page, you should always include a height and width attribute in the <img> tag. (HTML editors often will do this for you automatically.) This will speed up the loading of the page, especially if the images are larger than mere icons. Browsers will save a space for an image that size, but continue to load the rest of the page, if they "know" how large a space to leave. That way readers can start looking at your other content rather than having to wait for a graphic to load first.
Width and height values are usually given in pixels. If you don't know the pixel size of your graphic, and are not using an editor to size it for you, you can look at the source code for the page where you "borrowed" the graphic and see if the sizing is in the <img> tag. Or you can use a graphics viewing or conversion program. There are freeware versions of these that you can sample at Tucows. This is how the HTML looks for the rows of purple balls on this page:
<img src="purpball.gif" width="592" height="48">
For divider bars, you can size by width only, set at a percentage of the width of the screen. For example:
<img src="lntwst.gif" width="100%">
Another set of useful attributes can vary the relationship of text and graphic. You can add align="top," "bottom" or "middle" to your <img> tag and get three different looks:
Antonio
Antonio
Antonio
There's no definitive "best alignment," since differently-shaped graphics, used in different situations, will look best with different alignments. Experiment and see what looks best in each individual case.
Some graphics really suffer, visually, from the blue line that appears around them should they be used as links:
To get around this annoyance, simply add the attribute <border="0"> to your <img> tag:
The coding for the image above, were it to be used as a link to GPO Access, a government information portal, is:
<a href="http://www.gpoaccess.gov/"><img border=0 src="flgcpicn.gif"></A>.
The border=0 can go anywhere within the tag's brackets.
In cases where you might want a border to automatically appear around your graphics, whether they are being used for links or not, you can use this attribute to accomplish this. You just set border=X, where X is a number of pixels.
Here is how this graphic looks with a 7-pixel border. The coding to insert
the graphic is:
<img src="flgcpicn.gif" border="7" width="50"
height="50">. This technique can be a useful way to put "frames"
around your graphics. But sometimes rather that solid frames you might want
to guarantee that a certain amount of white space surrounds your graphic.
The coding for the graphic embedded in this paragraph adds
hspace and
vspace attributes, which refer to space
to the left and right, and to the top and bottom, respectively, around the
graphic. Of course, a lot of other space gets left around a graphic just
plopped down in the middle of a bunch of text like this. But the space to
notice is that immediately surrounding the graphic. It should be 10 pixels
wide, since the coding looks like this:
<img src="flgcpicn.gif" align="middle" width="50" height="50" hspace="10"
vspace="10">. You can use this technique to help arrange a
collection of graphics, to set off a graphic in a header without having to
put in a lot of non-breaking spaces ( see
Special Characters for an explanation of
this coding), or in many other page layout situations.
The next section also deals with an <img> attribute, but one that's important enough not to be called miscellaneous.
What do people using text-only browsers see when you have an image on your page? What about people who turn off images to speed up loading? Well, if you don't make a special effort on their behalf, all they'll see is [IMAGE], or something even more unhelpful. Not too cool if your navigation bar is in that image, or if these readers might think it is. The main thing you can do is to design your pages so that graphics complement your content, but aren't essential to using the page, at least not without offering a non-graphic alternative.
The other technique much appreciated by non-image-viewers are properly written alt tags. These provide the text that appears while images are loading, or that appears when images are turned off or in text-only browsers. This is how you put one in your img tag:
<img src="purpball.gif" alt="row of purple balls">
The alt attribute can be placed in any position within the brackets of the img tag. Using alt tags for purely decorative elements such as my row of purple balls is a simple courtesy to text readers—they don't have to worry that they're missing something important. And for those users with images turned off, they can decide based on your alt text whether they want to see the image or not. You can use "************" or something similar as the alt value if you want to provide a divider bar for text-only readers in place of a decorative bar. However, speaking browsers might interpret this oddly. Generally, the best thing to do with decorative-only images is to make the alt value "empty," by typing alt="", with no space between the set of quotes.
Take some care in choosing the wording for your alt values. Something like "picture" or "graphic" is really worse than nothing at all. You need to give readers who are not seeing the image some idea of what the image shows, or maybe the function it performs, as in a navigation button. Alt text does need to be kept short enough to fit in a box the size of your image, however, so headline-writing skills—descriptive yet concise—may come into play. The Web Design Group has a good article on the "Use of ALT texts in IMGs."
Not being an artist, or even very artistic, I can't teach anyone how to make images. But I can share the method I use to convert my very simple original images into web-viewable formats. Of course, if you have some pictures or drawings to scan, you only have to worry about getting the scanner to work properly and then save the images as GIFs or JPGs (not always a trivial task). But creating images from scratch requires a few more steps.
First, a little more about those formats: GIF (Graphic
Interchange Format) and JPG (actually
JPEG, for Joint Photographic Experts Group). What's the difference?
There are some significant technical differences that I don't completely
understand, but from a Web authoring standpoint, you just need to know when
to use which format. As a general rule, use GIFs for simpler graphics, like
drawings, or, at any rate, for images that use 256 colors or fewer, since
that's the limit with GIF. Also, if you want to make the background of the
image transparent (so that it appears to "float" on the page background)
or if you want animation, then you have to use GIF. Graphics with text
superimposed also look better as GIFs.
JPG, on the other hand, should be used if your image contains a great many
colors or shades (as in a photograph). Also, if it's a large image that may
need significant compression, you might get better results with JPG. If in
doubt, use a conversion program (see below) and try both formats.
You need programs other than a word processor for this, but they are easily found and cheap, or may be available elsewhere on campus for you. You need either a full-function graphics program like Photoshop or a more primitive program such as Paint and a graphics conversion program. Tucows has some for free or cheap. Just be sure the program will convert files from BMP to GIF or JPG, if you want to use your Paint-created files. There are huge numbers of different graphics formats in the world, and there are conversion programs for all of them. Not all of these programs are designed for the Paint-to-Web artist in mind.
After you have "drawn" an image in the graphics program, you need to 1) save it as a GIF or JPG if you're using something like Photoshop; or 2) Copy/Paste it into your conversion program, if you're using Paint. So they must be compressed using a program for that purpose. Generally speaking, Paint-drawn images are be best saved as GIFs. With Photoshop-produced graphics, it will depend on the image.
When you are saving or copying, remember to save or copy only the portion of the working screen that has your image on it. When I first copied a Paint image into conversion program, I was somewhat shocked to find the whole screen reproduced, not just the little image I made in the middle. Sometimes I find it helpful to draw a thick box around the image, then center the cutting tool on this outline. (But then, I have a lot of trouble drawing with a mouse.) After the image is copied into the conversion program, just use"Save as" to save it in the proper format.
For the same reasons that I can't teach anyone how to do static graphics, I really can't teach you how to do animations. But I can impart a few tricks I have picked up along the way.
First of all, you can "borrow" animated graphics from other web sites in just the same way that you "borrow" static graphics. Right mouse click on them and then save them. Be aware, however, that animated graphics can be quite large; if you put more than a few on a floppy you may run out of room. Also note that some older browsers don't display animation very well. Some won't display the image at all, while others may display the first image in the animation stack, but stop there. Remember, animated graphics have to be GIFs.
If you have made static web graphics using the simple techniques described in the previous section, you need only one other piece of software to do animations. This is true even if you have Photoshop or some other full-function graphics program. (At least, as of last summer, the version of Photoshop I used could not make animations.) Happily, there are very cheap shareware animation programs available through Tucows. You don't have to be able to draw cartoon characters or other artistic objects to be able to use animation on your web pages. This page uses a text-only animated graphic that I, modestly, think is fairly effective. (It's at the bottom of the page.)
To construct an animation, you have to make a series of still graphics first. Vary each one just a little so that when they are displayed in sequence, there is apparent motion. Then use the animator program to put them into a stack and save them as one animated GIF. That's all there is to it. Remember, though, that an animated GIF takes up disk space equal to the sum of all the images in the stack. That's how these graphics get to be so big.
IMPORTANT NOTE: All of the instructions in this and my other tutorials apply to authoring for the Web at present (mid-2007) and will continue to be useful into the future. But to be sure you are using the latest standards, especially as we get further from 2007, you can always check with the good folks at W3Schools.