Basic Parts of the HTML Document

Text can be formatted in a variety of ways. It can be bolded, underlined or italicize. Be careful when underlining text. Underline generally signifies a hyperlink. The strong and EMPHASIS tags serve as alternatives to BolD and ITAliC You can also use StrIKE-ThrOUGH and TELEtype.

This text will be pre-formatted
      and will
          appear exactly
              as I entered it.

The above text looks like this:

text can be broken in a variety of ways. We can use both line and Paragraph Breaks to force text to end and begin on a new line.

line Breaks

Paragraph Breaks

This is a paragraph break that forces our text to be aligned to the left.

This is a paragraph break that forces our text to be aligned to the center.

This is a paragraph break that forces our text to be aligned to the right.

The above text looks like this:

There are 6 basic "headings".

heading 1

heading 2

heading 3

heading 4

heading 5

heading 6

heading 1 with a right alignment

heading 2 with a justified alignment

The above text looks like this:

The above rules look like this:

Go to Echo in a New Window
Got to Echo in a Window I have named
Go to Panix in the same Window I have named

Colors are typically referred to by their hexcodes, or their hexidemical equivelents to their RGB values. For example: "#FFFFFF" = "WHITE", while "#000000" = "BLACK". You can mix combinations.

Images are typically stored as Compuserve GIF (.gif) files or as JPEG (.jpeg or jpg) files.

GIF Files GIF is a common format for in-line images, and browsers have supported it for years. The GIF format is 8 bit or lower, and is most suitable for line art or other illustrations. The GIF format is "lossless." The compression algorithym used by the GIF formatlooks for pixels in the same row of the same color value. Because of this, GIF files will be smaller if the graphic used contains horizontal bands ofthe same color.

If you use the GIF format you should be conscious that the way you save the file effects how it will appear in different browsers and operating systems. When exporting in Photoshop you can generate or constrain palettes to:

• Web
  Uses the 216-color palette that Web browsers, regardless of platform, use to display images on a monitor limited to 256 colors. This palette is a subset of the Mac OS 8-bit palette. Use this option to avoid browser dither when viewing images on a monitor display limited to 256 colors.

• Perceptual
  Creates a custom palette by giving priority to colors for which the human eye has greater sensitivity.

• Selective
  Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This option usually produces images with the greatest color integrity.

• Adaptive
  Creates a palette by sampling the colors from the spectrum appearing most commonly in the image. For example, an RGB image with only the colors green and blue produces a palette made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum. To control a palette more precisely, first select a part of the image containing the colors you want to emphasize. Photoshop weights the conversion toward these colors.

An interlaced GIF (gif87a) is a graphic file which displays as it downloads because the data has been encoded in multiple passes. First it appears blocky, and gradually refines in quality as data continues continues downloading to the browser.

JPEG Files The JPEG format uses either 16 or 32 bit color, and is most suitable for displaying photographic images. JPEG files can be saved in several levels of quality, with files saved as "low quality" having the smallest size, and files saved as "maximum quality" not yielding much savings at all.

A JPEG file saved in the "progressive" format is encoded with multiple passes so that the JPEG appears quickly in a blocky form, and gradual quality as the data continues to download. It works a lot like an interlaced GIF.

PNG Files PNG stands for "Portable Network Graphic" and it is a more recent image format. It is a lossless compression algorithym (same as GIF) in which files can be saved at a variety of bit depths, and it has a 10-30% better compression than GIF. For highest quality images, the fact that it is a lossless algorithm means that it offers superior quality to JPEG.

Images embedded in the page using the "img src" tag. Typical syntax would be <img src="gif/logo01.gif">There is no close tag. Its a good idea to enter the height and width specifications of the image within the img src tag,as well as including an ALT description for people with non-graphical and screenreaders browsers. <img src="gif/logo01.gif" height="72" width="72" ALT="STEPS Logo">

Portions of gif images can be made transparent. Photoshop allows you to do this if you work with a transparent background. As well, there are shareware applications that allow you to convert color fields to transparent fields.

Images can be used as links. You can simply use an [a href="link.htm"] tag prior to the img src tag. However, you will notice that the image will have a border around it. You can modify the border by using the border tag within the img src tag. i.e. <a href="index.html"><img src="mrp1.gif" border=0></a>
Note: If you use images as links, it is ALWAYS important to include an alternative for those who are using screenreaders and text only browsers. i.e. <a href="index.html"><img src="logo01.gif" border=0 ALT="Go to Vampire"></a>

You can align text around images by including the align tag within the img src tag. I.e.

Here we we typed

Here we we typed

If you're having trouble aligning images and text, you will want to tell the browser to "keep breaking" until the margin is clear of obstacles such as the image. See below: