Review
HTML is simply text files. You use HTML "tags" to "mark
up" your text in order to make them look (format) the way
you want them to.
The basic structure for a web page is:
<HTML>
<HEAD><TITLE>Title Here</TITLE></HEAD>
<BODY>
Body Text Here
</BODY>
</HTML>
All HTML pages start and end with the pair <HTML></HTML>.
These tags tell the browser to format the page in HyperText Markup
Language.
The <HEAD></HEAD> section of the web page is where
the title, meta information, JavaScripts, CSS and other elements
of the page are placed. The information in the <HEAD></HEAD>
is not directly displayed in the browser window.
The <BODY></BODY> section of the web page is were
all of the content goes that is seen within the browser window.
Most of your formatting tags will be in this area since this is
the content you actually see in the brower window.
Closing your tags (Issuing the cancel command)
Adding a forward slash within the <> and before the HTML
command tells the browser to end the command you originally started.
Most HTML commands need a closing tag.
Saving your document as an HTML page
When you save your file in Notepad, you must remember to change
the "Files of type:" pulldown to "all files."
You must be sure to name your page with the .html or .htm extension.
Attributes and Values
HTML tags are made up of several components:
The less than (<) and greater than (>) signs that "contain"
the actual tag information are known as HTML tag "containers."
Inside the HTML tag containers is always an HTML "command."
The command tells the browser what you want the information between
the tags to look like or how it will be formatted.
Examples of HTML commands are, <p>, <br>, <h1>,
<IMG>, <A>. etc.
Many HTML tags have or can have "attributes" and these
"atributes" often have "values." An atribute
modifies the tag in some way and the value defines in what way
or how much.
In the text book, they use the example:
<P align="center">paragraph here</P>
The P is the "command", the word "align"
is the attribute, and the word "center" is the value.
Most HTML tags follow this format.
Some of the HTML tags that we have learned so far are:
<HTML></HTML>
- used to start and end the web page.
<HEAD></HEAD>
- used to contain the information that is not visible on the web
page.
<TITLE></TITLE>
- gives your page a title that will be seen in the bar at the
top of the browser and in the search engines.
<META>
- common meta tags ar "discription" and "keywords"
which are used by search engines to "index" you page.
<BODY></BODY>
- contains the information that you see in the browser window.
- takes the attributes BGCOLOR, BACKGROUND, TEXT, LINK, VLINK,
ALINK as well as others.
<H1></H1> through <H7></H7>
- these are known and "heading tags."
- <H1> is the largest heading and <H7> is the smallest.
<P></P>
- creates a block or paragraph of text.
- adds a blank row before and after the information enclosed.
- only requires a closing tag when attributes are applied.
<br>
- adds a "hard right" to your text string.
- brings the text down to the next row without adding any space
between the rows.
<BLOCKQUOTE></BLOCKQUOTE>
- indents the copy between the tags in order to add some "white
space" around your content. BLOCKQUOTE makes you pages look
more professional because the text isn't right up against the
edge of the browser window and thus makes the content easier to
read.
<FONT></FONT>
- formats the text that is between these tags.
- without attributes this tag will do nothing
- common attributes include: FACE, SIZE, COLOR
<IMG>
- displays an image on your web page
- must use the "SRC" (source) attribute to access the
graphic you wish to display on your page.
- Example: <IMG SRC="picture.gif">
- The <IMG> tag does not require a closing tag.
<A></A>
- used to "hyperlink" pages together.
- usually requires the "href" attribute (html reference)
- Example: <A HREF="index.html">index</A>
index.html
Your main page on your site should be named "index.html."
The "index.html" page is the default page for every
directory.
Graphics
Using graphics and text together is the characteristic that makes
the Web so attractive and popular, but it also can be the undoing
of many Web sites. Use graphics wisely, and you can create an
attractive and engaging Web site. If you use too many images or
graphics that are too large or complex, your user will have to
endure long download times, and they may not wait. Balance the
mixture of images and text, and use the image capabilities of
HTML to suit your user's needs. Test your work in a variety of
browsers and at a range of connection speeds to make sure downloading
your graphics does not discourage your readers.
The incorrect use of color in many Web sites creates unreadable
text or navigation confusion for the user. Use color judiciously
to communicate and to guide the reader, or to create branded areas
of your site. Test your color choices carefully to make sure they
appear properly across different browsers.
Basics about file format
You currently can use only three image file formats on the Web:
GIF, JPG, and PNG. These formats all compress images to create
smaller files. Knowing which file format to use for which type
of image is important. If you choose the wrong file type, your
image will not compress or appear as you expect. Color depth (described
in the "Color Basics" section) is a factor in image
file format as well. Of the three Web based image file formats,
JPG supports 24 bit color, GIF supports 8 bit color, and PNG supports
both 8 bit and 24 bit color. The file format's color depth controls
the number of colors the image can display. The greater the bit
depth of the image, the greater the number of colors that can
be displayed.
GIF
The Graphics Interchange Format (GIF) is designed for online delivery
of graphics. GIF uses a lossless compression technique, meaning
that no color information is discarded when the image is compressed.
The color depth of GIF is 8 bit, allowing a palette of no more
than 256 colors. In fact, the fewer colors you use, the greater
the compression, which results in smaller file size.
The GIF file format excels at compressing and displaying flat
color areas, making it the logical choice for line art and color
graphics. Because of its limited color depth, GIF is not the best
file format for photographs or more complex graphics that have
gradations of color, such as shadows and feathering.
GIF Transparency
With GIF files you can choose one color in an image to appear
as transparent in the browser. The background color or pattern
will show through the areas that you have designated as transparent.
Using transparent areas allows you to create graphics that appear
to have an irregular outside shape, rather than being bounded
by a rectangle.
You can create transparent areas using a graphics editor. When
you choose the transparent color, all pixels of that color in
the image will let the background color show through.
GIF Animation
The GIF format lets you store multiple images and timing information
about the images in a single file. This means that you can build
animations consisting of multiple static images that play continuously,
creating the illusion of motion. This is exactly the same technique
used in cell based animation. You can create animated GIFs with
a variety of both shareware and commercial software.
When you create a GIF animation, you can determine the time between
frames and the number of times the animation plays. With a little
imagination, you can create all types of effects including text
scrolls, color changes, animated icons, and slide shows.
An animated Gif is a series of individual GIFs that can be combined
to play giving the illusion of motion. The final GIF animation
file is a single file whose name ends in the GIF extension.
GIF animation is somewhat limited when compared to the results
of other proprietary animation tools such as Macromedia Shockwave
or Flash, which can play synchronized sounds and allow Web users
to interact with the animation. Creating animations with these
applications, however, requires browser plug-ins, and viewing
the animations demands heavy download times.
Unlike most proprietary tools, you do not need any special plug-ins
to view animated GIFs, and, if you limit color and motion when
creating your animations, you can keep your file sizes small for
faster downloads.
Use restraint when adding animated GIFs, such as blinking icons
and scrolling banners to your pages. Users may find them annoying
because they are repetitive and distract from the page content.
Consider choosing to play an animation only a certain number of
times rather than letting them loop endlessly.
When you use them, be sure to have them draw attention to your
message and not away from it. An animated order or email button
is an appropriate example of when to use an animated gif if your
goal is to have the visitor order or call you.
You can create animated images with GIF animation software. These
tools streamline the process of setting the timing, color palette,
and individual frame effects.
GIF animation tools:
· Microsoft Liquid Motion
· GIF Construction Set Professional
· Ulead GIF Animator
· Macromedia Fireworks
Gif Compression
There are several tools for gif (as well a jpg) compression. Macromedia
Fireworks is an excellent tool to use to compress your images.
Other tools are available online. Some of these online tools are
free and others charge a fee.
Online Graphics Compression Tools
· Banner Maker Pro - http://www.bannermakerpro.com/gifcruncher.html
· OptiView (formerly gif wizard) - http://optiview.com
· Gif Works - http://www.gifoptimizer.com
· Web Site Garage - http://websitegarage.netscape.com/
JPG
The joint Photographic Experts Group (JPG, sometimes called JPEG)
format is best for photographs or continuous tone images. JPGs
are 24 bit images that allow millions of colors. Unlike GIFs,
JPGs do not use a palette to display color.
JPGs use a lossy compression routine specially designed for photographic
images. When the image is compressed, some color information is
discarded, resulting in a loss of quality from the original image.
Since the display device is the low-resolution computer monitor,
the loss of quality usually is not noticeable. Furthermore, the
resulting faster download time compensates for the loss of image
quality.
Using Adobe Photoshop, Macromedia Fireworks or other imaging
software, you can translate photographic images into JPG format.
When you create the JPG file, you also can balance manually the
amount of compression versus the resulting image quality.
Whether you are creating GIF or JPGs, remember always to save
an original copy of your artwork or photo. Both file formats permanently
degrade the quality of an image as a result of compression. Once
you have converted to GIF or JPG you cannot return to the original
image quality.
JPEG Options
Most imaging processing programs provide a slider that lets you
balance file size vs. image quality.
The Image Options slider lets you adjust the quality of the file.
The higher the compression, the lower the image quality. You can
play with this setting to make good looking files that are as
small as possible. Many photos can sustain quite a bit of compression
while still maintaining image integrity.
PNG
The Portable Network Graphics (PNG) format is designed specially
for the Web. PNG has been available since 1995, but has been slow
to gain popularity because of its lack of browser support.
It is a royalty-free file format that is intended to replace
GIF This lossless format compresses 8bit images to smaller image
file sizes than GIF. PNG also is intended to work as an image
printing format, so it supports 8 bit indexedcolor, 16 bit grayscale,
and 24 bit true color images. Even though PNG supports 24 bit
color, its lossless compression routine does not compress as efficiently
as JPG.
PNG supports transparency and interlacing but not animation,
although the World Wide Web Consortium has created a draft specification
for a multiple image Network Graphics format MNG, which will support
animation.
One useful feature of PNG is its built-in text capabilities for
image indexing, allowing you to store a string of identifying
text within the file itself. Now that browser support is improving
for PNG, designers can start to use it more often. PNG allows
an alpha channel (transparency or mask layer).
PNG is the native format for Macromedia Fireworks. Fireworks
allows you to retain layers so you can save the image and return
to it later for revisions. For example, you can modify the text
at a later date without starting over from scratch or reworking
your image.
Interlacing and progressive display
Most Web-capable graphics editors let you save images in an interlaced
or progressive format. You can choose this display option when
creating GIF, PNG, and JPG files. GIF and PNG files use an interlacing
format, while JPG files use a progressive format. Interlacing
and progressive formats generally are the same thing. The result
is the gradual display of a graphic in a series of passes as the
data arrives in the browser. Each additional pass of data creates
a clearer view of the image until the complete image is displayed.
JPG image
The only real advantage to displaying graphics in both methods
is that users see a blurred view of the complete image, giving
them something to look at while waiting for the entire graphic
to download.
The disadvantage of choosing this display method is that older
browsers may not display the graphic properly, and more processing
power is needed on the user's machine to render the image. Even
though the image seems to load faster in the progressive format,
actually the size is usually increased.
WHERE YOU CAN FIND IMAGES
You can acquire images from a variety of sources. One way is from
a graphics professional you hire to create and prepare your images.
If your budget does not allow for funding this service, consider
one of the following resources:
Stock photo collections: Stock photo collections can cost
from thousands of dollars for a few images to under $20.00 for
thousands of images at your local computer discount store or mail-order
retailer. These collections contain royalty-free images that you
can use for any Web site.
You can manipulate the graphics to add or delete text or images,
change the color, or make any other modifications. Most stock
photo collections include a built-in browsing program that lets
you search for a particular image, and some also provide basic
image-editing software.
Digital camera: A digital camera lets you take your own
photos and use them on the Web. These cameras store photos in
JPG format, so you do not have to convert them. Most also provide
image-cataloging software, and some include basic image-editing
software. The price of digital cameras continues to decline, while
the quality of the images remains quite good.
Scanner: Good scanners are available for under $150.00.
You can scan your own photos or images, and save them as GIF,
JPG, or PNG files for use on your Web site. Remember to set the
scanner resolution to 72 dpi to match the computer display resolution.
Public domain Web sites: Many Web sites maintain catalogs
of images online that are available for download. Some of these
sites charge a small membership fee, so you can freely download
as many images as you want. Other public domain Web sites are
completely free.
Create your own: If you need a basic image or if you have
graphic design skills, you can download a shareware graphics tool
and learn to use it. Keep the type of image you create simple,
such as text on colored backgrounds, and use fundamental shapes
and lines. Look at examples of the graphics on other Web sites.
Many are simple but effective and may provide a useful model for
your own images.
Clip art: Clip art is a viable alternative for the Web,
especially as more polished collections become available for sale
on CD-ROM. Price generally corresponds to quality for clip art.
If you pay $9.95 for 20,000 images, the quality of the images
most likely will reflect the cost. You also can use a graphics
program to customize clip art to meet your particular needs.
Do not borrow images from other Web sites. Although your browser
allows you to copy graphics, you should never use someone else's
work unless it is a public domain Web site and freely available
for use. New digital watermarking technology allows artists to
copyright their work with an invisible signature called a watermark.
If you use someone else's graphics, you may find yourself in a
cyber lawsuit.
Choosing the right image format
The following list summarizes the advantages and disadvantages
of each graphic file format for the Web.
GIF: The everyday file format for all types of simple
colored graphics and line art. Use GIF sparingly for its animation
capabilities to add visual interest to your pages. GIF's transparency
feature lets you seamlessly integrate graphics into your Web site.
JPG: Use JPG for all 24 bit full color photographic images,
as well as more complicated graphics that contain color gradients,
shadows, and feathering.
PNG: If the browsers are supporting it, use PNG as a substitute
for GIF Because PNG does not compress your 24 bit images as well
as JPG; do not use it for photos.
Graphics and Color
Computer Color Basics
Before you create or gather graphics for your Web site, you need
a basic understanding of how color works on computer monitors.
Your computer monitor displays color by mixing the three basic
colors of light: red, green, and blue. Each of these three basic
colors is called a color channel. Your monitor can express a range
of intensity for each color channel, from 0 (absence of color)
to 255 full intensity of color). Colors vary widely from one monitor
to the next, based on both the user's preferences and brand of
equipment.
Color Depth
The amount of data used to create color on a display is called
the color depth. If your monitor can display 8 bits of data in
each of the 3 color channels, it has a 24 bit color depth (8 x
3 =24). 24 bit images can contain almost 17 million different
colors and are called true color images. Both JPG and PNG support
24 bit color.
If your users have a 24 bit color display, they can appreciate
the full color depth of your images. But many monitors cannot
display 24 bit images. Some have only 16 bit color depth (called
high color) and some have only 8 bit color depth. If your monitor
does not support the full color depth of an image, the browser
must resort to mixing colors that attempt to match the original
colors in the image.
Dithering
The browser must mix its own colors when you display a 24 bit
image on an 8 bit monitor, or in a file format that does not support
24 bit color. Since the 8 bit monitor has fewer colors to work
with (256, to be exact), the browser must try to approximate the
missing colors by creating colors from the ones the browser already
has. This type of color mixing is called dithering.
Dithering occurs when the browser encounters a color that it
does not support, such as when you try to turn a 24 bit photographic
image into an 8 bit, 256 color image. Dithered images often appear
grainy and pixilated. The dithering will be most apparent in gradations,
feathered edges, or shadows
JPG files can contain a lot of dithering in the sky area of the
photo, where the browser is forced to mix colors to approximate
the existing colors in the image. GIF files exhibit a different
type of color matching called banding. Unlike dithering, banding
is an effort to match the closest colors from the GIF's palette
to the original colors in the photo.
When you create a GIF, you can choose whether or not to use dithering.
A non-dithered image will be smaller than one that uses dithering,
but the banding may create an unacceptable image. If you use dithering,
be sure to save your original image (you should always do this
anyway) in case you need to edit it. Once you dither an image
it is very difficult to further compress it.
JPGs, when viewed on an 8 bit or 16 bit display, win dither to
the closest colors. Photos are best saved as JPGs, even when viewed
at a lower color depth, because the dithering creates a more acceptable
image.
Non-Dithering Colors
One way to control the dithering process is to create images that
use non-dithering colors. The 216 non-dithering colors that are
shared by PCs and Macintoshes are called the Web palette or browser-safe
colors. The non-dithering palette only applies to GIF or 8 bit
PING, not 24 bit JPG. These colors display properly across both
platforms without dithering.
Most web-capable graphics programs include the Web palette colors.
If you do create graphics for the Web, to avoid trouble use the
Web palette as your color palette for all flat-color areas of
your graphics.
Graphics Programs
As a Web designer, you may be in the enviable position of having
a complete staff of graphic design professionals creating and
preparing graphics for your site. Most Web designers, however,
do not have this luxury. Whether you want to or not, you eventually
must use a graphics tool.
Most of your graphics tasks will be simple, such as resizing
an image or converting an image from one file format to another.
More complex tasks could include changing color depth or adding
transparency to an image. These are tasks that anyone can learn
to do, using any of the popular graphics software currently available.
When it comes to creating images, you may want to enlist professional
help. Your Web site will not benefit if you choose to create your
own graphics and you are really not up to the task. Professional quality
graphics can greatly enhance the look of your Web site. Take an
honest look at your skills and remember that the best Web sites
usually are the result of a collaboration of talents.
You will use graphics software to create or manipulate graphics.
Most Web designers use Adobe Photoshop. This is an expensive and
full featured product that takes time to master. Adobe Illustrator,
a high-end drawing/painting tool, also is available. Other commercial
tools you can consider include Ulead Photo lmpact and Macromedia
Fireworks. Most are available as downloadable demos, so you can
try before you buy. In general, look for a tool that meets your
needs and will not take a long time to learn.
Of course, you also can choose from a variety of shareware graphics
tools. Three of the more established tools are Paint Shop Pro
6, LView Pro, and Graphic Workshop Professional. These tools are
each priced under $ 100 and contain a full range of image editing
features. Like most other shareware, you can download and work
with these tools for a trial period.
Return to Top of Page
