Materialien zum Unterricht
weitere Formatierungen
1. Seitenbreite festlegen
Damit die Seite auf allen Bildschirmen ähnlich aussieht, wird die Breite des Inhaltes erzwungen. Dazu muss beachtet werden, dass die Seite auf unterschiedlich breiten Bildschirmen angezeigt wird: breite Desktop-Monitore und winzige Smartphone-Displays.
a) Breite für große Monitore
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.
Problem: Wird das Browserfenster verkleinert, muss zum kompletten Betrachten der Seite vertikal gescrollt werden. Das ist nicht gut.
b) Breite für mobile Geräte (Responsive Webdesign)
Damit die Seite selbst erkennt, wie breit der Monitor ist, muss die folgende Zeile im Head eingefügt werden.<meta name=viewport content="width=device-width, initial-scale=1">
Danach wird in der Datei style.css festgelgt, dass der Bereich seite ab einer Monitorbreite von 900px immer die ganze Breite des Bildschirms belegt:
@media all and (max-width: 900px){
#seite {
width:100%;
}
}
Teste das Verhalten der Seite nach dem Umbau für mobile Geräte, indem die Größe des Browserfenster verkleinert 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 (z.B. die <h1>Überschrift) </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
Aufgabe: Färbe das Alter von Eilenburg rot ein:
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.
Aufgabe: Ändere die Hintergrundfarbe und die Breite der geordneten Liste durch die Formatierung des <ol>-Tags. Die Breite kann z.B. auf 50% gesetzt werde.
5. Silbentrennung
Damit lange Wörter am Ende der Seite ordentlich getrennt werden, muss als erstes die Sprache eingestellt werden:
<div id="seite" lang="de">
Danach wird in der Datei style.css für Bereich #seite das Attribut für die Silbentrennung auf automatisch gesetzt:
hyphens: auto;
Nun sollte auch die Tabelle in ein ganz schmales Browserfenster passen. (Ausprobieren)