Farben, Texte, Schriftarten mit HTML und CSS
Wie es bereits in der Überschrift steht, auf dieser Seite geht es um die Grundlagen für Texte, dem wichtigsten Seiteninhalt einer
Homepage.
Texte müssen nicht langweilig sein - HTML und CSS bieten eine reichhaltige Abwechslung in der Gestaltung - voraus gesetzt, man weiß,
wie - aber das werde ich mit einigen Beispielen auf dieser Seite Dir zeigen.
Was benötigen wir dazu - die "index.html" oder "index.php" und dazu natürlich die "formatierung.css". Nützlich ist hier für die Farben auswählen das kostenlose Programm "paint.net", was Du Dir kostenlos im Internet downloaden kannst, oder auch ein bereits vorhandenes Fotobearbeitungsprogramm (zum Beispiel Adobe Photoshop).
In der "index" gibst Du den anzuzeigenden Text im Body-Bereich (also von <body> bis </body>) ein und Textgröße, -farbe, so wie Schriftart werden in der "formatierung.css" bearbeitet.
Bevor wir zum ersten Beispiel kommen, musst Du eine der beiden "index"-Dateien öffnen, einmal mit einem Browser (zum Beispiel Firefox
oder Internet Explorer) und einmal mit einem Texteditor (zum Beispiel WordPad oder Editor). Die PHP-Datei öffnet mit Doppelklick im
allgemeinem mit dem Editor und um diese Datei mit einem Browser zu öffnen, musst Du sie mit einem Rechtsklick belegen und "Öffnen
mit" und Browser auswählen noch einmal öffnen. Mit der HTML-Datei ist dies genau anders herum.
Nun öffnest Du noch die Datei "formatierung.css" mit einem Doppelklick und in der Desktopleiste müssten nun folgenden Dateien
abgelegt sein:
- Meine erste Homepage (Browser)
- index.html oder index.php - Editor
und
- formatierung.css - WordPad
Wundere Dich nicht, wenn der verwendete Browser nur eine leere weiße Seite anzeigt - Du hast ja auch im anzeigenden Bereich noch keine Angaben gemacht und wir beginnen ja jetzt erst mit den Inhalten.
Im ersten Beispiel verwenden wir weder einen Absatz noch Zeilenumbrüche - nur einen einfachen Text im Bodybereich. In der "formatierung.css" ändern wir nun bei "body { }" die Werte.
Änderungen am Quelltext in der "index"-Datei, mit dem Editor oder mit WordPad:
| Quelltext | Hinweis |
|---|---|
| <body> | Dieser Quelltext ist bereits in der "index" von mir vorhanden! |
| Mein erster Text in meiner Homepage | Gebe diesen Text einfach mit der Tastatur im Editor oder WordPad ein. |
| </body> | Dieser Quelltext ist bereits in der "index" von mir vorhanden! |
Wenn Du den Quelltext geändert hast, dann speichern nicht vergessen, anschließend zur Datei "Meine erste Homepage" (Browser)
wechseln und einmal die "F5"-Taste Deiner Tastatur benutzen, denn erst jetzt werden die Änderungen vom Browser angezeigt.
- Hier findest Du eine Vergleichs-Seite -
Da wir nun auch mit Farbwerten arbeiten wollen, welche Du am besten mit einem Fotobearbeitungsprogramm oder mit pain.net bestimmst, gebe ich Dir dazu eine kurze Anleitung.
Welchen Wert Du nehmen musst, erläutere ich Dir am Programm paint.net (sinngemäß gleich bei anderen Programmen):
Als erstes - paint.net öffnen.
Falls die Farbpalette nicht gleich angezeigt wird, dann über den Kartenreiter "Fenster" zu den Eintrag "Farben" gehen und anklicken. Nun
sollte ein zusätzliches Feld mit Farbauswahlen bereit stehen.
Hier klickst Du nun auf den Button "Mehr >>", worauf sich das Feld vergrößert und verschiedene Werte anzeigt - für unsere Farbauswahl ist der Wert hinter "Hex.:" interessant - ein sechsstelliger Wert mit Zahlen und/oder Buchstaben.
Wenn Du jetzt in den Kreis klickst, dann zeigt Dir paint.net hier den Wert zur Übernahme an. Aufgebaut ist dieses Schema auch nach RGB-Farben, die ersten beiden Werte bestimmen den Rot-Anteil (0-9 und a-f an beiden Stellen), die nächsten beiden Werte bestimmen
den Grün-Anteil und die beiden letzten Werte den Blau-Anteil. Achtung - nicht verwechseln mit RGB! - wir benötigen den Wert von
"Hex.:"!
Und hier die Fotostrecke dazu:
 Foto 1 von Paint.net - der Button Fenster ist hier rot umrandet, auf diesen musst Du klicken um weitere Optionen zu öffnen. |
 Foto 2 von Paint.net - die Zusatzoptionen sind geöffnet, hier musst Du jetzt den Button Farben anklicken. |
 Foto 3 von Paint.net - das Farbenfenster ist jetzt geöffnet - hier musst Du jetzt auf den Button Mehr klicken. |
 Foto 4 von Paint.net - die erweiterten Farboptionen sind nun geöffnet - im hier umrahmten Feld liest Du die Farbwerte für HTML ab, welche dann nach der # eingefügt werden. |
Ähnlich kannst Du die Farbwerte für HTML auch mit dem Adobe Fotoshop finden, nur etwas einfacher, denn im Adobe Fotoshop ist das Farbfeld immer direkt erreichbar.
Auch hier habe ich notwendigen Fotos vorbereitet.
 Foto 1 vom Adobe Fotoshop - hier siehst Du die Farbauswahlfelder für Vordergrund und Hintergrund - einfach auf eines klicken um das Bearbeitungsfeld zu öffnen. |
 Foto 2 vom Adobe Fotoshop - in diesem umrahmten Feld werden dann die Farbwerte für HTML angezeigt. |
Nun weißt Du erst einmal, wo Du die Farbwerte ablesen kannst und was dies auch für eine Farbe ist.
Die so gewonnenen Farbwerte können wir nun nach "#" in der formatierung.css" einsetzen, zu welcher wir jetzt auch als nächstes gehen
um die Werte von "body { }" zu ändern oder zu ergänzen.
Folgende Angaben änderst Du jetzt einmal (oder mehrmals) in der "formatierung.css" (nur die Werte innerhalb von { } hinter body):
body { background-color:#FF1C3A; color:#EAFF0A; } -> ergibt Hintergrundfarbe: Rot und Textfarbe: Gelb
body { background-color:#230FFF; color:#FFF6A8; } -> ergibt Hintergrundfarbe: Blau und Textfarbe: helles Gelb
body { background-color:#606060; color:#FF14F3; } -> ergibt Hintergrundfarbe: Grau und Textfarbe: Violett
Beachte dabei wieder, dass Du nach jeder Änderung die CSS-Datei speichern und im Browser wieder die "F5"-Taste betätigen musst damit die Änderungen wirksam werden.
Zur Kontrolle kannst Du Dir die Änderungen auch wieder hier der Reihe nach anzeigen lassen:
- Seite Rot / Text Gelb -
- Seite Blau / Text helles Gelb -
- Seite Grau / Text Violett -
Natürlich kannst Du noch andere Werte selbst probieren - was ich sogar empfehlen würde.
Als nächstes beschäftigen wir uns mit Überschriften.
HTML sieht dafür sechs verschiedene Größen vor - von h1 bis h6 - welche von meiner Warte her nicht alle gebraucht werden. Ich
empfehle drei Größen - von h1 bis h3 - welche ich in meiner für Euch vorbereiteten "formatierung.css" bereits vorgearbeitet habe.
Für die Veranschaulichung der Überschriften wurde die CSS-Datei wieder zurück gesetzt (Hintergrund weiß und Textfarbe schwarz),
denn jetzt wollen wir ja mit den Überschriften arbeiten.
Folgende Änderungen musst Du nun in der "index" wieder mit dem Editor vornehmen:
| Quelltext (in der "index") | Hinweis |
|---|---|
| <body> | Dieser Quelltext ist bereits in der "index" von mir vorhanden! |
| <h1>Mein erster Text in meiner Homepage</h1> | Gebe diesen Text einfach mit der Tastatur im Editor oder WordPad ein. |
| <h2>Mein erster Text in meiner Homepage</h2> | Gebe diesen Text einfach mit der Tastatur im Editor oder WordPad ein. |
| <h3>Mein erster Text in meiner Homepage</h3> | Gebe diesen Text einfach mit der Tastatur im Editor oder WordPad ein. |
| </body> | Dieser Quelltext ist bereits in der "index" von mir vorhanden! |
Nach dem Speichern der "index" und dem Betätigen der "F5"-Taste sollten wieder die Änderungen zu sehen sein.
- Hier findest Du eine Kontrollseite -
Nun bearbeiten wir wieder die CSS-Datei, genauer die "formatierung.css" mit dem Editor oder dem WordPad.
| Änderungen in der "formatierung.css" | Hinweis |
|---|---|
| h1 { font-size:150%; color:#cc0000; } | die Schriftgröße ist jetzt auf 150% begrenzt und die Schriftfarbe ist Rot |
| h2 { font-size:130%; color:#0000cc; font-family:Verdana; text-align:center; } | die Schriftgröße ist jetzt auf 130% begrenzt, die Schriftfarbe ist Blau, die Schriftart ist Verdana und die Textausrichtung ist zentriert |
| h2 { font-size:110%; color:#0000cc; font-family:Vogue; text-align:right; } | die Schriftgröße ist jetzt auf 110% begrenzt, die Schriftfarbe ist wieder Blau, die Schriftart ist Vogue und die Textausrichtung ist rechtsbündig |
Nach dem Speichern der CSS-Datei und dem Betätigen der "F5"-Taste im Browser sollten die Änderungen wieder sichtbar sein.
- Hier findest Du wieder die dazu gehörige Kontrollseite -
Alternative und zusätzliche Angaben:
| Wert für | alternativ |
|---|---|
| font-size: 150%; | em Angabe - dabei entspricht 1,5em in etwa 150% was folgende Angabe ergeben würde: font-size:1,5em; |
| font-family: Verdana; | Hier kannst Du jede installierte Schriftart verwenden - Vorrausetzung für die Anzeige mit der Schriftart, sie muss vorhanden sein. Um Engpässe zu vermeiden kannst Du auch mehrere Schriftarten angeben, was wie folgt aussehen würde: font-family: Verdana, Arial, Vogue; |
| text-align: center; | Bei der Textausrichtung gibt es drei Möglichkeiten - center, left (Voreinstellung) und right (für zentriert, linksbündig und rechtsbündig) |
| zusätzlicher Wert | Möglichkeiten |
|---|---|
| line-height: | Angabe für die Höhenangabe einer Schrift, möglich Angaben in % und em - was folgende Angabe ergeben könnte: line-height:1,6em; |
| background-color: | Auch die Hintergrundfarbe kann angegeben werden - zum Beispiel wäre eine von vielen Möglichkeiten: background-color:#ff00ff; |
| float: | Überschriften müssen nicht unbedingt auf einer Zeile für sich stehen, denn hierfür gibt es float - und die Möglichkeiten dazu sind - float:left; (Überschrift steht links und wird rechts vom Text umflossen) und float:right; |
Übrigens - es gibt noch viel mehr zusätzliche Angaben, welche Du in dem Nachschlagewerk SELF-HTML findest.
Für den Anfang sollten Dir diese Angaben erst einmal reichen und probieren kannst Du schon einiges damit.
Vergiss dabei nicht - die hier angegebenen Farbwerte sind bei Weitem nicht alle!
Und dann haben wir mit Texten noch einen weiteren Abschnitt - die Absätze, denn eine Homepage besteht ja nicht nur aus Überschriften, oder?
Grundlegend ist die Verwendung von Absätzen gleich der von Überschriften, allerdings gibt es in HTML nur eine Größe dafür und weitere musst Du selbst benennen und erstellen so wie formatieren.
Aber fangen wir erst einmal einfach an, in dem wir wieder alles zurück setzen (Formatierungen wie Quelltext) und den Quelltext der "index" dann wie folgt ändern:
| Quelltext (in der "index") | Hinweis |
|---|---|
| <body> | Dieser Quelltext ist bereits in der "index" von mir vorhanden! |
| <h1>Mein erster Text in meiner Homepage</h1> | Gebe diesen Text noch einmal mit der Tastatur im Editor oder WordPad ein. |
| <p>Mein erster Absatz in meiner Homepage</p> | Gebe diesen Text einfach mit der Tastatur im Editor oder WordPad ein. |
| <p>Mein zweiter Absatz in meiner Homepage</p> | Gebe diesen Text einfach mit der Tastatur im Editor oder WordPad ein. |
| </body> | Dieser Quelltext ist bereits in der "index" von mir vorhanden! |
Wenn Du wieder gespeichert hast und über F5 aktualisiertest, dann sollte diese Seite so aussehen.
Zugegeben - die Webseite sieht wieder etwas langweilig aus - oder? Also verwende wieder die Änderungsmöglichkeiten in der "formatierung.css" - wie sie weiter oben bereits beschrieben sind. Denke daran, was für Überschriften möglich ist, das ist auch für Absätze möglich. Einfach jetzt die Änderungen in der CSS-Datei bei p vornehmen ( p { } ).
Dir reicht eine Absatzvariante nicht aus, dann erstelle eine Klasse in der CSS-Datei wie folgt: p.gross { (Angaben nicht vergessen) } und rufe im Quelltext der "index" die Klasse mit <p class="gross"> auf und beende dann den Absatz mit </p> wieder.
Auch Klassen für Überschriften kannst Du erstellen, wichtig bei der Erstellung von Klassen ist, dass diese nicht mit einer Zahl/Ziffer
beginnen, denn damit haben verschiedene Browser Schwierigkeiten. Außerdem darf der Klassenname nicht durch ein Lehrzeichen
unterbrochen werden, verwende also entweder einen Bindestrich oder einen Unterstrich zum Verbinden des Klassennamens.
FALSCH: p.grau blau { } (Klassenname unterbrochen durch ein Lehrzeichen)
RICHTIG: p.grau-blau { } oder p.grau_blau { }
FALSCH: p.1-blau { } (Ziffer/Zahl am Anfang)
Richtig: p.blau-1 { } oder p.blau1 { }
Da wir gerade bei Fehlern sind - oft wird bei font-size oder line-height exakt 100% angegeben, was bei Opera zum Absturz führen kann - verwende bitte 99% oder 101% oder die em-Angaben um dies zu vermeiden.
Ein weiteres Problem kann noch auf Dich zu kommen, wenn Du nicht von Anfang an Umlaute und Sonderzeichen HTML-Konform
verwendest auch wenn moderne Browser diese Zeichen unterstützen.
Denke dabei daran, dass nicht gleich jeder den aktuellsten Browser verwendet!
Das nächste Problem mit diesen Zeichen kann dann noch sein, dass Du einen Server oder Webspace mit dem Befehlssatz charset=utf-8 nimmst, denn dann musst Du diese Zeichen HTML oder UTF-8 gerecht umwandeln.
So werden die Sonderzeichen HTML-Gerecht umgewandelt:
Ä in Ä - ä in ä - Ü in Ü - ü in ü - Ö in Ö - ö in ö - ß in ß - € in € und " in "
Wichtig dabei - das ";" am Ende!