Hintergrundfarbe, Schriftart, -größe und -farbe

Zurück zur Übersicht

Heute lernen wir, wie man die Hintergrundfarbe einer HTML-Seite ändert und wie man beim Text Schriftart, -größe und -farbe formatiert.

1. Angaben für Stile im HTML-Kopf

Für die Festlegung der Hintergrundfarbe und für die Festlegung von Schriftart, -größe und -farbe fügt man im HTML-Kopf die folgenden Angaben für Stile ein:

Beispiel:

<html>

<head>
<title>Vorname Name</title>
<style type=text/css>
  body {background-color: #FFFF99;}
  h1 {font-family: Verdana; font-size: 24px; color: red; text-align: center;}
  p {font-family: Verdana; font-size: 16px; color: blue; text-align: center;}
</style>

</head>

<body>
...

Anzeige im Browser:

Für das Anzeigebeispiel hier klicken!

Erläuterung:

Im HTML-Kopf (zwischen <head> und </head>) kann man zwischen den Zeilen <style type=text/css> und </style> Angaben für Stile notieren für die unterschiedlichen HTML-Elemente (z. B. für <p>). Diese Angaben wirken sich auf alle entsprechenden HTML-Elemente der HTML-Seite aus. Es genügt also, an einer einzigen Stelle (zwischen <style type=text/css> und </style> im HTML-Kopf) Stil-Angaben zu notieren, um allen Überschriften und allen Absätzen ein bestimmtes Aussehen zu geben.

Alle Stil-Angaben beginnen mit dem Namen des HTML-Elements, das ein bestimmtes Aussehen erhalten soll (also z. B. mit p, ohne die spitzen Klammern, für alle Absätze). Nach einem Leerzeichen steht eine öffnende geschweifte Klammer {. Danach folgen die einzelnen Stil-Angaben, die im Folgenden erklärt werden, jeweils abgeschlossen durch einen Strichpunkt ;. Am Ende steht eine schließende geschweifte Klammer }.

a) Stil-Angaben für das <body>-Tag:

body {background-color: #FFFF99;}

Man kann mit body {background-color: #FFFF99;} eine Hintergrundfarbe (background = Hintergrund; color = Farbe) für die gesamte HTML-Seite festlegen.

Beispiel für eine Seite mit einem hellgelben Hintergrund.

Für die Farbauswahl gelten die Regeln zum Definieren von Farben in HTML.

AUFGABE:

Füge in Deinem Steckbrief im HTML-Kopf die Zeilen <style type=text/css> und </style> für die Stil-Angaben ein. Definiere mit der Zeile body {backgrond-color: DeineFarbe;} eine Farbe für den Hintergrund.

Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob Du das gewünschte Ergebnis erreicht hast!

b) Stil-Angaben für das <h1>-Tag und für das <p>-Tag:

h1 {font-family: Verdana; font-size: 24px; color: red; text-align: center;}
p {font-family: Verdana; font-size: 16px; color: blue; text-align: center;}

Man kann mit h1 bzw. p {font-family: Verdana; font-size: 24px; color: red;} eine Schriftart, eine Schriftgröße und eine Schriftfarbe für alle h1-Überschriften bzw. für alle p-Absätze festlegen.

Schriftart:

Die Angabe "font-family: Verdana;" legt die Schriftart fest (font = Schrift; family = Familie, d. h. Art).

Anstelle von Verdana kann der Name einer beliebigen Schriftart angegeben werden. Beispiele:

Verdana (Beispieltext in der Schriftart Verdana),
Arial (Beispieltext in der Schriftart Arial),
Times (Beispieltext in der Schriftart Times),
Comic Sans MS (Beispieltext in der Schriftart Comic Sans MS).

Wenn Du ein Textverarbeitungsprogramm (z. B. "MS Word") öffnest, kannst Du sehen, welche Schriftart-Namen noch möglich sind. Allerdings ist zu beachten, dass die angegebene Schriftart vom Browser nur richtig angezeigt wird, wenn die entsprechende Schriftart auch auf dem Computer vorhanden ist. Wenn Du also Deine HTML-Datei zu Hause anschaust, könnte es sein, dass die von Dir in der Schule ausgewählte Schriftart auf Deinem Computer zu Hause gar nicht vorhanden ist.

Schriftgröße:

Die Angabe "font-size: 24px;" legt die Schriftgröße fest (font = Schrift; size = Größe).

Anstelle von 24px kannn ein beliebiger Wert angegeben werden. Die Einheit "px" gibt die Höhe der Buchstaben in "Pixel" an. Beispiele:

24px: Beispieltext in der Schriftgröße 24px,
16px: Beispieltext in der Schriftgröße 16px,
12px: Beispieltext in der Schriftgröße 12px,
10px: Beispieltext in der Schriftgröße 10px,
8px: Beispieltext in der Schriftgröße 8px.

Wie Du siehst, ist Schrift in der Schriftgröße 8px nur noch schlecht zu lesen. Wähle deshalb als Schriftgröße für die h1-Überschrift und für alle p-Absätze einen gut lesbaren Wert.

Schriftfarbe:

Die Angabe "color: red;" legt die Schriftfarbe fest (color = Farbe).

Anstelle von red kannn ein beliebiger Farbname angegeben werden, allerdings müssen hierbei die Regeln zum Definieren von Farben in HTML beachtet werden. Beispiele:

red: Beispieltext in der Schriftfarbe Rot,
blue: Beispieltext in der Schriftfarbe Blau,
white: Beispieltext in der Schriftfarbe Weiß,
#330066: Beispieltext in der Schriftfarbe #330066, ein dunkles Violett,
#FF6600: Beispieltext in der Schriftfarbe #FF6600, ein helles Orange,
#663300: Beispieltext in der Schriftfarbe #663300, ein Braunton,
#FFCCFF: Beispieltext in der Schriftfarbe #FFCCFF, ein helles Rosa

Wie Du siehst, ist die Schriftfarbe "weiß" für eine Schrift vor weißem Hintergrund nicht gerade sinnvoll, da man nichts erkennen kann. (Wenn man allerdings den Abschnitt markiert, kann man die weiße Schrift in der Markierung erkennen.) Wähle als Schriftfarbe für die h1-Überschrift und für alle p-Absätze also besser Farben, die sich gut von der von Dir gewählten Hintergrundfarbe abheben.

Text-Ausrichtung:

Durch die Angabe "text-align: center;" wird jede überschrift bzw. jeder Absatz zentriert ausgerichtet (text-align = Text-Ausrichtung, center = zentriert).

Anstelle von text-align: center kannn man auch text-align: right für eine rechtsbündige Ausrichtung (right = rechts) oder text-align: justify für Blocksatz (justify = justieren) eingeben. Mit der Angabe text-align: left wird jede Überschrift bzw. jeder Absatz links ausgerichtet (left = links), dies ist jedoch die Standard-Einstellung europäischer Browser, so dass man bei gewünschter linksbündiger Ausrichtung die Angabe text-align: left auch weglassen kann.

AUFGABE:

Füge in Deinem Steckbrief im HTML-Kopf zwischen den Zeilen <style type=text/css> und </style> Stil-Angaben für die h1-Überschrift und für alle p-Absätze ein.
Definiere mit den Zeilen
h1 {font-family: ???; font-size: ???; color: ???; text-align: ???;} und
p {font-family: ???; font-size: ???; color: ???; text-align: ???;}
Schriftart, -größe und -farbe sowie die Ausrichtung von Überschrift und Absätzen!

Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob Du das gewünschte Ergebnis erreicht hast!

2. Formatierung einzelner Textabschnitte

Um Schriftart, -größe und -farbe für einzelne Textabschnitte festzulegen, verwendet man das <span>-Tag (span = überspannen). Der Text, der ein besonderes Aussehen erhalten soll, steht zwischen den Tags <span> und </span>. Im öffnenden <span>-Tag notiert man die gewünschten Stil-Angaben mit style="...".

Beispiele:

Normale Schrift, <span style="font-family: Times">Schriftart Times</span>.
Normale Schrift, <span style="font-size: 10px">kleine Schrift</span>.
Normale Schrift, <span style="color: red">rote Schrift</span>.
Normale Schrift, <span style="font-family: Times; font-size: 16px; color: red;">große, rote Schriftart Times</span>, wieder normal.

Anzeige im Browser:

Normale Schrift, Schriftart Times.
Normale Schrift, kleine Schrift.
Normale Schrift, rote Schrift.
Normale Schrift, große, rote Schriftart Times, wieder normal.

AUFGABE:

Verändere mit <span style="...">...</span> Schriftart, Schriftgröße und Schriftfarbe bei einzelnen Textabschnitten Deines Steckbriefes (z.B. bei den einzelnen Begriffen Deines Steckbriefes).

Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob Du das gewünschte Ergebnis erreicht hast!

Probiere verschiedene Formatierungsmöglichkeiten aus und gestalte Deinen Steckbrief nach Deinen Vorstellungen!

 

Zurück zur Übersicht



 © 2023 - Christian Bauer - cn.bauer@gmx.de