HTML & CSS Javascript Perl PHP Index | Download | Suche 
HTML I Schnellkurs | Einführung | Grundgerüst | Text | Bilder | Links | Farben | Tabellen
HTML IITrennlinien , Listen | Hintergrundbilder | Frames | Formulare | Meta - Tags
CSS Einführung | Style Sheets definieren | einzelne Angaben
PLUS Hilfreiches / Tabellen | Software / Tools | Upload der Homepage | Hyperlinks
  FAQ / Goodies | Java | CGI / Perl | SSI
HTML I : Text   ||   Text einbinden / Struktur • Text formatieren • Normalschriftart , -grösse , -farbe • Schriftart , -grösse , -farbe

Text einbinden / Struktur

Reiner Text lässt sich ohne Tag einbinden.
Es gibt ein paar Tags , um die Struktur von Text zu ordnen:

<br> : ( break -engl. [Um]Bruch )
Browser erkennen keine Zeilenumbrüche , wie sie beim Drücken von Return im Editor dargestellt werden . Es muss das <br> - Tag eingefügt werden.

<p> ... </p> : ( paragraph -engl. Absatz )
Mit Hilfe dieses Tags werden Absätze definiert .
Die Ausrichtung des Absatzes lässt sich noch durch das Attribut align= festlegen . Erlaubt sind als Werte left , center , right und justify ( Blocksatz ) .



<h1> ... </h1> bis <h6> ... </h6> : Überschriften (h= heading). h1 ist die grösste , h6 die kleinste.

<center> ... </center> :
Zentriert ein Element .

Beispiel :

<h2><center> T E X T</center></h2>
<h3>Text einbinden / Struktur</h3>
<p> Dies ist ein ganz normaler Absatz ...</p>
<p align="justify">Dieser Abschnitt ist zur Abwechslung mal in Blocksatz ausgerichtet . Blocksatz wird ... </p>
ergibt :

T E X T

Text einbinden / Struktur

Dies ist ein ganz normaler Absatz , definiert mit dem <p> ... </p> - Tag . Und noch ein Satz , der möglichst lang ist , d.h. möglichst viele überflüssige Wörter beinhaltet , damit der Absatz auch wirklich ein Absatz ist .

Dieser Abschnitt ist zur Abwechslung mal in Blocksatz ausgerichtet . Blocksatz wird vor allem bei schmaleren Spalten zum Problem . Bei diesem hier hält sich der Schaden noch so in Grenzen . Und noch ein Satz , um Blocksatz auch wirklich zur Genüge , also wirklich völlig ausreichend zu demonstrieren . ;]


( Eventuell wird alles in Blocksatz angezeigt , falls Blocksatz mit Hilfe von CSS projektweit definiert wurde ) .

Wie ersichtlich ist , erzeugen Überschriften automatisch einen eigenen Absatz .

Text formatieren

<strong> ... </strong> :
Text wird fett dargestellt .
ebenfalls in Gebrauch : <b> ... </b> ( bold - engl. fett[gedruckt]) und <em> ... </em> (emphasis = betont)

. <i> ... </i> :
Text wird kursiv dargestellt .

<u> ... </u> :
Text wird unterstrichen .

Weniger gebräuchliche Formatier - Tags

<small> ... </small> :
Text wird kleiner .

<big> ... </big> :
Text wird grösser . (je nach Browser ev. auch etwas fetter [Ausnahme])

<sub> ... </sub> :
Text wird tiefgestellt .

<sup> ... </sup> :
Text wird hochgestellt .

<strike> ... </strike> :
Text wird durchgestrichen . (seit HTML 4.0 auch möglich mit <s> ... </s> )

<pre> ... </pre> (=preformatted text) :
Text wird mit allen Einrückungen ( Zeilenumbrüche , Tabulatoren , Leerzeichen ) dargestellt . Ideal für Ausschnitte aus Textdokumenten (.txt) , welche man in ein HTML-Dokument einbauen möchte , ohne <br> und ähnliches zu setzen.

<code> ... </code> , <tt> ...</tt> (= Teletype Text) :
derart umschlossener Text wird meistens in einer proportionalen Schrift dargestellt - meistens Courier ( proportional = alle Zeichen haben die gleiche Breite , bei einer nicht-proportionalen Schrift wie Times New Roman oder Arial sind die Breiten jeweils verschieden - ein i braucht z.B. weniger Platz als ein m ) .

Daneben gibt es noch <xmp> ... </xmp> (interpretiert Tags nicht, sondern schreibt sie aus).

>> pre, code, tt, xmp , beispieldatei



Normalschriftart , -grösse , -farbe

Wie dateiweit für Text eine Farbe vergeben wird , wird im entsprechenden Abschnitt erklärt , Kapitel Farben : farben.html#4 .
Dort steht auch , wie Farben für Hintergrund und Links vergeben werden .

Eine Normalschriftart (eigentlich auch den Rest...) definiert ihr am besten mit CSS.



Schriftart , -grösse , -farbe

Innerhalb eines Dokumentes können für eine bestimmte Textpassage Schriftart , -grösse und -farbe bestimmt werden . Dies erfolgt mit dem <font> - Tag :

Beispiel :

<font face="Verdana" size="2" color="#DF0000">Text , ganz sicher in Grösse 2 und Farbe "#9F0000" .</font>
ergibt :
Text , ganz sicher in Grösse 2 und Farbe "#DF0000" .

Die Anwendung der sogenannten hexadezimalen Farbcodes ( #DF0000 , #ABC654 , usw . ) wird im Kapitel über Farben behandelt .

Die Schriftart "Verdana" wird nur angezeigt , falls sie auch auf dem Rechner des Anwenders vorhanden ist .

Falls ihr Windows besitzt , schaut mal im Ordner C:/Windows/Fonts nach , dort findet ihr alle momentan bei euch installierten Schriftarten . Am besten immer noch eine oder mehrere Alternativschriftarten notieren :

Beispiel :

<font face="Verdana,Helvetica,Arial">Diese Schrift...
</font>
ergibt :
Diese Schrift wird , falls auf dem Rechner des Anwenders vorhanden , in Verdana dargestellt , ansonsten in Helvetica . An dritter Stelle folgt Arial .

Gängige Schriften sind z.B. Verdana , Arial , Helvetica , Courier oder Times New Roman .

Mit Hilfe von CSS lassen sich Schriften übrigens sehr viel einfacher , flexibler und schlanker definieren und verändern .

Randbemerkung :

Die Verwendung des <font> - Tags wird vom w3c - Konsortium nicht mehr gutgeheissen ( ebensowenig wie z.B. <center> ... </center> , ersetzbar z.B. durch <div align="center"> ... </div> ) .
-Nicht ganz zu unrecht , da <font> - Tags innerhalb eines Dokuments oftmals en masse auftreten und somit den Quellcode unnötigerweise aufblähen .

Stattdessen sollten Schriften -ihr ahnt es vielleicht schon ;)- mit Hilfe von CSS definiert werden .



 |  Weiter zum nächsten Kapitel : Bilder  | 
:::  © 2000/01 Martin Fux  :::  URL dieses Dokuments: http://www.flexdax.org/htmlkurs/text.html