Artikel weiterleiten
Artikel editieren
Druckansicht
FAQ #561

Eine kurze Einführung in HTML

Texte, die im Internet veröffentlicht werden sollen, müssen in einem bestimmten Format vorliegen: HTML (Hypertext Markup Language) , der Seitenbeschreibungssprache für Internet-Seiten. Obwohl Sie mit modernen HTML-Editoren wie z. B. Adobe® GoLive arbeiten können, ohne HTML zu beherrschen, sind Grundkenntnisse darin immer noch sehr nützlich.
Dieser Anleitungsabschnitt begleitet Sie bei Ihren ersten Schritten in HTML:

Für die Erstellung von Internet-Seiten benötigen Sie:
  • Einen Texteditor, z. B. das mit Windows mitgelieferte Notepad oder Wordpad
  • Einen Browser zur Kontrolle

    Nützliches Hintergrundwissen
    Eine HTML-Datei kann im Prinzip mit jedem beliebigen Programm erstellt werden, das Texte erzeugen kann, also zum Beispiel Notepad, Textpad oder Word. Dies liegt daran, dass die Formatierungsanweisungen direkt in die Text-Datei hereingeschrieben werden. Die HTML-"Markierungen" stehen immer in spitzen Klammern und sehen zum Beispiel so aus:

<b> , oder </h2>

Diese HTML-Befehle nennt man Tags. Sie enthalten Hinweise für den Browser, wie er einen Text anzeigen soll und sind selbst später in der Anzeige nicht sichtbar.
Die Besonderheit an HTML ist, dass man neben der konkreten Formatierung auch eine Struktur zuweisen kann. Man legt dann im Text nicht fest, wie groß ein Buchstabe sein soll und in welcher Schrift er erscheinen soll, sondern welche Funktion er hat, also zum Beispiel, dass er eine Hauptüberschrift ist.

Der Grund für dieses System ist, dass Internet-Seiten von den unterschiedlichen Betriebssystemen auf den variierenden Monitorgrößen optimal angezeigt werden sollen.
 
Im Gegensatz zu einem Word-Dokument, das auf einer festen Papiergröße ausgedruckt wird, etwa einem Brief, ist es im Internet ungewiss, auf welche Hard- und Software Ihre Internet-Seiten beim Betrachter treffen werden. Eine 14 Punkt-Schrift, die auf einem 19-Zoll-Monitor gut aussieht, ist für einen "Personal Digital Assistant" wie etwa den Palm oder einen Psion zu groß.
 
Die HTML-Erfinder dachten sich nun, dass man dieses Problem lösen könne, wenn dem Text nur eine Struktur zugeordnet wird, die dann von jedem Ausgabegerät und jedem Nutzer selbst den Gegebenheiten optimal angepasst werden kann.

Als Strukturelemente waren ursprünglich 6 verschiedene Überschriftstufen vorgesehen (von h1 bis h6),außerdem Elemente wie "Liste" (li) oder "Zitat" (blockquote). Selbst die Schriftformate fett und kursiv sollten ursprünglich über logische Auszeichnungen wie und (Emphasis) erzeugt werden.

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:

Aufbau


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:

 

<H1>Hallo, dies ist die &Uuml;berschrift meiner ersten HTML-Datei</H1>
Eigentlich ist HTML ja <B> gar nicht so schwer </B>. Dies zum Beispiel ist eine Liste:
<UL>
<LI>&Auml;pfel
<LI>Birnen
<LI>Bananen
</UL>
Der Browser setzt automatisch Aufz&auml;hlungszeichen vor die einzelnen Elemente.
<P>
<HR WIDTH=75% SIZE=7>

 


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:

 

<A HREF="Datei_auf_die_verwiesen_werden_soll.html">Hier steht der unterstrichene Link-Text</A>

 

Ü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":

 

<A HREF="uebung1.html">Wenn Sie hier klicken, erscheint Datei 1</A>

 

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:

 

<A HREF="http://www.wunschname.de/verweisdokument.html">

in den Verweis.

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:

 

<A NAME="MeinAnker">Sprungziel</a>

 

Der Link zu diesem Anker sieht so aus:

 

<A HREF="#MeinAnker">Ein Klick hier bef&ouml;rdert Sie zu meinem Anker</a>

 

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:

 

<A NAME="fuss">hier ist das Ende des Dokumentes</a>

 

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

 

<A HREF="#fuss">Ein Klick hier bef&ouml;rdert Sie direkt ans Ende der Datei</a>

 

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

 

<a href="mailto:ich@wunschname.de">Mail an mich</a>

 

(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:

 

<img src="meintestbild.gif">

 

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:

 

<img src="mein_bild.gif" alt="Kurzbeschreibung Ihres Bildes">

 

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

 

<IMG SRC="..." ALIGN=RIGHT> setzt das Bild rechtsbündig
<IMG SRC="..." ALIGN=TOP> setzt den Text an den oberen Bildrand
<IMG SRC="..." ALIGN=MIDDLE> setzt das Bild im Verhältnis zum Text in die Mitte
<IMG SRC="..." ALIGN=BOTTOM> setzt es an den Fuß.

 

Ü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:

 

<img src="mein_testbild.gif" ALIGN=RIGHT alt="Mein Testbild">

 

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:

 

<HTML>
<HEAD>
<TITLE>Meine erste HMTL-&Uuml;bung</TITLE>
</HEAD>
<BODY>
<A HREF="#fuss">Ein Klick hier bef&ouml;rdert Sie direkt ans Ende der Datei</a>
<H1>Hallo, dies ist die &Uuml;berschrift meiner ersten HTML-Datei</H1>
Eigentlich ist HTML ja <B>gar nicht so schwer</B>. Dies zum Beispiel ist eine Liste:
<UL>
<LI>&Auml;pfel
<LI>Birnen
<LI>Bananen
</UL>
Der Browser setzt automatisch Aufz&auml;hlungszeichen vor die einzelnen Elemente.
<HR WIDTH=70% SIZE=7>
Hier steht ein <A HREF="uebung1.html">Link</A> zu meiner anderen &Uuml;bungsdatei und daneben ein Bild:
<img src="testbild.jpg" align=middle alt="Mein Testbild">.
<HR WIDTH=70% SIZE=7>
<A NAME="fuss">hier ist das Ende des Dokumentes</a>
</BODY>
</HTML>

 

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.

Hinweis 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..

 

×