|
The Industrial-Organizational
Psychologist
Note: You may find it helpful to print this document when you are ready to create
your Web page.
There are four steps to creating a Web page:
- Find an authoring tool.
- Understand basic HTML markup tags.
- Learn about HTML text formatting tags.
- Master the art of linking.
To compose a document using HTML syntax, you can use either a specialized editor or a
plain text editor (like the Windows Notepad). HTML editors range in power and complexity.
You can find lots of HTML editors for all platforms at Yahoo.
At the low end of the complexity scale, there are applications that merely require you to
"fill in the blanks." If you read through this tutorial and decide that any
contact with HTML will give you hives (a hopefully unlikely event), try the Instant Home Page site or take a look at
the Web Wizard, either of which
will considerably ease the pain of creating your home page.
This tutorial demonstrates HTML syntax using a plain text editor and the Microsoft Word Internet Assistant
(MWIA for short). For your convenience, instructions in this tutorial will give examples
for both tools. Ready? Let's go!
Starting Microsoft Word Internet Assistant
To start MWIA, you must first start Microsoft Word. To do so, double click on the Word
icon in the Program Manager:
Next, open the File menu and select New. You will see the window below.
Select HTML and click on the OK button.
If everything has worked properly, you will see the following toolbars:
Most of the buttons will look familiar, but there are some important differences. We'll
look at the buttons individually as we discuss their functions below.
HTML stands for HyperText Markup Language. The idea behind HTML was to create a
system for authors to format a document without needing to know anything about the type of
computer used to view it. Computer-specific viewing programs like Netscape for Windows or
IBM WebExplorer for OS/2 translate and format the document so you can see it on the
particular machine you're using.
It is very easy to master the concept behind HTML, because you've probably seen
something very similar before. If you've used any version of WordPerfect, you'll recall
using the REVEAL CODES feature. Most formatting of your document was turned on and off
using tags, or formatting commands. For example, the sentence "She did what?"
appeared in the REVEAL CODES window as:
"She did <ITALIC>what?<italic>"
The first <ITALIC> turned on the italics feature, while the second <italic>
turned it off. HTML documents are formatted entirely according to this principle. All HTML
tags are turned on by a command name framed by less-than (<) and greater-than (>)
symbols. HTML tags are turned off by preceding the command name with a forward slash (/)
and enclosing the slash and command name with less-than and greater-than symbols. For
example, <COMMAND> turns a command on, while </COMMAND> turns it off. That's
all there is to it!
If you are using a plain text editor, all tags must be typed manually manually. For
MWIA users, applying various tags is usually as easy as clicking on a button. The MWIA
procedure for fomatting your home page follows the descriptions of the tags below.
Structural Tags
The basic HTML document is built around three HTML tags: <HTML>, <HEAD>,
and <BODY>.
The tags <HTML> and </HTML> mark the beginning and end of the entire
document. They identify the document as valid for your web browser to read and display for
you. MWIA automatically puts these tags in the document.
Most HTML documents contain heading information that is not displayed in the main
viewing window. The <HEAD> and </HEAD> tags mark the beginning and end of the
heading information, respectively. The only worthwhile heading information is the title of
the Web page, which is usually displayed in the title bar of your web browser. You specify
the title by putting it between the <TITLE> and </TITLE> tags. Remember that
the title will not appear in the main viewing window. Therefore, you will have to
specify it again, as we will see later.
 MWIA users click on
this button to add a title to the document.
The information you will have people view is contained by the <BODY> and
</BODY> tags. MWIA users don't need to specify these tags. All they need to do is
input what they like into the main editing window.
A Very Simple HTML Document
For example, this is a bare-bones HTML document:
<HTML>
<HEAD>
<TITLE>
Coca-Cola
</TITLE>
</HEAD>
<BODY>
In Chinese, Coca-Cola means Bite the Wax Tadpole
</BODY>
</HTML>
Click here to see how it would appear.
There are a number of ways to format your text. Our discussion of formatting tags is
broken up into Heading Tags, Character Formatting Tags, Text Flow Tags, and List
Tags.
Heading tags are similar to APA headings, only they're a lot more obvious. They are
numbered from 1 to 6, from most- to least-formidable. Recall that the title of the HTML
document as specified with <TITLE> does not appear in the main viewing window.
Typically, you would enclose the main title to appear in the viewing window as a Heading 1
tag.
Here are examples of formatting using the heading tags, and how they will appear:
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
 In MWIA, you select
headings in the Styles Box. Highlight the text you wish to turn into a heading, press the
arrow, and select the appropriate heading.
There are three character formatting tags that work exactly as they do in normal word
processors: bold, italic, and underline. Here are examples of the tags and how they will
appear:
I like my steak sauce <B>bold!</B>
Half of "The Catcher in the Rye" is written in <I>italics.</I>
I like my steak sauce <U>underlined!</U>
I like my steak sauce bold!
Half of "The Catcher in the Rye" is written in italics.
I like my steak sauce underlined!
Note that you may get unpredictable results if you mix these tags.
 In
MWIA, these buttons work the way you'd expect them to. However, the keyboard shortcuts
(<CTRL>+<B> for bold, for example) may not, so avoid the keyboard shortcuts
when editing HTML files.
Preformatted Text (Teletype Text)
Another type of formatting tag is the Preformatted Text tag, which often appears as a
Courier font. You'll notice I've used it liberally here to simulate what you'd type in.
The benefit of Preformatted Text is that it uses a fixed-width font, with the result that
you can directly control how your text will display using spaces and tabs. A similar tag
is called the Teletype Text tag. It appears that both return the same result:
<PRE>This is the preformatted text tag</PRE>
<TT>This is the teletype text tag</TT>
This is the preformatted text tag
This is the teletype text tag
 Both
Preformatted and Teletype text can be selected in the Styles list box.
There are three commonly used HTML text flow tags.
The <P> tag signals the end of a paragraph of text. It is the equivalent of
hitting the <ENTER> key in your word processor. Note that the only place you need to
use it is at the end of a paragraph of normal text (such as this one). It is not necessary
in headings. The <P> tag usually causes the web browser to add a little space before
starting the next paragraph.
The <BR> tag is similar to the <P> tag, but it does not cause the web
browser to add any space before the next paragraph. As a result, it's useful for
formatting your mailing address:
Write me at:<P>
R. Jason Weiss<BR>
Psychology Department<BR>
University of Nebraska at Omaha<BR>
Omaha, NE 68182-0274<P>
Comes out as...
Write me at:
R. Jason Weiss
Psychology Department
University of Nebraska at Omaha
Omaha, NE 68182-0274
 In MWIA, you
don't ever need to insert the <P> tag because it is part of the Normal text style.
To accomplish a <BR> tag, simply hit <SHIFT>+<ENTER> instead of
<ENTER> at the end of a line.
Finally, the <HR> tag inserts a horizontal line into your document. It is useful
for separating parts of a document.
<HR>
Results in:
Handy, isn't it?
 MWIA
provides the handy Horizontal Rule button. If you don't want to take your hands off the
keyboard, you can also use the Insert menu.
Note that none of the text flow tags has a matching tag to turn it off. In other words,
you do not need to type in </P> </BR>, or </HR>.
There are two kinds of HTML list tags that you will find useful. Numbered list tags
allow you to create a numbered (or ordered) list. To designate text as belonging in a
numbered list, you enclose it in the <OL> and </OL> tags and precede each item
in the list with the <LI> tag.
For example:
Things I would give up for tickets to a Montreal Canadiens hockey game:<P>
<OL>
<LI>One of my less-useful toes.
<LI>Many of my cousins.
<LI>Asian food (but only for a week).
</OL>
Results in...
Things I would give up for tickets to a Montreal Canadiens hockey game:
- One of my less-useful toes.
- Many of my cousins.
- Asian food (but only for a week).
The unnumbered list tags <UL> and </UL> work in an identical manner, only
they result in a bulleted list:
Things I would give up for tickets to a Montreal Canadiens hockey game:<P>
<UL>
<LI>One of my less-useful toes.
<LI>Many of my cousins.
<LI>Asian food (but only for a week).
</UL>
Results in...
Things I would give up for tickets to a Montreal Canadiens hockey game:
- One of my less-useful toes.
- Many of my cousins.
- Asian food (but only for a week).
 MWIA provides these
very obvious buttons to help you with these list styles. Unfortunately, they do not click
off. To stop creating lists, select the Normal,P style in the Styles list box as
illustrated above.
Linking to another document
It is easy to provide a link to another document (although arduous if you're going to
fill your home page with links). To do so, you use the <A> tag as follows:
1. Type <A HREF = "xxx"> where xxx is the URL, or address to which you
will jump. For example, if we wanted to start a link to my home page, we would type the
following:
<A HREF = "http://cmit.unomaha.edu/cmit/jay_hmpg.htm">
2. Type in the text that will indicate the link to the reader, e.g.:
Jason's home page
3. Close the tag with </A>
</A>
Putting it all together, here's how you'd type a link to my page, and how it would
appear:
<A HREF = "http://cmit.unomaha.edu/cmit/jay_hmpg.htm">Jason's home page</A>
Jason's home page
Of course, it's much easier in MWIA. First you select the text that indicates the link
to the reader.
 Next,
you press the Link button.
 ...Which brings up
this window, in which you type the address to which you are linking (or choose a
previously used address).
...And then you're done!
Note the mailto: link at the bottom of the graphic above. This link allows you to have
people click on your address and send e-mail to the specified address. For example:
Send me e-mail and tell me if this tutorial has
helped you create your home page!
This is somewhat more complex. First, you have to find some text to which your
prospective readers would probably like to jump. Let's say it's the "Linking within a
document" header above. You would then give that tag a name as follows:
<H3><A NAME = "LinkingWithin">Linking within a document</A></H3>
(Note that I left the Heading 3 tags in this example to add realism.)
To create a link to this header, you follow the same procedure as outlined above for
linking to another document, except that the quotes would contain only a pound sign and
the name of the link:
<A HREF = "#LinkingWithin">Jump ahead to learn about linking!</A>
This results in the following...
Jump ahead to learn about linking!
 In MWIA, you must
first press the button shown at left to create a bookmark for the text that is the target
of the jump. You can then make a link to that bookmark as
illustrated above.
Linking images into your document
The HTML tag to insert a graphics file into your document is <IMG SRC =
"URL"> where URL is the location of the file (if it is not in the same
directory as your home page) and the name of the file.
For example,
<IMG SRC = "imagebut.jpg">
shows the viewer the MWIA button to press to specify a link to an image:
If the file was located at the CMIT web site (which it isn't), I'd have to specify
<IMG SRC = "cmit.unomaha.edu/cmit/imagebut.jpg">
You can specify the alignment of text with the image:
<IMG ALIGN = TOP SRC = "imagebut.jpg"> Top alignment
<IMG ALIGN = MIDDLE SRC = "imagebut.jpg"> Middle alignment
<IMG ALIGN = BOTTOM SRC = "imagebut.jpg"> Bottom alignment
...result in...
Top alignment
Middle
alignment
Bottom
alignment
Note that the alignment may not work with all viewers.
That's all you need to know about creating the home page itself! Congratulations on
surviving the tutorial!
Click here to go back to the top of this document.
TIP homepage
|