Hintergrundfarbe, Schriftart, -größe und -farbeHeute 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-KopfFü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:
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:
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:
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:
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:
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:
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. Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob Du das gewünschte Ergebnis erreicht hast! 2. Formatierung einzelner TextabschnitteUm 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:
Anzeige im Browser:
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!
© 2024 - Christian Bauer - cn.bauer@gmx.de |