Preparing a Home for Your Home Page

Your home page needs a home. The specially formatted file -- which you must name index.html -- must be placed in public_html, a sub-directory of your home directory. To create the public_html directory under your home directory, type the following at a shell prompt:
    
    mkdir $HOME/public_html
    
So, where do I find a shell prompt? That's easy to answer. If you have a Shell Account, login and select U from the initial menu. If you have an IP Account, use your telnet application to login. Look for the izzy6%. That's the shell prompt.

Making Your Home Page Accessible to the World at Large

After you've created public_html, the directory and the files it contains must be made accessible to the outside world. To do this type the following two commands at a shell prompt:
    
    chmod 751 $HOME
    chmod 755 $HOME/public_html
    
This makes your home directory and its public_html directory accessible. Now, the files in your public_html directory need to be made accessible as well. Any time you put a new file into your public_html directory that you want to be available to others you have to change its mode. To do this type the following command at a shell prompt:
    
    chmod go=r $HOME/public_html/*
    
This makes all the files in your public_html directory read-only by everyone but you. You'll still be able to write (i.e. change) your files.

Your Home Page Address

You need to tell people where to find your home page. They need its URL or Web address. The Web address of a personal home page on Isthmus is:

    http://www.izzy.net/~your_login_ID

For example, if your login ID is corky, the Web address of your home page is:

    http://www.izzy.net/~corky

This only works if your home page is named index.html. If you give it any other name, you then must append that name in the Web address. For example:

    http://www.izzy.net/~corky/othername.html

Publicizing Your Home Page

Isthmus will maintain a pick list of personal home pages so that your work will be known to the Isthmus user community and to anyone else that happens by the Isthmus home page. Eventually, if your work is of note, it will be pointed to from many other places on the Internet.

To get you started send an email to the WebMaster giving the address of your home page and the wording that you'd like to appear on our pick list. We'll turn the wording into a hotspot so that your creation will be readily accessible.

If you have problems or questions about any of the above instructions send a note to the WebMaster.

With the preliminaries out of the way, let's experiment by creating a demo home page.

A Demo Home Page

Writing a home page is not nearly as difficult as you might expect. If you're new to the process, then this section is for you. If you've been around the block a few times, then you might want to skip this section and just take a look at the references. They'll help to expand your HTML knowledge.

The home page we're about to do will be quite simple in content and presentation. The text should ring familiar. Simple or not, working through this demo will introduce you to the basics of home page construction.

At this stage of your HTML authoring career you'll need nothing more than a simple text editor to do very sophisticated things. Later, you might want to explore the shareware and commercial tools that are available to make the HTML authoring task easier.

An HTML document is composed of text and graphics -- the home page data -- and HTML elements telling the Web browser how to format, position and otherwise act on your data. Your Web pages should start and end with standard HTML boilerplate. It's a good idea to include these statements in all of your documents even though you'll find that many Web browsers do just fine without them.

Your document should start with:

    <HTML>
and end with:
    </HTML>

You'll find that many - not all - of the formatting elements are paired and surround the text they're to affect. The pair of opening and closing elements differ only slightly. Note above that the element that says "this is the end of the HTML document" has that extra "/" in it. Invariably the closing element differs from the opening element only by the slash. Don't forget it, or you'll get an unintended effect.

The document is, in turn, composed of a head element:

    <HEAD>
      .
      (Just a title)
      .
    </HEAD>

and a body element:

    <BODY>
      .
      (The body of your document)
      .
    </BODY>

Within the head element you place title elements and a title which will be displayed in the browser's title line and which will serve as your document's bookmark should anyone ever want to return to your home page. For example:

    <TITLE>
    Mary Had A Little Lamb
    </TITLE>

Other HTML elements are valid within the head element, but their use is beyond the scope of this introduction.

What We Have So Far

Consider the elements in bold to be the standard HTML boilerplate. You'll be including these statments in all of your documents.

    <HTML>

    <HEAD>
    <TITLE>

    Mary Had a Little Lamb
    </TITLE>
    </HEAD>

    <BODY>
    Text of Nursery Rhyme
    </BODY>

    </HTML>

Formatting the Body of the Document

We'll use the nursery rhyme Mary Had a Little Lamb as our reference document. We'll do two verses and, as you'll see, take some liberties with the rhyme. My apologies to Mother Goose.

If you follow the construction of this simple home page you'll be creating your own masterpiece in no time!

    Headings

    A heading is used to title a section of your document. Heading sizes range from 1 to 6. The HTML heading elements surround the heading text. For example:

      <h1> . . . </h1>

      Largest Heading

      <h6> . . . </h6>
      Smallest Heading
    and all those in between. Some browsers allow the user to set the size and font of the individual header elements, so as an author, you don't necessarily have complete control over the appearance of your document.

    Text Emphasis

    Text emphasis or physical style is bolding, underlining and italicizing. Each is accomplished as follows:

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

    If the text "Underline" above is not underlined your browser doesn't do underlining. Not all browsers do.

    The Paragraph Mark, the Line Break and Horizontal Rule

    You can input the text of your document any way you please. You can run out the text in long lines or put some words on a line by themselves (which you'll find yourself doing at times). The browser will take care to properly format each paragraph to fit the display. You need only tell it when the paragraph ends, or where you might like a line break within the paragraph.

    This brings us to the last three HTML elements you need for this introduction to home page construction. The paragraph separator, the line break and the horizontal rule:

      <p>
      marks the end of a paragraph
      <br>
      starts a new line.
      <hr>
      draws an engraved horizontal line.

    The horizontal rule draws a horizontal line the width of the browser window and is used to set off separate sections of your document. These three elements are used singly. That is, HTML doesn't define a closing element for them.

    Next we'll look at adding an image to our demo page and a reference to an outside information source. Then, with all the elements defined we'll construct the final home page.

    Images For Your Home Page

    Images dress up your document. In general, any GIF file you care to use can be included on your home page. The only recommendation I would make is to neither include too many images nor make them too large. Loading images slows things down, especially in the older versions of Mosaic. You need to walk a fine line between making the page attractive and annoying your user. People get bored if they have to wait to long. They get mad if the wait isn't worth it!

    To include a graphic use the following HTML:

      <img src="path/file.gif">

    where path/file.gif is the fully qualified file name of the GIF you want to include. For example, we'd like a "picture" of Lisa on our home page. Lisa's picture is in a file called lisa.gif which we have in our home directory. The HTML we'll use to include this picture is:

      <img src="$HOME/lisa.gif">

    Wherever we place this bit of HTML we'll have a picture of Lisa.

    Referencing Other Documents in Your Home Page

    The last bit of HTML magic we'll learn is how to link to other sites on the World Wide Web. This is where the real power of the Web shows through. You can increase the interest and value of your home page by pulling in resources from all over the world. Don't be shy, use what's out there on your home page. There's no need to reinvent the wheel if what you want to show your users already exists elsewhere. Just link to it!

    These links are referred to as URLs or Uniform Resource Locators. They're like file names, except that they can point to documents on any machine anywhere on the Internet and they can point to things other than just documents. For example, the mailto URL connects a hotspot (one of those blue highlights) on your home page to the email system making it exceedingly easy for users to send you email. We're going to keep it simple and just learn how URLs can be used to link in other documents.

    Suppose you want to include a reference to a document called greatdoc.html on your home page. You know this document exists on a Web server called www.greatsite.com in the directory /pub/docs. To reference this document use the following URL:

      http://www.greatsite.com/pub/docs/greatdoc.html

    If all you did was place this URL in your document it would be totally invisible to someone browsing your home page. Not very useful. You need to do one more thing. You need to associate some text with the URL that the user can interact with. The text you couple with the URL is called a hotspot. It will stand out on your page as blue (often underlined) text. You do the association by using the following HTML:

      <a href="URL"> My Hotspot </a>

    This associates the text My Hotspot with the URL. The text will appear blue, a color the browser uses to denote a hotspot.

    The URL we used above is a fully qualified HTTP (Hyper Text Transport Protocol) reference. Sometimes you can use a partial or relative HTTP reference. For example, if another document you want to use exists on this same server, in the same directory you can access it by simply using the document name as shown here:

      <a href="otherdoc.html"> Another Hotspot </a>

This is It. Your First Home Page!

Don't let the seeming mess below bother you. At first it looks intimidating. On closer inspection you should actually find it quite straightforward.

We've titled the home page, titled the rhyme with a header of size 1, selected a header size of two for the verse headings, wrote Lisa in bold and lamb in italics. The first verse is input without regard to the way lines were layed out in the original rhyme. In the second verse we break the lines as Mother Goose intended. Following the rhyme, and separated from it by a horizontal rule, is a line that contains a "picture" of Lisa and a reference to one of her favorite sites on the World Wide Web.

    <HTML>

    <HEAD>
    <TITLE>

    Lisa Had a Little Lamb
    </TITLE>
    </HEAD>

    <BODY>
    <h1> Lisa Had a Little Lamb </h1>
    <h2> Verse #1: Lisa and Her Lamb </h2>
    <b> Lisa </b> had a little <i> lamb, </i> its fleece was white as snow; and everywhere that <b> Lisa </b> went the <i> lamb </i> was sure to go.
    <p>
    <h2> Verse #2: Her Lamb Goes to School! </h2>
    It followed her to school one day,
    <br>
    which was against the rule;
    <br>
    it made the children laugh and play
    <br>
    to see a <i> lamb </i> at school.
    <hr>
    Lisa <img src="isgifs/lisa.gif"> and her favorite
    <a href="http://me-www.jrc.it/recipe/indices/s_index_lamb.html"> recipes </a>
    </BODY>

    </HTML>

Take a look at our home page.

You can use the browser's copy function to lift the code from this page and paste it into Notepad. Then you can save the file and use it as a starting point for your own creation. Happy authoring!


If you're new to the Web and HTML documents, the links below should be of interest.

HTML Reference Material

More Advanced Reference Material


To add CGI's to your web site go here.

 

 

 

 

|| home || about|| services || access || domain registration ||
|| hot spots || help ||

 

Copyright 1997, 1998, 1999 Izzy Dot Net. All Rights Reserved.