Anmerkungen

Diese Kurzreferenz wurde von mir vor Jahren erstellt. Eigentlich ist sie, im Gegensatz zur aufgeführten Software, auch heute noch aktuell. Das Rad wird also auch Internet nicht jeden Tag neu erfunden.

Franz Scheerer, Wiesbaden, den 09.05.2008

Hier gleich ausprobieren:

NEU: Jetzt brauchen Sie Ihr HTML nicht einmal mehr in einer Datei speichern.

Schnelltest

So geht es am schnellsten: Geben Sie hier Ihren HTML-Text ein und lassen sich das Ergebnis direkt anzeigen.

HTML-Eingabe:

So wird Ihr HTML im Browser angezeigt

Definitionen

HTML
Hyper-Text-Markup-Language

Weitere Quellen im Internet

Hier finden Sie weitere Dokumentationen im Internet (externe Links).

Sonderzeichen

Umfassende Referenz

Umfassende HTML-Referenz

HTML in 21 Minuten

HTML ist die Sprache des WWW und alles was Sie wirklich brauchen Ihre Website zu erstellen. Tatsächlich ist HTML weitgehend ganz gewöhnlicher Text und die Grundlagen sind auch für den Laien rasch erlernt. Ohne Kenntnis der Grundlagen sind Sie jedoch auch mit irgendwelchen Baukästen nicht in der Lage eine Webseite zu erstellen, die Sie bei Bedarf auch ändern können.

Das Angebot an Literatur zu HTML ist fast unbegrenzt. Sie könnten also tausende Seiten zu HTML lesen, obgleich Sie auch bereits hier das Wichtigste erfahren. Viele Software-Produkte versprechen dem Anwender ohne HTML-Kenntnisse in die Lage zu versetzen, eine eigene Homepage zu entwickeln.

Daher entsteht für viele Laien der Eindruck, HTML sei ein Werkzeug ausschließlich für den Profi und äußerst schwierig zu erlernen. Tatsächlich lassen die Grundlagen, alles was man braucht um eine Seite wie diese in einem einfachen Texteditor zu erstellen, in wenigen Minuten erlernen. Da HTML zum großen Teil aus gewöhnlicher Text besteht, ist die wesentliche Voraussetzung die Fähigkeit einen einfachen Text mit Hilfe des Computers in einem einfachen Texteditor zu erstellen. Jeder normal gebildete Anwender, erlernt die Erstellung von einfachem HTML-Text in wenigen Minuten.

Ihre erste HTML-Seite

HTML besteht aus dem eigentlichen Inhalt, normaler Text und Anweisungen zur Bedeutung, Formatierung und Darstellung von Textabschnitten (Elementen), diese Anweisungen, auch Tags genannt, sind in spitzen Klammer eingeschlossen. Zur Übung können Sie mit dem Texteditor Ihrer Wahl den blau markierten Text in eine Datei ub1.html schreiben.

<html>

<head>

<title> Der Titel der Seite </title>

</head>

Die HTML-Seite beginnt mit dem Tag <html>. Groß- und Kleinschreibung innerhalb der spitzen Klammern spielt keine Rolle. Wie fast alles in HTML, kann dieser Tag (meist) weggelassen werden. Es ist jedoch zu empfehlen den <html> anzugeben. Dies stellt sicher, dass der folgenden Text von einem Programm als HTML erkannt und richtig dargestellt wird.

Dem Tag <html> folgt der Tag <head> (engl. Kopf) der HTML-Seite. Der Kopf kann aus mehreren Elementen bestehen. Das wichtigste Element im Kopf, dass die Darstellung der Seite im Browser beeinflusst, ist der Titel (engl. <title>). Mit dem Tag </title> wird das Ende des Titels gekennzeichnet. Allgemein wird das Ende eines Elements <xxx> in HTML mit </xxx> dargestellt. Dies gilt auch für das Ende des Kopfs mit </head>.

Dem Kopf folgt der eigentliche Textkörper (engl. <body>). Auch <body> kann optional entfallen. Dieser Tag bietet jedoch die Möglichkeit über Attribute, die Darstellung des gesamten Dokuments zu beeinflussen. Mit dem Attribut bgcolor kann z.B. die Hintergrundfarbe eingestellt werden. Auch ein Hintergrundbild kann angegeben werden.

Textkörper

Textkörper könnte etwa wie folgt aussehen könnte:

<body bgcolor="#f5f5f5">

<h1> Haupt&uuml;berschrift </h1>

<h2> Verweise auf andere HTML-Seiten </h2>

<a href="http://www.xyz.de/andereSeite.html">Verweis </a> auf eine andere Seite.

<h2>Listen</h2>

<ol>

<li> eins </li>

<li> zwei </li>

<li> drei </li>

</ol>

<ul>

<li> Hund </li>

<li> Katze </li>

<li> Maus </li>

</ul>

Ende der HTML-Seite

Der Leser, falls er es noch nicht weiß, wird sicher schon ahnen. Der Textkörper wird durch den schließenden Tag </body> und die gesamte Seite durch den schließenden Tag </html> abgeschlossen. Die HTML-Seite wird also mit der Zeile:

</body></html>

beendet.

Sonderzeichen

HTML ist wie gesagt zunächst gewöhnlicher Text. Jedoch nur für 128-Zeichen wird international einheitlich die Bedeutung durch den Zeichensatz ASCII festgelegt. Die 128 Zeichen umfassen nur die 26 Groß- und Kleinbuchstaben des lateinischen Alphabeths. Deutsche Umlaute gehören leider nicht dazu. Das ü in Hauptüberschrift wird hier als &uuml; geschrieben werden. Sie können auch einfach das Zeichen 'ü' schreiben. Die korrekte Darstellung ist dann eventuell, etwa auf einem Rechner mit englischen Spracheinstellungen, nicht garantiert. Um die lästige Ersetzung der deutschen Umlaute zu vermeiden, kann die Zeile

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


im Kopf (HEAD) eingefügt werden. In diesem Fall ist die korrekte Darstellung unabhängig von den Spracheinstellungen garantiert. Alle Entitäten beginnen mit dem Zeichen & und enden mit dem Semikolon. Vorsicht das Semikolon darf nicht weggelassen werden. Auch die spitzen Klammern im Inhalt (keine Tags), sollten durch die Entitäten &lt; &gt; (engl. lower than bzw. greater than) ersetzt werden.

Auch das Zeichen '&' hat in HTML eine besondere Bedeutung. Da eine Verwechselung kaum möglich ist, werden die meisten Browser das Zeichen & auch ohne Verwendung der Entität &amp; korrekt darstellen. Für deutsche Texte brauchen Sie nur die Enitäten &Auml; &Ouml; &Uuml; &auml; &ouml; &uuml; und &szlig; (für ß). Das Eurozeichen € wird durch &euro; dargestellt. Die Ersetzung der deutschen Umlaute kann recht umständlich sein. Zum Glück wird diese Aufgabe von HTML-Editoren dem Autor abgenommen oder kann entfallen, falls die entsprechende Zeile eingefügt wird. Die meisten Textverarbeitungsprogramme erlauben es ein Dokument im HTML-Format zu speichern. Die Umlaute werden dabei automatisch konvertiert.

Tabellen

Tabellen beginnen mit <table> und werden mit </table> beendet. Jede Zeile beginnt mit <tr>, jede Zelle mit <td>. Es ist fast schon überflüssig zu erwähnen, dass die Zellen und Zeilen mit </td> bzw. mit </tr> abgeschlossen werden.

Bilder

In HTML können Bilder, die als Datei vorliegen, leicht eingebunden werden. Hierfür wird der Tag IMG (steht für engl. Image) benötigt. Sie sollte neben dem Attribut src mit dem Dateinamen das Attribut alt verwenden, das einen alternativen Text angibt, der angezeigt wird, wenn das Bild nicht vorhanden, noch nicht geladen oder vom Browser aus einem anderen Grund nicht dargestellt werden kann. Der alternative Text wird auch von Suchmaschinen wie Google gelesen und kann Ihre Auffindbarkeit verbessern.

<img src="dateixy.gif" alt="Ein Bild">

Abspeichern und anschauen

Speichern Sie Datei unter dem Namen ub1.html in Ihrem Editor ab und öffenen Sie die Datei in Ihrem Browser (Internet Explorer, Netscape, Mozilla, Opera, ...) und bewundern Sie Ihr Werk. Damit sind die 21 Minuten schon vorbei.

Vertiefung: Quelltext anzeigen

Jeder Browser ermöglicht es Ihnen das HTML mit den Tags in spitzen Klammern als Text, wie Sie ihn in dieser Übung erstellt haben, anzeigen zu lassen. Die Möglichkeit den Quelltext anzuzeigen können Sie nutzen, um rasch weitere HTML-Features kennen zu lernen.

Internet-Topservice (Scheerer Software)
w3school.com