Launching a Web Page

(http://www.umich.edu/~lsarth/WebLaunch.html)

To make a personal home page, you should:

  1. Create a text-only file with HTML (HyperText Mark-up Language) tags interpretable by Netscape.
    Use any word processor, saving your file as Text Only, or use an HTML editor such as PageSpinner (Mac), HTMLed (Windows), or Claris Home Page (both). See below for a sample file, including its minimal HTML tags.
  2. Feel free to include tags that make links to other web pages.
    Links use "anchors" in this form:
    <a href="exact_file_location_">[some linking words or image]</a>, e.g.,
    <a href="http://www.umich.edu/~lsarth/WebLaunch.html">Launching a Web Page</a>
  3. For ease of website maintenance, whenever possible, use relative rather than absolute addresses.
    Relative to location of this document: <img src="alice.GIF"> or <img src="pics/alice.GIF">
    Relative to this document's server: <img src="/~lsarth/pics/alice.GIF">
    Absolute: <img src="http://www.umich.edu/~lsarth/pics/alice.GIF">
  4. Test your evolving file using Netscape's File|Open File... command.
  5. Save your first HTML file as index.html.
  6. Upload your file to a web server's file storage area.
    At U-M, index.html should be stored in /afs/umich.edu/user/<first letter of your uniqname>/<second letter of your uniqname>/<your uniqname>/Public/html/.
    On the web, that page can be accessed at http://www-personal.umich.edu/~<your uniqname>. The tilde (~) is really code that tells the web server to look for a file called index.html in an html folder inside a Public folder in the storage area of the person whose uniqname follows the tilde. If instead you named your file fred, you would still put it in your Public/html folder but it would be found directly by a Netscape user only by accessing http://www-personal.umich.edu/~<your uniqname>/fred.

Things to remember about HTML as opposed to your word processor:

  1. Some tags (like <center>) require closing (like </center>); others (like line break, <br>) do not.
  2. Carriage returns are ignored by Netscape; instead, <p> makes a paragraph.
  3. Netscape interprets any number of consecutive tabs as a single space.
  4. Netscape interprets any number of consecutive spaces as a single space.
  5. HTML tags at NOT cAseSensiTIVe, but the file names and URLs inside the quotation marks in those tags are case sensitive.
  6. Your user sets the size of the viewing window, not you.

To learn more about html authoring, consult ESR's Sample Web Page.

To get more step-by-step instructions for putting up your own home page at U-M, read how-to-homepage.

To evolve your own web design, either go out on the web, find sites you like, and view (or even copy and adapt) the source code behind them, or ask someone nice.

Have fun!

HTMLSample.html
Every HTML file should contain certain standard HTML tags. The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags). Each file consists of head and body text. The head contains at least the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. The required elements are included in this sample file:

<html>
<head>
<title>A Simple Sample HTML File</title>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<p>Welcome to the word of HTML. This is the first paragraph. While it is short, it is still a paragraph.
<p>Here is a second pargraph. Notice that a line was skipped before this paragraph. The paragraph tag causes that. To go to a new line without skipping a space
<br>use the break tag.
<br>
<img src="alice.GIF">
<br>The picture above was called by using the image source tag.
<br>Welcome to the World Wide Wonderland!
</body>
</html>

View this sample file in in your browser.

Return to the top of this document.