Eine kurze Einführung in HTML

<b> , oder </h2>

Allerdings ist dieses Konzept mehr und mehr aufgeweicht, da viele Gestalter das Aussehen ihrer Texte in sehr viel stärkerem Maß festlegen wollten, als HTML dies ursprünglich gestattete.

Mit der Zeit wurde HTML so entwickelt, dass es mittlerweile möglich ist, mit so genannten "Cascading Style Sheets (.css)" feste Punktgrößen und Schriftarten anzugeben. Allerdings blieb das Grundproblem des Netzes bestehen: die Hard- und Software des Betrachters sind unbekannt und differieren sehr stark von einander.

Insofern empfiehlt es sich nach wie vor nicht, mit solchen "absoluten" Angaben zu arbeiten. Auch sollten Sie die neuesten HTML-Entwicklungen nur sehr zögerlich verwenden, da der größte Teil der Betrachter Ihrer Internet-Seiten Browser installiert hat, die nicht in der Lage sind, diese Neuerungen darzustellen und statt dessen Fehler anzeigen.

Jede HTML-Datei ist nach folgendem Grundmuster aufgebaut:

Diese Grundstruktur zeigt dem Browser, dass es sich um ein HTML-Dokument handelt und gliedert es in einen "Kopf" () und einen "Körper" (). Im "Body"-Bereich steht das, was dem Betrachter im Browserfenster angezeigt wird. Im Kopf finden sich allgemeine Angaben wie etwa der Titel und versteckte Stichworte für Suchmaschinen.

Übung:

Öffnen Sie einen Text-Editor (z. B. unter Windows (Start > Programme > Zubehör) den "Editor" oder "Wordpad"), und kopieren das obige Grundmuster. Denken Sie sich einen Titel aus, zum Beispiel "Meine erste HTML-Datei" und schreiben ihn zwischen die <TITLE>-Tags.

Der Titel sollte in wenigen Worten ausdrücken, was auf der Seite zu finden ist, da er von vielen Browsern automatisch als Name übernommen wird, wenn der Leser ein Lesezeichen (Bookmark) auf die Datei setzt.

Erster Schritt: Text formatieren

Um einen Text zu formatieren (z. B. fett zu setzen), muss dieser von zwei Tags umschlossen werden. Einem beginnenden Tag, der die Formatierung angibt und einem schließenden Tag, der mit </ > anzeigt, dass die Formatierung endet. Für eine Fettung (im Englischen bold) sieht dies dann so aus:

<B>Ich bin ein fetter Text</B>

Verschiedene Formatierungen können durch Schachtelung miteinander kombiniert werden:

<B><I>Ich bin ein fetter und kursiver Text</I></B>

Die wichtigsten Formatierungsmöglichkeiten in HTML im Überblick:

Überschrift:
<H1>...</H1> bis <H6>...</H6>

Die Überschriften werden vom Browser immer groß und meist fett gesetzt, so dass sie sich gut vom Fließtext abheben. Die Zahlen 1 bis 6 beschreiben nicht die Größe, sondern die "Ebene". H1 (vom englischen Heading 1) ist die oberste Überschriftenebene, H2 wäre eine Unterüberschrift und H3 eine Unter-Unterüberschrift. Die Reihenfolge sollte möglichst eingehalten werden, also nicht einfach aus optischen Gesichtspunkten eine H2 für Hauptüberschriften verwendet werden.

Schriftschnitt, Schriftart

<b> = Fett
(wie bold - der englische Begriff für fett)
<i> = Kursiv
(wie wie italic- der englische Begriff für kursiv)
<u> = Unterstrichen
(wie underlined- der englische Begriff für unterstrichen)
können verwendet werden.

Außerdem kann <TT> (wie teletyper - der englische Begriff für Fernschreiber) für eine schreibmaschinenartige Schrift mit fester Laufweite benutzt werden. Dazu kommen logische Auszeichnungen wie "hervorgehoben" (<STRONG>) und "betont" (<EM>). Wie die logischen Auszeichnungen vom Browser angezeigt werden, ist verschieden. <STRONG> wird oft als Fettung wiedergegeben und <EM> oft kursiv, aber dies muss nicht so sein.

Absatz- und Leerzeichen

Damit der Text nicht ohne Absätze gerade herunterläuft, muss man in HTML spezielle Absatzzeichen einfügen: <P> (vom englischen Begriff für Absatz paragraph). Will man nur einen Zeilenumbruch einfügen, genügt ein <BR> (vom englischen break - Umbruch). Beide Tags werden nicht mit einem schließenden </..> versehen.
Soll der Text nicht rechtsbündig ausgerichtet werden, kann mit Hilfe von <P ALIGN=...> auch linksbündig (<P ALIGN=right>) oder zentriert (<P ALIGN=center>) gesetzt werden.

HTML beachtet dabei immer nur ein Absatzzeichen. Mehrere leere Absätze hintereinander werden nicht angezeigt, sondern automatisch auf einen einzigen reduziert. Das selbe gilt übrigens für Leerzeichen. Um mehrere Leerzeilen oder -zeichen zu erhalten, kann man sich eines Tricks bedienen: Man fügt ein &nbsp; (vom englischen nonbreaking space) ein, also etwa <P>&nbsp; <P>&nbsp; <P>&nbsp;, um drei Leerzeilen zu erhalten.

Liste

Listen können nummeriert oder nur mit Aufzählungszeichen versehen werden. Nummerierte Listen werden mit <OL> (Abkürzung des englischen Begriffs ordered list - geordnete Liste) begonnen, nicht nummerierte mit <UL> (Abkürzung des englischen Begriff unordered list - nicht geordnete Liste). Jeder Listeneintrag folgt dann mit <LI>. Am Schluss der Liste steht ein abschließendes </UL> oder </OL>.

Sonderzeichen ("Entities")

Alle Sonderzeichen - dazu zählen für das im englischsprachigen Raum entstandene HTML auch die deutschen Umlaute - müssen nach einem festen Schema angegeben werden. Hierfür liegen eigene Tabellen vor. Im folgenden die wichtigsten Sonderzeichen:

ä : &auml; Ä: &Auml;
ü : &uuml; Ü: &Uuml;
ö : &ouml; Ö: &Ouml;
ß : &szlig;
" : &quot;
&: &amp;

Eine komplette Liste aller Sonderzeichen finden Sie zum Beispiel in Stefan Münz "Self HTML".

Linien
Horizontale Linien können über <HR> (Abkürzung des englischen horizontal rule) eingefügt werden. Mit der Angabe <HR WIDTH=...> kann die Breite in Pixel (Bildpunkte) oder Prozent definiert werden, also zum Beispiel <HR WIDTH=75%>, um eine Linie zu erzeugen, die 70% der Browserfensterbreite einnimmt.

Mit <HR SIZE=...> kann die Dicke in Pixel angegeben werden, also zum Beispiel: <HR WIDTH=250 SIZE=10> für eine recht dicke, 250 Pixel breite Linie.

Übung:

Legen Sie in Ihrer Datei (zwischen den <BODY>-Tags) eine Überschrift und einen Text an. Zum Beispiel:

Zweiter Schritt: Verweise anlegen:

Das Besondere an HTML ist, dass Sie mit Verweisen (Hyperlinks oder auch nur Links) von Ihren Internet-Seiten aus auf andere Dateien im Internet verweisen können. Das geht ganz einfach nach folgendem Schema:

Übung:

Speichern Sie Ihre Übungsdatei als uebung1.html auf Ihre Festplatte. Legen Sie im selben Ordner eine zweite Datei nach dem selben Muster an. Speichern Sie diese zum Beispiel als uebung2.html. In diesem Text schreiben Sie nun zwischen die Body-Tags den Link zu "Uebung1":

Liegt die Datei nicht im selben Ordner, müssen Sie den Verweis entsprechend anpassen. Ein detailliertes Schema dazu finden Sie z. B. in Stefan Münz´Anleitung SELFHTML im Abschnitt: Verweise.

Sie haben nun einen so genannten "relativen Link" erzeugt. Ein relativer Link wird in der Regel innerhalb von Website-Projekten verwendet. Wenn Sie zu einer anderen Datei im Internet verweisen wollen, müssen Sie dagegen einen so genannten absoluten Link angeben.

Dazu schreiben Sie die komplette URL der Datei, also zum Beispiel:

Für Links innerhalb ihrer eigenen Seiten ist es nicht sinnvoll, absolute Links zu verwenden, da der Link dann nicht mehr auf Ihrer Festplatte funktioniert, sondern Sie sich erst ins Netz einwählen müssen, um die Seite aufzurufen.

Links können jedoch nicht nur eine neue Datei aufrufen, sondern sie können auch einfach dazu benutzt werden, um innerhalb eines Dokumentes zu springen. Dazu müssen Sie an die Stelle, an die man springen können soll, einen "Anker" (englisch: anchor) setzen:

Der Link zu diesem Anker sieht so aus:

Der Browser zeigt bei Klick auf den Link dann am Kopf des Browserfensters das Sprungziel an. Dies funktioniert jedoch nur, wenn die Seite lang genug ist. Bei sehr kurzen Seiten wird der Sprung nicht sichtbar.

Konkret könnte man Anker zum Beispiel dazu benutzen, um am Anfang eines langen Textes ein kleines Inhaltsverzeichnis anzulegen, bei dem man per Mausklick zu den einzelnen Kapiteln gelangen kann.

Übung:

Legen Sie einen Anker am Fuß Ihres HTML-Übungsdokumentes an:

Mit einem Verweis am Anfang Ihres Dokuments können Sie nun direkt ans Ende springen:

Eine Sonderform des Links ist der so genannte E-Mail-Link:

(Achtung: Im Gegensatz zu anderen Links, stehen hinter dem "mailto:" keine // !). Klickt der Leser diesen Link an, wird ihm automatisch eine neue E-Mail an die E-Mail Adresse des Links angelegt.

Dritter Schritt: Bilder einbinden

Bilder werden in HTML-Dateien nicht mit hineingespeichert, wie dies zum Beispiel bei Word-Dateien möglich ist, sondern bleiben eigene Dateien auf der Festplatte/bzw. dem Server. Dies hat den Vorteil, dass der Betrachter entscheiden kann, ob die Bilder angezeigt werden sollen oder nicht. Die HTML-Datei selbst bleibt sehr klein und kann dadurch schnell und kostengünstig geladen werden.

In der HTML-Datei ist nämlich nur ein Verweis enthalten, dass der Browser hier das entsprechende Bild einfügen soll. Diese Bildverweise werden nach dem selben Schema wie Links eingebunden, nur dass der Tag <img src="..."> (Abkürzung des englischen image source - Bildquelle) heißt.

Dies sieht dann zum Beispiel so aus:

Als Bildformate sollten nur als .gif und .jpg verwendet werden, da diese von allen Browsern ohne Zusatzprogramme (Plug Ins) angezeigt werden können. Mit einem Bildbearbeitungsprogramm wie etwa Paint Shop Pro können Sie vorhandene Bilder in diese Formate umwandeln. Außerdem finden Sie im Internet so genannte ClipArt-Sammlungen, in denen frei verwendbare GIFs und JPGs zur Verfügung gestellt werden.

Wir bieten Ihnen als besonderen Service eine attraktive Auswahl an Bildern für Ihre Internet-Präsenz. Verwenden Sie jedoch auf keinen Fall Bilder, die Sie von irgendeiner Homepage gespeichert haben. Abbildungen unterliegen dem Copyright und dürfen daher ohne Einwilligung des Urhebers nicht veröffentlicht werden.

Auch bei Bildern kann mit absoluten und relativen Dateiangaben gearbeitet werden, wobei sich wieder die relative Angabe empfiehlt. Damit auch diejenigen, die Ihr Bild nicht sehen, weil sie die Grafikanzeige ausgeschaltet haben, sich vorstellen können, was dort dargestellt ist, gibt es die Möglichkeit, einen so genannten Alt-Text anzulegen:

Ausrichten können Sie Ihr Bild ähnlich wie Text mit "ALIGN":

Übung:

Suchen Sie sich ein beliebiges JPEG oder GIF aus dem Internet (Anklicken mit rechter Maustaste, Wahl der Option "Bild speichern unter" bzw. "Save Image as") oder Ihrer Festplatte heraus und speichern Sie es im selben Ordner wie Ihre anderen Übungsdateien. Nun können Sie nach folgendem Muster einen Verweis darauf in Ihre Übungsdatei schreiben:

Probieren Sie einmal die verschiedenen Ausrichtungsmöglichkeiten aus.

Fertig ist die komplette Übungsdatei

Nun haben Sie die Grundlagen von HTML schon kennen gelernt. Ihre komplette Übungsdatei könnte zum Beispiel so aussehen:

Wenn Ihre Datei nicht richtig angezeigt wird, dann haben Sie wahrscheinlich irgendwo einen Tippfehler gemacht. Kontrollieren Sie noch einmal Zeichen für Zeichen auf seine Richtigkeit.

Bitte achten Sie darauf, beim Dateinamen keine Leer- und Sonderzeichen (ä, ö, ü, etc.) zu verwenden.

Mit Hilfe moderner HTML-Editoren wie Adobe® GoLive müssen Sie die Tags nicht mehr von Hand schreiben, sondern Sie können, ähnlich wie in einem Textverarbeitungsprogramm, Formatierungen direkt aus Menüs zuweisen. Dies spart Ihnen eine Menge Arbeit und senkt die Fehlerquote, da man sich nicht mehr vertippen kann. Die Grundkenntnisse in HTML erlauben Ihnen zu kontrollieren, ob Ihr Editor den gewünschten HTML-Code produziert und diesen bei Bedarf zu korrigieren.

Abschluss: Weiterlernen

Sie haben nun die Grundlagen der Internet-Sprache HTML kennengelernt. Es bieten sich Ihnen noch sehr viel mehr Möglichkeiten, als hier aufgezeigt werden konnten. Wir verweisen zum Weiterlernen auf die im Abschnitt "Weitere Informationen" aufgeführte, umfangreiche HTML-Referenz.

Weitere Informationen

Eine umfangreiche und sehr gute Einführung und Referenz von HTML bietet die Seite SelfHTML des SelfHTML e.V..