Web Page Design

INTRODUCTION

The World Wide Web has come on the scene in the last few years and grown explosively. The object of this tutorial is to help you to create a home page for yourself. It assumes that you have access to the web, and know how to use your browser.

We will start with a template for a bare minimum home page. We'll describe the more common HTML tags. We will learn text and character formatting, links to other home pages and how to insert images in your home page. We will learn backgrounds, background colors, and tables to give your page a professional look. Forms and clickable image maps are not covered.

When we are finished, you will have a home page of your own. Even more important, you will know how to expand on the knowledge gained in this short course. We will try to give you the tools to learn on your own.

I strongly recommend the book, "HTML for the World Wide Web" by Elizabeth Castro, Peachpit Press, $17.95. It contains the material you need to know to get started doing home pages, arranged in a logical and orderly way.

I do not recommend the book "HTML for Dummies" by Ed Tittel and Steve James, IDG Books, $29.99. I sure felt like a dummy after buying it. It is not logically arranged, and has lots of extraneous material. Its worst defect is its lack of information on tables.

For a current reference work, there is "Instant HTML Programmer's Reference" by Alex Homer, Chris Ullman and Steve Wright, WROX Press, $19.95. This has descriptions of all current html tags.

WHAT IS A HOME PAGE?

Just what is a home page? It is a text file that resides in a particular subdirectory on an Internet Service Provider's (ISP) server computer.

HTML

The language used for creating home pages is called HTML - short for Hypertext Markup Language. HTML tags are added to text files to create HTML files. A tag is an instruction to the browser. Tags are used for formatting text, defining links, adding images, etc.

You do not need to buy a special HTML editor to create your home page. The quickest way to get started is to create your page in Microsoft Word. Then save it as HTML. I edit my HTML by hand using MS Wordpad in order to specify background, incorporate images, specify fonts and create tables.

Any browser will let you view the source of a web page you are viewing. If you have any questions about how things are done, Click "View" then "Document Source" while viewing a good web page. This is probably the most important idea in this tutorial. Try it with this file - seminar.htm. Print it for easy reference.

Browsers give you the capability to save someone else's page on your drive as an html file. You can use their html, and edit the contents for your own purpose.

Creating and maintaining a home page is a six-step process.

  1. Create and edit the home page text file.
  2. Check your work off-line, using your browser to display the file. I locate the htm file using Windows Explorer and double click the file name. The browser will display it.
  3. Upload the file to your ISP server computer using a file transfer program (ws_ftp).
  4. Check the links to other home pages while on-line on the Internet.
  5. Check for handicapped accessibility using CAST: Bobby
  6. Check for html syntax using W3C HTML Validation Service Specify that you want the program to check your syntax using Weblint in the pedantic mode.
Repeat the above as necessary.

Your top home page file should be named index.html or index.htm, depending on the requirements of your Internet Service Provider (ISP). Zianet requires html. CAUTION: File names under some operating systems are case sensitive. I make the names for all x.htm, x.gif and x.jpg all lower case. It's a pain, because some programs insist on capitalizing the first letter of the name. I rename the files with Windows Explorer.

All information shouuld be accessible to persons with disabilities according to the Americans with Disabilities Act. This has implications for web pages, which will be explored later. The term "screen reader" means a program used by a vision-impaired person to interpret the html code and deliver it to a voice synthesizer.

HTML TAGS

HTML tags start with "<" and end with ">". A tag looks like this: <HTML>. This is a beginning tag. The corresponding ending tag, with a forward slash, is </HTML>. These particular tags are used to specify the start and end of an HTML document. These are simple tags. Tags can have with attributes embedded in the tag, as in <TABLE BORDER=0>. BORDER is an attribute to tell the browser to draw a border around a table and its cells. Attributes can have values, as in <IMG SRC = "picture.gif">. Here, SRC is the attribute, and its value is "picture.gif", to tell the browser the name of the image file to be displayed.

I have chosen to make all HTML tags in this tutorial upper case. You can mix and match cases in tags, but this is the common style.

THE BARE MINIMUM PAGE

An HTML document is divided into two parts, the head, and the body. The title of your page and <META> tags go in the head. This title appears on the top line of the screen when browsing your page. With this page in your browser, click on View Souce. I will try to explain these items.

The first line, <!DOCTYPE.. enables a browser to parse the document properly. This one says that the document should adhere to Version 3.2 of HTML. It is also needed for your page to be checked by an html validator program. <! indicates that this line is a comment.

<META> tags are used for various purposes. Search engines (Altavista, Hotbot, Yahoo, etc.) use programs called "spiders" to search pages on the web for titles and keywords. The <META> tag with "keywords" helps spiders index your page. The net result is that you may get more visitors to your page.

FORMATTING TEXT

All information to appear on the screen goes between the <BODY> and </BODY> tags. Here is where to specify bagckgrounds. This page uses a texture background, thus: <BODY BACKGROUND="ivory.jpg">. If the jpg file is not in the same directory as the htm file, you must give the complete path to it. A plain color background would be specified thus: < BODY BGCOLOR="#CCFFAA">. The letters are hexadecimal and refer to the colors red, green and blue as RRGGBB.

You can indent a block of text by surrounding it with <BLOCKQUOTE> and </BLOCKQUOTE>. I use this technique to produce a left margin on the screen. I feel that shorter lines of text are easier to read.

The browser ignores spaces and tabs in your htm file. If you want it to appear as it was formatted into paragraphs, columns and tables in your word processor, enclose your text between <PRE> and </PRE>. PRE stands for preformatted text. The browser will use a mono-spaced font to display your text, so that the tables of data will have columns lined up properly. Preformatted text is fine if you just want to put something up on the screen for a first go-around.

If you do not tell the browser that your text is preformatted, you will then have to specify paragraph beginnings, line breaks, lists, etc. using HTML tags.

The simplest tag to learn is <P>, for starting a paragraph. It simply inserts a blank line in the text. For this tag, the ending tag, </P>, is optional. The browser doesn't care. I leave them off. Two <P> tags do not equal two blank lines. The next tag to learn is <BR>, for line break. There is no corresponding ending tag. For example, if you want to have an address in your page, you would do it like so:

Joe Btfsplk, Chief Engineer<BR> Skunkworks Engineering Associates<BR> Lower Slobbovia, CA ZIP#####--####<P>

LISTS

Some types of information are best presented as lists. You have your choice of several kinds. A bulleted list is called an unordered list, and you do it like so:
<UL>
<LI>List item one
<LI>List item two
</UL>

If you have a lot of links not separated by text, they should appear in a list. This "separates" the links just as text would. The reason is that screen readers might run the links together.

If you prefer to number the items, use an ordered list. Start with <OL> and end with </OL>. The <LI> tag works for both lists. The <OL> tag can take attributes. <OL TYPE=X>, where X can be A for capital letters, a for small letters, I for capital Roman numerals, and 1 for numbers, the default.

Lists may be nested, that is, you may have a list within a list. Bullets in a nested list may look different, depending on their position in the list hierarchy but can be specified. <LI TYPE=DISC|CIRCLE|SQUARE>. Some browsers may just ignore the TYPE attribute.

A definition list is specified as:
<DL>
<DT> A data term, that starts at the left side of the screen.
<DD> A data definition, consisting of multiple indented lines of text.
</DL>

Headings are produced with the<H#> tag. <H1>.....</H1> makes the largest heading, while <H6>.....</H6> makes the smallest heading. You can and should use the various size headings to produce an outline hierarchy within your document.

A horizontal rule is simply <HR>. There is no ending tag. Horizontal rules may not be interpreted correctly by screen readers. The answer is to use a graphic rule as in /graphics/rule2.gif and incorporate an ALT tag in the IMG SRC statement.

One problem can occur with some background colors. The horizontal rule might not be shown properly. So we can say <HR NOSHADE>. I avoid horizontal rules.

Comments are simply <!-- this is a comment -->.

SPECIAL CHARACTERS & CHARACTER FORMATTING

Characters which might be interpreted as html can be incorporated in text in numerical or text forms. I prefer the text form. To include "<" in your page as text, use either "<" or "<". The ampersand and semicolon are necessary. Use > or > for ">". These codes are necessary to prevent the browser from interpreting "<" and ">" as HTML tags.

You may need to use other special characters, especially if you are using other languages than English. For example, mañana doesn't mean tomorrow, it just means not today. ñ is witten in html as &ntilde;.

Windows and Macintosh browsers interpret some number codes differently. You will need to use the number codes taken from the appropriate table.

You can make your text bold with <B> and </B>. These are physical tags. The logical tags, <STRONG> and </STRONG> are preferred.

Text between <I> and </I> will appear in italics. The logical style tags <EM> and </EM> are preferred, as above. This will give a person using a reader for the blind to indicate the emphasis in other ways, such as change of voice.

The font size can be changed with <FONT SIZE=+#> and </FONT>. The logical tags <BIG> and SMALL> are preferred.

You can make subscripts with <SUB> and </SUB>, superscripts with <SUP> and </SUP>.

LINKS

Now for the fun part. The whole idea of hypertext is to be able to link to other documents in whatever order you fancy.

It is necessary to understand the concept of a Uniform Resource Locator (URL). HTML documents have a URL that starts with http://. http stands for Hypertext Transfer Protocol, used to access pages on the Web. For example, the URL for my home page is http://www.zianet.com/leverett. If a file name is not specified, the browser will look for index.html. So a minimum URL has the protocol, the internet server address, and a path to a file.

Other access methods are ftp for file transfer protocol, news for Usenet news groups, etc.

Let's say you want to read the news or search the web for your favorite topic. Make an external link so that you can call up Yahoo, one of the most popular Web index sites. Put this line in your home page:

<A HREF = "http://www.yahoo.com">YAHOO</A>

Your page will display the hotspot, YAHOO, underlined in blue. When browsing your page, clicking on YAHOO will link to YAHOO's home page and display it on your screen. When you click on "BACK" to return to you home page, the YAHOO link is now a visited link and the hotspot will display in red. These are the default colors for hotspots. You can get fancy and change them, but it's not a good idea to confuse your viewers.

If you want to link to an html document you have created, make sure the document is loaded in the same subdirectory in which your page is located. Then create an internal link to it, thus: <A HREF = "filename.htm">Another File</A>. If you have to have the file in a different subdirectory, you will have to give the complete path to the file.

It's customary to make it easy for the viewer to send e-mail to the originator of a home page. Just type: Send <A HREF = "mailto:jbtfsplk@skunkworks.com">e-mail</A> to jbtfsplk@skunkworks.com. The viewer can click on the hotspot and the browser will call up its e-mail compose screen.

Here's another kind of link. Let's say your home page has grown to be large and unwieldy. You decide to make an index to it. An index might look like: <A HREF = "#Intro">Intro</A>|<A HREF = "#News">News</A> The targets of the index links can take the place of a heading, thus; <H1><A NAME = "Intro">Introduction</A></H1> some text <A NAME = "News"><FONT SIZE =+2>Newspapers</FONT></A> some text

After we learn about images, we will learn how to link to images and use images as hotspots in links.

IMAGES

Browsers (with the exception of Lynx, which is a text-only browser) can display gif files and jpg files. Gif files are commonly used for logos, while jpg files are used for photographs. Gif files can be made transparent. I use Microsoft Photo Editor to render images transparent. I also use it to input from the scanner, resize and crop images. It is useful for altering the color balance or brightness of images.

One way of obtaining images is to scan your favorite prints. Or, you can have it done commercially. They give you a diskette of image files, with whatever type of image file you specify. Your drugstore photofinisher can provide images on diskette from print film when you have it processed.

If you have slides rather than prints, don't despair. You can get the slides digitized and loaded onto a Photo CD. This can be done commercially. At least one new flat bed scanner can also digitize slides.

You can capture an image from your screen while browsing. Right click on the mouse while pointing to the image. A dialog box will pop up. Click on "Save as" and type in the name and path for storing the image file. This works with most browsers. The technique may be different with other browsers.

Many graphics programs import image files in a variety of file formats and export gif or jpg files. You can use these programs to compress images and to do all kinds of artistic manipulation. I use the IPPLUS software that came with my scanner or Microsoft Imager, which came with MS Word 7.

To display the image in line, insert the following link: <IMG SRC="photo.gif">. The image is displayed when the page is called up. Since it takes a while to transmit graphical information, inline images should be small so the viewer does not become bored waiting for the image to appear.

If you are concerned about making your page accesssible to those with vision difficulties, you can say: <IMG SRC="photo.gif" ALT="photo">. Then those viewers will have a clue to what they are missing. The screen reader can read the contents of the ALT tag.

It is a good idea to specify the HEIGHT and WIDTH of the image in pixels also. If you do this, you will see the browser draw a frame for the image first. This is supposed to make the image load faster. The HEIGHT and WIDTH attributes can be found using your graphics program.

To have the text flow around the image, you can specify <IMG ALIGN="LEFT" SRC="photo.gif">.

To have an internal link to a photo in the same subdirectory as the home page, the link should look like: <A HREF = "photo.gif">Look at photo</A>(100k). Now the viewer can decide whether he wants to take the time to load a 100k byte image file, and can click to display it.

You can click on an image to bring up an external link. Here is how you do it: <A HREF = "http://www.zianet.com/leverett/"><IMG SRC = "jim.gif">Jim's home page</A>. The image, jim.gif, will be displayed within a blue border. After the link has been visited, the border will be red. Note that text can be included in the "hot spot" so that the viewer can click on either the picture or the text.

TEXTURED AND COLORED BACKGROUNDS

Colored backgrounds and texture backgrounds add interest to your page. Your page can have a plain colored background by specifying the color in the <BODY> tag. The color is specified as a six digit hexadecimal number. Hex numbers are based on the base 16 number system and are 0...9A...F. The pairs of digits represent the amounts of red, green or blue desired. The tag looks like so: <BODY BGCOLOR = "#RRGGBB">. Reference books have color tables.

Color backgrounds may not be displayed the same color by different browsers. I don't know why. Supposedly "browser safe" colors have only the number pairs 00, 33, 66, 99, CC or FF in any combination.

Do not use dark blue for the background. My oldest son, who is color blind for blue, will not be able to read it. Likewise, some solid colors will cause problems with black and white LCD screens.

Texture backgrounds are simple. <BODY BACKGROUND = "texture.gif"> where texture.gif or texture.jpg is an image file. The file should be small for fast loading. It will be tiled repeatedly to form a complete background. You can have both a background color and a background texture, if the texture is transparent.

TABLES

A table is defined by <TABLE and </TABLE> A row is defined by <TR> and </TR>. A row can contain header cells or data cells. A header cell is defined by <TH> and </TH>. The contents of each data cell go between a <TD> tag and a </TD> tag.

The contents of header and data cells can be aligned horizontally with the ALIGN attribute, and aligned vertically with the VALIGN attribute. CELLSPACING adds space between cells. CELLPADDING adds space inside of cells.

You can set the size of the entire table or individual cells with the WIDTH and HEIGHT attributes. The units of values to use are pixels or percent.

Here is a simple example of a table:


<TABLE BORDER=1>
<CAPTION>Multiplication Table for the Decimally Impaired</CAPTION>
<TR>
<TH ROWSPAN="1">Vertical</TH>
<TH COLSPAN="5">Horizontal</TH>
</TR>
<TR>
<TD>01</TD>
<TD>01</TD>
<TD>10</TD>
<TD>11</TD>
<TD>100</TD>
<TD>101</TD>
</TR>
<TR>
<TD>10</TD>
<TD>10</TD>
<TD>100</TD>
<TD>110</TD>
<TD>1000</TD>
<TD>1010</TD>
</TR>
<TR>
<TD>11</TD>
<TD>11</TD>
<TD>110</TD>
<TD>1001</TD>
<TD>1100</TD>
<TD>1111</TD>
</TR>
<TR>
<TD>100</TD>
<TD>100</TD>
<TD>1000</TD>
<TD>1100</TD>
<TD>10000</TD>
<TD>10100</TR>
<TR>
<TD>101</TD>
<TD>101</TD>
<TD>1010</TD>
<TD>1111</TD>
<TD>10100</TD>
<TD>11001</TD>
</TR>
</TABLE>
Multiplication Table for the Decimally Impaired
VerticalHorizontal
01011011100101
101010011010001010
1111110100111001111
100100100011001000010100
101101101011111010011001

The more professional pages now are doing the entire page as a table. This enables creative placement of text and images on the page. I do it to contain the text for readability. For example, I format all my pages on a 640x480 pixel monitor. When I view them on a monitor that is 1024 pixels wide, the text spreads out to fit the screen and the placement of the images goes haywire. I enclose the entire page in a single cell table with a WIDTH of 615. Anything larger makes the browser generate a scroll bar.

COUNTERS

I have a counter on some home pages I have created. I simply copied it from other users on Zianet. No originality. Counters use a Common Graphics Interface (cgi) program located on the server. Whatever you do has to work with the cgi program on your ISP's server.

STYLE

These are merely my prejudices. You are welcome to yours. Avoid:

  1. Large images that take forever to load - use thumbnails
  2. Too many levels in hierarchy
  3. Not enough levels in hierarchy
  4. Dark backgrounds
  5. Non-default colors for links and visited links >LI> Frames - not supported by all browsers
  6. Java - likewise
THE FINAL STEPS

You need to check your work offline before uploading your file to the server. Start up your browser. Click on FILE, then click on OPEN, and type in the name of your file. Inspect your work. Most of the mistakes will probably be due to missing brackets or missing tags. Fix them.

Now you can upload your file to your server. I use a program called ws_ftp to upload files to Zianet. A copy of ws_ftp can be found on http://www.zianet.com/support/index.asp. Download the version suitable for your operating system. You will need to edit the profile first. The profile name should be WS_FTP. For Host name, type in 165.83.213.4. Host Type should be Automatic Detect. User ID should be the 4 letter designator for your park. Type in the password given to you by your System Support folks. For Initial Directories, type in /pub/msdos for the Remote Host, and for Local PC, type in the path to the subdirectory where you store your work. Uncheck Anonymous Login and Check Save Password. Check Save to store your profile. Press OK to start. You will see a directory of your files on the left, and a directory of the files on nps.gov. Uploading files is user friendly. Select the file, and click on the right arrow. With the home page file uploaded, you will be able to check out links to external pages.

Now that your page is on line, you can use one of the web program checkers on the web to diagnose your problems. Try W3C Validator. Ask it to check your program with Weblint in the pedantic mode. Check for accessibility using
CAST: Bobby Check your web page for handicapped accessibility.

Good Luck!

Web page design by Jim Leverett