Lab 8 - BCIS 82

Creating a Personal Home Page

The purpose of this lab is to give youexperience using HTML to create your own personal Home Page on theInternet.  To use FTP to transfer a graphic file and incorporate thatgraphic file in your personal Home Page.

Part 1: Create a Web page stub

  1. At the $ prompt enter MAKEWWW This will create abasic Personal Home Page. This will create a file called Index.html in a newdirectory WWW. All files which are to be included on your page need to residein the WWW directory.
  2. When you execute the command MAKEWWW youwill be asked your name. This will provide your name in the title of the Homepage.
  3. To edit the file INDEX.HTML, do one of twothings:
    1. Use the Notepad to create another INDEX.HTMLfile containing the revised home page.
    2. Or use eve to edit th efile.

Part 2: USING FTP todownload a graphic

  1. Click on the STARTmenu.
  2. Click on RUN, then enter FTP in the window and clickOK.  This will start a FTP session.
  3. At the FTP prompt enterthe following:  OPEN  Alpha.cerritos.edu   and pressenter.
  4. At the next prompt enter ANONYMOUS and pressenter.
  5. At the next prompt enter your user ID.
  6. Younow have an active FTP session going.  Type BINARY at the FTP> prompt andpress enter.  This will put you in the Binary mode needed to transfergraphic files.
  7. You may download either or both of these filesanim.gif and/or earthani.gif
  8. At FTP> enter  GET and pressenter.
  9. At the remote file name prompt enter either of the files(anim.gif or earthani.gif) and press enter.
  10. At the local prompenter a:\anim.gif    or a:\earthani.gif  and pressenter.  This will transfer the graphic file to your diskette in the a:drive.

You may do either Part 3, Part 4, or Part 5:

Part 3: USING WINDOWSNotepad

  1. You can use notepad or otherwindows based editor to create/edit the INDEX.HTM file. Note that the fileonly has three (3) letters in the extension. PC's don't allow four (4) lettersin the extens ion.
  2. Download the portion of Lab 8 containing thecode for the home page and name the file INDEX.HTM file. The INDEX.HTM fileshould be created on your diskette. The HTML source code is available at thebottom of this document.
  3. Using Anonymous FTP, download eitheranim.gif or earthani.gif graphic file to your diskette from the CerritosCollege's anonymous FTP site.  Instruction to do this are included inPart 2 of this lab .  This graphic file will be included on y our homepage.
  4. When you have finished creating the home page you will needto upload the HTML and graphic files to your WWW directory.
  5. Youcan either use cut and paste to up load the HTMl file, FTP to upload therevised Index.htm file to your [.WWW] directory, or use the PUBLISH functionof Netscape Comunicator.  You will need to use FTP orNetscape Communicator PUBLISH function to upload the graphicfile.

Part 4: USING EVE

Two methods of editing and creating your new home pageusing EVE. Note that the graphic file will need to be uploaded into your WWWsubdirectory.

  1. Method A: The file is on the VAX and use EVE toedit.
    1. At the $ prompt type the following: EVE[.WWW]index.html This will call into the editor the INDEX.HTML located in theWWW sub directory.
    2. Make the needed additions and changes to thisfile.
    3. When you have completed the changes type CTRL-Z to saveand exit EVE.
    4. At the $ prompt type LYNX to access the web. On theCerritos College move down to the link to Student home pages and otherinformation.
    5. Take this link. Navigate through the screens untilyou access a list of student home pages. Move down to your name and take thelink. View your home page. Check to see that it is working correctly. If it isnot working correctly return to EVE and correct the errors and repeat untilthe home page is d own.
  2. Method B:
  3. At the $ prompt type SWING
  4. Move your arrow to theWWW directory and press enter.
  5. Move your cursor to the fileINDEX.HTML
  6. Press the space bar to select the INDEX.HTML file.Then Press 'E' for edit. This will call in the editor. Then press 'Y' to thefirst question and 'T' for type of editor. You are now ready to edit the filein EVE.
  7. Continue with the steps 3-5 from the above instructions.

Part 5: Using Netscape Composerto edit your home page

  1. Open the page(INDEX.HTM on your diskette in the A: drive) inNetscape Composer.
  2. Open NetscapeCommunicator
  3. Click on 'Communicator'
  4. Click on 'PageComposer'
  5. This should bring up your initial home page in theeditor.
  6. Edit the text portions of the page which needchanging.  For example: The tit le of the page, the first paragraph, andthe hobbies/Interest.
  7. Go to the section where you will be eitherchanging or editing the links.
    1. With your cursor atthe end of the last link 'Press Enter' to create a new item.
    2. Nowclick on the link icon on the toolbar.
    3. This will allow you toenter the link and text for the link.
    4. You are to add at least 2different links than are found on the sample home page.
    5. If youwa nt to remove the Yahoo and White house links, highlight them and pressdelete.
  8. To change the background color or image do thefollowing:
    1. Click on 'Format'.
    2. Click'Page Colors and Properties'
    3. This will take you to the page tochange these features.
    4. Remember that the background you want touse must be on your diskette.
  9. To insert images do thefollowing:
    1. Place your cursor w here you want animage.
    2. Click on 'Insert.'
    3. Click on'Image.'
    4. You will be asked to insert the name of the image fileand its relative position.  Complete this screen.  Remember that theimage file must be on your diskette.

Part 6: Editing and Testing your home page

  1. With the revised code for your home page on yourdisk, open Netscape Communicator (or another version of Netscape).
  2. Click on 'FILE', then select 'OPEN PAGE'. This all9owsyou to view and test your home page. If you find areas which require changinguse one of the following methods to edit the file.
  3. 'Hot Key'over to the Notepad or use click FILE then EDIT PAGE button in NetscapeCommunicator. Modify the page and save the page. If you are using NetscapeCommunicator click 'Preview'.  You will be asked if you want to save thechanges, click  'Yes.'
  4. If you e dit the code using Notepad,you will need to reload the code to see the changes. Or open the file again toview the new version.

Part 7: Uploadingyour file(s) to your Alpha (Cerritos College) account

Use one of the following methods:

  1. Method 1 - Use cut and paste to upload the home page file. Toupload the home page to your WWW directory follow the instructionsbelow:
      1. Atthe $ prompt type SWING
      2. Move your cursor to the WWW subdirectory, then press ENTER.
      3. Move your cursor to the fileINDEX.HTML and press the space bar.
      4. Press 'C' and press enter tocopy this file to a second copy.
      5. When the directory appears pressEnter again. This will create a second copy of the file.
      6. Whenyou look at the directory of your WWW area press the space bar to remove thehighlight from the INDEX.HT ML;1 file.
      7. Now move your cursor tothe INDEX.HTML;2 file and press the space bar. This will highlight the copy ofthe file. Make sure that you only have one file namehighlighted.
      8. Press 'E' to edit the file, then Press 'Y' followedby pressing a 'T' to select your editor. This will place your file inEVE.
      9. You will need to delete all the information form this fileor insert the new sections of your web page into this page.
      10. Youcan paste (as in previ ous labs) into this page in part or in whole.. EnterCTRL-Z to exit and save the new file.
      11. NOTE:   You willneed to use method 2 (FTP) to upload thegraphic file.
    1. Method 2 - Use FTP to upload the index.htmhome page file.
      1. Click on 'Start'.  Then clickon RUN.
      2. Type FTP in the window and click OK.
      3. Enterthe following: FTP>open alpha.cerritos.edu
      4. At the ID type in youruser ID and then your password when requested.
      5. You will beconnected to your Cerritos college account.
      6. You need to change tothe WWW directory. Type the following command.FTP>CD [.WWW]
      7. Make sure your diskette is in the a: drive. Typethe following command. FTP>put   and pressENTER
      8. LOCAL-FILE>a:\index.htm   and pressENTER.
      9. REMOTE-FILE>index.html   and press ENTER. This will place the file in your WWW directory and chang e its name to theHTML extension in one step.
      10. The above command will place a copyof your home page in the WWW directory. To check type FTP>dir
      11. Toupload images including graphics, backgrounds, etc. type thefollowing command:
      12. FTP>BINARY  and press ENTER.  Thiswill change from ASCII mode to BINARY mode.
      13. Now repeat steps g,h, and i above for each image.  Make sure you substitute the correctimage name in place of index.htm and for the remote-file name it is the sameas the local-file name.
      14. If the above commands were successful youneed to exit FTP otherwise you need to repeat the abovecommands.
    2. Method 3 - Using NetscapeCommunicator
      1. Open the INDEX.HTM file (on your disk)in NetScape Composer.
      2. To do this click onCommunicator.
      3. Select 'Page Composer.'  Then click on theOPEN icon and select INDEX and click OK.
      4. You are now in the Editmode. You can modify the code to meet the requirements of thisassignment.
      5. When you are ready to upload to your home page usethe PUBLISH function.
      6. While in the Composer Click on the FILEthen PUBLISH.
      7. This will bring up a screen that needs to becompleted as follows:
        1. PublishingLocation
        2. Upload files to the location
          3. ftp://alpha.cerritos.edu
        3. User Name
          4. XXXXX001 (where this is your UserName)
        4. Password
          5. Type in your password here. It will not display. DO NOT SELECT TOSAVE YOUR PASSWORD.
        5. Then Click OK. This willupload all the files to your root directory. This will include your home pageand any images files referenced on this page.
        Netscape Composer'sPublish function uploads the file into your root directory. You will need tolog into your Cerritos College account and move INDEX.HTML (and any images) toyour [.WWW] directory.

Part 8: Making the revised home page the view ablehome page.

  1. Log into the VAX. Enter Swingat the prompt.
  2. Change to the WWW directory and pressenter.
  3. Use the space bar to highlight the file namedIndex.html
  4. Enter 'R' to rename the file. The new n ame should beINDEX.OLD This makes the file a backup file.

Part 9: VIEWING your web Home Page.

  1. Prior to viewing your revised home page, switch tothe Netscape session.
  2. Click on OPTIONS. Click on NETWORKPREFERENCES.
  3. Select CACHE. Click on CLEAR DISK CACHE NOW, thenclick on CLEAR MEMORY CACHE NOW. Then click on OK.
  4. Go to thesession in which you are running Netscape and navigate the Cer ritos CollegeHome Page to Student Home pages. Find your name and access your homepage.
  5. If the home page is not correct, return to the VAX SWING torevise the page.
  6. Repeat the above until the home page iscorrect.

Part 10: Submit yourAssignment

  1. When your home page workssend a message to your instructor that you are ready to have your home pagegraded.

Part 11: Home PageRequirements

  1. Review the following Homepage HTML.
  2. You are to enter an initial paragraph with informationyou are willing to share about yourself.
  3. You need to include aminimum of two (2) Hobbies and Interest other than the ones included in thisassignment.
  4. You need to include a minimum of two (2) InterestingLinks other than the ones included in this assignment.
  5. You needto include a minimum of o ne (1) graphic file.
  6. You may add morethings to your web, either links, hobbies, backgrounds, or graphics. You mayreceive a bonus of a maximum of 6 points for these extra additions. Use FTP toupload graphics you found. Refer to the handout on using FTP to upload filesto your account
NOTE: Replace YOUR NAME with your real name in thefollowing code.

HTML Code for HomePage

Click HERE to obtain a copy of the code for your home page. You will needthis to complete the lab. Use this text version to edit/create your home pagein Notepad, or another editor.