How to Set Up a Home Page
HTML-in-a-Nutshell
For links to other on-line resources related to creating HTML documents,
select Internet/WWW Home Page Design
For instructions on posting a personal home page on CSU's holly mainframe,
select Instructions for CSU Student Web-sters
For some pointers on HTML typography, see Sample HTML
Page
Basic Concepts
Home Pages and HTML
Home pages are written in hypertext markup language (HTML), a
computer language that can be read on various WWW browsers.
An HTML document consists of 1) the text that will appear on screen and 2) a series of tags or commands that specify how the text should appear. Tags (which are not seen by the user) also provide links to other documents as well as links to
and instructions for displaying graphics. Graphics are stored in separate graphics files.
A home page can consist of an unlimited number of text files or graphics files. The first or main document on a home page (on a UNIX mainframe such as CSU's holly computer) is titled index.html. Other files can have various titles, but the doc
ument name also must be followed by an .html or .htm extension in order to be read by a web browser.
- Most people draft HTML documents on a PC, then transfer them to a mainframe. However, DOS permits only three-letter extensions. If this is the case, title your main page index.htm. When you transfer your home page to the mainframe, yo
u can easily retitle the document index.html. By creating
documents with an .htm extension, you can avoid having to retitle files
later.
Tags
All HTML tags appear in pointed brackets: <...>. When inputting text, remember that all commands must be in the form of tags; HTML ignores all conventional letter and line spacing, paragraphing, indenting, etc. Tags are not case-sensitive; some
HTML writers prefer to put all tags in caps for easy reference.
Single Tags: In some cases only opening tags are used, such as these commonly used for spacing instructions:
<p> = begin a new paragraph
<br> = insert a line break (space down one line)
<hr> = insert a horizontal rule
<li> = add an item to a list of items
Paired Tags: Most tags appear in pairs. The first tag signals the beginning of an operation; the closing tag includes a slash (/) followed by the same instruction. The second tag discontinues the operation.
Paired tags are used for these most commonly used typographic instructions:
<em>..</em> = Begin, end emphasis or Italics
[Alternatively, <i>..</i>]
<strong>..</strong> =
Begin, end Strong or Boldface [Alternatively,
<b>..</b>]
<center>..</center> = Begin, end centering
<code>..</code> = Begin, end using a fixed-width
typewriter font [Alternatively, <tt> .. </tt> ]
Beginning and Ending A Document Every document begins with a standard set of tags:
<html> -- Signals that this is an HTML document.
<head> -- Indicates heading area of document, versus the body that will come later.
<title> .. </title> -- Text that will appear in the top
line above the screen. This is often a label indicating the sponsor of the
page, and should not duplicate the actual document heading. Note: An ending
</title> tag is required.
<body> -- Indicates beginning of the body text.
These begining tags are followed by the document content.
All documents should end with the following closing tags:
</body> -- End of body text. Note slash (/)
</html> -- End of HTML document. Note slash (/)
Some common problems involving tags...check for these if your document doesn't work:
- Did you use a parenthesis instead of a a pointed bracket?
- Are your brackets all closed?
- Did you remember to include the closing tag in a paired set of
instructions? In particular, check that you included a </title>
tag.
- Did you include the slash (/)?
Beginning a Document:
You can create an HTML document on any word processing program that can
eventually store its contents as an ASCII file (e.g. WordPerfect 4.2 and
above, Word or Microsoft Notepad). If this is the first or main document of
your home page, name your document index.htm Use meaningful names for all other documents, but be sure also to give them an .htm extension. Do not associate your files if your word processing program provides this feature.
To begin:
1. Type <html>
2. Type <head>
3. Type <title> followed immediately by the text of the copy to appear on the top line above the screen. Be sure to close this line with </title>
4. Type <body> (In advanced page layouts, information
about things such as the background color will go here. The default
background for most browsers is gray.)
5. Begin your document with a headline. Type <h1> to specify headline size 1. Then, type in the main head you want to appear on your document. Then, add a closing tag: </h1>.
Example: <h1>Your Headline</h1>.
There are six levels of headlines in HTML. Think through the number of lower-order subheads, footnote and other typestyles you want to use in your document. Specify the largest level for your main head, and then assign others as needed.
This is h1 -- the largest size
This is h2 -- the next largest -- a good alternative
This is h3 -- a good subhead size
This is h4 -- another subhead option
This is h5 -- a smaller size good for directional items, read-ins above major heads, other uses
This is h6 -- the smallest--best used for footnotes, etc.
You can use any combination of headlines you want at the top of your
document. Headlines can be used throughout your document and can be centered, or left or right justified. An ALIGN tag (LEFT, RIGHT or CENTER) can be placed within the headline
tag.
Example:, <h1 ALIGN=RIGHT>Your Headline</a>.
6. Type <hr> to insert a horizontal rule, if you wish to separate the head from the body text. Horizontal rules also are useful to separate major sections of a document.
7. Write all body copy.
The exact appearance of text will vary considerably depending on the user's browser (Netscape, Internet Explorer, American Online, etc.). Therefore, avoid trying to achieve specific effects based on the appearance on any one browser. The
default typeface for most browsers is Times Roman. The width of pages is a function of the user's browser and screen size.
Some tips for writing home page texts:
- Write text in short paragraphs, separated by <p> paragraph tags.
- Use <strong>/<b> boldface and <em>/<i>
italics to highlight some items, but avoid overusing them.
- Remember that HTML scales and aligns characters automatically. Thus, it is not possible to add two or three spaces between words, or to set up columns, even though these might be possible on the word processor used to create the HTML files. (It is
possible to set up columns using HTML's tables function--an advanced topic.)
- Keep it simple.
8. Include any footnote material, including acknowledgements, author, date
of production, and links back to the top of a document or to the main
document of your home page (see Links
section).
9. End your document by typing </body> </html>.
10. Save your document in your regular word processing program (as a
back-up). Also use the SAVE AS function to save it as an ASCII file. Use
the ASCII file to make subsequent corrections and to transfer your file to
the mainframe later. (See Instructions for CSU
Student Web-sters for details.)
Links
A unique capability of HTML enables users to switch to other on-line documents, and to other sections within the same document, quickly and easily. This nonsequential approach to accessing information is referred to as hypertext. In order to do s
o, it is necessary to include instructions on the location of the doucment.
Anchors are special tags imbedded in HTML documents that provide a link to other documents or to other sections of your document. Text describing the linked file appears highlighted and underlined so that users know that a link exists to an anothe
r document. The path used to access the file is imbedded in the HTML document, but not seen by the user.
The format of a link is 1) an opening tag: <A HREF="..."> 2)
which contains instructions in quotes designating the location of
desired
computer files, 3) followed by a description of the document, which will appear on the screen, and 4) a closing anchor tag </A>:
General example:<A HREF="directions to go">description</A>
Here are three common types of links, with examples:
- Link to a document on another server on the WWW:
<A HREF="http://www.domain.xxx/filepath.htm">description</A>
Example: <A HREF="http://www.colostate.edu/Depts/TJ/index.html">Journalism Home Page</A>
- Note: This is the complete URL needed to find the document on the WWW.
- Link to another document on the same computer and directory where your HTML document is located:
<A HREF="filepath.htm">description</A>
Example: <A HREF="easyhtml.htm">EasyHTML</A>
-
The document is assumed to be in the same subdirectory unless a more complete address is given.
- This type of link is used to refer users to other documents or files within your home page. (Using multiple files on your home page facilitates adding new documents, keep individual documents short for easy use, and quickens loading times.)
- Link to another section of the same document:
<A HREF="#locationname">description</A>
Example:<A HREF="#links">Links</A>-
The # indicates a location within the same document document. A special
<A
NAME=> tag is used in tandem with this kind of link at the location
where the referenced material begins, and the browser searches for
it. Note: There is no text between the opening and closing tags of a <A NAME=> tag.
Example: <A NAME="#links"></A> Try it: Links points to the following section with that title.
Some key points:
- Note the beginning and ending quotation marks within the brackets.
- The text within the quotes must be the exact pathfile to locate a document. Be sure that all spellings, capitalizations, spacing and special symbols are correct.
- A common mistake is to forget the closing tag altogether or to omit the slash (/) for closing anchor tags (</A>) .
- Anchored links can be used several ways:
- as an index at the beginning of a document to allow people to go directly to a relevant section (As used at the beginning of this document.)
- to provide an escape at the end of each document that goes back to your main page:
(Return to Hallahan Course Resources
- to permit people to go back to the top of a document:
Return to the top of HTML-in-a-Nutshell.
Advanced Text Topics
Pre-formatted Text
Use the <PRE> .. and </PRE> tags to enclose a
block of text that is to be reproduced exactly from its (pre-formatted) source, including the same line and character spacing. Pre-formatted text appears on screen in a typewritter-
like font, instead of Times Roman. Use this feature to reproduce complex text or tables when it would be too difficult or too time-consuming to specify all the tags needed for the text to appear as a regular HTML document. Preformatted text
works best with documents in portrait perspective with 80 characters or less.
The format for specifying preformatted text is
<PRE>
..copy block..
</PRE>
- Links to documents and graphics can be added within a block of pre-formatted text. Character tags (italics, bold) also can be used. Heading and paragraph tags cannot be included.
Lists
The two most commonly used types of lists are:
- Ordered, or numbered, lists, typically labeled with numbers
- Unordered, or bulleted lists, typically labeled with bullets.
Both types of lists use opening and closing tags: <OL>...</OL> for ordered lists; <UL> </UL> for unordered lists. Each element within a list has its own <LI> list item tag. (Note: the &
lt;LI> tag is one-sided and does not require a closing tag.) The
<LI> tag inserts a number or bullet and starts the next list item on a new line automatically. Don't number or bullet items in your text when using list tags.
Examples:
Numbered list
<ol>
<li> this is item one
<li> this is item two
<li> this is item three
</ol>
Unordered list
<ul>
<li> this is item one
<li> this is item two
<li> this is item three
</ul>
Tables
The TABLE function allows data to be presented in schemes of columns and
rows. The TABLE command also can be used to create a columnar effect by
omitting the borders commonly found in a table.
- Note: Although the TABLE function is valuable, it is only available on Netscape version 2.0 and higher. Thus tables are not accessible using Netscape l.x version (such as distributed with CSU's PPP dial-up software).
Here are the steps for creating a table:
- Tables begin with a <TABLE> tag ... and must be closed with a </TABLE> tag.
- Tables can be created that do not include borders. Use the BORDER
command to add a border. CELLPADDING determines how much space is between your
text and the inside cell border; the lower the number, the less space is provided.
- Use the <CAPTION> tag to put a heading or label on
your table. Captions must be closed with a </CAPTION> tag.
The headline, bolface, and italic commands can be used in tandem with the
<CAPTION> tag to create particular effects.
- To create a table, begin by determining the number of columns. Do not be concerned with column widths; HTML will adjust the widths automatically to accommodate the number of columns specified. However, for readability, use no more than about six
columns.
- Tables are constructed by inputting data by row.
To begin a new row, begin with a <TR>. TABLE ROW tag. Each data cell should then be specified using a <TD> DATA CELL tag, followed by cell text, and a </TD> closing tag. You will repeat the data cell pat
tern for each column across the table. At the end of each row, be sure to include a </TR> closing tag.
- If headings are desired in the first row of each column, use the special <TH> opening tag. The heading for each column will appear in boldface. A </TH> closing tag is also required for every column heading.
Example: <TH>Name</TH> <TH>Phone</TH>, etc.
- Repeat the same pattern of data cell entries for each row. Be sure to
include the </TR> closing tag at the end of every row.
- At the end of the table, be sure to include a </TABLE> closing tag.
To create the following table, here is the format for the tags:
Student List
| Name | Address | City | Phone |
| John Smith | 123 Main St. | Fort Collins | 499-3232 |
| Mary Smith | 457 South Blvd., | Fort Collins | 493-4747 |
etc.
<TABLE BORDER CELLPADDING=2>
<CAPTION>Student List</CAPTION>
<th>Name</th><th>Address</th><th>City</th><th><Phone</th>
</tr>
<td>John Smith</td><td>123 Main
St.</td><td>Fort Collins</td><td<499-3232</td></tr>
<td>Mary Smith</td><td>457 South Blvd.,</td><td>Fort Collins</td><td>493-4747</td>
</tr>
Electronic Mail Responses
The <MAILTO:> tag is used to provide a link to an electronic
mail box. This is useful if you want to prompt an immediate response or
wish to give users a vehicle for users to provide feedback at the end of a document or home page.
To allow for e-mail respones, use an <MAILTO:>anchor tag similar to that used to link documents, except that the location in quotes is an e-mail address, not a web page.
<A HREF="mailto:insert_email_address">name of e-mail recipient</A>.
Example:<A HREF="mailto:pr@lamar.colostate.edu"></A>.
- Note that the mail command uses a colon, not the equal sign used with anchored links.
- The example above enables users to send an e-mail to pr@CSU, a home page for public relations students and professionals. Highlight
the link in this paragraph to see a sample mail message form.
Forms
You can create a custom fill-form to ask respondents for specific
information. Fill-forms are a specialized version of an e-mail
response. For details, see one of the advanced HTML resources
available under Internet/WWW Page Design.
Graphics
Graphics can be created using a computer graphics program or by scanning photos, illustrations or textual matter.
There are two kinds of images that a Web browser can deal with: inline images and external images.
Inline images are loaded by the browser simultaneously with your HTML
document. Inline images should in the graphics format called .gif. Inline images are scaled to a specific size at the time they are scanned; images can only be displayed in that size.
External images are downloaded at the end of a link. Browsers can be
configured to handle different types of graphics files, such as
.jpg. However, if you stick with .gif format, you can't go wrong.
The <IMG> tag is used to indicate an image. Image tags are one-sided; no closing tag is needed.
Image tags have three attributes: SRC, ALT and ALIGN.
SRC indicates the SOURCE, i.e. the separate file where the image is stored. When a document is called up, the browser will retrieve the image automatically.
Example: <IMG SRC="image.gif"> represents the tag for a .gif
format file called "image."
ALIGN allows you to control how the image is aligned with the text (TOP,
MIDDLE, BOTTOM or LEFT, RIGHT). The alignment attribute always follows the source tag within the IMG tag:
Example: <IMG SRC="image.gif" ALIGN=RIGHT> or <IMG
SRC="image.gif" ALIGN=TOP>
ALT provides an alternative to the graphic for people using a text-only browser, such as lynx. Usually, text-browsers display the word [IMAGE] in lieu of graphics. The ALT attribute allows you to provide a more meaningful text alternative.
Example: <IMG SRC="image.gif" ALT="[CSU Logo]">
Do's and Don'ts in Web Page Design
DO:
- Check out other Web pages, including their source documents. (Use the VIEW button on the top toolbar of your browser to view the underlying SOURCE document for Web pages that you visit.)
- Organize documents so that users can scan for important information.
- Spell-check and proofread your document while still in the original word processing program.
- Keep your layout simple.
- Use a consistent layout throughout.
- Provide a link back to your main or index page on every document.
- Include contact information at appropriate places within your home page: names, addresses, phone numbers, e-mail addresses.
- Take maximum advantage of the hypertext capabilities of HTML by including links and mailto commands wherever appropriate.
DON'T:
- Don't overuse graphic devices, such as boldface, italics and all-caps.
- Don't use terminology specific to any one browser (click here, use the back button, etc.)
- Don't clutter the page with lots of pretty but unnecessary images.
- Don't load your main page with heavy graphics that will take a long time to load. (Users can get frustrated and will avoid accessing your page.)
- Don't organize your page from your organization's perspective; think about your users and the logic they would use in searching for information. Make it easy for them to find answers. Don't be afraid of having multiple (redundant) ways to get to par
ticular information.
- Don't use advanced HTML functions merely for their own sake. Remember that many browsers still only support basic functions. Don't incorporate design elements (such as frames or tables) that cannot be read by a majority of your users.
Acknowledgement: HTML-in-a-Nutshell is adapted, in part, from materials developed by Doris Bornhoeft at the University of North Dakota Computer Center, whose contribution is gratefully acnkowledged.
Return to HTML-in-a-Nutshell Index
Return to Hallahan Course Resources
Kirk Hallahan
October 1996