Docstoc
EXCLUSIVE OFFER FOR DOCSTOC USERS
Try the all-new QuickBooks Online for FREE.  No credit card required.

Test2-sol

Document Sample
Test2-sol Powered By Docstoc
					COVER SHEET
                           CSCE 102 | Spring | Mar 21st ‘12 | Test 2 | Section: 7,8,9
    Name: ________________________________________________________________ Section: _________
    Email (REQUIRED): ________________________________________________________________________

              (Please read all the questions carefully and answer the questions. Total possible points is 100)

1. List the attributes that are required for <img> element.                                                  (2 pts)

        src              alt

2. Label each area in the box model below.                                                                  (4 pts)




   1.   Margin
   2.   Border
   3.   Padding
   4.   Text/content

3. Which tag configures a block display area or division on a page                                          (2 pts)

                 div

4. Write the HTML5 code to make the image Google.jpg (which is inside the folder named Images ) a link to
   http://www.google.com                                                                            (5 pts)


<a href=”http://www.google.com”> <img src=”Images/Google.jpg” alt=”Google picture”> </a>

5. List out any 2 of the new HTML5 elements and their description                                           (2 pts)

Header, nav, article, section, aside, footer etc…
6. Write the CSS property that makes the list markers as image with source web.png for the given unordered list.
                                                                                                    (3 pts)
     ul{list-style-image : url(web.png)}

7. Write the HTML5 code which makes the background.jpg as the background of the webpage and #FF00EE as the
   background color of the same web page                                                       (5 pts)

    Body{background-color: #ff00ee;
             Background:url(background.jpg) }

8. Write the code for an unordered list of following websites                                               (4 pts)
   http://facebook.com             http://www.google.com                         http://www.youtube.com

    <ul>
    <li> <a href=” http://facebook.com”> Facebook </a> </li>
    <li> <a href=” http://www.gooogle.com”> Gooogle </a> </li>
    <li> <a href=” http://www.youtube.com”>Youtube </a> </li>
    </ul>

9. Give CSS code which draws a border of width 3px with dashed style and in red color around the h1 element.
                                                                                                     (3 pts)
   H1{Border-width: 3px ; border-style: dashed ; border-color: red}
   Or
   H1{ Border: 3px dashed red }

10. Label each variable as either valid or not valid according to JavaScript                                (8 pts)

    confirm     Not valid                         fIRSTsECOND valid

    first_second valid                            first2nd valid

    1st Not valid                                 alert Not valid

    Name*section        Not valid                 First#Second Not valid
11. Write code to create the following table                                                                (8 pts)

                                                     Salaries of Alice and Bob
                    Name                                    Min Salary                         Max Salary
Alice                                       65,000
Bob & Cathy                                 60,000                                  70,000
                                            55,000                                  60,00




    <table>
    <caption> Salaries of Alice and Bob </caption>
    <tr> <th> Name </th>       <th> Min salary </th> <th> Max salary </th> </tr>
    <tr> <td> Alice</td>       <td colspan=”2”> 65,000 </td> </tr>
    <tr> <td rowspan=’2’> Bob & Cathy</td>           <td > 60,000 </td> <td > 70,000 </td> </tr>
    <tr> <td > 55,000 </td> <td > 60,000 </td> </tr>
    </table>

12. . Write code to creating the following button                                                        (3pts)




        <input type=”button” value=”Click me”>


13. Given the page layout below, fill in the CSS to create the layout as shown. This is a two column design with a
    100px space between the two columns, a banner and a footer.                                           (5 pts)




<style>
div#banner      { position : absolute;         width : 600px;   top : 0px;       left : 0px;      }

div#cLeft       { position : absolute;         width : 250px;   top : 300px;     left : 0px;      }

div#cRight      { position : absolute;         width : 250px;   top : 300px;     left : 350px;}

div#footer      { position : absolute;         width : 600px;   top : 700px;     left : 0px;}
</style>
14. . Write JavaScript code that will rollover the given image into dog.png when mouse is over it and roll back to
    cat.png when mouse is off of it.                                                                     (4 pts)
    <img src=”cat.png” alt=”cat image”

    Onmouseover = this.src=’dog.png’
    onmouseout= this.src=’cat.png’>

15. Write the CSS code to center all the div elements in the page                                                (2 pts)


        div{ text-align:center }



16. Given the following CSS, what styles are applied to the paragraph .                                            (3 pts)
    <style type=”text/css>
    P{ background-color:yellow; }
    p.label{color:red ; text-decoration:underline}
    </style>
    .
    .                                      red text, yellow background and underlined
    .
    <body>
    <p class=”label”>
    The University of South Carolina is home to more than 200 years of history and tradition, rising from a single building in
    1805 on what would become the heart of the campus, the Horseshoe. The 11 buildings that now make up the Horseshoe
    frame a lush lawn that is an irresistible gathering place.
    </p>
    </body>

17. Give one line of CSS code which makes the text under markers to be indented in a given list.                 (2 pts)




18. Write one line of code which makes the firefox.png as a favorite icon of the given webpage                   (3 pts)

    <link rel=’icon’ href=’firefox.png’ type=”image/x-icon”>

19. Explain the effect of following embedded style sheet on the following table.                                 (6pts)
       <style>
       tr : first-of-type { background-color : red }
       tr : last-child { color : pink }
       tbody td { font-size : 38pt }
       th { color : green }
       </style>
                                   High low temp of different months and their analysis
                 Month                                     High                                         Low
                   Jan                     60                                    50
              Feb                       65                                      45
              Mar                       75                                      55
 st    nd
1 and 2 high and low temperature        Mar                                     Feb
months                                  Feb                                     jan




20. Write code to the following text field                                                        (3pts)




Name : <input type=”text”>


21. What does the Pseudo class hover do?                                                                   (2 pts)

It implements the changes when the mouse is over the hyperlink

22. Write the HTML elements for the three elements below. What is the functional difference between the
       Head element                                                                                 (6 pts)
       Header element
       Heading Elements


23. Explain in detail the difference between the following two lines of code. How is the output different?
       Var test=”easy”                                                                                   (2 pts)
       alert(“This is a test 2” + test);
       alert(“This is a test 2” + “test”);
       This is a test 2 easy
       This is a test 2 test

24. Write CSS code to make all the visited links in web page have text decoration of underline.            (3pts)

   a:visited{text-decoration: underline}

25. For the given function below, what is the output written to the screen.                                (4 pts)

   …
   function add(x, y)
   {
    x = x + x;
    Y = y + x;
    alert(x + y);           10210
   }
   …
   </script>
   …
   <p onclick=”add( 5, “2” )> Click me to make a number appear</p>


26. Write the code that changes the text color of h1 elements into blue when the paragraph is clicked (4 pts)
……

<h1 id=”h”> Heading </h1>

<p onclick=”document.getElementById(‘h’).style.color = ‘blue’ ”>

This is a paragraph </p>
……..

27. Circle and explain 5 errors present in the following of code                                     (5 pts)
<style>

 p {color:<blue>}

 h10 {text-font = “Comic Sans” }

 document.body.style.color = “red”

 <div> text-align:justify</div>

 span.class {color:pink; font-size:24pt}

</script>

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:5
posted:8/17/2012
language:
pages:7