IT130 -- Midterm -- Jan. 29, 2008

    Answer each question completely on this sheet.
    Additional paper is available if you need more space.

    1. (3 pts.) Where does the browser display this title? 
                <title>My Favorites Page</title>

       Ans. In the title bar of the browser.

    2. (3 pts.) What does XHTML mean?

       Ans. Extensible Hypertext Markup Language.


    3. (9 pts.) How does XHTML differ from HTML?

       Ans:
       a. Every start tag requires a matching end tag.
       b. Tags must be nested.
       c. A combination start/end tag is available if
          there is no text between a start and end tag.
       d. Values of attributes must be enclosed in double quotes.
       e. A header shows that the document is XHTML complient.

    4. (3 pts.) What was the significance of Babbage and Lovelace
                in the history of computers?
       Ans: Babbage designed a mechanical calculating machine called
            an analytical engine.  Lovelace worked with him as a programmer.

    5. (3 pts.) What was the significance of Kleinrock in the
                history of the internet?
       Ans: Kleinrock published the first paper on packet switching.

    6. (3 pts.) When editing HTML source code, what is the double
                version problem and how do you prevent it?
       Ans: The double version problem occurs when you are editing
            one version of an HTML page but viewing another with a
            browser.  You prevent it by deleting all versions but
            the most recent one.

    7. (3 pts.) Why are file permissions important for websites 
                hosted on a server?
       Ans: Read permission is important for everyone so that the
            public can view your webpage.  Write permission should
            only be set for the owner so no one else can modify or
            delete your webpage.

    8. (3 pts.) In this style, identify the element, the value  
                and the property:              
                h1 { text-align:center; }
       Ans: h1 is the element, text-align is the property,
            center is the value.

   10. (3 pts.) What is a bit?

       Ans: The smallest possible unit of information: one binary
            digit.

   11. (3 pts.) For what is the span tag used?

       Ans: To set the style for a part of a paragraph.

   12. (9 pts.) Explain the entire process of editing, uploading
                and testing a webpage on the students.depaul.edu
                server.  Include discussion of PSPad, SSH and 
                your favorite internet browser in your explana-            
                tion. Make your explanation understandable
                to someone that is not a computer expert.

       Ans: For full credit, discuss (a) editing your page with PSPad,
            (b) uploading your page with SSH and (c) testing your
            page on the students server with a browser.

   13. (3 pts each.)  How are each of these HTML code fragments 
                      displayed in a browser?  

        a. <p>one</p>      Ans:  one
           <p>two</p>
           <p>three</p>          two    <-- Must be double spaced.

                                 three

        b. <p>four<br />   Ans:  four
              five               five six
              six</p>

        c. <p>&lt;em&gt;next&amp;nbsp;one&gt/em&lt;</p>

           Ans:  <em>next&nbsp;one>/em<

   14. (3 pts.) How many spaces are between the words seven and 
                eight?

       <p>seven&nbsp;    &nbsp;   eight</p>

       Ans: 4


   15. (3 pts.) Why shouldn't you include embedded spaces or
       uppercase letters in file or folder names that you upload
       to the students.depaul.edu server?
 
       Ans: Because the students server is case sensitive for file
            names, eliminating uppercase letters in file names
            reduces the chance for errors.  Embedded spaces in 
            filenames are represented as %20 in hyperlink references
            or image tags.  This also increases the chance for errors.
                                                    
   16. (9 pts.) Write HTML code for a table that contains two
                rows.  The first row contains the images
                rose.jpg and tulip.jpg.  The second row contains
                the labels Rose and Tulip.

       Ans:
       <table>
       <tr> 
            <td><img src="rose.jpg" /></td>
            <td><img src="tulip.jpg" /></td>
       </tr>
       <tr> 
            <td>Rose</td>
            <td>Tulip</td>
       </tr>
       </table>

   This navigation architecture is for questions 17 through 20.

   0 public_html
       1 homepage.htm
       1 zoo.jpg
       1 felines
           2 felines.gif
           2 lion.htm
           2 tiger.htm
       1 primates
           2 chimpanzee.htm
           2 orangutan.htm
           2 primates.jpg

    17. (3 pts.) Write a hyperlink that jumps to the page 
                 lion.htm from the current page tiger.htm.

        Ans: <a href="lion.htm">To Lion Page</a>

    18. (3 pts.) Write a hyperlink that jumps to the page  
                 homepage.htm from the current page orangutan.htm.

        Ans: <a href="../homepage.htm">To Homepage Page</a>

    19. (3 pts.) Write an image tag that displays the image 
                 felines.gif on the current page tiger.htm.

        Ans: <img src="felines.gif" />

    20. (3 pts.) Write an image tag that displays the image 
                 felines.gif on the current page chimpanzee.htm.

        Ans: <img src="../felines/felines.gif" />

    21. (5 pts.) Write an inline style in a <p> tag that does 
                 the following:

        a. Displays the text in bold font.
        b. Sets the text color to yellow.
        c. Sets the background color to navy.
        d. Sets the font to Rockwell.

        Ans:

        <p style="font-weight:bold; color:yellow;
                  background-color:navy; font-family:Rockwell;">

    22. (20 pts.) Write a document-level style that does the  
                  following:

        a. Sets the background color of the body to beige.
        b. Sets the text color of the body to SlateBlue.
        c. Sets the font of the body to Verdana.
        e. Sets size of all the size 2 headings to 150% larger              
           than the body font.
        f. Sets size of all the size 3 headings to 120% larger              
           than the body font.
        g. Sets the font of all size 2 and size 3 headings to
           Harrington.
        h. Centers all size 2 headings.
        i. Indents all paragraphs by one centimeter.

        Ans:

        <style type="text/css">
        body { background-color:beige; color:SlateBlue;
               font-family:Verdana; }
        h2   { font-size:  150%; font-family:Harrington; }
        h3   { font-size:  120%; font-family:Harrington; }
        p    { text-indent:1cm; }
        </style>