Get documents about "Test2-sol
Document Sample
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>
