Lab 9 - BCIS 82

Creating a Personal Home Page

The purpose of this lab is to give you experience using HTML to create your own personal Home Page on the Internet.  To use FTP to transfer a graphic file and incorporate that graphic file in your personal Home Page.

Part 1: Create a Web page Location

  1. Sign on to your Alpha account at Cerritos College.  Your home page will be hosted on the Cerritos College web site among the Student Home pages.
  2. At the $ prompt enter 'MAKEWWW', this will create a basic Personal Home Page. This will create a file called Index.html in a new directory WWW. All files which are to be included on your page need to reside in the WWW directory.
  3. When you execute the command MAKEWWW you will be asked your name. This will put your name in the title of the Home page.
  4. To edit the file INDEX.HTML, do one of two things:
    1. Use the Notepad to create another INDEX.HTML file containing the revised home page.
    2. Or use an HTML editor to create or modify a home page.

Part 2: USING FTP to download a graphic


Retrieve the graphics from my web site.

  1. You need to have a minimum of one graphic on your new home page.  You may use one of the two graphics available from my web site or a graphic you found in a public domain web site.
  2. Enter the following URL in the Brower Location box:
  3. http://www.cerritos.edu/hohly/anim.gif     or http://www.cerritos.edu/hohly/earthani.gif
    Press enter.
  4. The graphic will appear in your browser.  When the graphic is moving place you mouse on the image and click your right mouse button.
  5. When the menu appears click on 'Save image as' and press enter.
  6. Make sure you are saving the image to your a: drive.

You may do either Part 3, or Part 4:

Part 3: USING WINDOWS Notepad

  1. You can use the notepad or other windows based editor to create/edit the INDEX.HTML file. Note that the file may have only a three (3) letter extension. Some PC's programs don't allow four (4) letters in the extension.  You need to use a four (4) character extension of HTML.
  2. Download the portion of Lab 9 containing the code for the home page and name the file INDEX.HTML file.  The INDEX.HTML file should be created on your diskette. The HTML source code is available at the bottom of this document.
  3. Open the INDEX.HTML file in the notepad. 
  4. Edit  the portions of text which need to be changed.
    The title of the home page should include your name.
    The first paragraph needs editing to include your name and the rest of the text needs to be modified to suit you.
    You need at least two (2) different 'Hobbies and Interests.'
    You need a minimum of two (2) different links.
  5. Using Anonymous FTP, download either anim.gif or earthani.gif graphic file to your diskette from the Cerritos College's anonymous FTP site.  Instruction to do this are included in Part 2 of this lab .  This graphic file will be included on your home page.
  6. When you have finished creating the home page you will need to upload the HTML and graphic files to your WWW directory.
  7. You can either use cut and paste to up load the HTML file, FTP to upload the revised Index.html file to your WWW directory, or use the PUBLISH function of Netscape Communicator.  You will need to use FTP or Netscape Communicator PUBLISH function to upload the graphic file.

Part 4: Using Netscape Composer to edit your home page

  1. Open the page (INDEX.HTML on your diskette in the A: drive) in Netscape Composer.
  2. Open Netscape Communicator
  3. Click on 'Communicator'
  4. Click on 'Page Composer'
  5. This should bring up your initial home page in the editor.
  6. Edit the text portions of the page which needs changing.  For example: The title of the page, the first paragraph, and the hobbies/Interest.
  7. Go to the section where you will be either changing or editing the links.
    1. With your cursor at the end of the last link 'Press Enter' to create a new item.
    2. Now click on the link icon on the toolbar.
    3. This will allow you to enter the link and text for the link.
    4. You are to add at least 2 different links than are found on the sample home page.
    5. If you want to remove the Yahoo and White house links, highlight them and press delete.
  8. To change the background color or image do the following:
    1. Click on 'Format'.
    2. Click 'Page Colors and Properties'
    3. This will take you to the page to change these features.
    4. Remember that the background you want to use must be on your diskette.
  9. To insert images do the following:
    1. Place your cursor where you want an image.
    2. Click on 'Insert.'
    3. Click on 'Image.'
    4. You will be asked to insert the name of the image file and its relative position.  Complete this screen.  Remember that the image file must be on your diskette.

Part 5: Editing and Testing your home page

  1. With the revised code for your home page on your disk, open Netscape Communicator (or another version of Netscape or Internet Explorer).
  2. Click on 'FILE', then select 'OPEN PAGE'. Provide the name of filename for your home page. This will allow you to view and test your home page. If you find areas which require changing, use one of the following methods to edit the file.
  3. Switch over to the Notepad or use click FILE then EDIT PAGE button in Netscape Communicator. Modify the page and save the page. If you are using Netscape Communicator click 'Preview'.  You will be asked if you want to save the changes, click  'Yes.'
  4. If you edit the code using Notepad, you will need to reload the code to see the changes. Or open the file again to view the new version.

Part 6: Uploading your file(s) to your Alpha (Cerritos College) account

Use one of the following methods:

Method 1 - Use FTP to upload the index.html home page file.

      1. Click on 'Start'.  Then click on PROGRAM.
      2. Click on 'MS-DOS Prompt' or 'Command Entry' (MS-DOS).
      3. In the DOS window type FTP and click OK.
      4. Enter the following: FTP>open  alpha.cerritos.edu
      5. At the ID type in your user ID and then your password when requested.
      6. You will be connected to your Cerritos College account.
      7. You need to change to the WWW directory. Type the following command. FTP>CD WWW
      8. Make sure your diskette is in the a: drive. Type the following command. FTP>put   and press ENTER
      9. LOCAL-FILE>a:\index.html   and press ENTER.
      10. REMOTE-FILE>index.html   and press ENTER. This will place the file in your WWW directory.
      11. The above command will place a copy of your home page in the WWW directory. To check type FTP>dir
      12. To upload images including graphics, backgrounds, etc. type the following command:
      13. FTP>BINARY  and press ENTER.  This will change from ASCII mode to BINARY mode.
      14. Now repeat steps g, h, and i above for each image.  Make sure you substitute the correct image name in place of index.html and for the remote-file name it is the same as the local-file name.
      15. If the above commands were successful you need to exit FTP otherwise you need to repeat the above commands.

Method 2 - Use cut and paste to upload the home page file. To upload the home page to your WWW directory follow the instructions below:

      1. Log onto your Alpha account at Cerritos College.
      2. At the $ prompt type CD WWW, this will change you to the WWW directory.
      3. Then type "EVE" to open the editor.
      4. Place you cursor at the first of the blank screen.  Then use cut and paste techniques to transfer your home page (INDEX.HTML) onto the screen.  You should have the home page visible in the notepad when doing the cut and paste technique from the notepad to EVE.
      5. The save the file press CTRL-Z, you will need to provide the file name 'INDEX.HTML'.
      6. NOTE:   You will need to use method 1 (FTP) to upload the graphic file.

Method 3 - Using Netscape Communicator

      1. Open the INDEX.HTML file (on your disk) in NetScape Composer.
      2. To do this click on Communicator.
      3. Select 'Page Composer.'  Then click on the OPEN icon and select INDEX and click OK.
      4. You are now in the Edit mode. You can modify the code to meet the requirements of this assignment.
      5. When you are ready to upload to your home page use the PUBLISH function.
      6. While in the Composer Click on the FILE then PUBLISH.
      7. This will bring up a screen that needs to be completed as follows:
        1. Publishing Location
        2. Upload files to the location
          3. ftp://alpha.cerritos.edu
        3. User Name
          4. XXXXX001 (where this is your User Name)
        4. Password
          5. Type in your password here. It will not display. DO NOT SELECT TO SAVE YOUR PASSWORD.
        5. Then Click OK. This will upload all the files to your root directory. This will include your home page and any images files referenced on this page.

        Netscape Composer's Publish function uploads the file into your root directory. You will need to log into your Cerritos College account and move INDEX.HTML (and any images) to your WWW directory.

Part 7: Making the revised home page the viewable home page.

  1. You will need to modify the home page code on your diskette to correct errors you discover when viewing your home page in a browser. 
  2. You can again use the notepad or Netscape composer to make the changes.
  3. You will need to upload your home page using FTP or cut and paste techniques provided previously.

Part 8: VIEWING your web Home Page.

  1. If you have just placed your home page on the Cerritos College web site, the page will not be listed among the student home pages.  It takes a minimum of one day before your name appears in the listing.  You can view your web page by entering the following URL:
    http://www.cerritos.edu/~xxxxx### 
    when xxxxx### is your user ID.
  2. The college student web pages index is updated overnight.  You will find your name listed the next day.
  3. If you did the MAKEWWW command at least one day previously, then go to the session in which you are running Netscape and navigate to the Cerritos College Home Page then to Student Home pages. Find your name and access your home page.
  4. If your home page is not the current (or revised home page)  Click on the 'RELOAD' button
  5. If your home page has errors go back to the original source and revise the mistakes.  Then repeat the upload procedures.  When loading the revised home page in Netscape remember to use the RELOAD button to view the new page.

Part 9: Submit your Assignment

  1. When your home page works and is how your want it, send a message to your instructor indicating that you are ready to have your home page graded.

Part 10: Home Page Requirements

  1. Review the following Home page HTML.
  2. You are to enter an initial paragraph with information you are willing to share about yourself.
  3. You need to include a minimum of two (2) Hobbies and Interest other than the ones included in this assignment.
  4. You need to include a minimum of two (2) Interesting Links other than the ones included in this assignment.
  5. You need to include a minimum of one (1) graphic file.
  6. You may add more things to your web, either links, hobbies, backgrounds, or graphics. You may receive a bonus of a maximum of 6 points for these extra additions. Use FTP to upload graphics you found. Refer to the handout on using FTP to upload files to your account.

NOTE: Replace YOUR NAME with your real name in the following code.

HTML Code for Home Page Click HERE to obtain a copy of the code for your home page. You will need this to complete the lab. Use this text version to edit/create your home page in Notepad, or another editor.

(lab9FA98.html)