creating a web page on a mac, part II

getting started

In order to use this worksheet, you should already have a page up on the web. In this exercise, you will add an external and an internal link to your web page.

editing your web page: making an external link

In order to edit your web page, you must have a working copy of your "index.html".

  • Open TeachText (click on the "Applications" icon, then on the"Utilities" folder, then finally on the "TeachText" icon. The application should automatically launch).

  • Click on "File" and drag down to "Open..." Head to your Home Directory, open your "public_html" folder, find your "index.html" and open it.

  • Edit your "index.html" so that it looks like the following (NOTE: the big change is the addition of the "a href" tag):

      <html>
      <title>Working Homepage</title>
      <body background="graycirc.jpg">
      <h1><center>Homepage Under Construction</h1></center>
      <p>
      <center> <img src="mtu.gif">
      <p>
      <a href="http://www.mtu.edu">Michigan Tech University</a>
      </body>
      </html>

  • After you have made your changes, select "File" and drag down to "Save" to replace the old version of your "index.html" with the new, updated version.

The <p> tag indicates a paragraph break, or a double-spaced break between one line of text and the next, or between an image and the following line of text.

In this example, "Michigan Tech University" would be underlined and would be the words a user would click on to go to MTU's home page. (NOTE: when making an external link, you do not have to create any new files. You merely have to type in the complete address a user will connect to and the words they see to connect to that address).

(NOTE: be sure to change your permissions using Telnet before proceeding to the next step).

viewing your web page

You may now view your edited web page. To do so:

  • Open Netscape Navigator (or Communicator) (click on the "Applications" icon, then on the "Web Stuff" folder, then on the "Netscape" folder, then click on one of the Netscape folders, and finally click on the Netscape Navigator (or Communicator) icon. The application should automatically launch).

    Type the URL of your home 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: making an internal link

In this example, you will create an internal link, or a link to another document you've created. You can create the HTML tag (the link itself) first and then create the other document, or you can create the document first and then create the HTML tag (the link itself). In this example, we will create the tag (link) and then create the new document.

  • Edit your "index.html" so that it looks like the following (NOTE: the big change is the addition of the "a href" tag):

      <html>
      <title>Working Homepage</title>
      <body background="graycirc.jpg">
      <h1><center>Homepage Under Construction</h1></center>
      <p>
      <center> <img src="mtu.gif">
      <p>
      <a href="http://www.mtu.edu">Michigan Tech University</a>
      <p>
      <a href="vita.htm">Click here to see my vita</a>
      </body>
      </html>

In this example, "Click Here to See My Vita" would be underlined and would be the words a user would click on to go to your vita. (NOTE: when making an internal link, you do have to create new file(s).) Thus, In order for the link to work, you must also create a document in TeachText and name it "vita.html".

  • In TeachText, close your "index.html" file and then click on "File" and drag down to "New".

  • In the new document window, type in the following:

      <html>
      <title>Curriculum Vita</title>
      <body>
      <h1><center>The Curriculum Vita of (YOUR NAME)</h1></center>
      </body>
      </html>

  • After you have created the document, click on "File" and drag down to "Save As...". Name the document "vita.html" and save it in your home directory in your "public_html" folder.

    (NOTE: be sure to change your permissions using Telnet before proceeding to the next step).

viewing your web page

Toggle back into Navigator (or Communicator) and click on the "Reload" button. Two links should now appear beneath your image and your home page should look something like this: example.

Your "vita.html" will be, of course, quite stark and empty. It's now up to you to fill in the information!