HTML Kurs Dr. Horst Jaitner

Grundkörper einer HTML Datei
Formatierung I

In der zweiten Lektion erfahren Sie Folgendes:

Was sind Tags?
Grundgerüst einer HTML-Datei
Einfache Zeichenformatierung
Schriftart, Größe und Farbe
Farbauswahl und Angabe in HTML
Voreinstellungen für Textfarbe und Hintergrundfarbe
Absatzformatierung
Zeilenumbrüche verhindern und erzwingen

Jetzt gehts los. Sie lernen in dieser Lektion, wie HTML-Dateien aufgebaut sind und erstellen Ihre erste Seite. Mit den ersten Befehlen zur Formatierung können Sie bereits einfache Inhalte gestalten.

nach oben

Was sind Tags?

Die eigentlichen Befehle werden in HTML durch sogenannte Tags realisiert. Ein Tag besteht aus zwei Klammern: < und >. Zwischen diesen beiden Klammern steht der eigentliche Befehl.
Ein Beispiel:  schaltet das Zeichenformat auf fett und </b> schaltet dieses wieder aus. Das "b" steht für das englische Wort bold (fett). Fast alle Tags bestehen aus einem Anfangs- und Ende-Tag. Wenn sie ein oder mehrere Zeichen fett darstellen wollen, müssen Sie angeben, ab welchem Zeichen und bis zu welchem Zeichen diese Formatierung gelten soll. Durch das Anfangs- und Ende-Tag wird der Gültigkeitsbereich eindeutig festgelegt.
Das Ende-Tag hat immer den Schrägstrich / nach dem < - Zeichen:

Anfangs-Tag 
Ende-Tag

Viele Tags können durch zusätzliche Angaben erweitert werden, die sogenannten Attribute.
Das Tag zur Erzeugung eines neuen Absatzes ist . Das "p" steht für das englische Wort paragraph (Absatz). Um diesen Absatz zentriert auszurichten, wird das Attribut align (Ausrichtung) hinzugefügt und mit einem Wert belegt:
 bewirkt eine zentrierte Ausrichtung der Zeichen im Absatz.
Grundsätzlich gibt es Attribute, die nur mit vorgegebenen Werten belegt werden können, andere Attribute erlauben beliebige Werte. (Nach HTML-Standard sind bei beliebigen Wertangaben die Angaben in Anführungszeichen zu setzen und bei allen anderen können Sie die Anführungszeichen unterdrücken.) Machen Sie sich das Leben einfach (es funktioniert mit allen Browsern):

Setzen Sie alle Wertangaben bei Attributen immer in Anführungszeichen!

Die aktuelle HTML-Version wird voraussichtlich die letzte sein. Danach wird HTML in XML integriert sein. Bislang wird vom W3C-Konsortium für die Zukunft die Schreibweise mit Anführungszeichen favorisiert.

Der Aufbau eines Tags mit Attribut:
<Tagname Attribut="Wert">
Bsp.:
<h3 align="right">,
 oder
<hr width="90%">

Neben den Tags mit Wertangabe gibt es noch eine Reihe von Tags, die Attribute ohne Wertangabe erlauben.
Bsp.: <table border>

Eine häufige Fehlerquelle bei den ersten Programmierversuchen mit HTML ist, dass zwar alle Anfangs-Tags gesetzt, jedoch die Ende-Tags vergessen werden - also: Machen Sie alle Türen zu, die Sie aufmachen!
Viele HTML-Editoren arbeiten sehr schlampig und lassen die Ende-Tags weg! Im Augenblick funktioniert es im Internet Explorer auch ohne die Ende-Tags fast problemlos. Es werden in Zukunft (folgende XML-Version) jedoch zwingend alle Ende Tags erforderlich sein.

nach oben

Grundgerüst einer HTML-Datei

Jedes HTML-Dokument hat ein Grundgerüst, welches die Bereiche eindeutig einteilt und dem Browser die steuernden Befehle liefert, die zur Darstellung des Dokuments notwendig sind.
Der Aufbau eines HTML-Dokuments sieht so aus:
<HTML>
<HEAD>
<Meta HTTP-EQUIV="content-type" Content="text/html;charset=iso-8859-1">
<Title>
</Title>
</HEAD>
<BODY>
</BODY>
</HTML>

Jedes HTML-Dokument beginnt mit
<HTML>
und endet mit </HTML>.
Dieses Tag sagt dem Browser, dass es sich um ein HTML-Dokument handelt. Es könnte ja auch ein Text-Dokument oder irgendeine Grafikdatei sein.

Zwischen diesen beiden Tags stehen zunächst die Tags für den Kopf:
<HEAD>
</HEAD>

Zwischen den Head-Tags stehen die Tags für die Seiten-Überschrift:
<Title>
</Title>
Die Angaben zwischen den Title-Tags bestimmen den Text, der in der Überschriften-Leiste des Browsers angezeigt wird. Die Überschrift dieses Dokuments lautet: HTML-Grundkurs Dr. H. Jaitner Lektion 2.
(Ganz oben in der blauen Leiste).
Weiterhin können sich zwischen den Head-Tags Angaben für Suchmaschinen befinden, oder Befehle für JavaScript.

Daran anschließend stehen die Tags für den eigentlichen Körper, die Inhalte der HTML-Seite:
<BODY>
</BODY>

Zwischen den Body-Tags stehen all die Befehle, die das Layout und den Inhalt steuern. Dies sind Angaben zum Text wie Schriftart und -größe, Befehle zum Einbinden und Positionieren von Grafiken, Steuerelemente für Hyperlinks etc. und natürlich die Texte selbst.

In der Vorlage oben befindet sich noch die Anweisung
<Meta HTTP-EQUIV="content-type" Content="text/html;charset=iso-8859-1">.
Mit dieser Anweisung wird dem Browser mitgeteilt, welchen Inhaltstyp dieses Dokument hat: HTML-Text mit dem Zeichensatz ISO-8859-1. Dieser Zeichensatz beinhaltet die Standard-Zeichen der westlichen Welt (Groß- und Kleinbuchstaben, Ziffern und etliche Sonderzeichen). Dies ist notwendig, da das Internet international ist und Ihre Zeichen nicht arabisch oder japanisch dargestellt werden sollen, sondern nach westlichem Standard.

<HTML>
<HEAD>
<Meta HTTP-EQUIV="content-type" content="text/html; charset=iso-8859-1">
<Title>
</Title>
</HEAD>
<BODY>
</BODY>
</HTML>

Öffnen Sie einen Editor (Windows: Start-Programme-Zubehör-Editor) und fügen Sie den Inhalt der Zwischenablage ein (Windows: Tastenkombination: Umschalt Einfg oder über das Menue Bearbeiten - Einfügen)
Fügen Sie zwischen die Title-Tags eine Überschrift für Ihr Dokument ein (z.B. Meine erste Seite).
Fügen Sie zwischen die Body-Tags etwas Text ein (z.B. Es sieht noch nicht toll aus, aber es funktioniert!)
Speichern Sie Ihre Datei. Achten Sie bei der Angabe des Dateinamens auf die Groß-/Kleinschreibung und fügen Sie der Datei die Endung .htm oder .html hinzu, z.B. dokument1.htm.
Starten Sie nun Ihren Browser und öffnen Sie Ihre Datei. (Wählen Sie im Menue Datei - Öffnen, Durchsuchen - wählen Sie den Pfad zu Ihrer Datei).
Der Browser sollte jetzt Ihre Datei darstellen. Falls nicht, überprüfen Sie den Pfadnamen und Dateinamen, unter dem Sie die Datei gespeichert haben.
Kehren Sie zum Editor zurück und fügen Sie zusätzlichen Text zwischen die Body-Tags ein.

Speichern Sie Ihr Dokument!

Wechseln Sie in den Browser und klicken Sie auf Aktualisieren (Internet Explorer) bzw. Neu Laden (Mozilla Firefox). Ihre Änderung sollte nun sichtbar sein.

Tipp:
Beachten Sie bitte, dass nach jeder Änderung die Datei im Editor gespeichert und im Browser aktualisiert werden muss, um die Änderungen auch tatsächlich zu sehen!

Der erste Schritt ist getan. Nun wird das Erscheinungsbild des Textes verändert. Alle weiteren Angaben beziehen sich auf den Bereich zwischen den Body-Tags.

nach oben

Einfache Zeichenformatierungen

Folgende Tags ermöglichen Texthervorhebungen:
fett
kursiv
Das "i" steht für das englische Wort italic (kursiv).
unterstrichen
Das "u" steht für das englische Wort underline (unterstrichen).

<s>~~durchgestrichen~~</s> oder
<strike>~~durchgestrichen~~</strike>
<big>größer</big>
kleiner
^hochgestellt
_tiefgestellt
<tt>dicktengleich</tt>

Beispiel:
DieserSatzsiehtmerkwürdig aus.
hat folgendes Aussehen in HTML:

Dieser Satz sieht merkwür<big>dig</big> aus.

Tags können auch kombiniert werden.

Beispiel:
unterstrichen und kursiv

In HTML:

 unterstrichen und kursiv 

nach oben

Schriftgröße,Schriftart, Farbe

Schriftgröße

Die Schriftart, -größe und -farbe werden mit dem Font-Tag bestimmt . Im Anfangstag wird mit der Anweisung (Attribut) size = 3 die Schriftgröße bestimmt. Mögliche Werte für die Größe sind 1 (klein) bis 7 (groß). Sie erzeugen also Text der Größe 4 mit folgender Anweisung
Schrift der Größe 4. Die Standardschriftgröße ist 3. Die Schriftgröße 3 entspricht in etwa der Größe 12pt.

Beispiel:

Schriftgröße 1
Schriftgröße 2
Schriftgröße 3
Schriftgröße 4
Schriftgröße 5
Schriftgröße 6
Schriftgröße 7

Die Erweiterungen der Tags durch zusätzliche Anweisungen wie size="3" werden als Attribut oder Tag-Attribut bezeichnet.

Neben der absoluten Größenangabe besteht auch die Möglichkeit, die Schriftgröße relativ zur aktuellen Schriftgröße zu ändern: font size ="+1" oder font size ="-2".

Beispiel:

Schriftgröße um zwei Größen verringert 
Schriftgröße um eine Größe erhöht

Schriftart

Als Schriftart können Sie grundsätzlich eine der Schriftarten wählen, die in jedem Textverarbeitungsprogramm verwendet werden. Beachten Sie: Die Schriftart muss auch auf dem Rechner des Betrachters Ihrer Web-Site vorhanden sein, nur dann kann sie angezeigt werden. Ist die Schriftart auf dem Computer des Betrachters nicht vorhanden, wird die Standard-Schriftart zur Darstellung verwendet. Dies ist, sofern der Betrachter nichts anderes eingestellt hat, fast immer Times New Roman. Mögliche (und auch gängige) Schriftarten sind Arial, Courier, Verdana, Playbill.
Seien Sie bei der Wahl der Schriftart konservativ und nutzen Sie nicht die Schriftart, um tolle Texteffekte zu realisieren. In der übernächsten Lektion werden Grafiken behandelt. Damit haben Sie auch mehr Gestaltungselemente zur Verfügung.

Beispiel:

Sie wollen Text in der Schriftart Arial darstellen:

Das ist die Schriftart Arial
Das ist die Schriftart Courier

Die Angabe für die Schriftart muss in Anführungszeichen stehen!
Der Name der Schriftart muss mit dem Fontnamen in Windows exakt übereinstimmen. Beachten Sie Groß-/Kleinschreibung!

Die Schriftart kann auch mit der Schriftgröße kombiniert werden.

Beispiel:

Arial in Schriftgröße 2

Schriftfarbe

Schriftfarben werden über das Attribut color="blue" gesteuert. Mit
wird blaue Schrift erzeugt.
Beachten Sie, dass die Farbangabe in Anführungszeichen stehen muss!

Die 16 Grundfarben, die jeder Browser (und jeder PC mit VGA-Grafikkarte) kann:

black maroon

green olive

navy purple

teal gray

silver red

lime yellow

blue fuchsia

aqua white

Beispiel:

grüner Text in Arial mit Schriftgröße 4

Für viele angehende HTML-Programmierer mag diese Farbauswahl nicht ausreichend sein.

nach oben

Farbauswahl und Farbangaben in HTML

Theorie:(weiter ohne Theorie)

Farbwerte werden in HTML hexadezimal angegeben. Der Wert setzt sich aus den drei Farben Rot Grün Blau (rgb) zusammen. Angegeben wird der Rot-, Grün und Blauwert einer Farbe.
Die Farbe Rot wird erzeugt, indem der Wert für Rot auf den größtmöglichen Wert eingestellt wird, die Werte für Grün und Blau sind Null.
Die Farbe schwarz wird erzeugt indem alle Farbanteile auf Null gesetzt werden. Weiß ergibt sich durch die Mischung aller drei Grundfarben Rot, Grün und Blau.
Die Farbwerte für die drei Grundfarben liegen zwischen 0 und 255. Die Farbe gelb ist eine Mischung aus Rot und Grün ohne blauen Farbanteil. Der Wert für Rot und Grün wird auf 255, der Wert für Blau auf 0 gesetzt. Die Angabe für Gelb lautet also 255,255,0 (in der Reihenfolge Rot Grün Blau).

Diese Farbwerte müssten jetzt von ihrer dezimalen Darstellung in das hexadezimale System übertragen werden.
Der hexadezimale Wert setzt sich aus 6 Stellen zusammen. Die ersten beiden Stellen sind für Rot, die mittleren beiden für Grün und die letzten beiden für Blau.

Für jede der drei Farben gilt: Der kleinste Wert 0 entspricht 00, der größte Wert 255 entspricht FF. Jede Ziffer wird gezählt von 0 - 9 und dann folgt A,B,C,D,E,F.
Die erste Stelle der jeweiligen Farbe ist die Grobeinstellung, die zweite Stelle die Feineinstellung.
Beispiel: Die Farbe mit der Nummer FF0000 hat nur den maximalen Rot Anteil und sieht so aus X. Grün und Blau liefern keine Anteile. Die Farbe mit der Nummer 008080 hat grüne und blaue Anteile, jedoch kein Rot. Wird der blaue Anteil erhöht, ändern sich die letzten beiden Stellen 0080CC.

Als zweites Beispiel erhöhen wir, ausgehend von der Farbe rot, den grünen Farbanteil.
Rot FF0000 sieht so aus X.
Grünanteil erhöhen:
Code FF9000 X
Code FFA000 X
Code FFB000 X
Code FFC000 X
Code FFD000 X
Code FFE000 X
Code FFF000 X
maximaler Rot- und Grünanteil:
Code FFFF00 X Das ist gelb

Farbanteil rot reduzieren
Code F0FF00 X
Code E0FF00 X
Code D0FF00 X
Code C0FF00 X
Code B0FF00 X
Code A0FF00 X
Maximaler Grünanteil:
Code 00FF00 X Das ist grün

Diese Farbwerte werden in HTML eingebunden: color="#FF00B0"
Wichtig ist das # -Zeichen vor dem eigentlichen Wert. Wenn die Schriftfarbe eingestellt wird, lautet der Befehl: Text in Farbe.

Um die Farbwerte einzustellen, ist es sinnvoll, einem Programm die Arbeit zu überlassen:

Die Syntax für die Textfarbe ist:
Hier steht der bunte Text

Beispiel:

pink
violet
khaki
rotgold
indigo

Wenn Sie die Farbe mittels Farbwert eingeben, muss stets das # Zeichen als führendes Zeichen mit angegeben werden.

Die Einstellung für die Textfarbe kann mit der Schriftgröße und Art kombiniert werden.

Beispiel:

Arial in Schriftgröße 2 und rot

Sie können auch jede Angabe zu Größe, Farbe und Schriftart einzeln notieren, beachten Sie aber, dass Sie zu jedem Anfangs-Tag auch ein Ende-Tag benötigen.

Beispiel:

Arial in Schriftgröße 2 und rot

Aufgabe:
Teste selbst, experimentiere mit Schriftgröße und Farbe. Baue die folgenden Beispiele selbst nach:

Das ist die Schriftart Courier in der Farbe blau und Schriftgrösse 3

Schriftart Arial, grau, Grösse 4

Schriftart Times, rot, Grösse 1

DER REGENBOGEN

nach oben

Voreinstellungen für Hintergrundfarbe und Textfarbe

Voreinstellung für Hintergrundfarbe

Um die Hintergrundfarbe des Dokuments einzustellen, müssen Sie lediglich das einleitende Body-Tag mit dem Attribut bgcolor (engl. backgroundcolor) versehen und die Farbangabe hinzufügen:
<body bgcolor="#0000FF"> oder
<body bgcolor="blue">

Erweitern Sie das bereits exitierende <body> - Tag, fügen Sie kein neues <body> - Tag hinzu.

Voreinstellung für Textfarbe

Um die Textfarbe des Dokuments festzulegen müssen Sie das einleitende Body-Tag mit dem Attribut text erweitern und die Farbangabe hinzufügen:
<body text="#0000FF"> oder
<body text="blue">

Erweiteren Sie das bereits exitierende <body> - Tag, fügen Sie kein neues <body> - Tag hinzu.

Dieser Befehl gilt für die globale Voreinstellung der Textfarbe des Dokuments und kann natürlich stets mit dem Tag geändert werden.

Beispiel:

Hintergrundfarbe indigo, Textfarbe rot, der mittlere Teil des Textes soll weiß erscheinen:
In HTML:

<body text="red" bgcolor="#4B0082">
erster Teil
mittlerer Textteil 
Der Text dahinter wird automatisch wieder rot.
</body>

nach oben

Absatzformatierung

In HTML wird ein Absatz wie folgt eingeleitet:
Text Text Text Text
Ein Absatz beginnt stets mit einer neuen Zeile und endet mit einem Zeilenumbruch in der letzten Zeile des Absatzes.
Die Ausrichtung des Textes kann durch das Attribut align= center, left, right, justify bestimmt werden. Wird keine Ausrichtung gewählt, ist der Text automatisch linksbündig.

Beispiel:

 Dieser Text wird zentriert ausgerichtet. Dieser Text wird zentriert ausgerichtet. Dieser Text wird zentriert ausgerichtet. Dieser Text wird zentriert ausgerichtet 

Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig. Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig. Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig. Dieser Text ist rechtsbündig. Dieser Absatz ist rechtsbündig.


Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet. Dieser Text wird im Blocksatz formatiert. Dieser Text wird im Blocksatz formatiert, falls Ihr Browser Blocksatz kann. Falls Ihr Browser keinen Blocksatz kann ist dieser Absatz wahrscheinlich linksbündig ausgerichtet.


Sehen und testen Sie selbst, nicht jeder Browser in jeder Version unterstützt den Blocksatz.

Wenn Sie für einen Absatz die Schriftgröße einstellen wollen, müssen Sie das Absatz- und Font-Tag verwenden:

Beispiel:

Text im Absatz in Schriftgröße 3

nach oben

Zeilenumbruch verhindern und erzwingen

Schalten Sie in Ihrem Browser auf Teilbild um (rechts oben in der Titelleiste der vorletzte Button). Ändern Sie die Größe des Anzeigefensters manuell. Beobachten Sie, wie der Browser bei verschiedenen Fenstergrößen die Zeilen automatisch umbricht. Es müsste jetzt der Text immer im Fenster sichtbar sein, weil entsprechend der Fenstergröße der Text umgebrochen wird.
Um zwischen zwei Wörtern einen Zeilenumbruch zu verhindern, verwenden Sie ein Sonderzeichen:   Dieses Zeichen steht für nobreakingspace, zu deutsch: kein umbrechendes Leerzeichen.

Beispiel:

Sie machen in Ihrem Text die Angabe Euro 12,-. Es würde etwas merkwürdig aussehen, wenn jetzt zwischen Euro und 12,- ein Zeilenumbruch wäre. Um dies zu verhindern setzen Sie nur das Sonderzeichen   ohne weitere Leerzeichen zwischen Euro und 12,-:

In HTML

EUR 12,-

Beachten Sie: Das Zeichen beginnt mit einem & und endet mit einem ;

Um einen bestimmten Bereich vor einem Zeilenumbruch zu schützen, verwenden Sie das Tag

Internet GmbH & Co. KG.

NOBR steht für nobreak (kein Umbruch). Der Bereich zwischen diesen Tags wird jetzt nicht mehr umgebrochen.

Testen Sie selbst durch Verändern der Fenstergröße des Browsers.

Zeilenumbruch erzwingen

Aus dem letzten Tag ergibt sich fast automatisch das Tag für einen erwünschten Zeilenumbruch: steht für break als Umbruch. Das Tag für den erzwungenen Zeilenumbruch ist eines der wenigen Tags, das kein Endetag hat.

Beispiel:

Dies ist die erste Zeile nach dem Zeilenumbruch folgt die zweite Zeile.

Im Browser sieht diese Zeile so aus:

Dies ist die erste Zeile
nach dem Zeilenumbruch folgt die zweite Zeile.

Tipp:
Um mehrere Leerzeilen zu erzeugen, reicht es aus mehrere tags hintereinander zusetzen! Ältere Browser zeigen dies jedoch nicht immer richtig an.
Sie müssen, damit es echte Leerzeilen werden, auch ein (Leer-)Zeichen in die Zeile setzen:
Verwenden Sie das geschützte Leerzeichen

Beispiel:

       

Erzeugt drei echte Leerzeilen.