Creating a Home Page

Based on a presentation by Hope N. Tillman and Walt Howe

This workshop was designed to assist participants in learning how to create HTML (hypertext markup language) documents. In addition to the basic fundamentals of HTML, you will find templates to help you get started on a personal home page, a resume home page, a corporate home page, and a local page to link to frequently visited sites.

Content outline:

Basic overall HTML format
Headers
Commonly used tags
Lists (ordered, unordered, descriptive)
Anchors and links to item (text, graphics, other) on same page, other page on same site, or remote page
URL types
Graphics
Tables
Page examples

Basic overall HTML format

HTML head and body

Every page must start with:

<html>
and end with
</html>

Inside these tags there are two sections:

<head></head>

<body></body>

Inside the <head></head> tags you should put the title of the document inside <title> </title> tags.

<head> <title> Title goes here </title> </head>

The title appears in the window or toolbar at the top of the browser. Text and graphics following the body tags in your document will display on the page itself.

Just as you learned in algebra class, you have to be careful about nesting correctly. This is the source of many simple but frustrating errors.

Nesting is the inserting of pairs of tags within other pairs of tags. It is important to keep the tags in the correct order, or the file will be read incorrectly. The ending tags must be included in the reverse order of the beginning tags

For instance, follow the model of

<tag1> <tag2> <tag3> </tag3> </tag2> <tag1>

See the following example. The first line shows the HTML coding, while the second line shows what is seen on a web page:

<blockquote> <b> <i> Nesting </i> </b> is important. </blockquote>

Nesting is important.

Headers

There are six commonly used header tags to control the size of headlines. On the left is the HTML code, and the resulting header that gets displayed is on the right.

<h1> Heading 1 size</h1>
Heading 1 size

<h2> Heading 2 size</h2>
Heading 2 size

<h3> Heading 3 size</h3>
Heading 3 size

<h4> Heading 4 size</h4>
Heading 4 size

<h5> Heading 5 size</h5>
Heading 5 size

<h6> Heading 6 size</h6>
Heading 6 size

Commonly used tags

The NCSA Primer is a good place to further explore commonly used tags that can enhance the presentation of your page. We've included some basic ones here, with the HTML followed by an example of how it looks on the page.

You can use physical or logical tags for emphasis.

Physical:

<i>italics</i> italics, <b>bold</b> bold

Logical:

<cite> cite </cite> cite,
<strong> strong </strong> strong,
<em> emphasis </em> emphasis

The ampersand (&) and semicolon (;) are used to create special characters:

© displays ©
" displays "

Some characters have special meanings in HTML and need special treatment:

&    displays    &
<    displays    <
>    displays    >

Here's a full list of special characters supported in HTML 2.0.

Individual browsers may support specific tags in different ways. It is a good idea to view your page with different browsers to see how your tags are translated.

HTML flows all text together eliminating line spaces and paragraph breaks unless tags are inserted. To maintain paragraphing and create lists, special tags are used:

paragraph <p> </p>
line break <br>

Lists (ordered, unordered, descriptive)

Here's an unordered list followed by the HTML code to create it:

<ul>
<li>a
<li>b
<li>c
</ul>

Here's an ordered (numbered) list and it's HTML code:

line one
line two
line three

<ol>
<li>line one
<li>line two
<li>line three
</ol>

A descriptive list and its HTML code:

topic 1

definition

topic 2
definition 2

descriptive: <dl>
<dt>topic 1
<dd>definition
<dt>topic 2
<dd>definition 2
</dl>

Anchors and links

You will likely want to make a hypertext link to other pages. This is what makes the web so powerful and fun! To do so, you need to use the following tag:

<a href=" "> </A>

The item or page that you want to link to must be within the quotes. The part of your text that you want underlined and linked should be within the tags.

Here's an example that links back to Walt Howe's Home Page. In HTML:

Here is a link to <a href="http://www.walthowe.com"> Walt Howe's Home Page.</a>

On your page it looks like:

Here is a link to Walt Howe's Home Page.

Links may point to items on the same page, to other pages on same site, or to a remote page. Here we've put links within a descriptive list:

<dt>Link to another local hypertext file in the same directory
<dd><a href="gg0.html">Graphics Guides</a>

<dt>Link to a remote file
<dd><a href="http://math.boisestate.edu/gas/"> Gilbert & Sullivan</a>

<dt>Link to a local graphic in the same directory
<dd><a href="images/wizhead.gif">Wizard Head</a>

<dt>Display a local graphic in the same directory
<dd><img src="images/wizhead.gif" alt="Wiz"></a>

<dt>Graphic used as a link
<dd><a href="/" ><img src="images/wizhead.gif" alt="Wiz"></a>

<dt>Link to a point in the same HTML file
<dd><a href="#point3">Third section</a>

<dt>And what's being pointed to in the same HTML file
<dd><a name="point3">Section 3</a>

</dl>

On your web page you will see:

Link to another local hypertext file in the same directory
Graphics Guides
Link to a remote file:
Gilbert & Sullivan
Link to a local graphic in same directory
Wizard Head
Display a local graphic in the same directory

Graphic used as a link

Link to a point in the same HTML file
Third section
and what's being pointed to in the same HTML file
Section 3

URL Types

Uniform Resource Locator	Explanation
http://www.eff.org/	Find the Electronic Frontier Foundation site on the World Wide Web.
http://mole.uvm.edu/whale/TableOfContents.html	Use http to connect to the University of Vermont World Wide Web server to find images, articles, and discussions about the discovery of bones of a whale in the fields of rural Vermont. Look in the whale directory to find the whale home page (whalehome.html).
http://www.walthowe.com/	Walt Howe's Internet Training Center begins at "index.html" (which, as a default, does not need to be listed).
http://www.hopetillman.com/findqual.html	Hope Tillman's presentation on Evaluating Quality on the Net is accessible from the "findqual.html" file. This Internet provider identifies user accounts as subdirectories of its /users directory, hence /users/hope/.
ftp://rtfm.mit.edu/pub/usenet/news.answers	Use ftp to connect to the rtfm site at MIT (rtfm.mit.edu). Follow the path to the pub directory, then the usenet directory, and then the news.answers directory to get to the Usenet frequently asked questions (FAQ) lists.
gopher:// info3.scs.unr.edu:8117/7-t1%20%20?sla	Use simple gopher to connect to Veronica server and search the word "sla" in gopherspace. There are a number of Veronica servers from which to choose; Veronicas have different schedules for updating and so you will not get identical results. Also many are being decommissioned, and the results tend to be to very old information.
telnet://02157@martini.eecs.umich.edu:3000	Go to the Geographic Name Server at the University of Michigan and be prompted to enter 02157 or Wellesley (or any zip code or city name) to get geographic information. Record includes: name, elevation, latitude, longitude, population, telephone area code, and zip codes.
news:soc.libraries.talk	Where supported on your site, this format will retrieve a list of articles currently available for the Usenet newsgroup, soc.libraries.talk, The soc hierarchy is for groups with a social focus. In March 1996 the soc.libraries.talk discussion includes postings on Communications Decency Act and libraries, use of DIALOG via TCP/IP, among other topics.
mailto:walt@walthowe.com	For those web browsers configured to send mail, this URL will bring up a message screen for you to send a message to the email address designated after the mailto, in this case to Walt Howe.

Graphics

This section describes when and how to use graphics on a page.

The majority of graphical web browsers in use today can only view .gif and .jpg files without launching helper applications. If you ask your viewers to obtain a different helper application, you will shut out a large portion of your target audience.

Because of the amount of time they take to load, graphic files can detract from the usefulness of your page. Minimizing file size should be considered when incorporating graphics in your page. Loading time depends on the size of the file, not the size of the picture.

Compare the size of your file in .gif or .jpg format and select the smallest file size providing the best picture size and quality on the screen.

Picking between .gif and .jpg:

Use .gif with solid colors and sharp contrasts or lines between solid color areas. .gif is best used with cartoons, clip art, text diagrams and charts.
Use .jpg (or jpeg) with photographic quality, continuous blends of color ranges. .jpg tends to blur sharp edges or contrasts.

Topics for further exploration include:

inline images
transparent gifs
dithering
adjustable quality of jpgs
moving on to animation and vrml

We recommend Lynda Weismann's book, Designing Web Graphics: How to Prepare Images and Media for the Web. Indianapolis, Indiana, New Riders Publishing, 1996, and suggest you take a look at her website, http://www.lynda. com.

Graphic Software

LView Pro is a very good graphic manipulation package for Windows available via the web, with versions for Windows 95 and Win 3.1

Tables

Here's an example of the use of table formatting on a web page.

Although we will not cover tables in this tutorial, many of the references mentioned at the beginning of this workshop such as the NCSA Primer offer details on creating them.
Not all browsers support tables, but they can be very useful in positioning text and graphics on a page.

Page examples

A simple first home page
A home page showing some ways to organize
A home page with graphics
A home page using table formatting
For a library kiosk or individual to use as a starting home page
A resume home page

When you come across a page you like on the web, take a look at their source code to see how it was created. To do this, click VIEW on your toolbar and SOURCE in the pulldown menu.

Play, have fun, and learn!

Original Presentation:

Computers in Libraries '96, Arlington, Virginia, 1 March 1996.

Hope N. Tillman, Director of Libraries, Babson College, and
Walt Howe, Manager Web Publishing Specialist, Delphi Forums Corp.

Date last updated: August 13, 1998
Comments to Walt Howe or Hope Tillman.