Exercise: Creating a Web Page In a Text editor

Part 1: Create a Basic Page in an Editor

We'll use Notepad to edit a page on the PC, for later uploading to your web space.
  1. Open Notepad.
    1. Click on Start.
    2. Choose "Programs".
    3. Choose "Accessories".
    4. Choose "Notepad".
  2. Put in the HTML element, <HTML> at the top, </HTML> at the bottom.
  3. Inside the HTML tags, at the top, put in the HEAD element, <HEAD>, then </HEAD>.
  4. Below the HEAD element, but inside the HTML, put the BODY element, <BODY> up at the top, below </HEAD>, and </BODY> at the bottom, above </HTML>.
  5. Inside the HEAD element, put the TITLE element; between <HEAD> and </HEAD>, put <TITLE>, then </TITLE>.
  6. Your text should now look something like this:

    <HTML>
    <HEAD>
    <TITLE> </TITLE>
    </HEAD>
    <BODY>


    </BODY>
    </HTML>

  7. Give the page a title.
    Inside the <TITLE> </TITLE>, put the title you want:
    <TITLE> My Refresh Page </TITLE>
  8. Give the page a heading.
    Inside the BODY tags, put a title, and put <H2> </H2> around it.
    <H2> From the Home Page Refresher! </H2>

Part 2: Add a Link to a Graphic

You don't have to copy a graphic to your directory to use it. In fact, you can use a 'partial URL' to use a graphic that's on the Lehigh Server.
  1. We're going to link to a graphic that is at the URL:
    http://www.lehigh.edu/~inwww/work/seal.gif
  2. Before the H2 element, but AFTER the <BODY> tag, insert:
    <IMG SRC="/~inwww/work/seal.gif" ALT="Info Provider">
  3. Save your work. Choose Save from the file menu and save your text. Be sure the file name you give begins with c:\ and ends in .htm.
  4. View the page in Netscape.
    1. Go into Netscape.
    2. From the File Menu, choose "Open File In Browser".
    3. In the file name box, type in the path and name of the file, like c:\refresh.html.

Part 3: Add Links to a Help Page

We're going to add links to a page of helpful information, and to this seminar.
  1. Put a Paragraph inside the BODY tag:
    <P>
    </P>
    below the heading and above the </BODY> tag.
  2. Add a link to the Information Provider page (/~www/this_server/info_provider.html).
    Inside the Paragraph element, insert the element:
    <A HREF="/~www/this_server/info_provider.html"> Information Provider Information </A>
  3. Add a BREAK (<BR>) after this link.
  4. Add a link to the notes for this class (/~inwww/refresh/refresh.agenda.html
    <A HREF="/~inwww/refresh/refresh.agenda.html"> The Web Page Refresher Seminar </A>
  5. Save the file, and go back to Netscape and click Reload to view your changes.

Part 4: Upload the Page

The page isn't part of your web space unless you upload it!
  1. Save the file (one more time!) from exercise 5.
  2. Open SSH File Transfer Client (if you haven't got SSH, install it from the Install Software icon or from the security download page).
  3. Choose Connect from the File menu in the client; set the host to ns.cc.lehigh.edu and the login to your account name. Click Connect.
  4. When prompted, enter the account password and click Ok.
  5. In the list of directories, double-click on webspace, so that a directory of your webspace is displayed
  6. From the Operation menu, choose Upload.
  7. Select the file to upload and click the Upload button.
  8. You'll see the file added to the directory list.
  9. Close SSH by first choosing Disconnect from the File menu, then choosing Close.

Part 5: Add a Link from Your Home Page

Now you've got the page there, but if you want people to find it, you have to link it to your home page.
  1. Edit your home page, add a link to the filename.htm file.
  2. The HTML code for the link could look like the following: 
    I went to the <A HREF="filename.htm">Web Refresher.</A>.
JAH, 1996; updated February 18, 2001.