Creating Your Own Home Page

Go directly to HTML Links

Creating an HTML File

The first thing to do is to create an HTML file. Use any text editor to create a file called index.html. The suffix of html or on PCs of htm is required, It tells the Web browser (WebSurfer, Netscape, Lynx, Mosaic) that the file is a hypertext file.
An HTML document is actually only a text document that contains Tags telling the browser how to display the information.

An HTML document is composed of a single element:

that is, in turn, composed of head and body elements:

and

In its simplest form, an HTML file would contain something like: 
    <HTML>
    <HEAD>
    <TITLE>Simple HTML example</TITLE>
    </HEAD>
    <BODY>
    <H1>This is a level-one heading</H1>
    Welcome to my home page.
    <P>
    one paragraph.
    <P>
    a second paragraph.
    </BODY>
    </HTML>

This is a level-one heading

Welcome to my home page.

one paragraph.

a second paragraph.


Headers and Sub-Headers

Headers range from H1 to H6 and are coded in pairs: 

    <H1>Heading Level 1</H1>
    <H2>Heading Level 2</H2>
    <H3>Heading Level 3</H3>
    <H4>Heading Level 4</H4>
    <H5>Heading Level 5</H5>
    <H6>Heading Level 6</H6>

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Links and URLs

An "anchor" tag is used to link one document to another in HTML. The following example creates a link to the file "madusers.html": 
    HTML:   Here is a list of <A
    HREF="http://www.seidata.com/~madison/webpages/">SEI Data Users </A>
    with home pages.
    Result: Here is a list of SEI Data Users with home pages.
This tells the browser that it should display the text "SEI Data Users " as an active link, and when the user selects that link, to fetch the file "webpages.html".

Linking to a WWW site outside of Your Own is just as easy. The following creates a link to "Yahoo" an excelent WWW site. 

    HTML:   <A HREF="http://www.yahoo.com">Yahoo </A>
    Result: Yahoo

The easiest way to put URLs in your home page is to copy them out of your browser. Most browsers have some method of showing the URL of the current document. Netscape and Mosaic users will find this in the Document URL field at the top of a window; Lynx users can use the "=" command to show the information page for a document.

Graphics

If you want a picture or graphic in your home page this is how. Pictures are often in GIF format, which can be viewed on nearly any computer with a graphic display. Not all browsers support the same graphic formats so it is a good idea to stay with GIF formated grapics.

You can link to a graphic the same way you link to a site. The following code makes a link to a graphic file called "iuball.gif": 

    HTML:   <A HREF="iuball.gif">Indiana University Basketball</A>
    Result: Indiana University Basketball
Now when someone selects the "Indiana University Basketball" link, the file called "iuball.gif" is shown.

Another type of graphic linking is inline graphic. An inline graphic si displayed on the document and is not displayed in a different window. 

    HTML:   <IMG SRC="madison4.gif">
    Result:
Note that there is no ending "</IMG>" code; the IMG code stands on its own and simply shows the file or URL that is specified in the SRC section.

A picture can tell a thousand words. It can also take a thousand seconds to download. A graphics-intensive home page can slow things down, depending on your system, or the system of the person reading your home page. Large graphics may appeal to you but if you want them let the user have the option, not inline, make sure you tell them what size the graphic is so they can choose whether waiting 15 minutes to see a picture of your vacation to The Grand Canyon is worth waiting for.
Remember that not all users have a graphical browser. Using graphics can present problems to these people if you do not take measures. Fortunetly HTML probvides an option for this problem. The ALT tag within the IMG tag allows a text alternative to the graphic on a text only browser. You should include this within all graphics that you include on your page. 

    HTML:   <IMG ALT="Madison Home Page" SRC="madison4.gif">
    Result on TEXT ONLY browser: [Madison Home Page]

A Few Other Useful Tags

The following Tags are non-paired. They consist of only the tag and do not have a closing tag.

<P>

This tag is used to end paragraphs, skip lines, or force the formating of the previous lines of text as you want them.
Examples

This is pagagraph one.<P>This is Paragraph two.

This is paragraph one.

This is Paragraph two. 

This is Topic One<P>Topic Two<P>Topic three<P>
The end

This is topic One

Topic Two

Topic three

The end

<BR>

For the average user the <P> and the <BR>
are going to seem to do about the same thing.
There are differences though.

This is pagagraph one.<BR>This is Paragraph two.

This is paragraph one.
This is Paragraph two. 

This is Topic One<BR>Topic Two<BR>Topic three<BR>The end

This is topic One
Topic Two
Topic three
The end

<HR>

The Horizontal Rule Tag creates a line across the page.
This is very useful for dividing sections of your page or in focusing the readers attention upon a section of your home page.
The default appearance for this is a 3-D engraved line.

Section one

Section two

Styles

Physical Styles

<b> . . . </b>
Bold font
<i> . . . </i>
Italics
<u> . . . </u>
Underline
<tt> . . . </tt>
Typewriter font

Logical Styles

<em> . . .</em>
Emphasis
<strong> . ..</strong>
Stronger emphasis

Some HTML links

Online Homepage Creations

  • The Home Page Maker Create your own homepage online. Graphics, backgrounds, links, color, etc. great place to begin a page.
  • Homepage Creation from Inter.Net, the online homepage creator. It lets users fill in blanks (it's a form) and it will create a homepage for them to download.

General HTML

Guides and Tutorials

Different Styles

Icons, Rulers, Bars, Balls, and GIFs for a Homepage

HTML Editors

Other Tools

Server Information

HTML-Authors-Guild Member

Ron.Marriage <marriage@seidata.com>
Created 6/12/95.