CSE 190 M, Spring 2007
Midterm Exam

• You have 60 minutes to complete this exam.
  You may receive a deduction if you keep working after the instructor calls for papers.
• This test is open-book/notes.
• You may not use any computing devices of any kind including calculators.
• Please do not abbreviate any code on your exam.
• If you enter the room, you must turn in an exam before you leave.
• You must show your Student ID to a TA or instructor for your exam to be accepted.

Good luck!

1. HTML/CSS Interpreting (30 points)

Draw a picture of how the following HTML and CSS code will look when the browser renders it onscreen. Indicate any non-default font with a squiggled underline like . You can indicate a background coloring by shading lightly or by drawing repeated diagonal lines like .

h1 {
  float: right;
  font-size: 10em;
}
h2 {
  border: 2px solid black;
  clear: both;
  font-family: monospace;
}

.one { background-color: yellow; }
#one, #two, h2 { width: 50%; }
#two {
  text-align: right;
  border: 3px solid black;
}
.three {
  border-top: none;
  border-bottom: none;
}

2. HTML/CSS Programming (30 points)

Write the XHTML 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 defaults about the desired appearance:

• All text uses default sizes and fonts, except for the characters' names which are written in a sans-serif font.
• The section of dialogue is 50px from the right edge of the page and occupies 16em in width. No manual line breaks have been inserted into the text.
• The text for each character's name is bold and underlined.
• The images come from the files inigo.jpg and rugen.jpg and are drawn at their default sizes.
• Rugen's lines are colored with a background of (red=221, green=221, blue=221) or DDDDDD. 5px separate these images from any surrounding content.
• 5px of vertical space separate each of the bulleted lines.