2 TEXTFORMATIERUNG

In diesem Teil des Workshops beschäftigten wir uns mit den Tags, die bei der Textformatierung benötigt werden.

Inhalt:

Fettdruck und kursive Darstellung
Schriftgrößen und Headings
Zentrierte Ausgabe
Einzug und Zitate
Sonderzeichen
Tief- und Hochgestellte Schrift
Vorformatierter Text
Einfache und numerierte Listen, Verzeichnise


Fettdruck und kursive Darstellung

Unter den Formatanweisungen hält die HTML Sprache auch Anweisungen bereit, um Textpassagen hervorzuheben. Besonders oft benutzt werden folgende Anweisungen: Fettdruck und kursive Darstellung.

Fettdruck wird mit Hilfe des Tags <B>...</B> dargestellt. Ein Text zwischen den <I>...</I> Tags wird kursiv dargestellt.

Beispiel:

<B>bold</B>
<I>italics</I>

sieht im Browser so aus:

bold
italics

Schriftgrößen und Headings Man kann in HTML auch die Schriftgröße verändern. Es gibt insgesamt 7 verschiedene Größen, wobei 3 die Standardgröße ist. Dazu kommen noch die Überschriften, bekannt als Headings, mit "levels" - Größen von 1 bis 6.

Sie werden mit Hilfe folgender Tags dargestellt:

<H1>Heading level 1</H1>
<H2>Heading level 2</H2>
<H3>Heading level 3</H3>
<H4>Heading level 4</H4>
<H5>Heading level 5</H5>
<H6>Heading level 6</H6>

die im Browser so aussehen:

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Bemerkungen:

  • Headings eignen sich besonders gut dazu, die klare Struktur im Dokument darzustellen.
  • Bei den meisten HTML Dokumenten stellt der erste Heading den Titel des Dokumentes dar.
  • Nach dem Heading entsteht automatisch ein Abstand zur nächsten Zeile, der dem Effekt des Tags <P> gleichkommt.

Die Schriftgröße wird durch den <FONT>...</FONT> Tag in Verbindung mit dem Attribut "size" angegeben. Der Option "size" wird die entsprechende Größe zugewiesen.

Beispiel:

<FONT SIZE=5>W<FONT SIZE=4>ILKOMMEN <FONT SIZE=5>A<FONT SIZE=4>UF
<FONT SIZE=5>M <FONT SIZE=4>EINER <FONT SIZE=5>H<FONT SIZE=4>OME
<FONT SIZE=5>P<FONT SIZE=4>AGE </FONT>

erscheint als Begrüßung im Browser:

WILKOMMEN AUF MEINER HOME PAGE

Neben der Zuordnung eines festen Wertes kann man auch relative Werte, ausgehend von der Bezugsgröße, welche durch den Tag <BASEFONT=x>festgelegt werden, mit + und - angeben:

Beispiel:

<BASEFONT=3>
<FONT SIZE=+2>W<FONT SIZE=+1>ILKOMMEN <FONT SIZE=+2>A<FONT SIZE=+1>UF
<FONT SIZE=+2>M <FONT SIZE=+1>EINER <FONT SIZE=+2>H<FONT SIZE=+1>OME
<FONT SIZE=+2>P<FONT SIZE=+1>AGE </FONT>

Das Ergebnis sieht etwa so aus wie im o.g. Beispiel:

WILKOMMEN AUF MEINER HOME PAGE

Bemerkung:

  • Selbstverständlich kann man einen Text in Farbe darzustellen. Dazu dient das Attribut "color" in Verbindung mit dem kodierten Wert der Farbe. Die Tabelle der im Web verfügbaren Farben ist hier zu finden.
Zentrierte Ausgabe Der Text zwischen den Tags <CENTER>...</CENTER> wird zentriert.

Beispiel:

<CENTER>Dieser Text ist zentriert</CENTER> 

So wird das angezeigt:

Dieser Text ist zentriert
Einzug und Zitate Aussagen aus anderen Quellen werden in der Praxis gesondert dargestellt. Um dies in einem HTML Dokument realisieren zu können, soll man folgenden Tag einsetzen:
<BLOCKQUOTE> </BLOCKQUOTE>

Beispiel:

Das ist ein Text im normalen Format:
<BLOCKQUOTE>Dieser Text wird im Vergleich zu dem anderen Teil des Dokumentes links eingezogen.</BLOCKQUOTE>

würde folgend aussehen:

Das ist ein Text im normalen Format:

Dieser Text wird im Vergleich zu dem anderen Teil des Dokumentes links eingezogen.

Sonderzeichen Länderabhängige Sonderzeichen bedürfen zur richtigen Darstellung in HTML Dokumenten eine gesonderte Definition.

Bemerkung:

  • Bei der Benutzung eines HTML Editors braucht man nicht die Kodierungen zu kennen. Sie werden automatisch konvertiert.

Sonderzeichen fangen immer mit dem Zeichen & an und enden mit ; wie im folgenden Beispiel:

Um das Sonderzeichen > darzustellen: &gt; (gt steht hier für das englische "greater than").
Das Sonderzeichen < würde dagegen so dargestellt: &lt; (lt = less than)

É (capital E, acute accent) = &Eacute;
ä (small a, umlaut mark) = &auml;

Beispiele:

Buenos d&iacute;as! &#191;Qu&eacute; tal est&aacute;s?
Je vais &agrave l'h&ocirc;pital fran&ccedil;ais.

so würde es aussehen:

Buenos días! ¿Qué tal estás?
Je vais à l'hôpital français.

Schon unter Netscape 1.0 könnte man zwei wichtige Sonderzeichen kodieren: ® (registered trademark) und © (copyright). Insbesondere © ist weit verbreitet im Web und dient dem Rechtsschutz des Autors.


&reg;
&copy;

sieht dann so aus:

®
©

Tief- und Hochgestellter Schrift Darstellung von tiefgestellter Schrift (superscript): <SUP> und hochgesteller Schrift (subscript) <SUB> Tags wird unter dem Netscape 2.0 Browser und seinen späteren Versionen möglich.

Beispiele:

H<SUB>2</SUB>0

wird als H2 0 dargestellt

E=mc<SUP>2</SUP>

erscheint als die bekannteste Einstein-Formel E=mc2

Vorformatierter Text Will man einen Absatz genau wie eingegeben dargestellt haben, also mit allen Zeilenumbrüchen, Leerzeichen und Spalten, so kann man den <PRE> ... </PRE> Tag benutzen.

Der Text zwischen Start- und Endtag wird dann genau der Eingabe entsprechen.

Beispiel:


<pre>
123456 789012 345678
901234 567890 123456
</pre>

sieht genauso aus, wie eingegeben:

123456 789012 345678
901234 567890 123456

Die Aufgabe des vorformatierten Textes wurde teilweise schon in Netscape 1.1 durch die Tabellen ersetzt. Manchmal verwendet man aber noch die Möglichkeit der Vorformatierung.

Einfache und Numerierte Listen, Verzeichnislisten

Numerierte Listen werden verwendet, um Informationen und Argumente aufzuzählen. Solche numerierten Listen können in HTML durch den Tag <OL>...</OL> in Verbindung mit dem <LI> Tag realisiert werden.

Der Tag <OL> umklammert alle in der Liste auszugebenden Informationen, während die Einzelpunkte einen <LI> Tag vorangestellt wird


<OL>
<LI>Friedrich-Ebert-Stiftung
<LI>Sozialdemokratische Partei Deutschlands
</OL>

  1. Friedrich-Ebert-Stiftung
  2. Sozialdemokratische Partei Deutschlands

Eine unnumerierte Liste wird sehr ähnlich aufgebaut. Der Unterschied ist, daß man den Tag <UL>...</UL> einsetzt, wie im folgenden Beispiel:


<UL>
<LI>Friedrich-Ebert-Stiftung
<LI>Sozialdemokratische Partei Deutschlands
</UL>

  • Friedrich-Ebert-Stiftung
  • Sozialdemokratische Partei Deutschlands

Man kann die Listen miteinander verbinden, so daß die unnumerierte Liste ein Teil der numerierten wird oder umgekehrt. Die erste Option sehen wir im folgenden Beispiel.


<ol>
<li>Friedrich-Ebert-Stiftung

<ul>
<li>Erste Information in der Sub-Liste: Politische Kommunikation
<li>Zweite Information in der Sub-Liste: World Wide Web Workshop
</ul>

<li>Sozialdemokratische Partei Deutschlands
</ol>

würde im Browser so aussehen:

  1. Erste Information in der numerierten Liste
    • Zweite Information in der Sub-Liste: Politische Kommunikation
    • Zweite Information in der Sub-Liste: World Wide Web Workshop
  2. Sozialdemokratische Partei Deutschlands
 

Workshop 3: Trennlinien, Ikonen und Grafiken


© Friedrich-Ebert-Stiftung, Aleksandra Sowa
Januar 1997