creating a web page on a pc

getting started

you may find it easiest to print out these instructions and then begin working on your web page, as you will link to other pages in this exercise or you may also want to open a new browser window that you may view this page and other pages at once (in Netscape Navigator, click on "File," and drag down to "New Browser Window")

Following the steps below, create your page using HTML (HyperText Markup Language). Notepad, HTML editors (such as Hotdog, Hotmetal, Pagemill, etc.), or most word processing programs can be used (NOTE: if using a word processing program, you must save the file in "text only" format). In this exercise, we will be using Notepad, a program installed on all of the PC computers in the CCLI and which comes with most Windows 3.1 and Windows 95 equipped computers.

  • Open Notepad (click on the "Start" icon at the left-hand bottom corner of your screen, pull up to "Programs," then over to "accesories," and finally drag over to "Notepad." The application should automatically launch).

  • In the new document window, type the following:

      <html>
      <title>Working Homepage</title>
      <body>
      <h1><center>Homepage Under Construction</h1></center>
      </body>
      </html>

  • Name the document "index.htm" and save it in the "public_html" folder inside your home directory (the file name will then be: h:\public_html\index.htm; the "public_html" folder should already exist in your home directory).

    (NOTE: you must name the file "index.htm" this tells the server that this is your main page. If you don't have a file named "index.htm" saved, the server doesn't know you have a web page. Your "index.htm" is also your default page the first page that a user will come to when they type in your URL).

changing your permissions

At this point in time, your web page is almost ready to be viewed.

In order to view your page, however, you must change your permissions so that your web page is readable via the web. (NOTE: the server system we use in the CCLI requires that users change their permissions every time they make a change to any of their web page files. In order for users to view your web page and other pages on your web site, you must change your permissions each time you make a change.)

To change your permissions, open Telnet (click on the "Applications" icon, then on the "Communications" folder, then click on the "Telnet" icon. The application should automatically launch.

  • Click on "File" and drag down to "Open Connection."
    • For the "Host/Session Name," type maryann.hu.mtu.edu; leave "Window Name" blank; click on "Connect"
    • At the login prompt, enter your user ID, then enter your password at the password prompt
    • At the "userid@maryann:~>" prompt, type permissions and then hit the return key on your keyboard

viewing your web page
  • Open Netscape Navigator (click on the "Start" icon at the left-hand bottom corner of your screen and pull up to "netscape 3.0.1". The application should automatically launch).

  • Type the URL of your web page in the "Location:" box.

    Your URL will be: http://www.hu.mtu.edu/~youruserid
    ( for example: http://www.hu.mtu.edu/~dndevoss)

    Your web page should look something like this: example.

editing your web page

Ready to make your web page a bit snazzier?

  • Follow the steps listed below after to connecting to http://www.mtu.edu/wwwhelp/

    This page provides free images for use and duplication. Select an image you'd like to have on your web page. To copy the image, follow these steps:

    • Click in the middle of the picture until a menu box comes up (if you have a double or triple button mouse, use the button on the right).
    • Drag to "Save Image As..." and save the image in the SAME PLACE as your "index.htm" file (in your "public_html" folder in your home directory)

    (NOTE: when you are downloading images for your own use, you may CHANGE the name they are saved under to something easier to remember. For example, "mtulog86.gif" is the name of the smallest MTU logo. If you do not change the name, it will be automatically saved as "mtulog86.gif". However, you may change it to something else, like "mtu.gif". Be sure to include the ".gif" or ".jpg" at the end of the file name.)

  • Next, click on the following URL and then follow the steps listed below: http://www.iconbazaar.com
    • Once you have connected, scroll down on the page until you see the menu options. Click on "Backgrounds and Textures" and then select a category you'd like a background from (e.g., "Metals," "Paper," etc.).
    • Click on the file names to view the images.
    • Once you have selected an image you'd like for a background ("wallpaper") of your web page, you may take the image almost the same way you copied the MTU image:
      • Make sure you're at the page where the background image example is provided for you.
      • Click on the link at the top (the underlined word appearing in blue; it should appear as: "Background File: filename.jpg").
      • At the next page, click in the middle of the image until the menu box comes up.
      • Drag to "Save Image As..." and save the image.

    Now that you have the picture and the background file, it's time to put them into your web page.

  • Toggle back into Notepad (by either holding down the ALT and TAB keys or by clicking on the notepad icon on the Windows 95 toolbar at the bottom of your screen).

    NOTE: the ability to toggle back and forth between Notepad and Navigator makes web page creation much easier:

    • Make the changes you wish to make in Notepad and save your HTML document.
    • Toggle back into Navigator and click on the "Reload" button on your toolbar to refresh the document and view the changes you just made.
    • Toggle back into Notepad to make additional changes, then toggle back into Navigator to click on the "Reload" button and view the changes.

    You may click back and forth like this, making changes and actually seeing them, until you are satisfied with your HTML document.

    In Notepad, edit your "index.htm" so that it looks somewhat like this:

      <html>
      <title>Working Homepage</title>
      <body background="graycirc.jpg">
      <h1><center>Homepage Under Construction</h1></center>
      <p>
      <center> <img src="mtu.gif">
      </body>
      </html>

    (NOTE: Be sure to save this document as "index.htm," replacing the old version of the "index.htm" file; be sure to change your permissions using Telnet before proceeding to the next step.)

    To view your updated page, complete with background image and picture, toggle back into Navigator and click on the "Reload" button on the Navigator toolbar. Your web page should look something like this: example.

    To learn more about web page creation and to further develop your web page, please see "creating a web page on a PC, part II."