CSE 190 M, Spring 2008
Midterm Key

1. HTML/CSS Interpreting

2. HTML/CSS Programming

XHTML code:

<div id="main">
    <h1>
        <span class="highlight">Wikipedia - Geneva</span>
    </h1>

    <p>
        Geneva is the second-most populous city in ...
    </p>

    <img src="switzerland.png" alt="Switzerland" />

    <p>
        Geneva is widely regarded as a global city, ...
    </p>

    <p>
        Geneva is also the name of Geneva Francine Stepp, ...

        <ul>
            <li>a desktop wallpaper</li>
            <li>the subject of a recent midterm exam</li>
        </ul>
    </p>
</div>

<div id="info">
    <h1>Geneva, the name</h1>

    <p>
        (f)

        English

        Possibly a shortened form of Genevive, or possibly from
        the name of the city in Switzerland.
    </p>

    <p>
        Similar names:
    </p>

    <ul>
        <li>Jenna</li>
        <li>Jennifer (Jenny)</li>
        <li>Genevieve</li>
        <li>Genevive</li>
    </ul>
</div>

CSS code:

body {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    font-family: "Verdana", sans-serif;
    font-size: 14pt;
}

.highlight {
    background-color: yellow;
    border: 5px solid orange;
}

#main {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#main img {
    float: left;
    margin-right: 1em;
}

#info {
    border: 5px solid red;
    font-size: 9pt;
    padding: 1em;
    position: absolute;
    right: 1em;
    top: 1em;
    width: 20%;
}

#info li {
    font-style: italic;
}

3. Javascript Programming

window.onload = function() {
    var imgs = $$("#pics > img.geneva");
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = imgClick;
    }
};

function imgClick() {
    this.remove();
    $("favorites").appendChild(this);
    
    var li = document.createElement("li");
    li.textContent = "Moved " + this.src + " to favorites.";
    $("actions").appendChild(li);
}