Materialien zum Unterricht
weitere Formatierungen
1. Seitenbreite festlegen
Damit die Seite auf allen Bildschirmen ähnlich aussieht, wird die Breite des Inhaltes erzwungen. Zur Zeit ist eine feste Breite von 760 Pixeln recht geeignet.
Aufgabe: Erzeuge einen neuen Bereich mit der ID "Seite", der die gesamte Seite umfasst.
Dazu ist nach dem <body>-Tag ein Bereich anzugeben:
<div id="seite">Vor dem abschließenden Tag des Body </body> muss der Bereich wieder geschlossen werden:
</div>
In der style.css kann dieser Bereich jetzt formatiert werden. Dazu ist die ID des Bereiches mit einem vorgestellten # anzugeben.
Mit margin:auto wird der Außenrand eingestellt. auto bedeutet, dass der Bereich automatisch in die Mitte gerückt wird.
2. Einteilen der Seite in Bereiche
Jede Internetseite lässt sich in mehrere Bereiche einteilen: Kopf, Navigation, Inhalt und Fuss. Die Anzahl der Bereiche lässt sich beliebig erweitern. Zur besseren Abgrenzung kann jeder Bereich anders formatiert werden.
Ein Bereich wird durch den <div>-Tag gekennzeichnet. Jeder Bereich bekommt eine ID:
<div id="kopf"> Der Inhalt des Kopfes </div> <div id="inhalt"> Der Inhalt der Seite </div>
Aufgabe: Teile die Seite in die zwei Bereiche Kopf und Inhalt ein! Jeder Bereich soll einen einfachen, blauen Rahmen erhalten.
Der Text im Kopf soll zentriert erscheinen. Dazu ist die horizontale Ausrichtung zu verändern. Näheres dazu findet man hier.
Für den Inhalt ist ein Innenabstand von 0.3em einzustellen.
3. Einzelne Textstellen formatieren
Manchmal ist es notwendig, im Text ein einzelnes Wort, Wortgruppen oder ... zu formatieren. Dazu wird der Abschnitt mit dem Tag
<span>irgend ein Text</span>eingefasst. Dieser Tag bewirkt nichts und hat nur die Aufgabe, CSS-Formatierungen aufzunehmen.
<span style="color:#FF0000;">Rot</span>
macht den Text Rot. In dem Tag wird das Attribut style als Container für die CSS-Anweisungen verwendet. Es lassen sich alle möglichen CSS-Formatierungen einbinden!
<span style="color:#FF0000; font-size:x-large; margin:4em;">Beispiel</span>Beispiel
4. Tags formatieren
Es ist auch möglich, CSS-Formatierungen in einen Tag einzubauen.
"Mädchen sind bunt und Schweine sind dreckig...".
<span style="background-color:#FFFF00"> <strong style="color:#FF3333;">b</strong><strong style="color:#33FF33;">u</strong> <strong style="color:#FF6600;">n</strong><strong style="color:#0000FF;">t</strong> </span>Das Wort bunt ist durch <span> mit einem Hintergrund versehen worden. Jeder einzele Buchstabe wird fett dargestellt: <strong>. Im <strong>-Tag wird über style die Farbe eingestellt.