The purpose of this courseware is to introduce you to many of the basic commands which allow you to put your own documents on the World Wide Web, one of the most popular resources on the Internet. Upon successful completion of this courseware, you will be able to:

• Understand the basics of the Web and hypertext documents
• Identify the parts of a Web document
• Use headings
• Use basic HTML layout commands
• Use basic HTML formatting commands
• Compose a variety of links to other documents and resources
• Add graphics to your document
• Place graphics in your document in a variety of ways
• Change your background color and image
• Use lists
• Use Subscripts and superscripts
• Make use of tables
• Understand the basics of style
• Be able to locate more information on the net

HTML is a very broad markup language which can be used by a variety of different Web browsers. This courseware presents a basic set of tools which will get you started to creating your own Web pages. Some browsers, such as Netscape have their own "extensions" which can be used. This course demonstrates the use of some of these commands, but for the most part guides you through the use of mainstream HTML commands compatible with most browsers.

This course assumes you have a basic understanding of the Internet and Microsoft Windows.

WWW stands for "World Wide Web". The WWW project, started by CERN (the European Laboratory for Particle Physics in Geneva, Switzerland) in 1989, was proposed as a means of transporting research ideas efficiently throughout the organization. This was important to CERN as many of its members were spread across countries.

The initial project proposal outline a simple networked system used to transmit hypertext documents between members. At the end of 1990, the first Web software was demonstrated on the NeXT computer. This software provided users with the ability to edit hypertext documents and to transmit those documents to others connected to the Internet. At this point in time it was still in its infancy only being featured on the NeXT computer and only able to transmit text documents (no multimedia).

In 1992, CERN began promoting the Web outside of its organization. To promote the Web, CERN released the source code for W3 servers and browsers. Once released, the NCSA took over much of the responsibility of development and growth while developing an application used to access the Web known as Mosaic. At the same time, many organizations and individuals began creating Web pages on a spectrum of topics. Since this time, other organizations have been developing servers and browsers for a variety of different computer platforms. Some browsers have grown even further to allow the use of graphics, sound, and animation in documents.

A Web server is a program which accepts requests for information from its clients. Upon processing a request, the Web server sends information back to the requester of the information.

To access the Web, a browser application is used. The browser is capable of reading documents and is capable of fetching documents from other sources. In addition to documents, browsers can also access files through other Internet resources such as FTP, gopher, and newsgroups.

Browsers can run on a variety of platforms including MS DOS, Microsoft Windows, Macintosh, UNIX, VMS, AMIGA, NeXT, and others. Each platform requires a browser which was written specifically for that operating system.

The WWW is designed as a client/server architecture. A client, the browser, requests information from the server, the Web server, and the Web server responds by sending that information. With distributed architecture the server is left with the responsibility to store the document and the browser is responsible for displaying it. This enables servers and browsers to be on different machines, even different operating systems.

The process of how the Web works can be thought of as four steps:

1. Using a browser (client), the user selects a hyperlink which connects to another document or resource.
1. The browser uses the address associates the hyperlink with an address that it can connect to fetch the document which was requested.
1. The server responds by sending the document which was requested by the browser.
1. The browser receives the document and renders it for presentation to the user.

Many type of files can be placed in Web pages. Most Web browsers only support a few types of files and are capable of displaying them inline. Many of the other file types require the use of external applications, helper applications, to assist in the viewing. There are three main types of files which can be included with Web documents: still video, sounds, and motion video.

Still video is one of the most popular files which are included with Web pages. Still video can come in a variety of formats, the most common being GIF (graphics interchange format, CompuServe) and JPEG/JPG (Joint Photographic Experts Group). Other formats include EPS (Postscript), BMP (Windows Bitmap), PCX (Zsoft Image), TIFF/TIG (Tagged Image File Format) and many others.

Most browsers require helper applications to play a particular sound. Sounds can be WAV (Microsoft Waveform), SND (Voice grade sound) and others. Motion video formats include FLI (Autodesk Animator Flick), MPEG/MPG (Motion Picture Experts Group), AVI (Audio/Video Interleaved, Microsoft) and others.

A Web document can contain much more than just text. It can include graphics, sounds, and video. Most graphical browsers have some support for graphics. But how are graphics, sound, and video which the browser does not know how to handle itself given to the user? You can assign helper applications to particular file formats which are capable of handling the file.

How are these files displayed in the page? The file will appear as a link to a file which the user can click on. If the browser knows which helper application supports this file type, the helper application takes control, plays the file, and when completed, returns control to the browser. If the browser knows of no helper applications to display the file, nothing happens when the user clicks on the link.

Many browsers are providing facilities to support helper applications. The user would have a facility to name the application, it’s extension which identifies the file type, and the location of the helper application which will ultimately display the file.

A form of a document which removes the linearity from a typical document. Links can be provided so the user can quickly jump to different points within the same document or link to other documents. These links, known as hyperlinks, can be used to create a complex virtual web of connections.

Hypermedia is a superset of hypertext. Hypertext, by its name implies the use of text documents. Hypermedia is much more than hypertext. Hypermedia is a document which can consist of text, graphics, sounds, and other multimedia.

Aside from the Web, hypertext and hypermedia is used in a variety of different places. User guides and learning aids can be developed with programs which generate hypermedia applications such as HyperCard for the Mac or Toolbook for the PC. A very common place where you will use hypermedia is with Windows online help.

A markup language is used to allow both humans and machines the ability to read and determine the structure, content, and behavior of the document.

SGML, Standard Generalized Markup Language, was started by IBM in the 60’s to define a standard which would allow for portability of documents across computer platforms. SGML is a broad specification used to define particular markup languages for particular purposes. These include documents used by the government and commercial institutions.

This is the standard language used for creating and recognizing hypermedia documents on the Web. HTML, Hypertext Markup Language, is one of the particular applications of SGML. Creating HTML is very straightforward. An HTML document is essentially an ASCII text file which contains text and specialized codes to represent the formatting of the document and links to resources which it can connect.

The HTML language consists of a number of special text tags used by the browser to setup the document, format text, and establish links to Internet resources.

Tags are very similar to the way you would structure a word processing document. For example, special codes are used to denote a boldface font. In order for the document to know which text to boldface, you must mark the beginning and end of the text. Tags work in very much the same way: you must tell them where to begin and where to end.

Since HTML documents are purely text, unlike word processing documents, you must provide the WEB browser a means by which to identify tags. This is done by enclosing the command within angle brackets: "<" and ">". For example, the force line break would be <BR>.

The force line break is one of the few examples of HTML codes which do not require a corresponding closing code. Many of the tags require you to tell the browser where to end. This is accomplished by using the same tag but only with a "/" beginning the command. Using the example above, boldfacing some text can be accomplished by placing a <B> at the beginning and </B> to close.

Tags are not case sensitive: <HTML>, <html>, and <HtMl> are all equivalent. Text within tags is displayed as is typed. However, any spaces which are contained with the text are only displayed as a single space, regardless of how many spaces are used.

It is important to note that markup tags can be nested within one another. Again using the example above, you could pose the question: What if I wanted to create a forced line break with some bolded text? You could of course do this:

However, by using nested tags, you could eliminate some of the tags required to accomplish the same task:

All of the tags within the HTML language have default characteristics. In order to change those characteristics you must change the tag’s attributes. This is done through the use of predefined attribute commands, with each tag having its own set. For example, the default behavior of the horizontal rule tag can be changed. You can adjust its alignment, length, thickness, and even its shading.

For example, if you wanted to create a thicker left justified centered horizontal rule with a width of 100:

As you can see, attributes are enclosed within the angle brackets.

Browsers rely on one thing: the recognition of tags. If a browser is unable to recognize a tag, it plainly does not understand it. Browsers are very simple in the way that if they do not understand a tag, they ignore it. Right now you may be asking yourself: why a browser would not be able to understand a given tag? Two of the most common reasons why a browser would not recognize a tag are:

1. The tag being used is not supported by the browser reading it.
1. The tag’s syntax is incorrect.

Some browsers, such as Netscape, have their own enhancements to the HTML standard. These enhancements are usually supported only by the browser for which they were created. For example, many Netscape enhancements do not work with Mosaic browsers.

Problems with the tag’s syntax can be caused by a variety of reasons. You may have spelled the tag incorrectly, you may have used attributes which are not associated with that tag, you have nested tags within a tag which does not support nesting of that tag, or extra characters are added to the tag which make its recognition impossible.

Some tips to help you to avoid making these mistakes include:

• Ensure that you have spelled the tag correctly.
• Ensure that no extra characters have been included within the tag which do not belong. This includes spaces! For example, with the tag <CENTER>, putting spaces before < CENTER>, after <CENTER >, or anywhere in the middle <CE NTER> will make the tag unrecognizable.
• Get a reference guide for the commands. This will tell you three important things: the attributes which can be used with this tag, tags that this tag can be nested in, and tags which be nested in this tag.

HTML documents, similar to normal word processing documents, ideally consist of a header, body, and footer.

The header identifies the document as HTML, set defaults for the document, and establishes the title to be displayed in the title bar of the main window.

The body contains the content of the page. This section of the document physically consists of text, links to graphics and multimedia, links to locations within the current document, links to local document, links to documents at other servers, and other Internet services such as FTP.

The footer, although not formally defined as part of a document, is typically included at the bottom of the body. The footer usually contains the author, copyright information, date of creation, and version number.

Each of the three sections make up a single HTML document. For some browsers to respond correctly to your markup commands, you must identify a document as an HTML document. This is accomplished through the use of a tag. The <HTML> tag is used to show the start of a document and a corresponding </HTML> tag is used to denote the end of the document. Although many browsers do not require you to use this tag, it is a good idea to include it for compatibility reasons.

A header is used to define information about the document itself. This includes the document’s name, default font, background color, and others. Defining a header for a document is actually quite simple. All that is required to define a header is to enclose the header information the header tag starting with <HEAD> and closing with </HEAD>.

The name of the document, or the document’s title, is the title which is displayed in the title bar of the browser. A document’s title is defined within the HTML title tag: <TITLE> to begin the heading and </TITLE> to signify its close.

Example:

Exercise

The body contains the information which you want to convey to the user. This is accomplished through the use of text, media, and links to other documents. The body of a document is represented with the markup tag <BODY> and since it acts on a set of data requires a closing tag </BODY>. The tags which are used in the body as well as the links to resources is described in more detail throughout the section.

Unlike the header and body, the footer is not a marked element in HTML. However, this does not mean that a footer is unimportant. Footers are used to identify the author of the page, the contact information, version information, and a possible link to the home page.

Example:

This particular example may show a little more than what is typically shown on a web page. Many commercial pages include one similar to this example. Personal pages usually only show the author, the email address the author can be reached at, copyright information, and the date last revised.

Exercise

Headings, similar to text formatting commands, are used to help make your document easier to read. However. headings are different from formatting commands as they offer structure for your document. Headings are used to logically divide sections of your document to assist transition from one topic to the next.

The heading tag is used to format a particular range of text, which requires the use of and opening and closing tag. The opening and closing tags used to create headings are <H#> and </H#> where "#" can be a number between "1" and "6". (Levels "1" to "6" range from largest to smallest).

Example:

Recommended guidelines for using headers within printed document, also apply for electronic documents such as HTML.

1. Headings should get smaller as the topic becomes broken down and more specific.
1. A sub-header should not be used unless at least two sub-headers of that type will be placed under the super-header. For example, do not make use of the <H4> header if you plan to only use it once within the frame of an <H3> header.

The following is an example of how headers should be used:

Exercise

HTML layout commands help you break the text flow and create divisions in your document. Two commands which help you do this are the line break tag and the horizontal rule tag.

An HTML browser will always attempt to fit as much text on a line before it wraps to the next line. This is good in most cases, but what if you wanted to ensure that a line break occurred after a certain point? The solution would be to make use of a line break tag to tell the browser that even though there is room for more text on the current line, skip to the next line anyway. The tag used to perform this action is <BR>. (A closing tag is not required in this case as this command is a one time only type of command and does not act on a range of text.)

Example:

Exercise

A horizontal rule is a horizontal line used to separate sets of text or links. This line, generated by the tag <HR>, is typically a couple of pixels wide and is shadowed.

The horizontal rule is also customizable. You can change the look of the tag by giving it attributes. Attributes include alignment, width, size, and shading:

If you wanted to create a thicker left justified centered horizontal rule with a width of 100:

Exercise

The address format is used to denote information about the HTML document. This information is typically enclosed as part of the footer and consists of information such as the author’s name, address, signature file, and contact information. The <ADDRESS> tag is used to start the address format and the </ADDRESS> closes the address format. The address tag is typically enclosed within the <BODY> of a document, and can contain many other tags including <A>, <BR>, <P>, and many others.

Example:

Exercise

You would use a paragraph in a Web page for typically the same reason you would use a paragraph in printed information: to separate ideas or concepts into distinguishable divisions. The paragraph tag will cause a line break followed by an additional line. The paragraph is a singleton tag in that it does not act on a range of text. The markup to create a paragraph division is <P>.

Example:

Exercise

There are many tags used exclusively to manipulate the characteristics of the text displayed on the screen. Since this family of tags acts on a given set of text, both opening and closing tags are required. These tags can be used to change the attributes of the text by adding bold, italics, and emphasis. In addition, the font itself can also be changed to reflect a particular type of text.

The boldface tag changes the text enclosed within its starting tag and closing tag to become bolded. The tag is started with a <B> and closed with </B>. This tag should be used when you want to draw attention to specific words or sentences.

Example:

Exercise

The italic tag makes the text which is enclosed within the start <I> and the </I> appear in italics.

Example:

Exercise

The emphasis tag changes the characters enclosed within to appear emphasized. (This is very similar to making text italics.) This tag is started with <EM> and is closed with </EM>. It should be noted that when you want something to appear different from the rest of the text on the screen, the emphasis tag should be used rather than the italics tag. This is because some users set their browsers to emphasize text in a different color rather than the default of italics.

Example:

Exercise

The keyboard text tag changes the characters enclosed to signal to the user that it is text which is typed at the keyboard. This tag is started with <KBD> and closed with </KBD>. This text is typically displayed as courier, common to many text based display systems.

Example:

Exercise

The blink tag changes the text characteristic to blinking for any text enclosed. The tag is started with a <BLINK> and closed with a </BLINK>.

Exercise

The short citation tag produces a different font which is characteristic of citations in printed documents. The tag is started with a <CITE> and closed with </CITE>. The citation command will typically be used to show a citation or a reference to other data sources.

Example:

Exercise

The source code tag is useful if you have documents which include snippets of source code. This tag will change the font to a type which resembles a font often used when source code is printed. This tag is started with <CODE> and closed with </CODE>.

Example:

Exercise

The definition tag is used to emphasize a term which is to be defined in the text which follows. This tag is started with <DFN> and is closed with </DFN>.

The sample text tag is used for literal characters or to represent the output of a program. This tag is started with <SAMP> and closed with </SAMP>.

Example:

Exercise

The strong emphasis tag is used when you want to bring attention to particular words within the text of a document. The strong emphasis tag is started with <STRONG> and closed with </STRONG>. It is recommended that use of this tag is limited to words which need to stand out. Overuse of this tag will nullify the effect.

Example:

Exercise

The typewriter (teletype) tag is used when you want text which is monospaced. This type of text typically is shown in block courier and is used with text you want to appear output from a line printer of typewriter. This tag is started with <TT> and is closed with </TT>.

Example:

Exercise

The variable tag is used to indicate to the users that this is information which they must supply. For example, if you were describing a command line utility for DOS or UNIX, the parameters which the user should supply would be formatted with the variable tag. This tag is started with <VAR> and is closed with </VAR>.

Example:

Exercise

In hypertext systems, users can use links to jump to different locations within the current document or can jump to other hypertext documents. With HTML, all links are treated as an association between the current document and a resource. These resources not only consist of jumps to portions of the same document and to other documents, but also to other hypertext documents on the network, graphics, sounds, and video.

A Uniform Resource Locator (URL) is used to instruct the WWW browser how to connect to an Internet resource. A URL represents the type of resource and the exact location the resource can be located at. The URL’s syntax for an HTML file is:

aaaa: Data source / protocol / access method

//bbb.bbb.bbb Domain name / node

:cc Port

/ddd/ddd/ddd/ Path

eee Resource name

#fff Arguments

Links to Internet resources are accomplished through the use of an HTML tag. This tag, known as the anchor <A>, provides a method for the user of a page to make hypermedia links. The anchor tag can be used to define a "link to" or can be used to define a destination; these also happen to be the minimum attributes which can be used with this tag.

In order to "link to" using the anchor tag you are required to use the HREF attribute. The HREF attribute is used to define the Internet resource which you wish to link to. The syntax of the HREF attribute is simply HREF="URL". The URL can be any Internet resource which you wish to provide a link to. For example, if you wanted to provide a link to the Netscape home page:

The words "Netscape Inc." in this particular example are used as the anchor to the home page at home.netscape.com. The text is visually changed through the use of color to indicate to the user of the page that the text "Netscape Inc." is an anchor.

Defining a destination is used within web pages to further subdivide the document. With anchors, you can specify various points throughout the document which the user can jump to. This makes it easier to locate specific information within a document from the document itself or from another document.

When loading a local file from your computer the URL syntax can be described by:

Note that the ":" normally used to separate the drive letter from the directory path on a local file system is replaced by the "|" (pipe/vertical slash) character.

Exercise

The basic premise behind this exercise to get you familiar with linking pages on your local machine.

Some web document designers like to maintain larger documents rather than having many smaller documents. It is reasonable to assume that a larger document would resemble a similar logical structure to the smaller document method: the document would contain a table of contents and the associated data. The solution is to use internal links within a document. By providing internal links, the user can quickly jump to particular points in the document. Links at jump points should also be provided to related points and the table of contents.

This process of providing internal links, known as intra-document linking, is performed using the anchor, <A>, tag. The first step to setting up an intra-document link is to establish a name for the beginning of text you want to jump to. This is done using the extension NAME, whose syntax follows: NAME="thename". As with other tags, you must remember to provide the closing </A> at the end the text you wish to name.

Some style guides recommend that the text which is to be used as the anchor, in this particular example "Subject 1", be placed in brackets to represent an internal jump.

Exercise

The exercise will make you familiar with the naming of sections of your document and the ability to link to those sections.

Returning to the top of the page is performed using internal jumps. What is required is that you set up a name for the top of the document and then at appropriate places within the document, provide the jumps to that particular name. This is commonly used in larger documents which have a table of contents. Jumps to the table of contents would be placed after each logical division of text. This will provide the user of the page with the ability to quickly locate your table of contents and be able to move to another topic of interest. In the following example, a table of contents is constructed with three topics. Each of the topics in turn has a link back to the table of contents.

Exercise

Setting up a table of contents is just one way of making your document easier to use using internal links.

1. Create a new page using a text editor. Name the file toc.htm.
1. Enter the code shown in this section.
1. Observe the way the link from a table of contents item takes the user from the table of contents to the subject heading. Notice that links are always provided back to the table to contents.

As you have already seen the syntax for a URL for the document name itself and for the position within that page is "locationandnameofpage#nameoftext". In the previous section you discovered how to make links within the current document. In contrast to linking within the current document, to link to other documents you must provide the location and name of the document you wish to connect to. Additionally, you can specify a specific point in that document the same way you do to provide jumps within the current document. The following example demonstrates the linking of one document to another within the same relative directory:

As in the example shown in the beginning of this section, linking to other documents on other servers require the full name of the server and its directory structure.

Exercise

The focus of this exercise is to demonstrate the linking of particular spots within multiple documents.

Another popular link is used to link the current page to the page which all other pages are derived, the home page. By providing a link to the home page, a user can jump to the page from which they started should they get lost or want to explore from the root again. This is accomplished in the same way you link one page to another, the only difference being that the page it links to is at the top of the hierarchy.

One internet resource which you are already quite familiar with is the hypertext HTML document (http://). You have also seen how to connect to HTML documents on a local computer through the use of the file:// URL. You can connect to several other Internet resources including ftp, gopher, email, USENET news, remote system login, and WAIS.

To connect to a remote directory to download files via the File Transfer Protocol, you simply specify the protocol ftp followed by the directory you wish to connect to. For example, to connect to the public directory at Netscape you would use the following URL:

If you wanted to connect to a USENET newsgroup, the protocol "news" is used followed by the newsgroup you wish to connect to. For example, to connect to a newsgroup which deals with HTML development try:

In order to provide a facility for the users of your page to send you feedback, you can use the "mailto" protocol. In fact, the way this particular anchor is interpreted varies depending on the browser that your user uses. Most of the new graphical browsers actually bring up a form which allows the user to enter information which they can send to you. For example, to provide a facility for users to access my page at anotheraddress.net I would use the following:

<A HREF="mailto:jhamlin@anotheraddress.net">jhamlin@anotheraddress.net</A>

or you could just specify your name

<A HREF="mailto:jhamlin@anotheraddress.net">Jim Hamlin</A>

The following is an example of the email form which is presented to the users of Netscape 1.1N:

Exercise

As you have seen, you place items in your header which are relative to your whole document. Besides the title, there are many other things you can define for your document: The background color, the background image, the base HREF, and the base font size.

Creating a base URL in your document can be very useful. For example, if many of your references on a particular page point to a given URL, you can simplify the need for long URL entries in your anchors. By creating a base URL which all other URLs in that document are based you will make your references more compact.

It is a good idea to include a base URL in each of your documents. This will ensure their usability should they ever be moved to a new location. By using a base URL you eliminate the need to change the relative URLs contained within the document. A case could arise where you have a several pages in the same directory. You will notice that it is not necessary to place the entire path of the page. You may also place pages in subdirectories of the directory where the current document resides. In these cases only the subdirectory name and the name of the page is all that is required. (This is because the default base URL is the location of the document.) Now consider what would happen if you wanted to move the current page to another location. You would have to either move all the other pages to replicate the relative structure which existed before or you would have to modify all the links of the current document to include either new relative links or full URL names. (This is because the default base URL has now changed.) By creating a URL base and setting it to the current location of your page, you can move this page anywhere you like and never have to move any files or update any links for it to continue functioning.

The URL base is tagged using <BASE> and consists of one attribute HREF: <BASE HREF="...">. The following example illustrates this using a file HREF to a HTML page on a disk drive labeled C:

Exercise

This exercise will show you how a base HREF can slim down your URLs throughout your document. In addition, you can test the portability of your page and then by changing only one base HREF, migrate all the links.

Often you will want to define the default size of the font to be used in your document. Although you normally see a base font in the header of your document, you can actually place the command anywhere in the document. (Although it is not recommended as there is a font command which can be used to change the text within your document.) The base font tag is considered a singleton where it only requires one tag to implement. When a base font tag is used, all text under the declaration of the base font will be set to a size defined in the tag. This base font is ended when the browser has finished displaying all the text of the document on the screen or until another base font tag is found later in the document.

You would want to use this command to enlarge the text of a document for easier readability or reduce the font so more text can be placed on the screen. It should be noted that this particular tag is a Netscape extension and may not work with all browsers.

The tag is constructed with the tag <BASEFONT>. This particular tag has only one attribute, SIZE. This attribute is required! Valid sizes range between 1 and 7. The complete syntax is then <BASEFONT SIZE="#"> where "#" is a valid number from 1 to 7. (1 is the smallest and 7 is the largest, in contrast to the way that the headers work with 1 being the largest and 6 being the smallest.) The default size in Netscape is 3.

In this particular example the basefont is placed in the header of the document:

As noted earlier, it is possible to change the base font anywhere throughout the document. (Note: Although it is possible to change the base font anywhere in the document, it is recommended that the base font tag be used only in the header of the document. There is a another tag, font, which can be used to change font sizes with the document.) The following example shows the use of the base font tag in the body of the document. Initially the base font is set to 3 (the default for Netscape), the font is then changed to 4, and then back to the default.

How does the base font size affect the size of headers? They don’t! For example, an <H1> header defined with a base font of 3 will be the same size when a base font of 1 is defined. As noted earlier, the base font ranges from 1 to 7. To compare relative font size, a base font size of 6 will be the same font size as an <H1> header.

Exercises:

The font command is used very much the same way the base font tag. This command is most typically used within the body of your document to change the size of the font relative to the text which follows. The font tag consists of the following: <FONT SIZE="#"> where # is a valid number between 1 and 7 (7 being the largest.)

The following example sets a base font size then redefines the size within the body of the document:

Now you have seen how the base font size and the font size can alter the size of the font. Up to this point they have been both used in the same manner. Now you may be asking yourself, why bother with two different tags if they both can be used the same way? The interesting thing to note about the font tag is that it does not require an exact number in its size attribute. Instead of having to specify the exact size of the font, you can specify an offset from the base font. This offers a big advantage! If you made use of offsets for your sizing of your fonts and decided that you wanted to make all your fonts one size smaller, all you would have to do is change the base font size to one smaller. All the other fonts tags throughout the document would follow suit as they are relative to the base font. (Note: You do not necessarily need to define a base font to use the offsets with the font command as Netscape defines the default base font of 3.)

To make use of font offsets, you simply specify how much smaller or how much larger you want your font compared to the base font. This is defined using the same attribute as before, SIZE. For example, if you wanted your font to be one larger than the base, you would use SIZE="+1". One smaller would be SIZE="-1". If you wanted to return to your base font size you could use SIZE="+0". The following example is the same as the one before with only one difference: the font sizes are being adjusted relative to the size of the base font.

Exercises:

The two most commonly supported still graphics formats are the GIF and JPEG.

JPEG

GIF

So which is better?

The answer to this question is a simple it depends. The JPEG graphic format typically does a better job with realistic images such as scanned photographs. The GIF format, on the other hand, is better for images which need to be sharp, such as buttons, icons, and bullets. The JPEG format is typically smaller than the GIF as a result of different compression algorithms. The GIF format has more options available to it such as transparency and interlaced/non-interlaced.

Adding images to your document will make it look better than just a plain old text page. Graphics add color and often help to convey your message better (A picture is worth a thousand words - couldn’t resist!) Including graphics on your page is not as hard as you may think. The tag to accomplish such a feat is the image, <IMG>, command.

The <IMG> command always requires a location of a graphic which it is to display on your page. The definition of a graphic to be loaded is represented in the attribute SRC (SRC follows the syntax SRC="...".)

The image source as shown above can be in a variety of forms. It can be a filename, relative filename and directory, or be a URL to a graphic file.

Exercise

In many cases, users of a page who are not capable of displaying a graphic on their page are left with a big mess! In other cases users who are using a graphical browser but have graphics turned off are left with icons in the place of the graphic. It is your responsibility to try to make the screens of these people as easy to read as possible. Rather than just not loading a graphic, you should provide a text alternative.

There are many conventions used. If the graphic represents a logo or icon you generally use an alternative phrase such as "[Image]". If you use graphics in a list, you would most likely provide the user with an alternative that makes sense, such as "*".

Creating an alternative to loading an image is accomplished through the use of the attribute ALT. Alt follows the syntax ALT="..." where ... represents the text to put in the graphic’s place. For example, if you had a graphical bullet and wanted to provide an alternative such as "*":

If you wanted to replace an image such as a logo with a text representative you could do something like this:

Exercise

You may often have a large image that you want to display on your page. Whenever you insert a picture the default is not to wrap text around it. (Floating text). This can make your image appear as a foreign object in the document and can make your document longer than it needs to be. To wrap text around an image you can use the ALIGN attribute. There are two values of this attribute which define how text is wrapped: LEFT and RIGHT. The LEFT value will place the image on the left side of the page and allow text to wrap the right side. The RIGHT attribute will do the opposite, placing the image on the right side and wrapping the text on the left.

Exercise

You have already seen how to make text based anchors which link to Internet resources. In fact, you can use images as well. To use an image as a link you simply include the image within the anchor tag. In the following example a link to Netscape’s home page is chosen by a Netscape graphic anchor.

It is important to note that you are not limited to using either text or graphics. You can use them both! Simply include whatever you want to be used as the anchor within the anchor tag.

Exercise

As you have already seen, there are two types of GIFs: interlaced and non-interlaced. You have also seen that it is possible to assign one color to be transparent, which when loaded into your browser will match the background color of the document.

Many GIFs that you come across will be in a format known as GIF87a format. This particular format does not support transparent colors. You can, however, mark a particular color to be transparent using the GIF89a format. Transparent GIFs which you design will typically be in 256 colors. With many different types of graphics programs you can assign one of these colors (0 to 255) to be a transparent color.

One such graphics program is Paint Shop Pro. There are many others including CorelDraw and LView, as well as programs that are designed explicitly to convert a GIF87a format to a GIF89a format with a transparent color. Paint Shop Pro can serve two purposes: it can be used to design your images, it can be used to create transparent GIFs, or both.

Once you have an image in Paint Shop Pro (either by creating one, loading a GIF87a format, or loading a GIF89a with no transparency defined), making it transparent is relatively easy. The first step is to choose "Save As" from the "File" menu. This will present you with the following dialog:

The focus of this dialog for our purposes is the "List Files of Type" and "File Sub-Format" combo box at the bottom of the dialog. Since transparency is defined using a GIF, you must first ensure that the type of file selected is a CompuServe GIF. Once you have selected a GIF as your primary format, you must then choose a sub format which supports transparency: GIF89a. Paint Shop Pro will give you the opportunity to save as either an interlaced or non-interlaced GIF. This particular section has no influence on the transparency of the GIF, just how it is loaded onto the screen as noted earlier.

Once you have set the file type to be a GIF89a format, you must specify the transparency of the image. This is done through the "GIF Transparency Options" dialog which is accessed by selecting the "Options" button on the "Save As" dialog.

There are four transparency options which can be used in this dialog:

1. Maintain Original Files Transparency Information - The current transparency information is retained.
1. Do Not Save Any Transparency Information - The current transparency information is deleted. The image is displayed as is.
1. Set the Transparency Value to the Background Color - The transparent color is set to the first best-match index for the current background color in the Color Tools.
1. Set the Transparency Value to X - Use the spin control to set the transparency color to a specific palette index.

Once you have made your decision regarding your transparency options, closing this dialog and choosing "Ok" from the "Save As" dialog will save the GIF using your transparency options.

Exercise

This exercise will demonstrate the definition of a transparent color and the difference between an interlaced GIF and a non-interlaced GIF.

In Version 3 of HTML the ability to size an image has been proposed. Netscape and several other graphical browsers will allow the use of the sizing attributes. These attributes are WIDTH and HEIGHT. The WIDTH and HEIGHT attributes can be used in three ways: 1. You can specify the width of the image and the height will be appropriately scaled, 2. You can specify the height of the image and the width will be appropriately scaled, or 3. You can specify both the width and height independent of one another.

Using the WIDTH or HEIGHT attribute can be used to effectively reduce an image to a particular height or width that fits the application in your page. Note that when using both the WIDTH and HEIGHT attributes together that you do not get any horizontal or vertical scaling to keep the image height and width relative to their original sizes.

In addition to resizing the image, you can also control how it gets placed by defining the horizontal and vertical spacing. Using the horizontal spacing attribute "hspace=x" you can place x number of guaranteed transparent pixels on either side of the image; the vertical attribute "vspace=x" works the same way only it places x transparent pixels above and below the image. This is useful if you wanted to have a guaranteed amount of white space around any particular image.

Exercise

Whenever you make a graphic an anchor in a link, a border is placed around the image by default to show that the image is an anchor. But what if you didn’t want those borders placed around your document? There is an attribute named BORDER which allows you to specify the width of the border which is placed around the image. If you decided you did not want a border, you could define the border width to be 0. On the other hand, if you wanted a thicker border you could define the border width to be 3, 4, 5, or even 30!

The following example displays the Netscape logo with no border, a border of 1, and a border of 3:

Exercise

There are many little things you can do to make your pages look that much better. One of those is making use of graphics to spice up its cosmetics. This could make the difference between a user taking a second look at your page or jumping to someone else’s document. Some of the ways you can spice up your page are adding logos, pictures, icons, bullets, and horizontal rules.

Logos

Icons

Buttons

Bullets

Horizontal Rules

Some great places on the Internet where you can find graphics libraries are:

Texture Land http://www.widomaker.com/~spalmer/texture_land/index.html

Daniel’s Icon Archive http://www.jsc.nasa.gov/~mccoy/Icons/index.html

Anthony’s Icon Library http://www.cit.gu.edu.au/~anthony/icons/

Computer Graphics http://mambo.ucsc.edu/psl/cg.html

Icon browser http://www.di.unipi.it/iconbrowser/icons.html

Ender’s Realm Graphics http://www.contrib.andrew.cmu.edu/~ender/ergraph.html

WWW icons http://www.uncg.edu/~rdralph/icons/

Icons http://melmac.corp.harris.com/images.html

Klick Buttons http://www.uni-konstanz.de/iconlib/click_buttons/click_buttons.html

Rutgers University http://www-ns.rutgers.edu/doc-images/

Syed’s Archive http://coney.gsfc.nasa.gov/www/sswg/gizmos.html

Cornell Archive http://www.tc.cornell.edu/Icons/

Background Archive http://the-tech.mit.edu/cgi-bin/KPT_bgs.pl

Exercises

Many of you may have noticed that there is no indenting with Web pages. If you have paragraphs of text, they are all flushed left, even the first line of the paragraph. There is a simple trick you can use to create an indent at the beginning of your paragraphs. In fact, you can also use this same trick to space things exactly on your page (horizontally).

The basic premise behind this is the use of a transparent image. So using a graphics program you must create an image which is 2 pixels by 2 pixels. We’ll use Paint Shop Pro. Once you have created the image, you will need to use it in your document and take advantage of the <IMG> attributes used to stretch the image. By stretching the transparent image, you can create what looks like a tab. The following exercise demonstrates the process in detail.

Exercise

If you use graphics to format your document, users who are using a browser which is not capable of producing graphics will be left with quite a mess. For example, if you make use of graphic line instead of an <HR>, a user whose browser does not support graphics will not get that division. Another problem can be with users with slow communications lines. Many users, even though they make use of graphical browsers, turn off the use of graphics. As a result, icons are displayed instead to represent the missing graphical image. This can lead to problems as well. For example, if you use graphical balls instead of a bulleted list, the user will be left with large icons, which may not convey your intent.

Some other points to note about using images include:

• Keep your images small. Although an image may load fast locally when you’re testing your page, the image can take a fair amount of time to load when some connects from a remote location.
• If you are providing many large images, use thumbnails. In addition, provide the user with the size of the image.
• You can use anchors in the place of image maps. By making several small graphics and stringing them together you can give the appearance of an image map.
• Know when to use a GIF and when to use a JPG. Generally speaking, GIFs are used for sharp images such as line art, buttons, bullets, or rules. JPGs are used for compressed photographic or scanned images.

The body of your document is controlled by a tag which is placed in the header of your document. The tag, <BODY>, has an explicit attribute which is used to set the background color of your document. This attribute, "BGCOLOR", follows the following syntax: BGCOLOR="#rrggbb". What the "#rrggbb" translates in to is the red, green, and blue mixture which makes up your desired color. A very good way to determine the color you are looking for is to use the Paint Shop Pro application to do the work for you. Don’t sample a color, reload, sample, reload! The process to determine the color is as follows:

Now that you have the color of the background noted in hexadecimal, you know the numbers to substitute the rr, gg, and bb.

Exercise

You have seen that you can use graphics in place of bullets and horizontal rules to make your page look more interesting. You can actually do the same for backgrounds. Rather than giving an explicit color for the background you can specify an image to be used instead. The attribute used to determine the image is BACKGROUND and follows the syntax BACKGROUND="...".

What must be used with the attribute is a qualified URL which points to an image, or just the image name itself. For example:

You will notice that the image is tiled on your page, very similar to the tiling which is performed on the windows background for wallpaper.

Exercise

The character set used by HTML is ISO-Latin-1. Characters can be distinguished by two types of entities: character and numeric. Character entities are strings of characters which identify a particular character in the set. Numeric entities are strings of numbers which identify a particular character by its sequence in the set. To compose character and numeric entities, you use a combination of three characters which compose the code used to represent the character. The three characters used in character codes are &, used to tell the browser what follows is a character code, the # character, which is used to tell the browser that the code is numeric, and the ; which is used to identify the end of the code.

Example:

Some other common characters include:

Exercise

Commenting your code is always useful no matter what the language. Say for example, you wrote a certain routine and six months later wanted to make some changes. Could you remember what you were trying to do at the time you wrote the original code? In addition, commenting code is useful if there is going to be more than one maintainer of your code. Comments should be descriptive of what the code segment is trying to accomplish and not just restate the commands.

So how do you comment with HTML? By enclosing the commented text in the comment delimiters <!-- and -->. After the first delimiter, all text after until the next occurrence of --> is ignored by the browser. Since the text until the next occurrence of the second delimiter is ignored, comments cannot be nested.

Example:

Exercise:

Lists are used to distinguish lines of text from other paragraphs within your document. They can also be used to show a logical sequence of events. List tags will either indent your text lines, bullet them, or number them. List types include unordered lists, ordered lists, definition lists, and short/directory lists.

The numbered list, also known as an ordered list, is used to show a list of items which should be shown in a particular order. The ordered list is started by the markup tag <OL> and completed with the markup tag </OL>. Each line in the list begins with a <LI>. The resulting output is a numbered list of lines.

Example:

Exercise

The unordered list is typically used to emphasize several short lines of information. The unordered list is started by the markup tag <UL> and completed with the markup tag </UL>. Each line in the list begins with a <LI>. The resulting output is a bulleted list of lines.

Exercise

The definition list is used to create glossaries. The first item in the list is the term and the second is the definition of that term. The definition list is started by the markup tag <DL> and completed with the markup tag </DL>. Each term in the list begins with the markup <DT> and the corresponding definition is denoted with <DD>.

Exercise

The menu list is used to group lines. Most browsers do not support this type and are interpreted as an unordered list. The menu list is started by the markup tag <MENU> and completed with the markup tag </MENU>. Each line in the list begins with a <LI>. The resulting output is typically a bulleted list of lines.

The short list is intended to be used for short items such as short filenames. These lists are intended to be used in multiple columns. Most browsers, as with the menu list, do not support this tag; it is simply interpreted as an unordered list. The short list is started by the markup tag <DIR> and completed with the markup tag </DIR>. Each line in the list begins with an <LI>. The resulting output is usually a bulleted list of items.

Exercise

Any of the lists you have learned earlier can be nested within one another. Nesting is accomplished by placing the open and closing nesting tags within an open and close nesting tag. Nested lists will appear indented from the list which contains it. Lists which are included within lists also can take on a new bullet style. For example, Netscape will use the solid circle, open square, and then solid square. An example which demonstrates the use of nesting is shown below. Notice that the bullets in the fourth level are not unique. This is because it is not typically recommended to create lists with a depth of more than three.

(Note that this example shows indented lines. This is not necessary to make the internal lists indented and is only used for better readability of the code; multiple spaces are collapsed into a single space)

Exercise

Preformatted text is useful if you want text to appear exactly as it is typed. You will remember that any text used within a document shows only the text when it is displayed. Any text formatting such as spaces (multiple spaces are collapsed to one space), tabs, and new lines are ignored; tags are required to perform these actions. There is a tag which can be used, the preformat tag, <PRE>...</PRE> which creates a block format font, and allows tabs, new lines, and spaces to take effect. Another point to note is that HTML tags can also be used within the preformat text tag. For example, if you had the following:

you will notice that a line is placed between "Line 1" and "Line 2". This is because the newline in the document and the <BR> tag both produce a newline in the document.

Here is an example using the preformat tag:

Without the preformat tag, you will notice that the text appears as

Exercise

Another tag which can be used to create preformatted text is the <XMP>...</XMP> tag. The difference between this tag and the <PRE> tag is that the <XMP> does not recognize embedded tags. For example, in the previous section, you saw how the <BR> tag or an actual carriage return in the file would produce a new line. When you use the <XMP> tag, the only way to produce a new line would be to actually use one in your document.

Example:

Exercise

Sometimes you will want to use quotations in your document. The intent of a quotation is to make the text contained within the quotation appear as a separate block of text. Most browsers interpret and separate the quotation from the other document text by indenting the text within the quotation. The tag used to produce a quotation is <BLOCKQUOTE>...</BLOCKQUOTE>. An example of a quote is as follows:

Exercise

There are times when you require the use of subscripts or superscripts in your document. A subscripted font will generally appear in a smaller font and slightly below the line of a normal font; a superscripted font will appear in a smaller font slightly above the line of a normal font. A subscripted or superscripted font may be used to make notes to the user about a particular subject in line, make a reference to another source, or could be used as part of a mathematical formula. There is currently no requirement for a browser to change the font of the superscipted or subscripted text until Version 3 of HTML. However, browsers such as Netscape currently do change the font.

The HTML markup tags to generate a subscripted font are <SUB> and </SUB> and any text contained within the open and close tag will be affected. An example is below:

The HTML markup tags to generate a superscipted font are used the same way as the subscripted font. The tags to produce the superscipted font are <SUB> and </SUB> and any text contained within the open and close tag will be affected. An example is below:

Exercise

As in written documents, there are some times when you require the use of a table to organize information. There are many times when a list will be sufficient to organize information you wish to present to the user. When you need to introduce another level of detail you can make use of a table.

The HTML markup tags to define a table are <TABLE> to signify the start of a table, and </TABLE> to signify the end of the table.

Essentially, a table is a collection of data organized into rows and columns. There is no difference between a table in a written document and ones contained within HTML documents.

Tables in HTML documents are organized by row. What this means is that you must explicitly define a row and then add a variable number of data elements to that row. The HTML markup tags to define a row in a table are <TR> to signify the start of a row, and </TR> to signify the end of a row.

Obviously you have to do more than just define rows in your table. (That’s the first step.) You must now define the data elements which are contained within the row. To accomplish this there is another tag, <TD>. <TD> works the same way as other table tags as it starts with a <TD> and ends with a </TD>.

If this example was enclosed within an HTML document, you would observe the following output:

Exercise

You will notice in this example that no borders are defined for the table itself. There are times when complex data is being put into your table and you need physical separators. In order to do this, you are required to define the border of the table. This is done through the attribute BORDER which is placed with the <TABLE> markup tag. Syntax: <TABLE BORDER=#>. So for example, if you wanted a border of one, you simply use

Consider the example used throughout this section, adding a border of one will yield the following result:

Exercise

Now that we have what physically looks like a table, you will notice that we are missing an important part: namely the headers for the columns. It is as easy to define headers as it is data elements. The markup to define a header is <TH> to start the header and </TH> to end the header. Using our example, adding headers would revise the document as follows:

Exercise

Headers can additionally be used to signify rows as well. It just takes a bit of planning about how you are going to structure your table. In order to add headers for each row, you will be required to create an extra column at the start of every row.

Exercise

Another useful feature of tables is the ability to assign a title to a table. This is accomplished through the use of the <CAPTION> markup tag. The caption tag must be enclosed within the <TABLE> ... </TABLE> tags and must have the text to be used in the title contained within it.

You should note that you can place a title at the bottom of a table. The <CAPTION> tag has an attribute "ALIGN" which defines where the caption will be placed. In order to place the caption at the end of a table you can change the caption line to the following:

Exercise

As you may have noticed, headings by default are boldfaced and centered. You can apply any formatting markup tags to the text within a cell as well. For example, if you wanted to boldface the word Column in our example in the first row, first column all you would need to do is wrap the word Column in the boldface markup tag as shown:

Exercise

Headings, by default appear centered in the cell of a table. What if you wanted to align other cells not being used as headers? There is an ALIGN attribute which will do this for you. This ALIGN attribute can be used in both the cell and in the row tags. Now before jumping ahead and adding the align attribute to all cells, you should consider all the cells which you want to affect. If you want to affect all the entire row of a table, you should consider using the ALIGN attribute in the row tag; if you want to affect only specific cells, use the ALIGN in the cell tags; if a good portion of the row is changed from the default, you may also want to consider using the row ALIGN and the cell ALIGN. The cell ALIGN will always take precedence over the row ALIGN. By knowing this, you can define a default behavior for all the cells within a row, and then set individual alignment behavior on a cell by cell basis if it deviates from the default you set in the row.

Whew! Here’s an example to clarify. You must note that the default behavior for a row and for a cell is LEFT justified. If you wanted to redefine the behavior so that the default for the row is "CENTER"ed, you would define the row attribute as:

Once you have set the row to be centered, you may require that the first data element remain left or right justified. You could do this by:

Exercise

Not only can you align your text based on horizontal alignment, but you can also align your text vertically within the cell. There will be many times when the text within your cell will wrap to the next line and cause a cell to take up two or more vertical lines. The default behavior is to have the text align to the CENTER of the cell. There may be some situations where you want to make the text to align to the top or bottom of the cell. This is accomplished through the use of the VALIGN attribute. This attribute can be one of three values: MIDDLE, TOP, or BOTTOM. This attribute works in very much the same way as the ALIGN attribute where you can define a particular default to the entire row and change individual cells. If you recall, this is done by defining a vertical alignment within the row <TR> tag and then redefining the vertical alignment within the cell.

Row alignment Cell alignment

Exercise

**NOTE: From the previous example, you saw that text can wrap within a cell. You can turn off this behavior within either the cell or within the row by using the attribute NOALIGN.

You have now experimented with tables which contain a fixed number of rows and a fixed number of columns. There may be an occasion where a column is not required within a particular row. If you were just to remove the data tag you would find that your column alignment would be wrong. This is because the browser interprets each cell one at a time and places them into the table. The browser has no knowledge of your intentions and you cannot assume it does. However, there is a way for you to tell the browser that a particular cell is going to consume two or more columns. This is done at the cell level using the COLSPAN attribute. This attribute follows the syntax: COLSPAN=#.

Using our recurring example, if we wanted the second column (1st data column) to consume two cells and we eliminated the third physical column, we would change the document so the last row reads:

which would yield:

Exercise

In addition to the combining of cells on a columnar basis, you also have the ability to combine rows. This is accomplished in very much the same way. The attribute to accomplish this is through the use of the ROWSPAN attribute.

The ROWSPAN and COLSPAN attributes can both be used within a table or within the same sets of cells. There may be times where it is hard to keep track of how a browser will interpret the spanning of cells, so you may need to verify in your browser.

Here’s an example:

Exercise

Exercise

There are many ways you can design your web pages. Some authors stick to one large page and others branch out to multiple pages. Sticking to one page and providing links within the document has its advantages and disadvantages. Some of the obvious advantages are that once a document is downloaded to the user, the user can quickly jump around; it is also useful if your user wants to print your document as they do not have to follow each link to print the page. Obvious disadvantages are that your user may not require or want all of the information you plan to present to them. If the user is connected to the Internet on a relatively slow line then it can be very annoying to the user.

When using multiple pages are used, you have the freedom to connect them any way you like. The most common way is to have a tree like design where your home page is the root of all the branches. (This is also the recommended method!) Although you can connect pages any way you like, you should avoid connecting them in a linear fashion as it defeats the purpose of hypertext. Linear connecting takes the ability to quickly jump to a topic of interest from the user and also requires the user to visit each page to get to the topic they are interested in. Creating a mix-match of pages should also be avoided. If you have links going everywhere it can be hard for the user to navigate through your pages and before long your user will be lost! Another point to note is that you should NEVER have dead end pages. Always provide a link to another page or the page from which this document normally originates from. The user should not have to rely on the back button in their browser to get back to surfing.

An example of good page linkage. (Do this!)

Home

Bad linking strategy. (Linear linking.) Do not do this!

The first step to storyboarding your pages is to identify the major pieces of information you plan to present to the user. This will form logical divisions or separate pages. Once you have decided on the major points, it is a good idea to draw out these pages on paper. It is generally a good idea to sketch your intended structure on paper as it will give you an overview of the content of each page, how each page links to other pages, and how these pages sit in the hierarchy of your page structure. By providing this overview you can identify links you may not have originally considered as well as problem areas which may be confusing to the user. Once you understand the major pieces of information you want to present to the user, the order you want to present it, and the relation between the information, you are ready to begin writing your pages.

Graphics can turn a drab page into a page which looks interesting and informative. Graphics can also be used to help the user understand your point or a concept you are trying to explain. However, you must remember that there is a point at which graphics stop helping the user and begin hindering them because their connection does not have very high performance. If you have graphics heavy pages, you should consider letting the user know that the page will contain a large number of graphics, more specifically you may actually want to tell the user exactly how big the page is. Some users are unable to display graphics and others frequently turn off the graphics option to increase performance. Knowing this, you must ensure that you provide alternatives to images which are meaningful.

Some other points include:

• Don’t crowd images on your page.
• Provide alternatives to images for those who do not support or do not want graphics.
• Don’t have a different icon for every bullet.
• To reduce the time it takes to load your page, keep image sizes as small as possible.
• If you insist on having an image heavy page, provide a text only version.
• Don’t make something look like a button if it’s not a button.
• Try to inform your user how big an image is before sending it.
• Provide alternatives to graphics which make sense. For example, use a "*" to represent bullets.
• Try to avoid using color to signify information. Not all browsers will display the color as you intended it.
• Use thumbnails to larger graphics.
• Be careful to use background images that are not too busy. They distract the user from the point you are trying to convey.
• Buttons do not require borders. The user will know what they are for if they are self explanatory.
• Know the time to use GIFs and the time to use JPEGs. (See section 3.)

Reading HTML code can sometimes be difficult. It is important to lay out your code in a neat and consistent manner so you and others can read and modify the code effectively. Some style guides suggest that the tags be kept at the left margin with the text offset to the tags. For example:

This is an example of a definition list organized using the method described.

<DT> Term 1

<DD> Description

Another consideration for code layout is where nesting within your document exists. For example, if you have a list in your document which contains another list, you should indent the contained list so when reading your code you can tell where the indent is supposed to occur.

It is also important to effectively use comments. Use comments to show intent of your markup, provide administrative information, to provide logical divisions, provide considerations for other developers, and to label your document sections. (See section 4 for more on comments.)

Naming conventions should be used when naming your HTML documents. All documents should have the extension htm or html. Names should reflect the purpose of your document.

• Avoid embedding tags within your anchor tag.

• Avoid using "Click here" to point to a document. Not everyone has the ability to "click" and the text content should reflect the document to which it points.
• Don’t make everything a header just because you want it to look bold. The header is not portable for every type of browser and can look bad even on browsers which do support it.
• Avoid including headers in lists. <UL><H2>......<P>....<P>.....</H2></UL>
• Avoid splitting formatting elements with layout elements. <I>...<P>...</I>.

There are many programs available which attempt to make your Web authoring experience easier. Some of these programs are rather simplistic in that they offer only a notepad like interface. Others have a similar interface but provide the user with automated placement of tags through the use of a button bar or menu system. There are some which give you a WYSIWYG type interface; the authoring program will show you on screen what the user of your page will see. As you can see there are a wide variety of programs and templates out there which can make your life easier.

Although you have these resources available to you, you should not neglect understanding the HTML markup itself. Many of these programs, just like code generators, will produce code which is commonly used. But what if you wanted to accomplish a task or customize the code for your own needs?

There are an endless number of archives on the Net which contain graphics of all kinds. You can find logos, pictures, bullets, horizontal rules, buttons, icons, and backgrounds. Some pages are actually designed to support the Web developer. (A small list is in section 3). Some sites will offer the library as a single compressed file for you to download. Others will go out of their way to provide you with thumbnails of the images before you download them.

One thing to note when using graphics from one of these sources is that you should always download the graphic to your local machine. Avoid linking the graphic at their site to your page. Although it will save you disk space, it takes longer for your user to receive your page, it is riskier because the site may close down or move the files, and it aggravates the maintainer of that site because there is increased network traffic to their site. Some page owners offer libraries of images which you can link to. You should avoid doing this for the reasons mentioned above.

The Usenet news service contains many different groups used to assist developers of web pages, people who are trying to set up a WWW server, and those who just need help configuring their browser. It is sometimes beneficial to just browse through questions and look for the follow up solutions posted by other people. It is possible that someone is having the same problem as you, or you may have solved a problem which someone else is having.

Each group is broken down into smaller subgroups. As a rule of thumb, you should avoid, whenever possible, posing questions in the .misc subgroups. These are intended for questions which just don’t seem to fit anywhere else.

Page authoring groups

comp.infosystems.authoring.html

comp.infosystems.authoring.images

comp.infosystems.authoring.misc

Web browser groups

Web server groups

One thing you should not neglect doing: surfing the Net yourself! That is one of the single most beneficial ways to get ideas for your Web page. You can often get ideas as to content and style. If the author did something rather creative which you would like them to explain, sending email to the address at the bottom of their document will often yield a friendly answer.

There are many people on the Web who design their own graphics. Although it is very easy to grab images from others’ Web pages, you should avoid doing so. That user has spent their time developing a graphic which makes their page unique. Only take graphics which are part of libraries or ones the user encourages you to download.

Some Web authors offer advice on producing documents, document style, and many other topics relating to authoring these documents. It is sometimes useful to browse through these to see the reasoning why they did something a particular way. It is quite possible that they know of a few tricks which you haven’t seen before.

Most of the major Web organizations maintain some sort of style guide. These guides address anything from correct spelling and grammar in your document to consistency in design. Some of the organizations which maintain style guides are:

• NCSA
• NRAO
• HEASARC
• CERN
• Cornell University

Web Style http://WWW.Charm.Net/~web/Style/

CERN's Style Guide http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.html

Virtual Library/CyberWeb http://WWW.Stars.com/Vlib/Providers/Style.html

Good Home Page Design http://www.access.digex.net/~werbach/page_design.html

Yale C/AIM WWW Style http://info.med.yale.edu/caim/StyleManual_Top.HTML

Webspace Design http://www.webcom.com/~hurleyj/article/index.html

Field Guide http://nearnet.gnn.com/gnn/news/feature/netizens/fieldguide.html

comp.infosystems.www.advocacy

comp.infosystems.www.announce

comp.infosystems.www.authoring.cgi

comp.infosystems.www.authoring.html

comp.infosystems.www.authoring.images

comp.infosystems.www.authoring.misc

comp.infosystems.www.browsers.mac

comp.infosystems.www.browsers.misc

comp.infosystems.www.browsers.ms-windows

comp.infosystems.www.browsers.x

comp.infosystems.www.servers.mac

comp.infosystems.www.servers.misc

comp.infosystems.www.servers.ms-windows

comp.infosystems.www.servers.unix

comp.infosystems.www

comp.infosystems.www.users

comp.infosystems.www.misc

comp.infosystems.www.providers

alt.culture.www

alt.fan.mozilla

alt.hypertext

alt.www.hotjava

bionet.software.www

bit.listserv.www-vm

cern.www.talk

fj.net.infosystems.www

hannet.ml.www.netscape

ibm.ibmpc.os2www

ibm.ibmpc.www

ibm.ibmpc.wwwibm

imsi.mail.www-talk

swnet.infosystems.www

tnn.internet.www

uiuc.cs.www

vmsnet.infosystems.misc

comp.text.sgml

Yahoo Icon Index http://www.yahoo.com/Computers/World_Wide_Web/Programming/Icons

DJ's Icon Catalog http://www.delorie.com/gif/

Icons from UMass http://donald.phast.umass.edu/icons/

Icons from Cornell http://www.tc.cornell.edu/Icons/

Icons from Upenn http://www.cis.upenn.edu/~mjd/icons/

Icons from ucsd.edu http://inls.ucsd.edu/y/OhBoy/icons.html

Anthony's Icon Library http://www.cit.gu.edu.au/~anthony/icons/

QBullets http://www.matterform.com/mf/qbullets/aboutqbullets.html

Icon Library http://www.nas.nasa.gov/NAS/WebWeavers/icons.html

SaberSpace Graphics Depot http://www.netrunner.net/~sabercat/

Icons from LAL http://lal.cs.byu.edu/buttons/gifs.html

Sandra's Clip Art Server http://www.cs.yale.edu/HTML/YALE/CS/HyPlans/loosemore-sandra/clipart.html

HTML Developers Icons http://oneworld.wa.com/htmldev/devpage/icon/

Computer related icons http://www.cs.indiana.edu/elisp/w3/icons/

Web Comm. Archive http://www.webcom.com/power/icons.html

GNN Icons http://nearnet.gnn.com/icons/

Daniel's Icon Archive http://www.jsc.nasa.gov/~mccoy/Icons/index.html

Image Index http://www.winternet.com/~drozone/imagesindex.html

Icons! http://www2.uncg.edu:80/~rdralph/icons/

Icons from kiae.su http://www.kiae.su/www/icon/

Icons from quadralay.com http://www.quadralay.com/icons/

Icons from passau http://www.uni-passau.de/icons/

Pattern Land http://www.netcreations.com/patternland/index.html

Textureland http://www.europa.com/~yyz/textures/textures.html

The KPT Backgrounds Archive http://the-tech.mit.edu/cgi-bin/KPT_bgs.pl

Netscape http://www2.netscape.com/assist/net_sites/bg/backgrounds.html

HYPE Background Selector http://www.phantom.com/~giant/HYPE_BACK/hypeback.html

Russ' Backgrounds http://www.issi.com/people/russ/backgrounds.html

Julianne's Background Textures http://www.sfsu.edu/~jtolson/textures/textures.htm

H's Backgrounds http://www.princeton.edu/~champ/background.html

The Color Specifier http://www.interport.net/~giant/COLOR/hype_color.html

Background Colors http://www.infi.net/wwwimages/colorindex.html

ColorHex http://firehorse.com/colorhex

RGBtoHex http://www.lne.com/lemay/rgb.html

Colors and Hex Equivalents http://www.ohiou.edu/~rbarrett/webaholics/ver2/colors.html

Color Ramper http://www.netcreations.com/ramper/index.html

Netscape HTML Extensions http://home.mcom.com/home/services_docs/html-extensions.html

The official HTML specification http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html

HTML Assistant http://web1.osf.org:8001/ri/hci_papers/html-asst.html

HTML Tips http://www.best.com/~dsiegel/tips/tips_home.html

The 'Official' HTML 2.0 DTD (HAL) http://www.halsoft.com/sgml/html-2.0/DTD-HOME.html

The 'Official' HTML 3.0 DTD (HAL) http://www.halsoft.com:80/sgml/html-3.0/DTD-HOME.html

Composing Good HTML http://www.willamette.edu/html-composition/strict-html.html

How to write HTML http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

HTML Writers Guild http://www.mindspring.com/guild/

A Guide to URLs http://www.netspace.org/users/dwb/url-guide.html

A Beginner's Guide to URLs http://www.ncsa.uiuc.edu/demoweb/url-primer.html

The HTML Quick Reference Guide http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html

HTML Specification Version 3.0 http://www.hpl.hp.co.uk/people/dsr/html/CoverPage.html

Webcom's HTML Guide http://www.webcom.com/~webcom/html/tutor/welcome.html

A Primer on writing HTMLs http://www.ncsa.uiuc.edu/demoweb/html-primer.html

HTML Reference http://www.sandia.gov/sci_compute/html_ref.html

Reference for HTML and the Web http://server.uwindsor.ca:8000/~watson6/wwwstart.html

HTML Writer Home Page http://lal.cs.byu.edu/people/nosack/index.html

When you begin creating your own documents, you will most probably want to create your documents off-line as online hours are quite costly. Once you have revised a document, you should test the document to ensure that it will function as expected and that there are no errors. You can, in most cases, test your document off-line in addition to creating/revising it off-line. Once you are satisfied that the document is the way you expect it to look, you can then upload it to your internet provider.

In this particular manual Netscape Navigator is used as the example browser. Testing documents using Netscape is very simple; to test documents locally on your machine using this browser, use the menu item "Open File…" to open a document.

"Open File…" will present you with a dialog which will allow you to select the document you wish to load. You can then browse for your document and then select Open.