Materialien zum Unterricht

Formatieren

Formatiert werden können

Formatierungen können

Die meisten Formatierungen legt man in einer extra Datei ab. Der HTML-Seite muss man dann mitteilen, in welcher Datei die Formatierungen stehen. Mehrere HTML-Dateien können ihre Formatierungen aus einer Datei holen. Das hat gegenüber den anderen beiden Verfahren Vorteile:

  1. Alle Seiten eines Projektes habe das gleiche Aussehen (Wiedererkennungseffekt)
  2. Änderungen lassen sich für alle Seiten sehr schnell vornehmen
  3. Die Ladezeiten verkürzen sich, da die Formatierungen nur einmal geladen werden müssen.

Anlegen der Datei für die Formatierungen

Erzeuge ein neues, leeres Dokument und speichere es als style.css im gleichen Verzeichnis wie die index.htm ab.
Gehe danach in die index.htm und trage den Link auf die style.css in den Kopf der Datei ein. Damit holt sich die index.html alle Formatierungen aus der style.css.

 

Schriftart für die ganze Seite ändern

Der übergeordnete Tag für die Anzeige der ganzen Seite ist der <body>-Tag. Dessen Formatierung legt z.B. die Schriftart für sämtlichen Text auf der Seite fest.
Jeder Internet-Browser (Firefox, GoogleChrome, Opera...) hat für diesen Tag bereits Voreinstellungen, z.B. eine Schriftart mit Serifen. Die liest sich in der Zeitung sehr gut, ist für den Bildschirm aber ungeeignet. Deshalb muss dem Tag eine serifenlose Schriftart zugeordnet werden. Damit wird die Browsereinstellung für diese Eigenschaft überschrieben.

In der style.css muss stehen:

Hinter dem Tag, der verändert werden soll, stehen die neuen Eigenschaften, eingeschlossen von einer geschweiften Klammer.
Es folgt zuerst die Eigenschaft, die geändert werden soll und dann nach einem Doppelpunkt der neue Wert. Jede Formatierung muss mit einem Semikolon abgschlossen werden.

Alle Möglichkeiten der Formatierung findet man bei SELFHTML.

Aufgabe: Ändere die Hintergrundfarbe der Seite in ein sehr helles Gelb und die Schriftfarbe in ein dunkles Blau.

Farbwähler

Einzelne Tags formatieren

Die Hauptüberschrift soll eine dunkelgrüne Farbe erhalten

Aufgabe: Ändere auch die Farbe der <h2>-Überschriften.

Tabelle formatieren

Eine Tabelle besteht aus Zeilen <tr>...</tr> und Spalten <td>...</td>. Soll die ersten Zeile eine Überschrift darstellen, müssen die <td>-Tags durch <th> ersetzt werden.

  1. Rahmen verbessern
    2. Der bisherige Rahmen um die Zellen der Tabelle sieht recht grobschlächtig aus und lässt sich nur sehr begrenzt verändern.
    Als erstes muss dieser Rahmen beseitigt werden.
    Lösche aus dem <table>-Tag den border-Eintrag komplett raus (border="1"). Die Tabelle steht nun nackt im Raum.

    In der style.css erhält das <td>-Tag einen neuen Rahmen:

    Mit Hilfe von CSS lassen sich Typ, Breite, Farbe und Plazierung des Rahmens beeinflussen. Das Beispiel erzeugt einen durchgezogenen Rahmen von 1 px Breite um die gesamte Zelle von blauer Farbe.
    Alle Möglichgkeiten der Rahmenformatierung werden bei SELFHTML beschrieben.
  2. Rahmen verbinden
    3. In der Browser-Voreinstellung werden die Rahmen um jede Zelle gezeichnet, ohne zusammenzufallen. Das ergibt einen unschönen Anblick.
    Um das zu vermeiden, muss das <table>-Tag formatiert werden:
  3. Kopfzeile mit einbeziehen
    4. Damit auch die Kopfzeile einen Rahmen erhält, muss das <th>-Tag in die Formatierung mit einbezogen werden:
  4. Kopfzeile formatieren
    5. Aufgabe: Die Kopfzeile der Tabelle soll einen grauen Hintergrund erhalten.
  5. Innenabstand

    6. Es sieht besser aus, wenn der Text einen Abstand vom Rahmen der Tabelle hat. Dazu muss ein Innenabstand eingestellt werden.
    Der Innenabstand ist der Leerraum zwischen dem Inhalt des Elements und seinem eigenen Elementrand.
    Der Innenabstand wird mit padding (Polsterung) eingestellt. Alle Angabe findet man hier.
    Als Abstand kann 0.5em gewählt werden. Über die numerischen Angaben kann man sich hier informieren.

 

zurück