| The <FONT> tag provides you greater control over the appearance
of text in your Web page. If you're using a WYSIWYG HTML editor,
you may find that the editor inserts several <FONT> tags into
their document. This has advantages and disadvantages. While the <FONT>
tag gives greater control over the text, it does mean that you have to
account for the fonts installed on many different operating systems.
Fonts generally fall into two main categories: with serifs and without.
Here are some font names that can apply to your fonts that will probably be
understood in any operating system.
| Font Type | Possible Font Names |
|---|
| With Serifs | Times Roman, Times New Roman, Times, Roman, MS Serif |
| Without Serifs | Arial, Helvetica, MS Sans Serif | |
When you present material on different image types and their properties, you
may want to supplement this material with examples from graphic software
available on the Web. You can use one of the successful graphics packages
like Adobe Photoshop™ or CorelDraw™, or you can download one
of the popular shareware programs. Remember though that shareware is not the
same as freeware. You can evaluate shareware, but you are still expected to
pay for it, if you intend to keep it.
Here are some popular shareware programs available on the Web.
Here are some tasks you may assign your students (using whatever graphics
package you decide upon):
- Create a GIF with a transparent background.
- Create a GIF in both interlaced and noninterlaced format.
- Convert a GIF image to JPG format. Compare the size of the files.
- Save a JPG file under different compression options. How do the size and the appearance of the images compare?
When you create images in their graphical packages, you
may be surprised by the appearance of that image in your Web browser.
Unfortunately, Web browsers will not always render the graphic image with
the same palette that the graphic software uses. Also, if the image is
created with a true-color palette, but rendered under a 256 color palette the
image will be changed due to dithering.
One way around this problem is to use the "safety palette", a palette of
216 colors which is guaranteed to be displayed accurately on all browsers.
You can get more information about the safety palette, dithering and other
issues at the following sites:
This tutorial does not assume that the user has any other software besides
a text editor and a Web browser. For this reason, the student is given the
coordinates of each hot spot in the image map. You may wish to supplement
the material in this tutorial with image map software
available on the Web.
Here are some popular shareware programs available on the Web.
You can use transparent GIFs as a way of controlling the layout of text and
images on your Web page. Here's how you do it.
- Go to your graphics software package and create an image containing
a single color.
- Resize the image to 1 pixel wide by 1 pixel high.
- Save the image as a GIF file with the single color you designated in
step 1 as a transparent color.
Once you've created the GIF file, insert it in your Web page. You can use
the HEIGHT and WIDTH properties to control the size of the graphic on your page.
Since it's transparent, the image will not appear on your page, and since it's
only 1x1 pixels in size, it will not be a large file.
For example, this paragraph contains a transparent GIF,
Spacer.gif, that is aligned with the left edge of
the page. The WIDTH property of this graphic has been set to 100 pixels, and
the HEIGHT property has been set to 120 pixels. By using the Spacer.gif file, we've managed to create a column of text that is 100
pixels from the left page margin.
Here is another paragraph using the Spacer.gif file, only in this case we've added a border to the image so you can see it on the Web page.
The ALT property was designed to support text-based browsers that cannot display inline graphics. However the graphical browsers, Internet Explorer 4.0 and Netscape 4.0, will also display the value of the ALT property as popup text whenever the user hovers the mouse over the inline graphic. You can use this feature to insert additional information or comments about your graphics.
|
