HTML - Creating Your Own WWW Pages

An Introductory Guide To Authoring and Design
By Jim Hamlin
Copyright © 1995
Table of Contents
Introduction
SECTION 1
What’s covered in this section?
What is the WWW?
Software to untangle the Web
Web Server
Web Browser
How does a user get information from the Web?
Common web browsers
Lynx
Mosaic
Netscape
Microsoft Internet Explorer
What file formats are out there?
Helper applications
Lets get hyper! Enter the world of 3D documents
What is hypertext?
hypermedia?
Where hypertext/hypermedia used?
What is a markup language anyway?
Markup language
SGML
HTML
Introduction to HTML markups
Tags
Attributes
Markup syntax must be exact
Parts of an HTML document
Header
Body
Footer
Defining a document
Creating a header
Exercise
The body of your document
Footers are a nice addition to a document
Exercise
Headings
Exercise
Introducing HTML layout commands
Line Breaks
Exercise
Horizontal rules
Exercise
Address format
Exercise
Paragraphs
Exercise
Introducing HTML format commands
Boldface
Exercise
Italic
Exercise
Emphasis
Exercise
Keyboard text
Exercise
Blink
Exercise
Short Citation
Exercise
Source Code
Exercise
Definition
Sample text
Exercise
Strong emphasis
Exercise
Typewriter text
Exercise
Variable
Exercise
Consider the following when using text formatting
SECTION 2
What’s covered in this section?
Linking inside and out
What exactly can I link to?
URLs?
How are links structured?
Local files
Exercise
Internal links - moving around a document using jumps
Exercise
Returning to the top of page
Exercise
Links to other documents
Exercise
Heading home
Linking to other Internet resources
Exercise
More about headers
Creating a base URL for your document
Exercise
Creating a base font for your document
Exercises:
Changing your font
Exercises:
SECTION 3
What’s covered in this section?
Adding graphics to your page
GIF and JPEG formats
JPEG
GIF
So which is better?
Inserting graphics to an HTML document
Exercise
Providing an alternate to the graphic
Exercise
Wrapping text around the graphic
Exercise
Graphic links
Exercise
Making transparent GIFs using Paint Shop Pro
Exercise
Sizing an image
Exercise
Changing the border of a linked graphic
Exercise
Using graphics libraries
Exercises
Indenting your paragraphs trick
Exercise
Graphics can cause problems
Changing your background color
The background color
Exercise
Using an image instead
Exercise
SECTION 4
What’s covered in this section?
Not on your keyboard you say... Producing special characters
Exercise
Commenting your code makes for easier maintenance
Exercise:
Lists, why not organize your thoughts?
Numbered lists
Exercise
Unordered lists
Exercise
Definition lists
Exercise
Menu lists
Short/Directory lists
Exercise
Nesting lists
Exercise
Preformatted text
Exercise
More preformatted text
Exercise
Quotations
Exercise
SECTION 5
What’s covered in this section?
Subscripts and superscripts
Exercise
Tables
Exercise
Exercise
Exercise
Exercise
Exercise
Exercise
Exercise
Exercise
Exercise
Exercise
Exercise
Storyboarding
Style
Structure
Page Layout
Graphics
Code layout
URLs
HTML
General
How about a hand? Resources on the net can help you out
Authoring programs can make your job easier
Graphics archives
Help in the newsgroups
Page authoring groups
Web browser groups
Web server groups
Others’ Web pages
Style guides
Useful URLs, etc.
Style Guides
Newsgroups
Icons
Background images
Web color utilities
HTML design pages, more info!
Appendix A: Loading Local Documents Into Netscape Navigator
Appendix B: HTML Tags
Document Structure
Document Headings
Text Formatting
Font
Layout
Links
Graphics
Lists
Tables
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:
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.
What’s covered in this section?
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.
How does a user get information from the Web?
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:
Lynx is one of the original web browsers. This web browser, incapable of displaying graphics, makes use of different character attributes to display its information in a meaningful way. For example, bullets exist as *’s and links to other resources are boldfaced.
This browser, although primitive, is still useful for some text based operating systems such as DOS, and terminals running a UNIX command line. This browser is particularly useful if you have a slow network connection and no time to wait for the graphics to download.
Mosaic is a graphical Web browser developed by the NCSA (National Center for Supercomputing Applications). This browser has all the advantages of graphical browsers in that it can display different fonts, text attributes, colors, and inline graphics.
Netscape is a graphical Web browser which was actually developed by the same person, Marc Andreesen, but this time under a private company known as Netscape Communications. This browser offers many advantages over other Web browsers in that it allows the user to browse documents which have not fully been downloaded and provides a better interface for capturing information and inline images.
The Internet Explorer is a graphical Web browser which is provided with Microsoft’s Plus Pack for Windows 95. Like other graphical browsers, this browser allows for display of text and inline graphics. More recent version of the Explorer actually support inline multimedia such as sound and animation without the need for helper applications.
What file formats are out there?
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.
Lets get hyper! Enter the world of 3D documents
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.
Where hypertext/hypermedia used?
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.
What is a markup language anyway?
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.
<B>This is bolded text</B>
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:
<B>This is the first line of bolded text.</B><BR>
<B>This is the second line of bolded text.</B>
However, by using nested tags, you could eliminate some of the tags required to accomplish the same task:
<B>This is the first line of bolded text.<BR>
This is the second line of bolded text.</B>
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:
<HR ALIGN=LEFT SIZE="5" WIDTH=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:
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:
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:
<HTML>
<HEAD>
<TITLE>Welcome to HTML!</TITLE>
</HEAD>
</HTML>

<HTML>
<HEAD>
<TITLE>This is the title of my document.</TITLE>
</HEAD>
</HTML>
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.
Footers are a nice addition to a document
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:
<CENTER>
<ADDRESS>
For questions or comments about my WEB Pages, please EMail
<A HREF="mailto:jhamlin@somecompany.com">jhamlin@somecompany.com.</A><BR><BR>
Jim Hamlin<BR>
Some Company Corporation<BR>
#000 - 00000 Some Address<BR>
Somewhere, B.C. Canada V6V 2J8<BR>
Tel: (604) 999-9999 Fax: (604) 888-8888<BR><BR>
I can also be reached by EMail at:
<A HREF="mailto:jhamlin@anotheraddress.net">jhamlin@anotheraddress.net</A>.<BR><BR>
Copyright © 1995 Some Company Corporation<BR><BR>
Revised: October 1, 1995<BR><BR>
<B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>
</ADDRESS>
</CENTER>

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.
<HTML>
<HEAD>
<TITLE>YourName’s Home Page</TITLE>
</HEAD>
<BODY>
My document Body<BR>
The footer is also part of the document body.<BR>
</BODY>
</HTML>
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:
<HTML>
<H1>Level One Heading</H1>
<H2>Level Two Heading</H2>
<H3>Level Three Heading</H3>
<H4>Level Four Heading</H4>
<H5>Level Five Heading</H5>
<H6>Level Six Heading</H6>
</HTML>

Recommended guidelines for using headers within printed document, also apply for electronic documents such as HTML.
The following is an example of how headers should be used:
<HTML>
<H2>Level Two Heading</H2>
<H3>Level Three Heading</H3>
<H4>Level Four Heading</H4>
Text contained within.<BR>
<H4>Level Four Heading</H4>
Text contained within.<BR>
<H3>Level Three Heading</H3>
Text contained within.<BR>
<H2>Level Two Heading</H2>
Text contained within.<BR>
</HTML>

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Hobbies</H1>
<H2>Computers</H2>
Stuff about computers.<BR>
<H2>Eating</H2>
This is what I like to eat.<BR>
<H1>Sports</H1>
<H2>Volleyball</H2>
Stuff about volleyball.<BR>
<H2>Basketball</H2>
Stuff about basketball.<BR>
</BODY>
</HTML>
Introducing HTML layout commands
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:
<HTML>
The quick brown fox jumped over the lazy dog. Hmmm. This is interesting. Once a line is full the remaining text is printed on the next line. But what if I wanted several shorter lines. I guess I could use the line break tag.<BR>
Short line number one.<BR>
Short line number two.<BR>
</HTML>

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.
<HR>
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:
|
ALIGN=(LEFT|RIGHT|CENTER) |
Change alignment |
|
NOSHADE |
Eliminate shading of horizontal bar |
|
SIZE="size" |
Number used to define vertical width. Valid values are from 1 to 7 |
|
WIDTH=(number|percent) |
Used to define the exact width in pixels or the percentage of the line that the rule is to occupy |
If you wanted to create a thicker left justified centered horizontal rule with a width of 100:
<HR ALIGN=LEFT SIZE="5" WIDTH=100>
<HTML>
<HEAD>
</HEAD>
<BODY>
This is some info<BR>
This is more info<BR>
<HR>
This is info about a different subject.<BR>
This is info about another subject.<BR>
</BODY>
</HTML>
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:
<CENTER>
<ADDRESS>
For questions or comments about my WEB Pages, please EMail
<A HREF="mailto:jhamlin@somecompany.com">jhamlin@somecompany.com.</A><BR>
<BR>
Copyright © 1995 Some Company Corporation<BR><BR>
Revised: October 1, 1995<BR><BR>
<B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>
</ADDRESS>
</CENTER>

<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
<ADDRESS>
For questions or comments about my WEB Pages, please EMail
<A HREF="mailto:yourname@somecompany.com">yourname@somecompany.com.</A><BR>
Revised: October 1, 1995<BR><BR>
<B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>
</ADDRESS>
</CENTER>
</BODY>
</HTML>
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:
<HTML>
<BODY>
What is this you may ask? What exactly are we trying to demonstrate? Why it is one of our useful tags known as the paragraph. You will notice that the paragraph tag makes a paragraph which resembles what a paragraph would look like in a printed document. A line break from the current line followed by a blank line is symbolic of the paragraph.<P>
What is this you may ask? It is the second paragraph. It is not as long though.
</BODY>
</HTML>

Introducing HTML format commands
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:
<HTML>
This is <B>bolded</B> text.
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
</HTML>
The italic tag makes the text which is enclosed within the start <I> and the </I> appear in italics.
Example:
<HTML>
The time to strike is when <I>the opportunity presents itself.</I>
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
</HTML>
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:
<HTML>
this system is <EM>fully</EM> customizable
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
</HTML>
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:
<HTML>
If you want to copy all the files from your current directory to your floppy, one way is to type:<BR>
<BR>
<KBD>COPY *.* A:\</KBD>
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
</HTML>
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>.
<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
<BLINK>Look at this text blink!</BLINK><BR>
</HTML>
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:
<HTML>
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
<BLINK>Look at this text blink!</BLINK><BR>
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>
</HTML>
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:
<HTML>
The following code is an example in C++ which demonstrates output:<BR>
<BR>
<CODE>
void main() { <BR>
cout << var1 << var2; <BR>
} <BR>
</CODE>
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
<BLINK>Look at this text blink!</BLINK><BR>
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>
Basic Source Code: <CODE>PRINT "HI"</CODE><BR>
</HTML>
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:
<HTML>
Typing an unknown command at the command prompt on an MSDOS will often result in:<BR>
<BR>
<SAMP>Bad command or file name</SAMP>
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
<BLINK>Look at this text blink!</BLINK><BR>
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>
Basic Source Code: <CODE>PRINT "HI"</CODE><BR>
Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>
</HTML>
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:
<HTML>
There was <STRONG>absolutely no</STRONG> reason to respond in that fashion.
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
<BLINK>Look at this text blink!</BLINK><BR>
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>
Basic Source Code: <CODE>PRINT "HI"</CODE><BR>
Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>
<STRONG>NO!</STRONG>, he exclaimed.<BR>
</HTML>
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:
<HTML>
If you were to redirect the output of a directory listing to the printer, the result would be: <BR>
<BR>
<TT>
Volume in drive C is MSDOS <BR>
Volume Serial Number is 12D8-3C33 <BR>
Directory of C:\ <BR>
</TT>
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
<BLINK>Look at this text blink!</BLINK><BR>
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>
Basic Source Code: <CODE>PRINT "HI"</CODE><BR>
Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>
<STRONG>NO!</STRONG>, he exclaimed.<BR>
<TT>This is monospaced text.</TT><BR>
</HTML>
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:
<HTML>
The syntax for the delete command in DOS is: <BR>
<BR>
<CODE>DEL</CODE> <VAR>filename</VAR>
</HTML>

<HTML>
This is normal text.<BR>
<B>This is boldface text</B><BR>
<I>This is italics</I><BR>
<B><I>This is bold and italics.</I></B><BR>
This is <EM>emphasized text!</EM><BR>
Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>
<BLINK>Look at this text blink!</BLINK><BR>
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>
Basic Source Code: <CODE>PRINT "HI"</CODE><BR>
Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>
<STRONG>NO!</STRONG>, he exclaimed.<BR>
<TT>This is monospaced text.</TT><BR>
To delete a file: <CODE>DEL</CODE> <VAR>filename</VAR><BR>
</HTML>
Consider the following when using text formatting
What’s covered in this section?
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://bbb.bbb.bbb:cc/ddd/ddd/ddd/eee#fff
aaaa: Data source / protocol / access method
This specifies the mechanism used to access the data which exists at the link. Recognized links include:
ftp:// Use the FTP (File Transfer Protocol) to retrieve a file.
gopher:// File system index accessed through the gopher protocol.
http:// A hypertext HTML document.
mailto:// Send email to a particular address using a predefined form generated
by the browser.
news:// Points to a USENET newsgroup or article name.
telnet:// Links to a remote system using the login arguments passed.
WAIS:// Points to a Wide Area Information Server on the Internet.
file:// Points to a locally accessible file (local disk system).
Here are some others (these are not commonly used in your documents):
https:// Hypertext Transfer Protocol
nntp:// Local Network News Transport Protocol
cid:// Content identifiers for MIME
mid:// Message identifiers for electronic mail
afs:// AFS file access
prospero:// Prospero link
x-exec:// Executable program
//bbb.bbb.bbb Domain name / node
The domain name or internet address where the resource is located. The default is the current computer.
:cc Port
The process address a Web session needs to connect with. Most of the time it is 80, which also happens to be the default. If you want to use the default, the port can be omitted.
/ddd/ddd/ddd/ Path
This represents the resource’s path on the server. This path can include directories and subdirectories.
eee Resource name
The resource name is the actual name of the object which is to be connected to.
#fff Arguments
Arguments can be used to pass parameters to a program or can be used to locate a particular spot in an HTML document.
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:
<A HREF="http://home.netscape.com/">Netscape Inc.</A>
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:
file:///drive|directory/filename
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.
The basic premise behind this exercise to get you familiar with linking pages on your local machine.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2>This is page 1</H2>
This is the content of page 1.<P>
Go to <A HREF="file:///a|page2.htm">Page 2</A>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2>This is page 2</H2>
This is the content of page 2.<P>
Go to <A HREF="file:///a|page1.htm">Page 1</A>
</BODY>
</HTML>
Internal links - moving around a document using jumps
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.
<A NAME="Subject1">This is subject 1.</A>
In order to make it possible for a user to make a jump you must provide an anchor to that point. This is also performed using the anchor tag. However this time you must provide a jump mechanism to the named point. The extension which is used to perform this is called HREF, whose syntax follows: HREF="URL". As noted earlier, a URL represents a network resource such as another page, FTP, Telnet, etc. What we want to do is connect to a web page. (The syntax of the URL is: "locationandnameofpage#nameoftext".) However, we want to connect to the name of a point on the page we are currently on. To accomplish this, simply omit the name and location of the document (or you can specify the name and location of the current document if you like typing.
J )<A HREF="#Subject1">(Subject 1)</A>
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.
The exercise will make you familiar with the naming of sections of your document and the ability to link to those sections.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2><A NAME="TOP">Linking 101</A></H2>
This is a demonstration of internal linking within a document.<BR>
This document covers a wide variety of different topics. Some of these include:<P>
<A HREF="#Intern">Internal linking</A><BR>
<A HREF="#Docs">HTML documents</A><BR>
<A HREF="#Res">Internet resources</A>
<P>
<H3><A NAME="Intern">Internal Linking</A></H3>
This is a section about internal linking.<BR>
See also:<BR>
<A HREF="#Docs">HTML documents</A><BR>
<A HREF="#TOP">Start of document</A>
<P>
<H3><A NAME="Docs">HTML documents</A></H3>
This is a section about linking HTML documents.<BR>
See also:<BR>
<A HREF="#Intern">Internal Linking</A><BR>
<A HREF="#Res">Internet Resources</A><BR>
<A HREF="#TOP">Start of document</A><BR>
<H3><A NAME="Res">Internet Resources</A></H3>
This is a section about linking Internet resources.<BR>
See also:<BR>
<A HREF="#Docs">HTML documents</A><BR>
<A HREF="#TOP">Start of document</A><BR>
</BODY>
</HTML>
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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2><A NAME="TOC">Table of Contents</A></H2><P>
<A HREF="#Topic1">Topic 1</A><BR>
<A HREF="#Topic2">Topic 2</A><BR>
<A HREF="#Topic3">Topic 3</A><BR>
<P>
<H2><A NAME="Topic1">Topic 1</A></H2>
This is text about topic 1.<BR>
<A HREF="#TOC">(TOC)</A><BR>
<P>
<H2><A NAME="Topic2">Topic 2</A></H2>
This is text about topic 2.<BR>
<A HREF="#TOC">(TOC)</A><BR>
<P>
<H2><A NAME="Topic3">Topic 3</A></H2>
This is text about topic 3.<BR>
<A HREF="#TOC">(TOC)</A><BR>
<P>
</BODY>
</HTML>

Setting up a table of contents is just one way of making your document easier to use using internal links.
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:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="title.htm">Link to title page</A><BR>
</BODY>
</HTML>

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.
<A HREF="http://home.netscape.com/">Netscape Inc.</A>
The focus of this exercise is to demonstrate the linking of particular spots within multiple documents.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2>This is page 1</H2>
This is the content of page 1.<P>
Go to <A HREF="file:///a|page2.htm#TOP">Page 2</A><BR>
Go to <A HREF="file:///a|page2.htm#impoint">point</A><BR>
</BODY>
</HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2><A NAME="TOP">This is page 2</A></H2>
This is the content of page 2.<P>
<A HREF="file:///a|page2.htm#impoint">TESTING POINT</A><BR>
a<BR>b<BR>c<BR>d<BR>e<BR>f<BR>g<BR>h<BR>i<BR>j<BR>k<BR>l<BR>
<H2><A NAME="impoint">This is page 2</A></H2>
This is the text of an important point on page 2.<P>
Go to <A HREF="file:///a|page1.htm">Page 1</A><BR>
</BODY>
</HTML>
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.
Linking to other Internet resources
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:
ftp://ftp.netscape.com/pub/
<A HREF="ftp://ftp.netscape.com/pub/">Netscape public directory</A>
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:
news: comp.infosystems.authoring.html
<A HREF="news: comp.infosystems.authoring.html">HTML Authoring News</A>
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:

<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="mailto:yourname@youraddress">Your Name</A>
</BODY>
</HTML>
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 for your document
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:
<HTML>
<HEAD>
<BASE HREF="file:///C|/Classes/HTML/">
</HEAD>
<BODY>
This page can be moved anywhere on my hard drive and it will still find the following link:<P>
<A HREF="TITLE.HTM">Title</A>
</BODY>
</HTML>

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.
<HTML>
<HEAD>
<BASE HREF="file:///a|">
</HEAD>
<BODY>
This is the main document.We will be testing base HREFs.<P>
<A HREF="page1.htm">Page 1</A><BR>
<A HREF="page2.htm">Page 2</A><BR>
</BODY>
</HTML>
Creating a base font for your document
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:
<HTML>
<HEADER>
<BASEFONT SIZE="4">
</HEADER>
<BODY>
This is a test of basefont size 4.
</BODY>
</HTML>

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.
<HTML>
<BODY>
The base font defined by Netscape is 3.<BR>
<BASEFONT SIZE="4">
Now the base font is 4.<BR>
<BASEFONT SIZE="3">
Now the base font is back to 3.<BR>
</BODY>
</HTML>

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.
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:
<HTML>
<HEAD>
<BASEFONT SIZE="4">
</HEAD>
<BODY>
This is the size of base font 4.<BR>
<FONT SIZE="6">
Now we have changed the font to 6 using the font tag.<BR>
<FONT SIZE="4">
Now the font is back to 4.
</BODY>
</HTML>

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.
<HTML>
<HEAD>
<BASEFONT SIZE="4">
</HEAD>
<BODY>
This is the size of base font 4.<BR>
<FONT SIZE="+2">
Now we have changed the font to 6 using the font tag.<BR>
<FONT SIZE="+0">
Now the font is back to 4.
</BODY>
</HTML>

What’s covered in this section?
The two most commonly supported still graphics formats are the GIF and JPEG.
The JPEG or JPG is a graphics format produced by the Joint Photographic Experts Group. This format is known for its compressed size and quality with scanned images.
The GIF, graphics interchange format, is known for it’s sharp image. A GIF can come in two formats: interlaced and non-interlaced. A GIF also supports the ability to make one of the colors in the palette a transparent color.
Interlaced GIFs
Interlaced GIFs appear as a poor resolution first and then improve in resolution until the entire image has arrived. This type of GIF is ideal if you want to provide the users of your page with a general idea of what the content of your page is before the entire page is loaded. If the browser that the user of your page uses does not support progressive display then this option will not take the intended effect; the image will be entirely loaded and then displayed.
Non-Interlaced GIFs
Non-interlaced GIFs appear on the screen in a linear fashion from the top row of pixels to the bottom row of pixels until the entire image arrives.
Transparent GIFs
Transparent GIFs are great because they give the illusion that they are blending in with the user’s display. This is accomplished by assigning one color to be transparent. When the image is received by the user’s browser, the transparent color is replaced with the color of the browser’s background. Note that this is only available if your user’s browser supports transparent colors.
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.
Inserting graphics to an HTML document
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="...".)
<IMG SRC="...">
<IMG SRC="ROCKET.GIF">
<IMG SRC="/graphics/ROCKET.GIF">
<IMG SRC="file:///C|/Classes/HTML/rocket.gif">
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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="netscape.gif"><BR>
</BODY>
</HTML>
<IMG SRC="file:///A|netscape.gif"><BR>
Providing an alternate to the graphic
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 "*":
<IMG SRC="redball.gif" ALT="*">
If you wanted to replace an image such as a logo with a text representative you could do something like this:
<IMG SRC="logo.gif" ALT="[Image]">
<IMG SRC="file:///A|netscape.gif" ALT="[IMAGE]">
Wrapping text around the graphic
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.
ALIGN=LEFT|RIGHT
<IMG SRC="logo.gif" ALT="[Image]" ALIGN=LEFT>
<IMG SRC="logo.gif" ALT="[Image]" ALIGN=RIGHT>
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="file:///A|netscape.gif" ALT="[IMAGE]" ALIGN=RIGHT>
This is line wrap 1<BR>
This is line wrap 2<BR>
</BODY>
</HTML>
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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://home.netscape.com/"><IMG SRC="netscape.gif"></A>
</BODY>
</HTML>

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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://home.netscape.com/"><IMG SRC="netscape.gif">Netscape Inc.</A>
</BODY>
</HTML>

<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="page1.htm"><IMG SRC="netscape.gif"></A>
</BODY>
</HTML>
<A HREF="page1.htm"><IMG SRC="netscape.gif">Page 1</A>
Making transparent GIFs using Paint Shop Pro
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.
Note: Paint Shop Pro and LView Pro can be found at URL:ftp://oak.oakland.edu/SimTel/win3/graphics.
Filename: psp311.zip
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:
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.
This exercise will demonstrate the definition of a transparent color and the difference between an interlaced GIF and a non-interlaced GIF.
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="int89a.gif"><BR>
</BODY>
</HTML>
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.
WIDTH=##
HEIGHT=##
<IMG SRC="logo.gif" WIDTH=20>
<IMG SRC="logo.gif" HEIGHT=30>
<IMG SRC="logo.gif" WIDTH=40 HEIGHT=35>
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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="file:///A|netscape.gif" WIDTH=40>
</BODY>
</HTML>
<IMG SRC="file:///A|netscape.gif" WIDTH=70 HEIGHT=30>
<IMG SRC="file:///A|netscape.gif" WIDTH=70 HEIGHT=30 HSPACE=25>
TEXT<BR>
<IMG SRC="file:///A|netscape.gif" WIDTH=70 HEIGHT=30>
TEXT
Changing the border of a linked graphic
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!
BORDER=##
<IMG SRC="..." BORDER=0>
<IMG SRC="..." BORDER=1>
<IMG SRC="..." BORDER=3>
<IMG SRC="..." BORDER=30>
The following example displays the Netscape logo with no border, a border of 1, and a border of 3:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="page1.htm"> <IMG SRC="file:///A|netscape.gif" BORDER=0></A>
<A HREF="page1.htm"> <IMG SRC="file:///A|netscape.gif" BORDER=1></A>
<A HREF="page1.htm"> <IMG SRC="file:///A|netscape.gif" BORDER=3></A>
</BODY>
</HTML>

<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="page1.htm"><IMG SRC="netscape.gif" BORDER=0></A>
</BODY>
</HTML>
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
Indenting your paragraphs trick
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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<IMG SRC="file:///A|indent.gif" HEIGHT=1 WIDTH=15>This is a paragraph. Look! It is indented. This is not normal for a WEB page. Sure is lucky that we can use transparent GIFs to move things around. <P>
</BODY>
</HTML>
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:
Changing your background color
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.
<BODY BGCOLOR="#rrggbb">
<BODY BGCOLOR="#FF3366"> (reddish color)
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#rrggbb">
</BODY>
</HTML>
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:
<BODY BACKGROUND="sky.jpg">
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.
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="file:///a|netscape.gif">
</BODY>
</HTML>
What’s covered in this section?
Not on your keyboard you say... Producing special characters
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:
<HTML>
A quite common character placed in documents is the copyright character.<BR>
<BR>
You can produce this character with a character entity ©<BR>
or with the numeric entity ©
</HTML>

Some other common characters include:
|
Character |
Numeric Entity |
Character Entity |
|
¼ |
¼ |
|
|
½ |
½ |
|
|
¾ |
¾ |
|
|
< |
< |
< |
|
> |
> |
> |
|
® |
® |
|
|
# |
# |
|
|
& |
& |
& |
|
/ |
/ |
|
<HTML>
<HEAD>
</HEAD>
<BODY>
The tag <HTML> is used to denote an HTML file.<BR>
© John Doe
</BODY>
</HTML>
Commenting your code makes for easier maintenance
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:
<!-- commented text enclosed within-->
<HTML>
<HEAD>
</HEAD>
<BODY>
<!-- Use a stretched single transparent pixel to simulate tab -->
The commented line does not affect the normal text.
</BODY>
</HTML>
Lists, why not organize your thoughts?
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:
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
<LI> This is the fourth item.
</OL>

<HTML>
<HEAD>
</HEAD>
<BODY>
How to make microwave popcorn:<BR>
<OL>
<LI>Get bag.
<LI>Put in microwave
<LI>Hit popcorn button
<LI>Hit start button
<LI>Once popped, remove from microwave
<LI>Open bag completely and eat
</OL>
</BODY>
</HTML>
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.
<UL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
<LI> This is the fourth item.
</UL>

<HTML>
<HEAD>
</HEAD>
<BODY>
Sports I enjoy:<BR>
<UL>
<LI>Volleyball
<LI>Wallyball
<LI>Basketball
<LI>Tennis
</UL>
</BODY>
</HTML>
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>.
<DL>
<DT> Term A
<DD> Definition of term A
<DT> Term B
<DD> Definition of term B
</DL>

<HTML>
<HEAD>
</HEAD>
<BODY>
<DL>
<DT>HTML
<DD>Hypertext Markup Language
<DT>GUI
<DD>Graphical User Interface
<DT>IP
<DD>Internet Protocol
</DL>
</BODY>
</HTML>
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.
<MENU>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
<LI> This is the fourth item.
</MENU>

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.
<DIR>
<LI> archive/
<LI> utils/
<LI> OS/
</DIR>

<HTML>
<HEAD>
</HEAD>
<BODY>
<DIR>
<LI>dos/
<LI>windows/
<LI>netscape/
<LI>utils/
</DIR>
</BODY>
</HTML>
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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Markup Languages
<UL>
<LI>SGML
<UL>
<LI>TEST
<UL>
<LI>Line1
<LI>Line2
</UL>
<LI>TEST2
</UL>
<LI>HTML
<LI>VRML
</UL>
<LI>Programming Languages
<UL>
<LI>Basic
<LI>Pascal
<LI>C++
</UL>
</BODY>
</HTML>
(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)

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:
<PRE>
Line 1<BR>
Line 2
</PRE>
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:
<HTML>
<HEAD>
</HEAD>
<BODY>
<PRE>
This is a test.
This is a test.
This is a test.
</PRE>
</BODY>
</HTML>

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

<HTML>
<HEAD>
</HEAD>
<BODY>
Line 1
Line 2
Line 3
</BODY>
</HTML>
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:
<HTML>
<HEAD>
</HEAD>
<BODY>
<XMP>
This is a test.
This is a test.<BR><BR>
This is a test.
</XMP>
This is a test<BR>
Another test.
</BODY>
</HTML>

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:
<HTML>
<HEAD>
</HEAD>
<BODY>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <BLOCKQUOTE>
This is text which is used to illustrate my point. This is text which is written by another author. Notice how it is separated from the other text.
</BLOCKQUOTE>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </BODY>
</HTML>

What’s covered in this section?
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:
<HTML>
<HEAD>
</HEAD>
<BODY>
This is normal text.<BR>
<SUB>This is subscripted text.</SUB><BR>
This is <SUB>subscripted text</SUB> and normal text.
</BODY>
</HTML>

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:
<HTML>
<HEAD>
</HEAD>
<BODY>
This is normal text.<BR>
<SUP>This is superscripted text.</SUP><BR>
This is an example of using superscript with mathematical formulas:<BR>
9<SUP>2</SUP>=81. Isn't this much better than 9^2=81?
</BODY>
</HTML>

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.
<TABLE>
.
. (table elements)
.
</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.
<TABLE>
<TR>
.
. (row elements)
.
</TR>
<TR>
.
. (row elements)
.
</TR>
</TABLE>
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>.
<TABLE>
<TR>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
If this example was enclosed within an HTML document, you would observe the following output:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

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
<TABLE BORDER=1>
Consider the example used throughout this section, adding a border of one will yield the following result:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

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:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TH></TH>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TH>Row 1</TH>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TH>Row 2</TH>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

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.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION>Title of Table</CAPTION>
<TR>
<TH></TH>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TH>Row 1</TH>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TH>Row 2</TH>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

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:
<CAPTION ALIGN=BOTTOM>Title of Table</CAPTION>
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:
<TR>
<TH>Row 1</TH>
<TD><B>Column</B> 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
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:
<TR ALIGN=CENTER>
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:
<TD ALIGN=LEFT>
<TD ALIGN=RIGHT>
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
<TR VALIGN=TOP> <TD VALIGN=TOP>
<TR VALIGN=MIDDLE> <TD VALIGN=MIDDLE>
<TR VALIGN=BOTTOM> <TD VALIGN=BOTTOM>
**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:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION>Title of Table</CAPTION>
<TR>
<TH></TH>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TH>Row 1</TH>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TH>Row 2</TH>
<TD COLSPAN=2>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
which would yield:

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:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION ALIGN=RIGHT>Title of Table</CAPTION>
<TR>
<TH></TH>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TH>Row 1</TH>
<TD ROWSPAN=2>Column 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TH>Row 2</TH>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

So far you have only seen text placed in the cells of your document. You can also place images, lists, anchors, or any combination of the above into your cell. All cell formatting applies to the item being placed in the cell. For example, horizontal alignment applied to images as well as text.
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:
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:
<H2> The Heading</H2>
This is an example of a definition list organized using the method described.
<DL>
<DT> Term 1
<DD> Description
<DT> Term 2
<DD> Description
</DL>
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.
<B>This is an example of <DFN>overlapping</B> HTML tags.</DFN>
the word overlapping is contained within both the <B> and the <DFN> tags. How does the browser format it?
You can embed an anchor within other tags such as
<H1><A HREF="test.htm">This is a header link.</A></H1>
but do not embed a tag within an anchor such as
<A HREF="test.htm"><H1>This is a header link,</H1></A>
Although this currently works, it is not included in the official HTML specifications and will most likely not work with future browsers.
How about a hand? Resources on the net can help you out
Authoring programs can make your job easier
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.
comp.infosystems.authoring.cgi
comp.infosystems.authoring.html
comp.infosystems.authoring.images
comp.infosystems.authoring.misc
comp.infosystems.browsers.mac
comp.infosystems.browsers.misc
comp.infosystems.browsers.ms-windows
comp.infosystems.browsers.x
comp.infosystems.servers.mac
comp.infosystems.servers.misc
comp.infosystems.servers.ms-windows
comp.infosystems.servers.unix
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:
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
comp.lang.perl
(see graphic section 3 of this manual)
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
Appendix A: Loading Local Documents Into Netscape Navigator
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.

|
Tag |
Name |
Description |
|
<HTML> … </HTML> |
HTML |
Denotes an HTML document |
|
<HEAD> … </HEAD> |
Head |
Denotes a document’s head |
|
<BODY> … </BODY> |
Body |
Denotes a document’s body |
|
<BASE> |
Base |
Location context for URLs contained within document |
|
<BASEFONT> |
Base Font |
Set the default font size for the document. Fonts contained within document can be relative to the base font size |
|
<!-- … --> |
Comment |
Text within comment is not displayed by browser |
|
Tag |
Name |
Description |
|
<TITLE> … </TITLE> |
Title |
Title used to label document |
|
<H1> … </H1> |
Heading 1 |
Level 1 Heading |
|
<H2> … </H2> |
Heading 2 |
Level 2 Heading |
|
<H3> … </H3> |
Heading 3 |
Level 3 Heading |
|
<H4> … </H4> |
Heading 4 |
Level 4 Heading |
|
<H5> … </H5> |
Heading 5 |
Level 5 Heading |
|
<H6> … </H6> |
Heading 6 |
Level 6 Heading |
|
Tag |
Name |
Description |
|
<B> … </B> |
Boldface |
Bolded text |
|
<BLINK> … </BLINK> |
Blink |
Blinking text (Netscape) |
|
<CITE> … </CITE> |
Short Citation |
Citation text |
|
<CODE> … </CODE> |
Source Code |
Code sample |
|
<DFN> … </DFN> |
Definition |
Emphasize a term |
|
<EM> … </EM> |
Emphasis |
Emphasized text |
|
<I> … </I> |
Italic |
Italicized text |
|
<KBD> … </KBD> |
Keyboard Text |
Text which should be typed at keyboard |
|
<SAMP> … </SAMP> |
Sample Text |
Sample text |
|
<STRONG> … </STRONG> |
Strong Emphasis |
Strong emphasized text |
|
<SUB> … </SUB> |
Subscript |
Subscript text |
|
<SUP> … </SUP> |
Superscript |
Superscript text |
|
<TT> … </TT> |
Typewriter Text |
Typewriter text |
|
<VAR> … </VAR> |
Variable |
Variable representation |
|
Tag |
Name |
Description |
|
<FONT> |
Font |
Change the font size. The size can be relative to the default font size |
|
Tag |
Name |
Description |
|
<ADDRESS> … </ADDRESS> |
Address |
Document author contact information |
|
<BLOCKQUOTE> … </BLOCKQUOTE> |
Quotation |
Indented block quotation |
|
<BR> |
Line Break |
Forced line break |
|
<HR> |
Horizontal Rule |
Draws a horizontal line across the page |
|
<P> |
Paragraph |
Break up document text into paragraphs. |
|
<PRE> … </PRE> |
Preformatted Text |
Text appears as entered in text editor. Embedded tags affect text. |
|
<XMP> … </XMP> |
Preformatted Text |
Text appears as entered in text editor. Embedded tags do not affect text. |
|
Tag |
Name |
Description |
|
<A> … </A> |
Anchor |
Link to an internet resource |
|
Tag |
Name |
Description |
|
<IMG> |
Image |
Reference to inline image |
|
Tag |
Name |
Description |
|
<LI> |
List Item |
Denotes an item in a list |
|
<OL> … </OL> |
Ordered List |
Numbered list |
|
<UL> … </UL> |
Unordered List |
Bulleted list |
|
<MENU> … </MENU> |
Menu List |
Menu list |
|
<DIR> … </DIR> |
Directory List |
Directory list |
|
<DL> … </DL> |
Definition List |
Definition list |
|
<DT> … </DT> |
Definition Term |
Term which is to be defined |
|
<DD> … </DD> |
Definition |
Definition of the term |
|
Tag |
Name |
Description |
|
<TABLE> … </TABLE> |
Table |
Denotes the use of a table |
|
<TR> … </TR> |
Table Row |
Designates a row |
|
<TD> … </TD> |
Table Data |
Designates a data element |
|
<TH> … </TH> |
Table Header |
Designates a header |
|
<CAPTION> … </CAPTION> |
Caption |
Caption for the table |