Hilfe:Start/ Schrift

Aus Wikibooks

Vorhin hast du gelesen, dass HTML dazu verwendet wird, Webseiten zu gestalten. Damit es einfacher ist, wurde die Wiki-Markup-Sprache eingeführt. Hier gibt es ergänzende Informationen, um mit HTML die Schrift zu verändern:

Mit HTML-Tags

In der HTML-Sprache verwendet man für das Layout so genannte Tags, zwischen die der Text geschrieben wird. Das englische „Tag“ bedeutet Anhängsel, Etikett, das „a“ wird wie ein kurzes ä ausgesprochen, also Täg. Ein Tag im HTML-Code ist eine kurze Anweisung, die dem Browser sagt, dass dahinter ein Text beginnt oder davor ein Text endet. Das hintere („schließende“) Tag sieht wie das öffnende Tag aus, erhält aber zur Unterscheidung einen zusätzlichen Schrägstrich (/). Ein Beispiel: Zwischen <font> (und der Angabe zur gewünschten Farbe) und </font> wird der Text „eingeklammert“, der modifiziert werden soll. Einige konkrete Beispiele, wie das geht:

<big>Große Schrift</big>
<small>Kleine Schrift</small>>
<font size="1">Hier steht kleiner Text.</font>
<font color="green">Hier steht grüner Text.</font>
<font face="Courier New">Text in Schreibmaschinenschrift</font>
Hinweis 1: Wenn du die Schriftart veränderst, bringt das recht oft nur dir Freude. Das liegt daran, dass du natürlich von den Schriftarten ausgehst, die du installiert hast. Andere haben diese Schriften aber möglicherweise nicht installiert und sehen dann nichts oder nur Kästchen oder Fragezeichen oder Ähnliches. Deshalb solltest du am besten gar nicht die Schriftart verändern. Möchtest du es doch tun, achte darauf, Standardschriftarten zu benutzen wie Arial, Times New Roman, Courier New oder Verdana.
Hinweis 2: Um Hinweis 1 gerecht zu werden, kannst du mehrere Schriftarten angeben. Ist die erste angegebene nicht vorhanden, wird die nächste verwendet. Dazu trennst du die verschiedenen Schriftarten mit Kommata.
<font face="Verdana, Courier New, Times New Roman, Arial">Text in der Schriftart Verdana – oder auch in einer der anderen Schriftarten</font>

Das kannst du auch beliebig kombinieren, z. B. auch mit Wiki-Markup-Sprache:

<font color="blue">'''Fette, ''fett-kursive'' Schrift'''</font>
<font color="magenta" size="+4">mächtig gewaltig</font>

Fett und kursiv kennst du nun schon – du machst sie mit Apostrophen. Das ist jedoch nur die Vereinfachung für die HTML-Sprache. Mit HTML stellst du das mit <b> und <i> dar. Vergiss aber auch hier nicht die schließenden Tags: </b> und </i>.

Weitere Möglichkeiten:

  • Unterstreichen ist möglich mit: <u>unterstrichener Text></u> wird zu unterstrichener Text
    Dies soll möglichst nicht mehr verwendet werden, benutze stattdessen CSS (wie im nächsten Abschnitt beschrieben).
  • Durchstreichen ist möglich mit den folgenden Varianten:
    • <s>ungültiger Text</s> wird zu ungültiger Text und ist gedacht für Text, der nicht mehr gültig, richtig oder relevant ist.
    • <del>gelöschter Text</del> wird zu gelöschter Text und ist gedacht für Text, der ersetzt oder gelöscht wurde.
    • <strike>durchgestrichen</strike> wird zu durchgestrichen und soll überhaupt nicht mehr verwendet werden, weil nicht klar ist, warum der Text durchgestrichen wurde.

Mit CSS (Stylesheets)

Allerdings ist es moderner, nicht die HTML-Syntax zu verwenden, sondern sogenannte Stylesheets (CSS – Cascading Stylesheets). Das, was oben mit den font-Tags dargestellt ist, sieht mit CSS folgendermaßen aus:

<span style="color:green;">Hier steht grüner Text.</span>
<span style="font-size:0.5em;">Hier steht kleiner Text.</span>
<span style="color:magenta; font-size:3.5em;">mächtig gewaltig</span>
<span style="font-family:Courier New, Verdana, Arial, Times New Roman;">Text in anderer Schriftart</span>
<span style="font-weight:bold; font-style:italic; text-decoration:underline;">Hier ist der Text fett (bold), kursiv (italic) und unterstrichen (underline).</span>

Hinweis: Mit text-decoration kannst du den Text auch überstreichen (overline) oder durchstreichen (line-through) lassen.