Basic HTML, Design, and Webpage Templates

Table of Contents

Introduction

Basic HTML

Document Structure

Tags

A tag is an HTML element, much like a programming keyword, that encloses a section of HTML. A tag is formatted in one the following ways, depending on the type of tag:
1.) <keyword attributes>...</keyword>
2.) <keyword attributes>
The second type is used for placing objects (such as images) which do not need to enclose other HTML. Following are examples of each of the above types:


		`<FONT COLOR="#000080">Dark Blue Text</FONT><BR> <B>Bold Text</B><BR> <IMG SRC="images/logo.gif" ALT="Description" BORDER="0">`

Figure 2.1. Examples of Tag Types

Attributes are formatted in one of two ways depending on the type of attribute:
1.) attributename="value"
2.) attributename
The second type is used for boolean attributes, and turns the attribute on. All attributes in HTML are optional, though without certain ones, a webpage might be displayed without great value.

A tag can be used to define the layout of a webpage, affect the fonts and colors used, and add images, among other things. The following parts in this section cover examples of basic tag use.

HTML, HEAD, TITLE, BODY, A, and BR

The six most fundamental tags to an HTML document are: HTML, HEAD, TITLE, BODY, A, and BR. With only these tags, one can create a basic HTML document that takes advantage of the primary web technologies. This section will demonstrate and explain the purpose of each.

HTML

The HTML tag encloses an entire HTML document, letting a browser know that the resource being loaded is an HTML document, rather than a JavaScript or CSS file for instance. The HTML tag has no attributes.

HEAD

The HEAD tag encloses the header of a document. This header minimally includes the document title, denoted by the TITLE tag.

TITLE

The TITLE tag encloses a document title to generally be displayed in the browsers titlebar area. This typically includes the name of the group, company, or project and the name of the particular associated page placed in square brackets.

BODY

The BODY tag encloses the rest of an HTML document (the part that is not the header). Following is the list of the most common attributes.

BGCOLOR		This is a hex red-green-blue (RGB) value describing the background color of the webpage. Two hex digits are used per color channel. To create white, use: #FFFFFF (which is 255, 255, 255 for RGB); for black: #000000; for gray use any three equal values such as: #808080; for yellow: #FFFF00; for magenta: #FF00FF; for cyan: #00FFFF.
BACKGROUND		This is the Uniform Resource Locator (URL) to an image located on the webserver. This can be relative (i.e. "images/logo.gif") or absolute (i.e. "http://www.cs.unr.edu/images/logo.gif").

The A tag encloses a section of text and/or images that is made linkable. A link can be created to a place on the same page with the following:
     <A HREF="#locationname">click here</A>
     ...
     <A NAME="locationname"></A>
These types of links can come before or after the sections they are linking to. To create a link to another page use the following:
     <A HREF="url">click here</A>
Like image URLs, these can be relative or absolute.

The BR tag represents a line break, useful for separating paragraphs. Text will normally be word-wrapped to fit in its container.


		`<HTML> <HEAD> <TITLE>Simple Example Website</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> Paragraph 1 text<BR> <BR> Paragraph 2 text<BR> </BODY> </HTML>`

Figure 2.2. An Example Using BODY, HEAD, TITLE, BODY, A, and BR

Images

IMG

You will likely want to add some images throughout your project websites. Images placement is simple but there are many optional attributes.

SRC		The url for the image resource. GIF and JPG are the only two truly standardized graphics types that work well across platforms.
ALT		Provides accessibility for individuals with various imparements such as those using screen readers. This should be a concise description of the image.
BORDER		The width of the image border. This generally should be set to "0" when an image is a link, otherwise a border will be added.
ALIGN		Determines how text should flow with the image. Common options are: TOP (text should be aligned to the top of image), BOTTOM (text should be aligned to the bottom), ABSMIDDLE (text should be aligned to the middle of the image), LEFT (text should flow along the right of the image), RIGHT (text should flow along the left of the image).
VSPACE		The amount of space surrounding the top and bottom of the image in which other content is not allowed to be placed.
HSPACE		The amount of space surrounding the left and right of the image in which other content is not allowed to be placed.


		`<BODY BGCOLOR="#FFFFFF"> <A HREF="index.html"><IMG SRC="images/logo.gif" ALT="Widgets and Things" BORDER="0"></A> </BODY>`

Figure 2.3. An Example Using IMG

See Design for more information on images.

Formatting with FONT, CENTER, B, I, U, SUP, and SUB

FONT

If you want to specify a specific font, size, or color for a particular section of text, one can use the font tag. In order to specify more specific font sizes (to the pixel or point size), you will want to use CSS - an example of this is given.

STYLE		Stores CSS parameters for the enclosed font. To set the font size, use "font-size:12px;"
COLOR		A hex RGB value describing the color of the text. Be sure that your text in plainly readable on your chosen background color.
FACE		The font that you want to use. If your first font choice is not available, additional comma-separated choices can be listed.

CENTER

Centers the enclosed HTML within the container.

B, I, U, SUB, and SUP

Makes the enclosed text bold, italic, underlined, subscripted, or superscripted, respectively. For the most part, this can be combined.


		`<BODY BGCOLOR="#FFFFFF"> <CENTER><A HREF="index.html"><IMG SRC="images/logo.gif" ALT="Widgets and Things" BORDER="0"></A></CENTER><BR> <BR> <B><FONT STYLE="font-size:18px;" FACE="futura,arial">This is a headline</FONT></B><BR> This is additional text<A HREF="#footnote1"><SUP>1</SUP></A>.<BR> <BR> <A NAME="footnote1">This is a footnote</A> </BODY>`

Figure 2.4. An Example With Formatting

Design

Design is the most difficult part of HTML. Anyone can create a webpage, but it takes some amount of technique to create a layout that is affective in presenting its content. This section is not a full set of guidelines for design or even for designing webpages. It is however, a starting point from which one may grow a personal philosophy on design -- if one does not already have one.

Colors

Depending on the purpose of your website there are certain color schemes that might be most successful. For senior projects websites you might want to stick with one of two philosophies: standing out or professional.

Standing Out through Color

A website whose colors stand out needs to be careful about the meaning of each color (http://www.color-wheel-pro.com/color-meaning.html) and clearly needs to contain colors that are aesthetically pleasing together. This is more difficult than one might think, because your favorite color may not be mine. On the web it is about personal preference combined with global preference. Certain colors do not go well together.

A good rule of thumb that works fairly well in choosing colors is that when choosing two colors one should change either the hue of the color or the brightness but not both. This rule is often neglected when considering a black or gray with another color. It is helpful to learn to use a hue-saturation-brightness (HSB) color selector for this. When using two or more colors, espcially for bright colors, one should only adjust the hue angle to select additional colors.

A Professional Look and Color

Professional sites can use attention grabbing colors, but they typically choose very few colors to work with. A professional theme will typically have two primary design colors (with other colors added in small amounts for specific meaning or attention). It is common in business websites to see greater amounts of blue and green and uncommon to see red. White and spacing is also particularly important as color can be overwhelming for a professional site.

Images

If you do not know how to use Adobe Photoshop and/or Adobe Illustrator or programs of comparable quality, it may be difficult to create high-quality professional graphics, espcially for logos. Attention to detail is incredibly important. This section will not introduce you to this topics as they are too large. Many books are available on using these software tools. Still, taste is the most important issue. This section covers how to use GIF and JPG images on a website.

GIFs

GIFs make use of an indexed color model of up to 256 colors for an image palette (including one optional color for transparency). GIFs are generally useful for images including text such as logos as they will (up to the color limits) be non-lossy. Even for photo images however, GIFs have their place if used properly. Using a perceptual color reduction algorithm such as that built into Photoshop, one can create photos that use few colors. The fewer colors that one uses, the smaller the image filesize can be. An image of anti-aliased black text should for-instance, be reduced to either 4 or 8 colors depending on the font size used.

JPEGs

JPEG is a lossy format that works well for photographic images. One must be careful when chosing the compression scale during saving. Using Photoshop's 12 unit scale, I typically look at the top and bottom compresions and then find the lowest point at which I cannot tell a great difference between the compressed and highest-quality values. One should check, especially near areas of sharp contrast, to make sure that there are no visible "artifacts." An artifact is a square region that is overly compressed, generally creating a small square boundry in the image.

Spacing

It is probably clear that spacing can help users visually separate content groups. As important as this, but often unrealized, is that spacing can give contextual clues. One should try to use consistent spacing for each type of separation. For example, topics might be separated by 12 pixels, while sections might be separated by 24. This technique gives the viewer of a webpage additional clues about the meaning of what he/she is readying and is especially helpful when the user is "scanning" the webpage.

Arrangement

Right-left balance is another important issue in terms of both webpages and printing. Balance can be achieved in several ways. In particular there are three "weights" that can be adjusted: color, size, and importance. The greater the difference in color (especially in terms of brightness), size (in both height and width), and importance, the more unbalanced a page can get. This balance is almost never perfected, but a reasonable level should be achieved by adjusting the colors of sections (especially for left or right-oriented toolbars), the widths of content regions (and possibly adding text if a page seems to short), and the keeping the importance of each screen component in mind (importance is difficult to adjust).

Webpage Templates

I have created two templates that can be used for groups that want minimal overhead in creating their project websites. To use these, one should need only minimal HTML skills which can be gained by reading this document as well as looking through the templates themselves. If one wishes to make modifications to the templates, one is freely avaiable, for assistance with particular modifications, I am available by request. To use the templates, download the tar file webpagetemplates.tar, extract the files and choose the one you wish to use. To customize the template, open the associated html file and perform a text search for "TEMPLATE:". These are notes about how to change the templates. It is likely that you will need to copy the template file into several other files such as "download.html", "about.html", and "contact.html" for example. This way, you can have a consistent look throughout your website. The "other projects" menu item should link to the "Senior Projects Homepage".

After your files are customized, upload the files to the .mosaic directory (or a subdirectory) of your team leader and make sure to set the permissions to world readable. A few of the provided image files are also required so upload those as well.

Examples of these templates: modern.html and business.html