creating a web page on a mac

getting started

Log on to one of the computers in the Mac side of the CCLI using your user ID and password.

creating your web page

Following the steps below, create your page using HTML (HyperText Markup Language). TeachText, SimpleText, HTML editors (such as BBEdit Lite, Web Weaver, 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 TeachText, a program installed on all of the Mac computers in the CCLI and which comes with most Mac Operating Systems.

  • Open TeachText (click on the "Applications" icon, then on the"Utilities" folder, then finally on the "TeachText" icon. 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.html" and save it in the "public_html" folder inside your home directory (the "public_html" folder should already exist in your home directory).

(NOTE: you must name the file "index.html" -- this tells the server that this is your main page. If you don't have a file named "index.html" saved, the server doesn't know you have a web page. Your "index.html" 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 you 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 Communicator (click on the "Applications" icon, then on the "Web Stuff" folder, then on the "Netscape" folder, then click on the "Netscape PPC" folder, and finally click on the "Netscape Communicator" icon. 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 TeachText (by clicking on the icon in the top far right-hand corner of the screen. Click and hold, then drag down to "TeachText" and let go of the mouse button).

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

    • Make the changes you wish to make in TeachText and save your HTML document.
    • Toggle back into Communicator and click on the "Reload" button on your toolbar to refresh the document and view the changes you just made.
    • Toggle back into TeachText to make additional changes, then toggle back into Communicator 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 TeachText, edit your "index.html" document so that it looks something 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.html", replacing the old version of the "index.html" file; be sure to change your permissions using Telnet).

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

    To learn more about HTML and web page creation, please see Creating a Web Page on a Mac (Part II).