4. Textformatierung
Doch das muss nicht so bleiben! Mit dem HTML-Editor kannst du den Test, den du vorher eingeben solltest, leicht formatieren, d.h. deinen Ansprüchen bezüglich Schriftart, -größe und -farbe verändern. Daneben könnte die Bildung von Absätzen und Zeilenumbrüchen dem Aussehen des Schriftbildes gut tun! Doch bevor du deinen Text ansprechend formatierst ...
ein wenig Theorie! |
| Textformatierungsbefehle | ||
|---|---|---|
| <font> ... </font> | Befehl zur Bestimmung der Schriftart, der -größe und der -farbe
z.B.:
Darstellung im Browser: |
<font face=""> Zwischen "" kann die Schriftart, z.B. "Arial" oder "Comic Sans MS" ... eingetragen werden. <font size=""> Es stehen verschiedene Schriftgrößen zur Verfügung: "1"(sehr klein) bis "7"(sehr groß) <font color=""> Zwischen "" die Farbe (in englisch, z.B. "red") oder den Farbwert, z.B. "#FF0000" für rot, eintragen. |
| <b>fetter Text</b> | <i>kursive Schrift</i> |
<u>unterstrichener Text</u> |
| Zeilen- und Absatzformatierungen | ||
| <p> - neuer Absatz <br> - neue Zeile |
<center>zentrierter Text</center>
oder
<div align="center">zentrierter Text</div>
<div align="right">rechtsbündiger Text</div>
<p align="justify">B l o c k s a t z - B l o c k s a t z - B l o c k s a t z - B l o c k s a t z - B l o c k s a t z - B l o c k s a t z</p>
|
Überschriften <H1> ...</H1> bis <H6> ...</H6> H1 = größte Schrift H6 = kleinste Schrift Unter der Überschrift wird automatisch ein Absatz eingefügt. |
Jetzt zur Praxis! |
Befehl |
erzeugter Quellcode |
Browserdarstellung |
 |
<font face="Courier">Beispieltext</font>
Hinweis: Leider hat die Eingabe der Schriftgröße und -farbe keine Wirkung auf den HTML-Befehl! |
Beispieltext |
| manuelle Erweiterung des <font>-Befehls durch "size" oder "color": | ||
| <font face="Courier" size="5">Beispieltext</font> | Beispieltext | |
| <font face="Courier" size="5" color="red">Beispieltext</font> alternativ: <font face="Courier" size="5" color="#FF0000">Beispieltext</font> |
Beispieltext | |
 |
Beispieltext (ohne "size"-Angabe) | Beispieltext |
| <font size="+2">Beispieltext</font> | Beispieltext | |
| <font size="+4">Beispieltext</font> | Beispieltext | |
| <font size="-1">Beispieltext</font> | Beispieltext | |
 |
fett: <b>Beispieltext</b> | Beispieltext |
| kursiv und unterstrichen: <i><u>Beispieltext</u></i> | Beispieltext | |
| hoch- und tiefgestellt: normal <sup>hochgestellt</sup> <sub>tiefgestellt</sub> | normal hochgestellt tiefgestellt | |
 |
<h1>Überschrift H1</h1> | Überschrift H1 |
| <h3>Überschrift H3</h3> | Überschrift H3 |
|
 |
<div align="left">linksbündig</div> <div align="center">zentriert</div> <div align="right">rechtsbündig</div> <p align="justify">B l o c k s a t z - B l o c k s a t z - B l o c k s a t z</p> |
linksbündig; zentriert rechtsbündig B l o c k s a t z - B l o c k s a t z - B l o c k s a t z - B l o c k s a t z |
 |
1. Absatz
<p>
2. Absatz mit mehreren Zeilen ...</p>
Empfehlung: Bei der Absatzmarkierung kann die Endmarke </p> entfallen! (Änderung unter Projekt | Projekteinstellungen | Tags | Paragraph)
|
1. Absatz
2. Absatz mit mehreren Zeilen ... |
 |
Diese Zeile soll auf alle Fälle jetzt<br> gebrochen werden ... | Diese Zeile soll auf alle Fälle jetzt gebrochen werden ... |
Arbeitsaufgaben |
- Gib nun deinen kompletten Text in den Editor ein. Solltest du diesen bereits in einer Textverarbeitung geschrieben und gespeichert haben, kannst du ihn auch über die Zwischenablage in den Editor kopieren!
- Formatiere den Text nach deinen Wünschen, und sieh ihn dir im Browser an!
Home