Webseitengestaltung mit Nvu/KompoZer
unter Windows für Firefox ab 2, Opera ab 9 und Internet Explorer ab 6 oder Ubuntu für Firefox ab 2 und Opera ab 9
- Aufgabe 2 -

Zur Startseite Kurs1, zur Aufgabe 1, zur Aufgabe 3, zum  Ergebnis 1 oder zum aktuellen Blog zum Kurs1a für anonyme Fragen. Kursgarantie per email an kurs1 att elew punkt de

Ziele:

Ein Bild wird in einem <div>-Containern platziert, die <div>-Container werden verschieden angeordnet.
Inline styles werden im Stylesheet zusammengefasst.
<p> wird eingeführt.

Wichtig:

Mit "KompoZer" ist, wenn nicht extra erwähnt, sowohl Nvu als auch KompoZer gemeint. Damit die Bilder im Text beim Speichern unter neuem Namen erhalten bleiben, KompoZer so einstellen:
Menü Extras / Einstellungen / Häkchen setzen bei 'Grafiken und andere eingebundene Dateien gemeinsam mit Seiten speichern'.

Routine:

Dieser Text wird von dir im großen Fenster von KompoZer betrachtet. Wenn du diesen Text stattdessen mit deinem Browser betrachtest, kannst du die Aufträge mit KompoZer nicht ausführen. Lade spätestens jetzt mit KompoZer diese Seite aus dem Internet:
KompoZer Menü 'Datei' / 'Webadresse öffen' / Dialog 'Neue Seite oder Vorlage erstellen' URL eingeben www.elew.de/kurs1/aufg02.html / Schaltfläche 'Erstellen'.
Speicher diese Seite mit KompoZer auf deiner Festplatte, z. B. auf dem USB-Stick unter "F:\kurs1\aufg02.html" als Original für einen Neustart der Aufgabe 2.

Speicher diese Seite an gleicher Stelle mit dem Titel "Ergebnis 2" und dem Dateinamen "erg02.html" als Ergebnisseite und für eine Fortsetzung, falls du einfach mal während der Aufgabe ab- und ausschalten willst:
KompoZer Menü 'Format' / 'Seitentitel und -einstellungen' / Titel "Ergebnis 2" / OK / Menü 'Datei' / 'Speichern unter...' "erg02.html" / 'Speichern'.
Lösche alles hier drüber inklusive dieser Zeile und immer während der Aufgabe alle erledigten Aufträge a), b), c) usw.

Aufgabe:

a) Diese Seite hat nicht die blaue Schrift von der vorigen. Ein dunkleres Blau wäre schöner.

Statt des Farbnamens wähle das dunkle Blau aus dem Textfarbe-Dialog:
Rechtsklick auf <body> in der Statuszeile /
für Nvu: / 'Inline styles' und dann 'Texteigenschaften' wählen ...
für KompoZer: / 'Inline Styles' / Dialogfenster 'Inline Styles',  Register 'Text' /...
Gemeinsam: auf die Taste rechts vom Eingabefeld für Farbe, siehe Bild 1 roter Kreis, klicken. Bei Nvu ist das im Dialog oben rechts. Es erscheint das Text-Farbe-Fenster. Das Kästchen mit dem dunklen Blau anklicken. Unten drittes Kästchen von rechts. KompoZer setzt die sechstellige Hexadezimalzahl #000066 ein. Dort kann dieser Wert verändert werden. 'OK' klicken. 

Dialogfenster Textfarbe

Wenn aber die Hexadezimalzahl mit dem vorangestellten #-Zeichen ohnehin bekannt ist, kann sie ja gleich in das Farbeingabefeld einen Dialog zuvor eingegeben werden. Noch einmal 'OK' klicken.
Auskunft über Webfarben gibt die Wikipedia

b) Der Link zur Wikipedia kann hier im KompoZer nicht benutzt werden. Auch nicht im Editiermodus Vorschau. Es muss zum Testen von Links, aber auch zum Ausführen von Skripten, immer ein Browser benutzt werden.
Wird der Link zur Wikipedia im Browserfenster angeklickt, öffnet sich ein neues Browserfenster.
Bei dem Link, wie er beim Ergebnis 1 benutzt wird, wechselt der Inhalt, das Fenster jedoch bleibt.
Klicke hier im Kompozer doppelt auf den Wikipedia-Textlink. (Ach der ist schon mit dem erledigten Absatz weggelöscht? Brav, brav. Dann eben einfach mit [Strg]+[Z], auch mehreren, auch einmal zurückholen.)

Es öffnet sich das Dialogfenster 'Link-Eigenschaften' sofort. Das funktioniert bei existierenden Links, z.B. für eine Änderung. Suche das Häkchen für "Link wird geöffnet: In einem neuen Fenster". Das bewirkt den Unterschied, ob im selben Fenster die neue Seite erscheint oder wie beim Wikipedia-Link in einem weiteren Browserfenster!
Einfach nur ansehen und merken. 'Abbrechen'.

c) KompoZer hat bei der Farbwahl für dunkelblauen Text den Code für die RGB-Werte in den inline style gesetzt: <body style="color: rgb(0, 0, 102);"> Wechsel in den Editiermodus 'Quelltext' und ersetze bei <body> diese RGB-Eingabe durch den Hexadezimalwert in dieser Form: <body style="color: #000066;"> . Speicher das dann,  z.B. mit [Strg]+[S]. Beim Speichern im Quelltext wechselt KompoZer immer in den Editiermodus 'Normal'. Ergebnis deines Editierens im Quelltext: Die Textfarbe bleibt. Kontrolliere nun im Quelltext, ob die Hexadezimalwerte beibehalten oder von KompoZer rückgeändert wurden und komm zu d) in 'Normal' zurück.

d) KompoZer korrigiert den Quelltext, wenn KompoZer das für erforderlich hält. Auch soeben mit der Rücksetzung auf die RGB-Werte. Manchmal stört es nicht, so wie bei den RGB-Werten, meistens ist es nützlich wegen der Fehlerbeseitigung, manchmal ist es aber auch des Guten zuviel und die Absichten des Autors werden hintertrieben. Dafür wird gelegentlich KompoZer kritisiert. Insbesondere, wenn der Autor seinen Code mit Leerzeichen und Zeilenumbrüchen so richtig schön angeordnet hat und KompoZer diese Gliederung dann zerstört.

Jetzt soll der Inline Style vom <body>-Tag zu einer CSS-Regel werden. (CSS=Cascading Style Sheet) KompoZer unterstützt sehr stark die Verwendung von CSS.
Öffne den Dialog....
Für Nvu: 'Text properties' über den Weg Statuszeile / Rechtsklick auf <body> / Inline styles / Texteigenschaften.
Für KompoZer: 'Inline Styles' über den Weg Statuszeile / Rechtsklick auf <body> / Inline Styles.
Gemeinsam: Bild 2. Siehe da, der Hexadezimalwert #0000666 für die Textfarbe wird doch verwendet.

Textfarbe im Inline Styles Dialog Dialog 'Extrahieren'

e) Wähle im Dialog 'Inline Styles', Bild 2, das 'Extrahieren und allgemeinen Style anlegen'.
Für Nvu: Über den Rechtsklick auf den <body>-Tag in der Statuszeile und das Kontextmenü 'Inline styles' geht es direkt zum Dialog 'Extrahieren und allgemeinen Style anlegen' ganz unten im Unter-Kontextmenü. Der Dialog ist auch in der deutschen Nvu-Version in Englisch und hier im Bild 3 gibt es als Bildschirmkopie vom KompoZer die deutsche Übersetzung dazu. Alles andere ist gleich.
Gemeinsam: Es gibt nur einmal <body> und so kann der style für alle Elemente des gleichen Elemententyps extrahiert werden. Bild 3. OK.

Das Bild 4 zeigt im Vergleich den Quelltext einmal mit Inline Style, Quelltext links Zeile 8, und einmal mit dem extrahierten Style, der neuen Regel, Quelltext rechts, Zeilen 7.-10. KompoZer hat den Inline Style von <body> in Zeile 12, vorher Zeile 8, entfernt.

Ganz allgemein, im gesamten Körper braucht dank CSS überhaupt nicht formatiert zu werden. Die Formatierung der Textfarbe ist jetzt mit CSS in den Kopf der Webseite verlagert worden. Dieser Bereich, header genannt, wird mit dem Tag <head> geöffnet und mit </head> geschlossen. Zeilen 3 und 11. Dazwischen befindet sich jetzt die neue Regel für alle Elemente des Typs <body>.
Änderung des Quelltextes nach Extrahieren

(Nicht vergessen, alles inklusive e) bis hierher kann jetzt weg. Und der Titel sollte bei dir auch "Ergebnis 2" lauten.)

f) Die zwei blauen Rahmen aus dem Ergebnis 1 sind ganz unten für die Weiterarbeit an der neuen Webseite eingefügt worden. Sie haben beide gleichlautende Inline Styles.
Mit einer gemeinsamen Regel für die gleiche Formatierung, die jetzt kommen wird, kann Code gespart werden. Vorteil 1.
Und sollte einmal das Format geändert werden, reicht es, an einer einzigen Stelle zu ändern. Vorteil 2.
Und im Körper (body) gibt es eine Formatierung weniger, da gehören ja keine hinein. Vorteil 3.
Lösche alles hier drüber weg und lasse drei Leerzeilen oben stehen.

g) Weil die Weiterarbeit mit den Containern am Fuß der Seite und dem Lesen der Aufträge unpraktisch ist, sollen die Teile unten ausgeschnitten und ganz oben eingefügt werden.
Was jetzt kommt, ist quasi ein Blindflug, aber sicher leicht zu merken?
Klicke ganz unten auf der Seite in den Container mit dem Lore-ipsum-Text, markiere das Ganze mit Linksklick auf <div> in der Statuszeile, hole es mit Ausschneiden in die Zwischenablage und füge es ganz oben in die dritte Leerzeile ein. Also: Linksklick in den Lore-ipsum-Text, Linksklick auf <div> in der Statuszeile, Menü Bearbeiten / Ausschneiden, Mauszeiger in die dritte Leerzeile setzen, Menü Bearbeiten / Einfügen.
Hole den zweiten Rahmen auch nach oben und setze ihn unter den ersten. Lösche dann die erledigten Aufträge.

h) Standardmäßig werden <div>-Container vom Browser untereinander gesetzt. Um sie anders anzuordnen, werden sie "gefloatet". Floaten, auf Deutsch treiben, schweben, ist vielleicht schon der deutsche Fachbegriff. Die Rahmen werden also gefloatet. Klicke in den unteren Duis-autem-Text und ergänze den Inline Style:
In den Container klicken / <div> in der Statuszeile rechtsklicken /...
Für Nvu: Kontextmenüs 'Inline styles' - 'Box-Eigenschaften' / Dialog 'Box properties' Puffer:  Links auswählen / OK.
Für KompoZer: Kontextmenü 'Inline Styles' / Dialogfenster Register 'Box' wählen / Puffer:  Links auswählen / (Achtung, der Text umfließt jetzt den Rahmen) kein OK dafür Register 'Allgemein'. Unten steht der neue Style "float: left". Gucken und OK.

i) Durch das Floaten des Containers nach links wird der Platz daneben freigegeben und der Text, der standardmäßig unter dem Container stand, kann rechts daneben hoch "schweben", wenn das Bildfenster noch Platz dafür hat.
Floate den oberen Container durch Ergänzen des Inline Styles auch nach links. Wegen einer oder mehrerer Leerzeilen zwischen den Containern könnte der zweite nicht auf gleicher Höhe stehen wie der erste. Falls das so ist, lösche die Leerzeile/n.
Geht das Löschen schief, z.B. rutscht der Text aus dem Container, hilft das Rückgängigmachen mit [Strg]+[Z]. Rückgängig von rückgängig geht auch mit [Strg]+[Y]. Aber viel besser: Markiere den oberen Container und wechsel in den Editiermodus 'Quelltext'. Dem markierten <div>-Container folgt im Quelltext der <br>-Tag für den line-"break", den Zeilenumbruch.
Lösche das oder die <br> im Quelltext zwischen den Containern und komm hierher zurück.
 
Jetzt sind die beiden Container nebeneinander und der Text umfließt sie rechts davon, falls der Bildschirm breit genug ist. Wird das Browserfenster noch schmaler gemacht, lade dein Ergebnis in den Browser und probiere das, ordnen sich die Rahmen untereinander an und der Text umfließt sie rechts davon.

Markiere in KompoZer die erledigten Aufträge, um sie zu löschen. Deine Markiererei folgt dem floaten. Nach dem Löschen floatet j) nach oben.

j) So wie aus dem Inline Style von <body> eine Regel wurde, soll auch der Inline Style des linken Rahmens zur Regel extrahiert werden. Klicke in den Lorem-ipsum-Text, um in der Statuszeile den passenden <div>-Tag anklicken zu können. Führe das Extrahieren der Inline Styles durch:
In "Lorem ipsum..." reinklicken / in der Statuszeile in das <div> rechtsklicken / Inline Styles / Inline Styles 'Extrahieren und allgemeinen Style anlegen' / Dialog Extrahieren.. / setze 'alle Elemente' und 'des gleichen Elemententyps' oder auf Englisch 'all elements' 'of same element type' markieren / OK.

k) Erstaunt das Erscheinen eines dritten Rahmens?

Der Textlink "Weiter mit..."erhielt in Aufgabe 1 seinen eigenen <div>-Container wegen des Ausrichtens nach rechts. Jetzt gibt es im header eine allgemeine Regel für div und die gilt jetzt auch für den Textlink inklusive Größe, Rahmen usw., da die Regeln des ersten Containers nun zu allgemeinen Regeln für alle Elemente des gleichen Typs, hier alle divs, wurden.
Der zweite Rahmen gehorcht aber seinem eigenen Inline Style. KompoZer hat nur die Inline Styles vom ersten Container entfernt. Ein Inline Style im Tag hebelt die allgemeine Regel aus.

l) Damit der Textlink-Container nicht der allgemeinen Regel folgt, könnte er Inline Styles erhalten. Besser ist es, im Körper <body> keine Formatierungen auftauchen zu lassen, also dem Textlink eine eigene Regel zu geben. Um eine weitere Containerart kennen zu lernenhen, wird der Textlink in einen anderen Typ von Container gesetzt. Aus <div> soll <p> werden. p steht für Paragraph oder Absatz.

Zuvor soll der dritte Container mit dem Textlink nach oben in die oberste Leerzeile geschoben werden. (Gibt es bei dir über den Containern keine zwei Leerzeilen, dann füge sie oben ein. Klappt das nicht, dann füge im Quelltext über dem obersten <div> zweimal <br> ein. Das wäre gleich hinter der Zeile mit <body>.)

Gehe nun so vor:
Klicke in den Textlink., markiere den Textlink durch Linksklicken des <div> in der Statuszeile, packe den Textlink-Container mit der Maus und schiebe ihn in die oberste Leerzeile. Das spart das Ausschneiden, die Zwischenablage und das Einfügen.
Mit [Strg]+[Z] und [Strg]+[Y] hast du beliebig viele Versuche frei.

m) Markiere wieder den Textlink durch Linksklicken in der Statuszeile. Das stellt sicher, dass beim Markieren nicht irgendein Zipfel vergessen wird. Wähle aus der Liste 'Absatzformat auswählen' in der Format-Symbolleiste links das zweite Element 'Absatz'. In der Statuszeile ist jetzt nach dem <div> der gewünschte <p>-Tag zusätzlich erschienen. Der <a>-Tag gehört zum Link. a steht für Anker.

n) Lösche das unnötige <div>, in dem der Absatz steckt. Rechtsklick in der Statuszeile auf das <div> und im Kontextmenü 'Tag entfernen' wählen.<p> steht jetzt ohne div und ohne dessen Regeln da.
Eventuell richtest du den Textlink per Button oben nach links aus. Das ist der Anfang einer sehr einfachen Navigation
Ist der Link noch markiert, steht in der Statuszeile <body> <p> <a>.

o) Was ist bis jetzt erledigt worden? Das Format der Textfarbe wurde zur allgemeinen Regel für body. Das Format der div-Container ebenfalls. Dabei wurde der bis dahin nur rechts ausgerichtete Textlink dieser neuen Regel unterworfen und erhielt einen Rahmen und die allgemeine Größe. Durch Umwandlung des <div> in ein <p> wurde der Textlink wieder von Größe und Rahmen befreit. Die Rahmen wurden gefloatet. Der Text umfließt die gefloateten Elemente.

Weiter: Dieser Auftrag o) ist auch ein Absatz. Bei dieser Aufgabe 2 wurden alle Aufträge in einen eigenen Absatz gesetzt. Das Umfließen von diesem Absatz o) kann mit einem Inline Style aufgehoben werden:
Klicke in den Absatz mit dem Auftrag o). Rechtsklicke in <p> des Auftrags o) / Kontextmenü Inline Styles /
Für Nvu: / 'Box-Eigenschaften / Im Dialog 'Box properties' bei 'Clear:' ein Links eingeben..
Für KompoZer: / Register 'Box' / Bei 'Aufhebung:' Links auswählen / Wechsel zum Register 'Allgemein / prüfendes Angucken vom neuen " clear: left; "
Gemeinsam: /OK.
Auf float: left; ist zur Aufhebung ein clear: left; nötig. Demgemäß bei  float: right; ein clear: right.

Bild 5 zeigt den vergößerten header mit den zwei Regeln, Zeilen 8-17. Zuerst steht das Element, dann gefolgt von der in geschweiften Klammern eingeschlossenen Regel.

Zwei Regeln im header 

Die Regeln im header ergeben ein sheet,  ein Blatt auf deutsch, mit den Styles. Da es intern in der Webseite vorkommt, haben wir den Begriff dafür zusammen: Internes Stylesheet, eingeschlossen von den tags <style> und </style>, Zeilen 7 und 18. Die Regeln  dazu wurden bis auf float:left in Aufgabe 1 zusammengeklickt. Padding ist der Innenabstand vom Rahmen zum Text.

p) Jetzt zum der zweiten Container mit dem "Duis autem..."-Text. Der gehorcht der allgemeinen Regel nicht, weil er noch seine Inline Styles hat. Inline Styles übertrumpfen die allgemeinen Regeln im Stylesheet.
Markiere den Container in der Statuszeile mit Linksklick, damit du ihn im Quelltext leichter findest. Wechsel in den Quelltext zu dieser Markierung und lasse nur einen Inline Style für einen 1px dicken grünen Rahmen des div-Containers übrig:
<div style="border: 1px solid green;">. Speicher das und komm dadurch automatisch für i) wieder nach 'Normal' zurück. Stören die gepunkteten Hilfslinien kannst du auch in den Editiermodus 'Vorschau' wechseln. Dort kann auch editiert werden. Wechsel nach 'Vorschau'. Der grüne Rahmen weicht nur in der Farbe vom andern Rahmen ab. Die anderen Formate entnimmt der Browser dem Stylesheet.

CSS Editor mit internem style sheet
q) Kompozer hat zum Editieren dieser Regeln einen eingebauten CSS-Editor. Im Menü wird er gestartet mit Menü Extras / CSS Editor.
Für KompoZer: Per Button lässt er sich öffnen mit der CSS Palette in der Bearbeitungssymbolleiste und per Tastaturkürzel mit [F11].

Gemeinsam: Bild 6 (Nvu oben, KompoZer darunter) zeigt im CSS Editor links das Interne Stylesheet mit zwei Regeln. Öffne den CSS Editor wie eben beschrieben und klappe die Regeln ein: Klicke dazu auf das kleine Minus links. Klappe die Regeln wieder auf. Siehst du keine Regeln, dann stöberst du hier nur rum. Wer die Aufträge ausführt, hat diese Webseite soweit verändert, dass ein internes Stylesheet im header steht, wo vorher keines war.
Klicke auf <div> links im CSS-Editorfenster und du siehst die Regel für alle <div>s. Ändere die Breite width: 300px im Register 'Allgemein' für alle <div>s von 'width: 300px' auf 400px durch Auswechseln einer 3 mit einer 4, in Nvu im Register Box, OK oder Schließen.
Das zeigt, du kannst in den einzelnen Registern zusammenklicken, was dort alles möglich ist. In KompoZer kannst du aber auch schnelle Änderungen unter 'Allgemein' selbst schreiben oder editieren.
Lösche alle Aufträge bis hierher einschließlich aller Bilder.

r) In den Rahmen links kommt ein Bild. Hole dir mit dem Browser http://www.elew.de/kurs1/img/ufer.jpg und speicher das Bild "ufer.jpg" auf deiner Festplatte im Unterverzeichnis img.

s) Lösche den kompletten Lorem-ipsum-Text, um Platz zu schaffen. Darauf folgt:
Menü Einfügen / Grafik / Dialog 'Grafik-Eigenschaften' / Register 'Adresse' . Bild 7. Mit Durchsuchen lässt du KompoZer die Adresse des Fotos auf deiner Festplatte selbst einfügen. Als Tooltip kannst du einen Text einsetzen, den deine Besucher sehen, wenn sie mit der Maus auf dem Foto verweilen.(Opera setzt von sich aus noch das Wort "Titel:" vor deinen Text.) Ein vorhandener Alternativtext wird vom Browser angezeigt, wenn er das Bild nicht findet, z.B. weil die Adresse nicht mehr stimmt. Der Alternativtext wird auch von manchen Suchmaschinen gewertet. Hier reicht "Ufer".
Die Grafikvorschau zeigt das Foto und damit, dass KompoZer über das Bild verfügt. OK. Ist die Grafikvorschau leer, klappt es mit der Grafik nicht.

Dialogfenster Grafik-Eigenschaften


t) Das Foto ist quadratisch, der Rahmen des Containers nicht. Firefox und Opera halten den Rahmen in der von der Regel vorgesehenen Höhe fest und das Foto ragt unten über den Rahmen hinaus, Microsofts Internet Explorer richtet sich mit dem Container nach der Grafik, so dass der Rahmen passend wird.  Besucher mit verschiedenen Browsern sehen hier unterschiedliches Layout. Das wird jetzt per Code repariert. Der Fotograf wird nachträglich in die Hocke gezwungen, indem das Foto flacher eingestellt wird. Dazu wird KompoZer den Inline Style für das Foto ändern. Bild 8.
In das Foto doppelklicken, damit das Dialogfenster wie beim Bild 8 aufgeht. Beim Register 'Größe' wird 'Benutzerdefinierte Größe' gesetzt, das Häkchen von 'Proportional' entfernt und die Höhe auf 300 Pixel verringert. Eine andere Art von Anpassung wäre die entsprechende Regeländerung für <div> mit dem CSS Editor.



u) Das Bild mit 400px Breite passt mit Abstand in den Rahmen. Offensichtlich bedeutet 'padding: 10px' = der Innenabstand: 10px, dass der Rahmen um den Innenabstand beiderseits verbreitert wird. Das erledigen die drei vorhin genannten Browser alle gleich.
Gebe nun mit dem CSS Editor allen <div>s den Außenabstand links 10px:
CSS Editor aufrufen / links das 'div' markieren / Register 'Box' / ...
Für Nvu: Raender: Links: 10px / Schließen.
Für KompoZer: Außenabstand: Links: 10px / Vor dem Schließen des CSS Editors lohnt noch ein Blick beim Register 'Allgemein' wie denn der neue Style angenommen wurde, bzw. wie er geschrieben wird, 'Register 'Allgemein' / siehe unten 'margin-left: 10px; / OK.

v) Gemeinsam: Damit der Textlink oben fluchtet, erhält der <p>-Container auch einen Außenabstand links 10px. Allerdings nur als Inline Style.
Dann ist die Webseite fertig.
Dass der Internet Explorer den Außenabstand des <p>-Containers nicht beachtet und der blaue Rahmen den grünen etwas überragt, ist ab IE 7.0 behoben.
Firefox und Opera verhalten sich dagegen wie erwartet und zeigen die Webseite wie dein KompoZer sie auch darstellt.

Wird das Browserfenster schmaler und breiter verstellt, floaten die Rahmen.

Bitte alles löschen außer dem Link oben und die beiden Rahmen.

Glückwunsch zu der Seite. Zum Vergleich gibt es im Kurs1 im Internet auch die  Ergebnisseite 2, so wie sie sein sollte.

Weiter geht es mit Aufgabe 3.

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.




Weiter mit Aufgabe 3