Spickzettel Gestalten · Schrift

Wiki-Hilfe - Tabellen - Formatierungen, Layout - Testgestaltung - Bilder einbinden - Bilder miteinander verlinken (für Fortgeschrittene)

Vorhin hast du gelesen, dass HTML dazu verwendet wird, Webseiten zu gestalten. Damit es einfacher ist, wurde die Wiki-Markup-Sprache eingeführt. Hier wirst du etwas über HTML lernen, hauptsächlich, um die Schrift zu verändern:

Layoutgestaltung mit Tags

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 (/).

FONT-TAGS

Kopier Dir einfach die Formate und probier diese auf der Testseite aus. Das ist am Einfachsten für den Anfang.

•  : <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>

Man kann zum Font-Tag zusätzlich noch mehrere Angaben kombinieren, beispielsweise mit einer Größenangabe. Die Größe kann als absoluter Wert angegeben werden, wobei „Size“ Werte von 1 bis 7 annehmen darf, size = 3 ist Standard. Die Größe kann auch relativ angegeben werden: size="+1" macht die Schrift um eine Stufe größer als Standard.

• <font color="red" size="+1">Bitte durchlesen! </font>

• <font color="chocolate" style="background-color:silver" size="+3">Hallo </font>

• <font color="darkred" size="7">Bitte durchlesen!</font>

Style-Atribut
Erfahrene Web-Programmierer können natürlich auch HTML-Code mit dem Style-Atribut verwenden.

Beispiel

<div style="color:maroon; background-color:gold; text-aligen:center;">Beispieltext</div>

---

Layoutgestaltung mit Stylesheets

Jedoch 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. Durchstreichen geht jedoch auch ohne CSS. Dafür verwendest du einfach <s> oder <strike>. (Die werden genau so verwendet wie font; also den schließenden Tag nicht vergessen.)