Bar_gold.gif 401 bytes

Project #4 Creating Your Own Homepage

HTLM (Hyper Text Markup Language) Home Page Assignment

Bar_gold.gif 401 bytes

  1. Suggestions Designing and Writing your page:

    1. Hints for Planning and Desiging Your Home Page
    2. Typical Web Page Format:

      1. The Pages should always have a descriptive title
      2. Pages should not be too long (Usually shorter than two screens) Divide the information up into linked sub pages
      3. Make the page interesting but not busy
      4. Pages should be about the same subject
      5. Each page should have a clear heading and ending
      6. Pages should have a return link to the originating page [Pages should have the date and the name of the person who wrote the page] See box below:

        Return to Messiah College Home Page

        This page is Copyright 2001 by J. Barry DeRoos. All Rights Reserved.
        This page may be distributed and used freely, provided that the copyright notices remain intact.
        Last Modified: Sept 7 2001.

    3. Web pages should be organized:

      1. Top level page on Messiah WWW must be called home.htm.
      2. The pages are organized in an easy to follow way - so they they naturally lead a person to the information desired.
      3. Home.htm leads to other sub-topics which may give a chance for even more detail

        To go forward to a directory named slinky to a file named home.htm use the A tag

        <a href="/slinky/home.htm">

        To go backwards to a previous directory to a file named home.htm use the A tag

        <a href="../index.htm">
        k:
        index.htm
        <directory>slinky/home.htm

    4. Location of Web Page files:

      1. Files for the MC server are to be located on the mapped K: drive in the web folder
      2. Be sure to save files here with lowercase names only.
      3. Create a home.htm file for the file that you link as your own home page, the entryway to your homepage suite.

    5. What NOT to put on your web pages:

      1. Remember this is Messiah College so all material text and graphics should be to the glory of God.
        Nothing should be on your home page that is against the Messiah College Foundational Values [See College catalogue p.6,7. Note sections on:
        • Unity of Faith, Learning, and Life
        • the Importance of the Person
        • the Significance of Community
        • Disciplined and Creative Living
        • Service and Reconciliation]

      2. Specifically, there are to NO pornographic material or links to such material.
      3. Text and figures should be interesting and wholesome, and not the kind that diminishes another person or group.
      4. Your text and graphics should be up-lifting - helpful and well able to fit under the banner of "All of our gifts, talents, and interests are to be nurtured as acts of praise towards God while serving humanity and all of creation."
      5. Of course, material that would hurt the environment of the only planet that we have, would be unwelcomed on your web site.

Bar_gold.gif 401 bytes

  1. Introduction to HTML

  2. Sample HTML Page Example

    3. HTML Code for a First PageDisplay file: HOME.HTM
    <HTML>
    <HEAD>
    <TITLE> HTML Example</TITLE>
    </HEAD>
    <BODY>
    <H1>HTML is Easy To Learn</H1>
    <P> Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P>
    <P> And this is the second paragraph.</P>
    <A HREF="page2.htm"> Go to page 2 </A>
    <<BODY>
    </HTML>     		A Simple HTML Example

    HTML is Easy To Learn

    Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!

    And this is the second paragraph.

    Go to page 2

    HTML Code for Second PageDisplay file: PAGE2.HTM
    <HTML>
    <HEAD>
    <TITLE> Page Two</TITLE>
    </HEAD>
    <BODY>
    <H1>This is Page Two </H1>
    <P> Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P>
    <P>
    <A HREF="http://www.aapt.org/aaptgeneral/aaptrev.html">
    <IMG SRC="aapt.jpg"> A Visit to the Amer. Assoc. of Physics Tea. </A></P>
    <A HREF="example.htm"> <IMG SRC="home.jpg"> Go to homepage </A>
    </BODY>
    </HTML>     		Page Two

    This is Page Two

    Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!

    A Visit to the Amer. Assoc. of Physics Tea.

    Go to homepage

    Bar_gold.gif 401 bytes

  3. Report Requirements

    1. For grade of C:

      1. You must have a home page file on the K:\web Drive and folder [that's open to the world] with a theme of your choosing.
        ( e.g. getting to know me, Ford trucks are Fun, Woodie Allen, Quilts, Sky Diving, I am a Believer, etc.)
      2. The name of the first page on your homepage group must be called HOME.HTM.
        If you use this name, anyone using the Messiah homepage can click on your name and load your first page.
      3. The first page must have a link to a second page.
      4. There should be a link in page 2 to return back to your first page.
      5. You must have a picture (of yourself or another subject or object) on your homepage.
        Photographs can be scanned into .JPG files that you can edit into cropped.
        Web graphics must be in the .JPG or .GIF format to work on the Internet.
        It must be a picture not a cartoon or drawing. You can use a photo captured from the WWW (World Wide Web). It is important to remember that large photos load slowly, so you should use Paint Shop to crop your photos to just use the vital areas of the photo i.e cut out unnecessary background.
      6. Your second page needs at least a half page of text, one link to a new site on the web, and some graphic.

    2. For a grade of A: (in addition to the C grade pages)

      1. Create or edit an icon and use it as a button to get to your second page.
      2. Icon and Graphics Resources
        1. There is a great collection of icons on Bob Barrett's homepage.
          To get to the icons, click on Hot Links to Clipart. The icons are in different sizes.
        2. Use PS or Paint Shop to shrink photos and use these graphics as buttons.
        3. All graphics in HTML must be in the .GIF or .JPG file format.
        4. Examples from http://galaxy.einet.net/images/icons/src/icons.html or thru Funet on Bob Barrett's homepage

          IconSizeColor Icons:
          32x32 (241atom.jpg 1660 bytes
          48x48 (7)box.jpg 2627 bytes Camera.jpg 2446 bytes
          64x64 (7)city.jpg 3656 bytes
          misc (16) 
          applications (22) 
          documents (125) 
          folders (27) 
          drawing symbols (84, ~1/2 color) 
          backgrounds (36) 

      3. Use at least one background on your homepage.
        The HTML code for a background file is 

         <BODY BACKGROUND="CONCRETE.GIF">

      4. Use at least FOUR other links to some other locations on the WWW.
        1. The following line in your homepage html document is such a link:

          <A HREF="http://galaxy.einet.net/images/icons/src/icons.html"> Icon Sources </A>

        2. If you run a web browser (Netscape or Explorer, etc.) while writing your homepage, you can copy and paste the URL: (Uniform Resource Locators) from the web browser into your .HTM document. This is much safer then trying to type a long URL:

      5. Use a small sized graphic that is not an icon or a photo in one of your pages. You can capture it from the web or draw it in Paintbrush and use Paint Shop to convert it to .GIF format.

    Bar_gold.gif 401 bytes

  4. To Work On Or Create Your Homepage on the K: Drive

    1. Creating the file structure:
      1. First connect your Network student File Space (K:\ drive)
        This is done by selecting the Start button, next Messiah Programs, then the Network Services Option. In this menu there is an option to connect to your Student File Space. Click on this and a dialog box will appear. Enter your network user name and password.
      2. Use any Text editor to write the HTML code for your homepage and name the file home.htm
        Use Expresso or NoteTab editors available to create the file..
      3. It is VERY important to use file names in lower case.
        The K: drive server will not recognize uppercase file names and will change uppercase file names to lowercase!!

        BAD:

        <img src=Beauty.GIF>
        <img src=BEAUTY.GIF>
        <img src=beautifulscreen.gif>

        GOOD:

        <img src=beauty.gif>

      4. Save your home page file named home.htm to the K:\web folder.
      5. Transfer your graphics files the K:\web folder.
      6. Remember you can let Netscape run your .HTM file before it's on the K: Drive as if it were in the WWW.
        Just click on File , Open File... , then double click on the file you want to display inthe browser.
        You can also down load any WWW page into Netscape.
        Click on File...Save as. There will be a suggested name and you can choose the directory.

        The file should be in the ASCII text (DOS) format.

      7. Remember that HTML tags incased in < >'s are not case sensitive [</a> = </A>], but file names on UNIX servers are case sensitive [barrett.htm NOT = Barrett.html] Note: UNIX file names can be longer than 8 letters with three letter extensions.

    2. Printing out your home page:
      The Normal File ... Print does not print out:
      1. The background of the page - To print out the page with the background, press the [Print Screen] Button. Now paste into Paint Shop, crop the image, and print out the page as seen in Netscape [or other web browser]
      2. White or lightly colored text - To fix this problem click on File ... Page Setup ... Now see this dialogue box. Put a check in the Black text bax. Note there are many options, and I like those checked in the dialogue box for Header and footer.

      Resources :A wonderful set of .HTML instructions are available from Mr. Barrett's homepage. Go to this homepage and find: Search engines, Clip art, and .HTML instructions.

    Bar_gold.gif 401 bytes

               Return to CSC 171 Syllabus

    Bar_gold.gif 401 bytes