Wissen-Kompakt Informatik

HTML

HTML - Formatierung

Um eine Homepage zu formatieren, stehen eine Reihe an Befehlen zur Verfügung. Grundsätzlich sollten mittlerweile alle Formatierungen, die Schrift und Grundlayout einer Seite betreffen, mittels Cascading Style Sheets gesetzt werden. Mehr Informationen dazu gibt es hier.
Möchte man jedoch nur bestimmte Satzteile layouten, können folgende Tags hilfreich sein:

Übersicht über HTML-Tags:

Tag Beschreibung

 Zeichen innerhalb des Tags werden fett formatiert. (steht für: bold)

 Zeichen innerhalb des Tags werden kursiv formatiert. (steht für: italic)

 Zeichen innerhalb des Tags werden unterstrichen formatiert. (steht für: underline)

 Zeichen innerhalb des Tags werden ^{hochgestellt.} (steht für: superscript)

 Zeichen innerhalb des Tags werden _{tiefgestellt.} (steht für: subscript)

<big></big> Zeichen innerhalb des Tags werden größer dargestellt.

 Zeichen innerhalb des Tags werden kleiner dargestellt.

<pre></pre> Zeichen innerhalb des Tags werden nicht formatiert.

<hr> Eine horizontale Linie wird gezogen. (steht für: horizontal ruler)

 Ein Absatz wird gemacht (steht für: paragraph).

 Ein Zeilenumbruch wird gemacht (steht für: break).

<li>
Aufzählungszeichen (steht für: list item).

<center></center> Text steht mittig

Übersicht über HTML-Sonderzeichen:

Code Aussehen Beschreibung

® ® Das R steht für "Registered Trademark", also für eine eingetragene Marke.

€ € Das Euro-Symbol.

¥ ¥ Das Yen-Symbol.

£ £ Das Pfund-Symbol.

£ £ Das Pfund-Symbol.

≠ ≠ Das Ungleich-Symbol.

≤ ≤ Das Kleinergleich-Symbol.

≥ ≥ Das Größergleich-Symbol.

≈; ≈ Das Rundungszeichen

→ → Pfeil nach Rechts

← ← Pfeil nach Links

☺ ☺ Das Smiley-Symbol

» » Anführungszeichen auf

« « Anfürhrungszeichen zu

‰ ‰ Das Promille-Zeichen

♠ ♠ Pik

♥ ♥ Herz

♣ ♣ Kreuz

♦ ♦ Karo

† † Kreuz

© © Das Copyright-Symbol

Den Hintergrund ändern

Um die Hintergrundfarbe einer Seite oder auch von Tabellen ohne CSS zu ändern, benutzt man das Attribut bgcolor. Dieses wird dem entsprechenden Tag beigefügt, ein Beispiel:
Um die Hintergrundfarbe einer ganzen HTML-Seite zu ändern, fügt man dem Tag <body> das Attribut bgcolor zu:

Dem Attribut bgcolor muss noch eine Farbe zugewiesen werden. Dies geschieht entweder über einen Fabcode (wie z.B.: #800080) oder über die Bezeichnung der Farbe (wie z.B.: purple). Durch den Code:

wird der Hintergrund der entsprechenden HTML-Seite violett. Das gleiche Prinzip funktioniert auch bei Tabellen. Fügt man dem Tabellen-Tag <table> das Attribut bgcolor zu, so kann die Hintergrundfarbe der Tabelle definiert werden.

Auch ein Hintergrundbild kann ohne CSS eingefügt werden, ob dies sinnvoll ist, ist eine andere Frage. Wie bei der Farbe wird <body> wieder ein Attribut zugefügt, diesmal background-image. Mit dem Code:

wird das Bild "hintergrund.jpg" als Hintergrundbild definiert. Durch das Attribute style können verschiedene Einstellungen getroffen werden, auch, ob das Bild wiederholt angezeigt werden soll, sofern der Bildschirm größer ist als das Bild (background-repeat). Möchte man das Bild wiederholen lassen, kann man background-repeat einfach weglassen oder auf background-repeat:repeat setzen.

Die Schriftart und Schriftfarbe ändern

Die Schrift wird ebenfalls wie der Hintergrund mittlerweile ausschließlich über CSS definiert. Möchte man nur einem Teil der Seite eine andere Schriftart oder Schriftfarbe verpassen, benutzt man den Tag:

Dazu gibt es nun verschiedene Attribute:

Mit color="" wird die Schriftfarbe bestimmt. (z.B.: color="blue")

Mit face="" wird die Schriftart bestimmt. (z.B.: face="Comic Sans MS")

Mit size="" wird die Schriftgröße bestimmt. z.B.: size="+1")

Durch folgenden Code:

Hallo

wird der Text "Hallo" folgendermaßen formatiert:

Hallo

Alternativ kann man alle Formatierungsmöglichkeiten im Tag auch mittels style-Attribut zusammenfassen:

Hallo

Hier wird als erstes die Schriftfarbe angegeben (White), danach die Hintergrundfarbe (Blue), anschließend die Schriftgröße (in pt = Points), abschließend die Schriftart (Arial). Das Ergebnis sieht so aus:

Hallo

Hinweis: Generell trennt man zwei Attribute mit einem Semikomma (;). Dadurch weiß der Browser, welche Eigenschaften er welchem Attribut zuordnen soll.

Bilder formatieren

Um Bilder einzufügen genügt ein simpler Code:

Damit wird einfach das Bild "bild.jpg" an der betreffenden Stelle eingefügt. Das "src"-Attribut steht übrigens für "source" und bezeichnet die Quelle, in der das Bild zu finden ist. Befindet sich die HTML-Datei und das Bild in der gleichen Datei (z.B.: beide am Desktop) genügt diese Quellenangabe. Ist die HTML-Datei in einem Ordner der am Desktop liegt, muss folgender Code angegeben werden:

Mit dem Zusatz "../" gibt man dem Browser zu verstehen, dass er in einer übergeordneten Datei suchen muss. Befindet sich die HTML-Datei am Desktop und das Bild im Ordner "Bilder" am Desktop, gibt man folgenden Code ein:

Dadurch zeigt man die Quelle der Datei an, eben den Ordner "Bilder", dann die Datei an sich.
Bilder im Internet sollten möglicht immer in bekannten Formaten abgespeichert sein. Dazu zählen "JPG" ebenso wie "GIF" oder "PNG". Nicht empfehlenswert sind "BMP"-Dateien.

Um Bilder zu formatieren gibt es wieder mehrere Attribute:

Mit border="" wird bestimmt, ob das Bild einen Rahmen bekommt.

Mit title="" wird der Text zugeordnet, der angezeigt wird, sobald man mit der Maus über das Bild fährt.

Mit alt="" wird der Text angezeigt, sofern das Bild selbst nicht angezeigt werden kann.

Mit width="" wird die Breite des Bildes bestimmt.

Mit height="" wird die Höhe des Bildes bestimmt.

Mit hspace="" wird bestimmt, wie viel Platz horizontal zwischen Bild und Text gelassen wird.

Mit vspace="" wird bestimmt, wie viel Platz vertikal zwischen Bild und Text gelassen wird.

Durch diesen Code:

...Wird folgendes Bild angezeigt:

Ein Bild von Wissen-Kompakt.at

Links formatieren

Links sind Verweise auf andere Seiten. Klickt man auf einen Link, gelangt man auf die zugeordnete Seite. Ein einfacher Link sieht wie folgt aus:

Gibt man diesen Code in eine HTML-Datei ein, wird folgendes angezeigt:

Link

Damit würde man auf die Seite "index.html" gelangen. Das a im Link steht für anchor (=Anker), das href für hyper reference (= Hypertext Referenz).

Gerade bei Links ist es sinnvoll, sie nur mittels CSS zu formatieren, eine Erklärung dazu gibt es bei den Cascading Style Sheets-Seiten. Möchte man den Linktext verändern, reichen dazu einfach jene Befehle, die man auch bei herkömmlicher Schrift verwendet:

Dieser Code verändert den Text "Link" rot:

Link

Auch Bilder können als Link dienen, dazu muss das Bild nur anstelle des Linktextes gesetzt werden:

...dieser Code erzeugt folgendes Link-Bild:

Um den Rahmen um das Bild zu entfernen, genügt es, das Attribut border="0" dem img-Tag hinzuzufügen.

Damit ist das Kapitel HTML - Formatierung abgeschlossen. Bei einem Klick auf WEITER startet das Kapitel "CSS-Formatierung":

WEITER