[Skip Navigation] [CSUSB] / [CNS] / [CSE] / [R J Botting] /[CS320 Course Materials] [Text Version] lab/02.html Wed Apr 11 10:14:36 PDT 2012
Labs: [01] [02] [03] [04] [05] [06] [07] [08] [09] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20]

Contents

    CSci320 Lab 02 Hunt the Web site

      Goals

      1. Practice editting and publishing simple web pages.
      2. Earn points
      3. Look at some relevant jokes.
      4. Check the preparation for the next class

      . . . . . . . . . ( end of section Goals) <<Contents | End>>

      Deliverable

      1. Due at the end of the lab period.
      2. A personalized, published, and error-free WWW home page with a CS320 link.
      3. Grading depends on completeness.

      Advice for doing labs.

      (0) Find a browser.

      (1) Open up a browser window and a terminal window and place them so you can see both at once. You will need to see the instructions and type commands in the terminal window in these labs.

      (2) Use browser to find out things and check your new pages. Bookmark the course website and your own public site, etc.

      (3) Use a terminal window to do experiments, create files, publish work, etc.

      (4) Get good at 'vi' or 'emacs'.

      (4) If you use your own software, it is your problem.

      Making a Home Page

      In this lab your public WWW site appears under a directory that looks 
       		~/web
      in your home directory.

      If you already have a page index.html on cse.csusb.edu then edit it to include a href to http://cse.csusb.edu/dick/cs320/. And remove any strange "=" signs! Hint: 

       		<a href="http://cse.csusb.edu/dick/cs320/">CSci320</A>

      Otherwise

      1. Copy the following template for a web page and paste it into a file called "index.html". 
         <HTML><head><title>Put your name here</title></head>
         <body>
         <h1>Put your name here</h1>
          <pre>
         Put a personal message here.
        

         I am taking <a href="http://cse.csusb.edu/dick/cs320/">CS320</A>: Programming Languages.
        

          </pre>
        

         </body>
        

         </HTML>
        

      2. Save it as "index.html"

      3. Edit it to show your own name in
both the title and the body of the page.

      4. Edit in a personal message into the body.

      5. If you'd like an explanation of the "HTML" file, select HTML.

        

      6. Your file is in your private, personal, HOME directory.  This is
good and secure, but for others to see it you need to put a copy on our
public web server.  You can use the explorer tools but true computer
scientists use the "cp" UNIX COPY command:

         		cp index.html ~/web
        

      7. Point your browser at the location (URL) of your index page.

         		http://cse.csusb.edu/public/csci/your-student-id/
        

         		http://cse.csusb.edu/public/student/your-student-id/
        

      8. How does your page look?

      9. If you think it is OK continue...  else fix it and Republish/copy and
Reload it.


      

      Warning
      
Your pages will not change on the web until you copy new
versions on top of the old ones.  And you will often need
to hit the reload/refresh button in the browser as well.

      
If you work directly in the public directory:

      Net
        

      1. People see your partly finished work.

      2. You will have no backup copy when

          

        1. the server is broken into.

        2. the server breaks down.


        


      (End of Net)

      

      Earning Credit for Lab 2
      
Only public work earns credit.

      
Call me over before the end of the lab period and show me your page,

      

      Rewards for completing lab
      
Here is an alternate way to develop web pages:
[ 01.joke.txt ]

      
Here is a favorite web comic:
[ http://www.userfriendly.org/ ]
and here is a highly relevant storyline
[ ?id=19991213&mode=classic ]
-- enjoy!

      Check the next class
      
[ ../03.html ]

      

    . . . . . . . . . ( end of section CSci320 Lab 02  Hunt the Web site)  <<Contents | End>>

    HTML
    
The HTML is the language used to describe web pages.
It is very simple and easy to learn.
The name
stands for "HyperText Markup Language".  The word hypertext refers
to the ability to linked pages together. The
word markup tells us that you must insert certain tags into your
text to make the page look the way you want it to.

    
The tags come in pairs (mostly).  Here are the ones I used in your
page:

    Table
    TagsPurpose

    <HTML>...</HTML>Indicates page for the web

    <head>...</head>The part of a page that identifies the data in the page

    <title>...</title>The title of the page -- labels the browser window, etc.

    <body>...</body>The visible part of the page

    <h1>...</h1>A large head line in the page

    <pre>...</pre>The text is pre-formatted.

    <a...>...</A>An Anchor for a hyperlink to another page.


    (Close Table)
    

    
I will be giving you more information on HTML in this course.

    An HTML Primer
    
[ HTMLPrimer.html ]

    If your CSCI account doesn't work or your web site is not ready...
    

      

    1. Fill in the form reporting the problem and hand it to the technicians or EMail Birdie Wang.

    2. Tell me!

    3. Wait for your web site to be fixed (typically 24 hours) and then do the lab.

    4. Show me when done, to get the points.


    



End