CSE 190M Extra Exam Problems
1. HTML / CSS Tracing
Draw a picture of how the following HTML/CSS code will look when the browser renders it on-screen. Assume that
the HTML is wrapped in a valid full page with a head and body. Indicate a non-white background by shading lightly
or by drawing diagonal lines like . Assume that [Link] is a generic picture of a stick man (draw it
yourself) 3-4 times the height of a line of text. It is possible that some CSS rules will not apply to any elements.
HTML:
<h1 id="foo">heading</h1>
<p>A paragraph</p>
<p class="foo">Here is a picture
of a stick man: <img src="[Link]"
alt="stick man" /> I love stick
men <br />because they are so great.</p>
<h2>A second heading</h2>
<p id="bar">Another paragraph</p>
CSS:
h1 {
text-align: center;
font-size: 300%;
}
h2 {
font-family: monospace;
border: 2px dashed black;
border-bottom: none;
}
.foo { border: 2px solid black; }
#foo { background-color: yellow; }
#bar, .bar { width: 2em; }
1 of 9
2. HTML / CSS Tracing
Draw a picture of how the following HTML/CSS code will look when the browser renders it on-screen. Assume that
the HTML is wrapped in a valid full page with a head and body. Indicate a non-white background by shading lightly
or by drawing diagonal lines like . It is possible that some CSS rules shown will not apply to any elements.
HTML:
<h1><h1></h1>
<p id="one">You only think I guessed wrong! That's what's so funny! I
switched glasses when your back was turned!</p>
<p class="one">You fell victim to one of the
classic blunders!</p>
<p class="one" id="two">Never get involved in<br />a land
war<a href="[Link]
<h2 class="three">Ha ha ha!</h2>
CSS:
h1 { .one { background-color: yellow; }
float: right; #one, #two, h2 { width: 50%; }
font-size: 10em; #two {
} text-align: right;
h2 { border: 3px solid black;
border: 2px solid black; }
clear: both; .three {
font-family: monospace; border-top: none;
} border-bottom: none;
}
2 of 9
3. HTML / CSS Coding
Write the HTML and CSS code necessary to recreate the following appearance onscreen, between but not including
the thick black lines. (No manual line breaks have been inserted into the text.) Assume that the code you're writing
will be placed inside the body of the page. Part of your grade comes from choosing appropriate tags to match the
semantics of the content. You should also write valid code that would pass the W3C validators, and separate stylistic
information from HTML.
Some details about the desired appearance:
• All text uses default sizes and font families.
• The central section of dialogue is centered within the page and occupies 50% of the page width.
• The image of Vader at right comes from the file [Link], which you should set to 20% of the page width.
• There are no margins or padding separating any text.
Mark up the text on the next page with your HTML tags. If a tag can't physically be written in the space provided,
write it in the margins and draw an arrow to where it should be inserted in the text. Write the CSS styles on the page
after next.
3 of 9
3. HTML / CSS Coding (writing space)
VADER
If you only knew the power of the dark side.
Obi-Wan never told you what happened to your father.
LUKE
He told me enough! It was you who killed him.
VADER
No. I am your father.
LUKE
No. No. That's not true! That's impossible!
VADER
Search your feelings. You know it to be true.
4 of 9
3. HTML / CSS Coding (writing space)
5 of 9
4. JavaScript / DOM
Write the Javascript code to fill the selection box below with the following five choices: Garfield, Odie, Nermal,
Pooky, and Jon. When the selected item in the box changes, the image below the selection box changes to display a
picture of the character. The images are located in the images/ subfolder from the web page and are saved in JPG
format with file names matching the character names. For example, the image of Pooky is stored in the file named
images/[Link]. Initially, Garfield should be selected and [Link] should be shown.
<select id="characters" size="5"></select>
<div><img id="comic" src="" /></div>
After your Javascript code runs, the appearance and behavior should be the following
Write your answer on the next page.
6 of 9
4. JavaScript / DOM (writing space)
7 of 9
5. JavaScript / DOM
Write the Javascript code to add a gradient to the HTML gradient section below. The gradient is formed by creating
20 shaded boxes, starting with the bigger boxes and moving forwards to the smallest box. The largest box starts at
400x400px and decrements in size by 20px each level. The color of the outermost box is rgb(255, 255, 255) and
decrements by 10 values for each color (e.g. the second largest box would be rgb(245, 245, 245)).
<div id="gradient"></div>
After your Javascript code runs, the appearance and behavior should be the following:
Write your answer on the next page.
8 of 9
5. JavaScript / DOM (writing space)
9 of 9