Elemente von HTML

HTML steht für HyperText Markup Language, d.h. ein Textdokument, das nur druckbare Zeichen enthält und Anweisungen, sogenannte Tags, welche z.B. die Bedeutung oder die Darstellung des Textes bzw. des Bereiches ausdrücken. HTML-Texte werden dabei erst durch einen sogenannten Browser interpretiert und nach dessen Fähigkeiten dargestellt. Insbesondere können solche Darstellungen sich von Browser zu Browser unterscheiden.

Es gibt folgende Arten von Elementen:

  1. Elemente die durch Anfangs- und End-Tags markiert sind und dazwischen Text enthalten, wie z.B. <NAME>.... ein Text .... </NAME>. Dabei ist NAME ein definierter Tag, umschlossen von <..> - Zeichen und </NAME> die zugehörige Endemarkierung.
     
  2. "Leere" Elemente kennzeichnen keinen Text, sondern haben sofortige Wirkung und besitzen daher keine Endemarkierung.
     
  3. Elemente können zusätzlich Attribute enthalten, welche der Anfangsmarkierung beigestellt sind. <NAME ATTRIBUTE="zeichenfolge">

Hinweise:

  1. Tags unterscheiden keine Groß-Kleinschreibung. Allerdings gilt das für Zeichenfolgen in Anführungszeichen!
  2. Elemente dürfen geschachtelt werden, sich aber nicht überlappen!

Einfaches Beispiel:

<HTML>

<HEAD> <TITLE> Das ist der Titel des Dokuments </TITLE> </HEAD>
<BODY>
<H1> Erste Überschrift </H1> <P>Hallo! Dies ist ein nicht gerade wichtiges Dokument. Es enthält vor allem keine herausragende <EM>dichterische</EM> Leistung, sondern soll die <STRONG>Art und <BR>Weise</STRONG> zeigen, wie das Internet und World Wide Web funktioniert.</P> <P>Dieser Text erscheint ziemlich durcheinander enthält aber Beispiele für HTML-Markierungen. Hier ist z.B. eine "unsortierte Liste":</P> <UL> <LI>Ein Punkt der Liste, <LI>Ein zweiter Punkt <LI>Ein dritter Punkt, der über einige Zeilen geht und obwohl am rechten Rand ein Zeilenumbruch erfolgt, vom Browser in Listenart sauber formatiert wird. <LI>Letzter Punkt. </UL> <P>Listen sind wichtig. Es gibt auch geordnete Listen, welche nummeriert sind und beschreibende Listen.</P> <HR> <P>Man kann auch horizontale Linien zeichnen, die nützlich sind, um Bereiche voneinander zu trennen.</P>
</BODY>
</HTML>

Anzeigen


Struktur eines HTML-Dokuments:

Das HTML-Dokument wird in den Tags <HTML> ... </HTML> eingeschlossen, ist also selbst ein Element.

Das HEAD-Element gehört nicht zum eigentlichen Text, der dargestellt wird, sondern enthält Informationen über das Dokument. So kann z.B. ein Titel mit TITLE gewählt werden. Dieser wird abseits angezeigt. Mit dem Netscape-Browser z.B. in der Titelzeile des Fensters.
Der Titel dient auch zum Auffinden von Seiten im WWW und sollte daher kurz und aussagekräftig sein. Der HEAD-Tag muss am Anfang, also direkt nach dem HTML-Tag stehen.

Das BODY-Element umfasst den Bereich, der schließlich im Anzeigebereich des Browsers dargestellt wird.

Mehrfache Leerzeichen, Tabulatoren und Zeilenumbrüche werden als einfacher Wortabstand verarbeitet. Für sofortigen Zeilenwechsel dient der <BR> - Tag.
Zusammengehörige Abschnitte werden durch den Paragraph-Tag <P> ... </P> eingefasst. Hierbei kann der Ende-Tag entfallen, wenn ein neuer Beginn erfolgt.
Zur Strukturierung in Texten dienen verschiedene Elemente, wie Überschriften (H1,..., H6) oder z.B. Listen (UL, OL, DL), die auch geschachtelt werden können. Außerdem können z.B. Bilder eingefügt werden mit IMG, dem Bild-Element, und Verweise auf andere Stellen und Seiten, sogenannte Hypertext-Links bzw. Anker-Elemente (A).


Das folgende Beispiel umfasst diese Elemente:

<HTML>

<HEAD> <TITLE> Beispiel 2a, Darstellung von IMG und Hypertext Links </TITLE> </HEAD>
 
<BODY>
<H1> Beispiel 2a: Einfügen von Bildern und Hypertext Links </H1> <P> Grüße aus der aufregenden Welt der HTML-Beispiel-Dokumente. OK, der Text ist nicht so aufregend. Aber wie wäre es mit einigen Bildern!</P> <P> Es gibt viele Wege, Bilder einzubauen. Zum Beispiel kannst du es auf diese Weise erledigen: <IMG SRC="home.gif" ALIGN="top">, so <IMG SRC="home.gif" ALIGN="middle"> oder auch so <IMG SRC="home.gif" ALIGN="bottom">.</P> <P> Ein weiterer wichtiger Punkt: Du kannst <A href="beispiel2b.html">hypertext links</A> zu anderen Dateien erstellen. <BR> Dieser <A href="beispiel2b.html"> zweite link </A> hat Leerzeichen zwischen den Anfangs- und Ende-Tags, und dem eingeschlossenen Text.<BR> Du kannst auch Bilder in hypertext links einfügen, zum Beispiel: <A href="beispiel2b.html"><IMG SRC="pfeilr.gif" ALIGN="middle"></A>.<BR> Du kannst den Rahmen um das Bild entfernen durch die Einstellung des Attributes BORDER="0" im IMG-Element. Zum Beispiel: <A href="beispiel2b.html"><IMG SRC="pfeilr.gif" BORDER="0" ALIGN="middle"></A>.</P> <P> Schließlich ist hier noch eine Bilderreihe:<BR> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"> <IMG src="home.gif" alt="[Home Icon]"></P>
</BODY>
</HTML>

Anzeigen


Image-Elemente:

<IMG SRC="Bildquelle">

Zur Angabe der Bildquelle dient das SRC-Attribut (source). Übliche Bildformate sind GIF und JPEG. Bilder können zum umgebenden Text ausgerichtet werden mit dem ALIGN-Attribut. Die häufigsten Werte sind "top", "middle" und "bottom".
Das ALT-Attribut sorgt für einen alternativen Text, wenn das Bild nicht angezeigt werden kann. Dieser Text erscheint auch im Netscape-Browser oder Internet Explorer als Hinweis, wenn der Mauszeiger darauf zeigt.
Bei großen Bildern kann das Laden der Bilddaten einige Zeit dauern. Bis der Browser die Seite anzeigen kann benötigt er aber zumindest die Bildgröße. Daher kann diese zusätzlich mit den Attributen WIDTH und HEIGHT angegeben werden. Die Angabe erfolgt dabei in Pixeln.


Anchor-Elemente:

<A HREF="Ziel">Hinweistext</A>

Der Verweis zur nächsten Seite erfolgt mit dem Attribut HREF. Der Text, der Zwischen Anfangs- und Ende-Tag steht wird hervorgehoben und dient als Bereich zum Anklicken mit der Maus. Werden Bilder verwendet, so können "Buttons" gestaltet werden, wie das von anderen Programmen bekannt ist. Hier empfiehlt sich dann die Verwendung von ALT, für Browser, welche keine Grafiken anzeigen.


Hier noch die nachfolgende Seite:

<HTML>

<HEAD>
  <TITLE> Beispiel 2b: Ziel des Beispiels Hypertext Link </TITLE>
</HEAD>


<BODY>

<H2> Ziel des Hypertext-Links </H2>
<P>OK! Nun bist du also hier, 
wie kommst wieder zurück? Dieses Dokument enthält keine Hypertext-Links. 
Du musst also den Zurück-Knopf in der Symbolleiste verwenden, 
um wieder zurückzukommen zum vorher angezeigten Dokument.</P>

</BODY>

</HTML>

Anzeigen


An den Anfang des Kapitels HTML-Kurs Inhalt Fortsetzung Kapitel 2