Erzeuge eine neue XHTML-Datei (quiz.html) und erstelle das Grundgerüst einer XHTML-Seite:

XHTML-Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
  <head>
    <title> Quiz </title>
  </head>
  <body>
    <h2> Wer wird Auktionär </h2>
    <p>In diesem Quiz können Sie mit der richtigen Beantwortung von 15 Fragen 
    zum Auktionär werden. Als Hilfestellung stehen Ihnen die bekannten drei 
    Broker zur Verfügung:</p>
    <ul>
    	<li>Publikumsbroker</li>
    	<li>Anrufbroker</li>
    	<li>Fifty/Fifty Broker</li>
    </ul>

    <p>Und hier kommt auch schon die erste Frage:</p>

    <div>Ein bekanntes Sprichwort lautet:
       <div>"Es ist noch kein Meister .."</div>
       <ol>
         <li>.. aus dem Bett gefallen.</li>
         <li>.. zur Ruhe gekommen.</li>
         <li>.. sitz' ich beim Schwager vorn.</li>
         <li>.. vom Himmel gefallen.</li>
       </ol>
     </div>
     <p>Herzlichen Glückwunsch, wollen Sie weitermachen ?</p>
  </body>
</html>

Lagere die CSS Angaben in eine externe Datei quiz.css aus und bette diese in dein HTML Dokument ein.
Modifiziere die Dokumenteigenschaften, indem du
- die Hintergrundfarbe einstellst (background-color).
- einen Rand links und rechts vorgibst (margin-left, margin-right).
- die Schriftgrösse um 20% vergrößerst. (font-size).
- die Schriftart wechselst (font-family).
Verändere die Überschrift, indem du
- die Schriftfarbe wechselst (color).
- den Text zentrierst (text-align).
- die Schriftgrösse verdoppelst (font-size).
- die Schriftart wechselst (font-family).
- den Text unterstreichst (text-decoration).
Verändere die Quizfrage (<div> Element), indem du
- einen Rahmen zeichnest (border).
- die Hintergrundfarbe einstellst (background-color).
- den Rahmen zentrierst (text-align).
Verändere die Antwortliste (<ol> Element), indem du
- Grossbuchstaben verwendest (list-style).
- die Textfarbe wechselst.
- den Text fett und kursiv setzt. (font-weight, font-style).
Verändere die Brokerliste (<ul> Element), indem du
- den runden Listenpunkt in einen quadratischen Listenpunkt änderst (list-style-type).
- ein eigenes kleines Icon verwendest (im Internet [*.gif, *.png] suchen und runterladen) (list-style-image).
Verändere die Dokumenteigenschaften, indem du
- eine Hintergrundgrafik mit Farbverlauf verwendest.
- Formatiere den Hintergrund so (background-attachment, etc.), wie es dir am besten gefällt.
Experimentiere weiter, indem du
- CSS-Elemente einbaust, die du noch nicht verwendet hast…

11.2.7.2) Übung 2 - Einfache Elemente