[edit] [comment] [remove] |2007-04-18| e1 # Vorbereitung

Diese Übung führt Sie in die Gestaltungsmöglichkeiten von HTML Dokumenten anhand von CSS ein. Zunächst starten wir EditPlus.

Erzeugen Sie eine neue HTML-Datei (quiz.html) und erstellen Sie das Grundgerüst einer HTML-Seite.

<html>
  <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 deutsches 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>

Sehen Sie sich das Ergebnis im Webbrowser an.

 

[edit] [comment] [remove] |2007-04-18| e2 # CSS Bereich

Unterhalb unseres <title> Elements fügen wir den CSS-Style Bereich ein. 

<html>
  <head>
    <title> Quiz </title>
    <style type="text/css">
       /* ... */
    </style>
  </head>
  <body>
     ...
  </body>
</html>

Verwenden Sie zur Lösung nachfolgender Aufgaben bitte die Online Dokumentation SelfHTML CSS-Referenz (am besten in einem separaten Browserfenster).

 

[edit] [comment] [remove] |2007-04-18| e3 # Aufgabe 1

Modifizieren Sie die Dokumenteigenschaften, indem Sie

  • die Hintergrundfarbe einstellen (background-color).
  • einen Rand links und rechts vorgeben (margin-left, margin-right).
  • die Schriftgrösse verdoppeln (font-size).
  • die Schriftart wechseln (font-family).
 

[edit] [comment] [remove] |2007-04-18| e4 # Aufgabe 2

Verändern Sie die Überschrift, indem Sie

  • die Schriftfarbe wechseln (color).
  • den Text zentrieren (text-align).
  • die Schriftgrösse verdoppeln (font-size).
  • die Schriftart wechseln (font-family).
  • den Text unterstreichen (text-decoration).
 

[edit] [comment] [remove] |2007-04-18| e5 # Aufgabe 3

Verändern Sie die Quizfrage (<div> Element), indem Sie

  • einen Rahmen zeichnen (border).
  • die Hintergrundfarbe einstellen (background-color).
  • den Rahmen zentrieren (text-align).
 

[edit] [comment] [remove] |2007-04-18| e6 # Aufgabe 4

Verändern Sie die Antwortliste (<ol> Element), indem Sie

  • Grossbuchstaben verwenden (list-style).
  • die Textfarbe wechseln.
  • den Text fett und kursiv setzen. (font-weight, font-style).
 

[edit] [comment] [remove] |2007-04-18| e7 # Aufgabe 5

Verändern Sie die Brokerliste (<ul> Element), indem Sie

  • den runden Listenpunkt in einen quadratischen Listenpunkt ändern (list-style-type).
  • ein eigenes kleines Icon verwenden (im Internet ein Bild *.png, *.gif suchen und runterladen) (list-style-image).
 

[edit] [comment] [remove] |2007-04-18| e8 # Aufgabe 6

Verändern Sie die Dokumenteigenschaften, indem Sie eine Hintergrundgrafik verwenden (im Internet ein Bild *.gif, *.png suchen und runterladen)

  • Hintergrundgrafik (background-image).
  • Grafik bildschirmfüllend.
  • Grafik einzeln bildschirmmittig (background-position).
  • Grafik nur am rechten Rand (background-repeat).
  • Grafik nur am oberen Rand.
 

[edit] [comment] [remove] |2007-04-18| e9 # Aufgabe 7

Lagern Sie die CSS Angaben in eine externe Datei quiz.css aus und betten Sie diese in Ihr HTML Dokument ein.