Einleitung

 

	HTML - Was ist das?
	HTML Dokumente anlegen
	Das HTML Grundgerüst
	Die Seite mit Leben füllen
	Attribute
	Maskierung (Sonderzeichen darstellen)
	Farbeinstellungen

HTML ist eine Sprache, die Ihr Browser (z.B. Internet Explorer oder Netscape Navigator) "spricht" und "versteht". Legen Sie nun eine HTML Datei samt Inhalt an, so stellt der Browser diesen Inhalt als Webseite dar indem er den Inhalt der Datei liest und daraus eine Webseite erstellt. Das Aussehen der Seite wird durch bestimmte Schlüsselwörter festgelegt.

Dies war die einfache Definition, welche jedoch noch keine richtige Einsicht in HTML liefert. Um Webseiten mit Hilfe von HTML zu gestalten, müssen wir diese Sprache genauer betrachten:

HTML - oder lang HyperText Markup Language - ist eine Tag- bzw. Markupsprache. Das heißt, dass in einer Datei Anweisungen (Tags) zum Aussehen der Webseite enthalten sind. Das Wort Tag kommt aus dem Englischen und heißt übersetzt "Etikett" oder "Markierung". In HTML bedeutet dies einfach, dass die Tags eine Art Markierung sind und den Browser anweisen, dass ab bzw. an der "markierten" Stelle eine bestimmte Darstellung o.ä. ausgeführt werden soll. Das kann zum Beispiel entweder die Anweisung sein, dass der folgende Text unterstrichen oder schräg dargestellt werden soll oder dass an der entsprechenden Stelle ein Bild eingefügt werden muss. Kurzum, HTML verfügt über zahlreiche Tags (über 40), die alle eine bestimmte Aufgabe haben.

Doch damit nicht genug: Darüberhinaus gibt es zu (fast) jedem Tag eine Begrenzung. Schließlich kann es - analog zum eben genannten Beispiel - erforderlich sein, dass eine Anweisung zur Unterstreichung wieder aufgehoben werden soll, so dass der darauffolgende Text wieder "normal" angezeigt wird. Wie diese Begrenzungen genau aussehen, erfahren Sie im weiteren Verlauf dieser Einleitung.

Als letztes bleibt hier noch zu erwähnen, dass HTML Dateien immer die Endung ".html" oder ".htm" besitzen. Für welche Sie sich entscheiden, ist in den meisten Fällen nicht von Bedeutung. Allerdings sollten Sie sich einheitlich für eine Variante entscheiden. Lassen Sie sich nur gesagt sein, dass heutzutage wohl eher ".html" bevorzugt wird, sofern Sie über Windows 95 oder neuer verfügen, bzw. ein Betriebssystem, das nicht an das "8.3" Format für Dateinamen gebunden ist.

Neue HTML Dokumente anzulegen ist eine recht einfache Sache. Um schnell zum "Ziel" zu kommen, müssen Sie unter Windows nur folgende zwei Schritte durchführen:
 

Einen Ordner erstellen, in dem Sie Ihre HTML Dateien speichern. Erstellen Sie einen Ordner auf einem beliebigen Laufwerk, indem Sie zunächst auf das Symbol Arbeitsplatz auf dem Desktop klicken und ein Laufwerk auswählen. Mit einem Klick mit der rechten Maustaste auf eine freie Stelle im nun offenen Fenster erhalten Sie ein PopUpMenü (ein kleines Fenster mit mehreren Einträgen, das sich direkt neben dem Mauszeiger öffnet). Wählen Sie den Eintrag Neu/Ordner. Danach benennen Sie den Ordner einfach in den gewünschten Namen um. Klicken Sie dazu entweder auf den Namen des Ordners, wobei Sie die Maustaste etwa 1-2 Sekunden gedrückt halten, bevor Sie sie wieder loslassen oder indem Sie erneut das PopUpMenü mittels der rechten Maustaste öffnen und dann den Eintrag Umbenennen wählen.

Eine HTML Datei erstellen. Wechseln Sie in den HTML Ordner aus Schritt 1 und öffnen Sie nun wieder das PopUpMenü mit der rechten Maustaste. Wählen Sie den Eintrag Neu und dann als Dateityp HTML Datei. Sollte dieser Eintrag nicht vorhanden sein, wählen Sie stattdessen einfach Textdatei. Nach diesem Vorgang benennen Sie die Datei Ihren Wünschen entsprechend um (Haben Sie den Eintrag Textdatei gewählt, muss die Dateiendung auf ".html" statt ".txt" geädert werden).

Um weitere HTML Dateien anzulegen, wechseln Sie einfach in den neu angelegten Ordner und wiederholen Sie Schritt zwei.

Nachdem Sie jetzt Ihre erste HTML Datei erstellt haben, möchten Sie natürlich auch eine Seite kreieren. Dazu müssen Sie zunächst die HTML Datei öffnen, die Sie bearbeiten wollen. Dies geschieht in der Regel mit einem Doppelklick auf die entsprechende Datei. Nun hängt es jedoch von der Einstellung ihres Computers ab, ob die Seite im Internet Explorer von Microsoft oder im Netscape Navigator geöffnet wird (oder gar ein anderer Browser gestartet wird). Alle folgenden Erläuterungen beziehen sich auf den Internet Explorer, der zum Bearbeiten der HTML Seiten das Programm Notepad benutzt. Wird auf Ihrem Computer Netscape statt Internet Explorer geladen, können Sie alle Schritte dieser Einleitung trotzdem einfach durchführen, wenn Sie z.B. über Start/Ausführen Notepad starten. in Außerdem müssen Sie sich darauf einstellen, dass einige Befehle unter Netscape handeln (z.B. "Neu Laden" statt "Aktualisieren").

Da die zu bearbeitende Seite nun in den Internet Explorer geladen wurde, werden Sie feststellen, dass der Bereich des Fensters, in dem der Seiteninhalt angezeigt wird, leer ist. Das liegt ganz einfach daran, dass Ihre Seite (Datei) auch noch keinen Inhalt hat. Also muss die Datei nun geöffnet und bearbeitet werden. Klicken Sie dazu mit der rechten Maustaste in den leeren Anzeigebereich und wählen Sie anschließend Quelltext anzeigen aus dem PopUpMenü. Das nun offene Fenster ist entweder leer oder enthält den Text "<HTML></HTML>". Sollte dieser Text vorhanden sein, können Sie ihn löschen oder beibehalten. Wie Sie sich entscheiden, ist belanglos. Allerdings könnte es am Anfang "leichter" sein, wenn Sie den Inhalt entfernen.

Doch wollen wir nun nicht lange herumreden, sondern mit der Arbeit beginnen. Jede HTML Datei benötigt ein Grundgerüst, welches folgendes Aussehen hat:

Was Sie in diesem Beispiel sehen, sind die 3 grundlegenden Tags in HTML. Der HTML Start Tag steht am Anfang der Datei und sein Ende Tag am Ende der Datei. Dazwischen befinden sich der HEAD Tag und der BODY Tag, samt Ende Tags. Bevor wir nun kurz auf die Bedeutung der einzelnen Tags eingehen, kurz die Erklärung zum Thema Start und Ende Tags.

In beinahe allen Fällen gibt es einen Start und einen Ende Tag. Der Start Tag aktiviert einen bestimmten Befehl, der Ende Tag deaktiviert ihn - er beendet ihn also. Somit ergeben sich in diesem Fall geschlossene Einheiten. Es gilt das generelle Aussehen von Tags zu beachten: Alle Tags beginnen mit einer spitzen Klammer, gefolgt vom Namen des Tags und einer schließenden spitzen Klammer. Der Ende Tag besitzt zusätzlich vor dem Tag Namen noch einen Slash / (Schrägstrich). Der Browser unterscheidet bei Tag Namen nicht zwischen Groß- und Kleinschreibung. Sie können die Tag Namen also schreiben, wie Sie möchten (sogar gemischt, was allerdings wohl wenig Sinn macht und zudem unleserlich ist). Es gelten also folgende zwei Schemata für Tags: Der Start Tag: hat immer dieses Aussehen: <TagName>, während der Ende Tag immer wie folgt aussieht: </TagName>.

Sie sollten übrigens immer im Auge behalten, dass Sie die Datei so formatieren können, wie Sie es für richtig halten. Sie sind also nicht gezwungen, die Tags so "schön" einzurücken, wie es das Beispiel vormacht. Im Gegenteil können Sie sogar den gesamten Inhalt direkt hintereinanderwegschreiben oder beliebig viele Leerzeilen lassen. Doch wäre dies wohl kaum leserlich, was zu einem Problem führt, das ausführlich erst im folgenden Abschnitt erläutert werden soll. Doch beginnen Sie bereits jetzt daran zu denken, dass Ihre HTML Dateien so gut strukturiert und leserlich wie möglich sein sollten, um spätere Änderungen leicht und schnell durchführen zu können. Dies ist vor allem bei der Fehlersuche sehr hilfreich.

Doch nun zu den einzelnen Tags: Der HTML Tag definiert seinen Inhalt als HTML Text, so dass der Browser Ihre Seite als Website erkennt und auch als solche ausgibt. Der HEAD Tag sorgt für Grundinformationen der Seite wie Schriftsatz und Titel. Der BODY Tag enthält beinahe alle anderen HTML Tags. Er stellt den sichtbaren Teil Ihrer Seite dar. Würden Sie nun die Datei speichern und danach im Browser auf "Aktualisieren" klicken, wird Ihr Bild immer noch leer sein. Entsprechend benötigen Sie etwas, um Sichtbares zu erzeugen - dieses "etwas" ist, wie Sie sicherlich erraten haben, der Einsatz weiterer Tags. Wenn also alles andere klar ist, dann lesen Sie einfach im nächsten Kapitel weiter.

Jetzt lernen Sie, wie Sie richtige Webseiten erstellen. Dabei müssen Sie zunächst den Begriff Quelltext verinnerlichen. Der Quelltext ist der Inhalt der HTML Datei. Er wird vom Browser gelesen und dann aus ihm die Webseite erstellt. In HTML bedeutet dies, dass sich in der HTML Datei - oder auch Quelldatei, da sie die Quelle ist - Tags und Text befinden. Im Editorfenster, das sie im Internet Explorer mit dem Eintrag Quelltext anzeigen des PopUpMenüs geöffnet haben, können Sie nun ihre HTML Datei vollständig bearbeiten und anlegen.

Wie Sie bereits wissen, besteht eine HTML Datei im Wesentlichen aus Tags und Text. Sie können alle Tags in der Übersicht nachsehen. Dabei finden Sie den gewünschten Tag, indem Sie die Beschreibungen rechts neben den Tag Namen lesen. In dieser Einleitung sehen wir uns jedoch nur einige wichtige Grundelemente an. Für die Anwendung anderer Tags sind allerdings einige Regeln und Merkmale von großer Bedeutung:

Alle Tags, die in den <HEAD> Tag gehören, sind auch mit diesem zusammen auf derselben Seite zu finden (jedoch können <SCRIPT> und <NOSCRIPT> auch außerhalb von <HEAD> stehen. Alle anderen Tags gehören in den <BODY> Tag des Dokuments. Nur für <FRAME>, <NOFRAMES> und <FRAMESET> gilt, dass diese niemals im BODY oder HEAD Bereich der Seite stehen dürfen. Doch sehen Sie sich das alles am besten in Ruhe an. Beginnen wir unseren Schnelleinstieg jetzt einfach mit einem Beispiel, das daraufhin erklärt wird:

Der Quelltext dieses Beispiels ist zwar kurz, liefert aber dennoch einige Informationen über HTML. Wenn Sie das vorangegange Beispiel verstehen, werden Sie auch mit allen anderen Tags keine Probleme haben. Lassen Sie uns jetzt einen genauen Blick auf die Datei werfen:

Die Datei beginnt mit dem HTML Tag, um dem Browser mitzuteilen, dass der folgende Text Tags beinhaltet, also eine HTML Datei ist. Wie im vorigen Kapitel bereits beschrieben, folgt nun der Kopfbereich der Seite (HEAD). In diesem Bereich erhält die Webseite einen Titel, der in der Kopfzeile des Browsers angezeigt wird. Der Titel steht zwischen dem Start und Ende Tag TITLE. Dem Kopfbereich folgt der BODY Teil des Dokuments. Im Hauptteil (BODY Teil) befinden sich alle Informationen zum Aussehen und Inhalt der Seite. Als erstes werden Schriftart, -größe und -farbe festgelegt. Dies geschieht mit dem FONT Tag. Über Attribute werden die genannten Einstellungen festgelegt. Eine Erklärung zu Attributen erfahren Sie im Kapitel Attribute. Zwischen dem FONT Start und Ende Tag befindet sich nun der gesamte Text der Webseite. In der Regel werden Sie viele FONT Tags benutzen, um unterschiedliche Schriftbereiche festzulegen. Schließlich wird einmal ein Farbwechsel oder ähnliches erforderlich sein. Hier jedoch reicht ein FONT Tag völlig aus. Im Textverlauf können Sie einige weitere Tags entdecken. Diese legen Fettdruck (<B>), Kursivschrift (<I>) und Unterstreichungen (<U>) fest. Am Ende der Datei folgt noch ein Bild (IMG Tag) und dann wird der BODY Bereich durch den entsprechenden Ende Tag geschlossen und auch das Ende des HTML Inhalts wird bekannt gegeben (durch </HTML>).

Nachdem wir die einzelnen Tags besprochen haben, kommen wir nun noch zu drei wichtigen Punkten:

	Als erstes sollte Ihnen die Formatierung der Datei aufgefallen sein. Es gibt zahlreiche Einrückungen, Zeilenumbrüche und Leerzeilen. Diese haben mit dem Aussehen der Webseite nichts zu tun. Sie dienen nur der besseren Lesbarkeit des Quellcodes. Sie sollten Ihren eigenen Stil entwickeln, so dass Sie bereits fertige Dateien immer noch gut lesen und verstehen können, denn nichts ist frustrierender als ein unorganisierter Quellecode, der geändert werden muss. Damit eng verknüpft ist der Hinweis, dass Sie Ihre Webseite (nicht den Quellcode) durch bestimmte Tags formatieren können und müssen. Einen Zeilenumbruch erreichen Sie nähmlich nicht durch einen Umbruch im Quellcode, sondern nur durch den Einsatz des <BR> Tags.
	Sie sollten stets darauf achten, dass ihre Tags sinnvoll verschachtelt sind. Eine "falsche" Verschachtelung ist unübersichtlich und kann zu Fehlern führen, die nur schwer gefunden werden können. Was damit gemeint ist, zeigt folgendes Beispiel: <FONT><B></FONT></B> In diesem Beispiel sollten Sie den B Tag vor dem FONT Tag schließen, da er nach diesem definiert wurde. Würden Sie beispielsweise Text direkt hinter den FONT Ende Tag einfügen, würde dieser fett dargestellt, obwohl Sie dies vielleicht gar nicht möchten, da der B Tag noch nicht beendet wurde. Daher sollten Sie immer beachten: Als letztes definiert, als erstes geschlossen. Sollten Sie diese Regel befolgen, ist Ihr Quellcode wesentlich lesbarer und Sie werden weniger Probleme haben, wenn Sie nachträgliche Veränderungen durchführen wollen.
	Der Browser unterscheidet bei den Tags nicht zwischen Groß- und Kleinschreibung. Demnach ist <B> und <b> das gleiche. Sie sollten Ihre Tags jedoch einheitlich groß oder kleinschreiben. Ihr Text hingegen wird entsprechend der Schreibweise im Quelltext angezeigt (Groß-/Kleinschreibung).

Insgesamt sind die Browser sehr tolerant und verzeihen Fehler. Alles was nach einem Tag aussieht, wird als solcher behandelt. Ist der Tag bzw. sein Name jedoch falsch oder fehlerhaft, wird er einfach ignoriert. Dieser Umstand ist zwar gut, da eine fehlerhafte Seite so trotzdem angezeigt wird, allerdings kann durch einen unerkannten Fehler ganzer Seiteninhalt im Verborgenen bleiben, wenn beispielsweise ein Kommentar nicht beendet oder eine schließende spitze Klammer eines Tags vergessen wird. Achten Sie also trotzdem immer auf die Korrektheit ihres Codes. Dazu sollten Sie auch die Maskierung beachten, da einige Zeichen nicht immer dargestellt werden können oder dürfen, ohne das Fehler auftreten (wie z.B. < oder >).

Attribute sind die Eigenschaften der Tags. Sie stehen innerhalb des Start-Tags und sind für jeden Tag verschieden. Sie modifizieren das Verhalten von einzelnen Tags (in der Regel in seinem Aussehen). Kein Attribut muss benutzt werden. Benötigen Sie bestimmte Attribute nicht, so listen Sie sie gar nicht erst auf. In diesem Fall werden Standardwerte benutzt. Sollten Sie ein Attribut jedoch verwenden wollen, so weisen Sie diesem durch ein Gleichheitszeichen = einfach einen Wert zu. Es empfiehlt sich, alle Parameter (die Werte, die Sie einem Attribut zuweisen) in Anführungszeichen einzufassen. Dadurch ersparen Sie sich viel Ärger und erhöhen erneut die Lesbarkeit Ihres Quellcodes. Allerdings werden Anführungszeichen nur zwingend erforderlich, wenn der entsprechende Parameter aus mehr als einem Wort besteht (im folgenden Beispiel rot eingefärbt). Seien Sie jedoch vorsichtig, denn ein vergessenes Anführungszeichen kann ungeahnte Folgen haben. So kann es dazu führen, dass ganze Textpassagen ausgeblendet werden, da Sie für den Browser mit zum Parameter gehören (da der eigentliche Parameter ja kein Ende hat!).

Bestimmte Zeichen können aus unterschiedlichen Gründen vom Browser nicht angezeigt werden (wie z.B. die deutschen Umlaute in "Englisch sprachigen" Browsern oder die spitzen Klammern, die Tags kennzeichnen). Darum gibt es für diese Zeichen Maskierungen, so dass auch diese fehlerfrei angezeigt werden können. Der folgenden Tabelle können Sie die Maskierungen der wichtigsten Zeichen entnehmen. Wenn Sie diese Maskierungen in den Quelltext einbinden, beachten Sie die Benutzung des einleitenden & und des abschließenden ;, sowie unbedingt die Groß- und Kleinscheibung.

Für Farbdefinitionen für Vorder- und Hintergrund werden die gleichen Zahlen- oder Namenswerte verwendet. Im Folgenden erhalten Sie eine Liste mit den Namenswerten und eine Anleitung, wie Sie eigene Farben als hexadezimale Werte definieren können.

Hexadezimale Farbwerte haben folgendes Format: "#XXYYZZ". Das # ist Pflicht und kann nicht verändert werden. Es weist auf den folgenden hexadezimalen Wert hin. Das X-Paar steht für den Rotwert in der Gesamtfarbe, das Y-Paar für den Grünwert und das Z-Paar für den Blauwert. Für alle drei Paare sind Werte von 00-FF zulässig. Je höher der Wert ist, desto heller wird der jeweilige Farbton in die Gesamtfarbe eingemischt. Entsprechend wäre "#FFFFFF" die Farbe weiß (hellster Ton) und "#000000" schwarz (dunkelster Ton). Die einzelne Wertepaare sind - wie erwähnt - hexadezimal, wobei der erste Wert der höhere ist und der zweite der niedrigere - genauso wie im Dezimalsystem. Die Umrechnung ist recht leicht. Für das X-Paar lautet sie wie folgt: X₁*16+X₂. Die Buchstaben haben dabei folgende Werte: A=10, B=11 ... F=15. Entsprechend dieser Formel hat der erste Wert eine höhere Auswirkung auf die Farbe als der zweite, welcher diese nur geringfügig beeinflusst. Für die übrigen Wertepaare gilt die gleiche Formel.