Einführung in HTML

Einleitung

Diese Einführung in HTML (HyperText Markup Language) und die Erstellung von Web Pages basiert auf SelfHTML, der Hauptinformationsquelle zu HTML in deutscher Sprache. Ziel der heute und in den nächsten Wochen zu bearbeitenden Übungen ist es, die Fertigkeit zu erwerben, durch das Erstellen von HTML-Scripts z. B. eine eigene Homepage erstellen zu können.

Wir beginnen die Einführung mit den grundsätzlichen HTML-Befehlen für die Textstrukturierung. Wenn Sie sich zunächst erst einmal allgemein über das Thema HTML und WWW informieren möchten, so bietet sich dafür die Tour 2 von SelfHTML an. Sie können die Tour aber auch quer lesen oder ganz überspringen.

Das Konzept der Textauszeichnung für die Formatierung ist recht alt, da bereits schon in den Fernschreibern spezielle Zeichen in den Text eingefügt wurden, um z. B. einen Zeilenvorschub und Wagenrücklauf auszulösen.

Diese Zeichen wurden nicht ausgedruckt, sondern als Steuerbefehle von der Maschine interpretiert. Dieses Konzept wurde in späteren Jahrzehnten in der Informatik auf normale Programme übertragen. Diese neuen Satzprogramme nutzten Steuerzeichen nun nicht mehr direkt wie zuvor zur Steuerung eines Gerätes, sondern um den Text für das jeweilige Ausgabegerät, z. B. einen Drucker, zu formatieren. Bekannte Vertreter hierfür benutzter Programme und Satzsprachen sind z. B. TROFF (Typesetter Roff bzw. Runoff), welches ein Standardsatzprogramm des UNIX-Betriebssystems der 80er-Jahre war, oder TeX, welches extensiv im naturwissenschaftlichen Bereich zum Einsatz kommt. Ein Grund für die Popularität von TeX ist die professionelle Darstellung mathematischer Formeln, die die Darstellung von WYSIWYG-(What You See Is What You Get-)Textprozessoren, wie z. B. Word, mühelos schlägt. Primäre Ursache ist die Echtzeitformatierung, die in WYSIWYG-Textprozessoren für die naturgetreue Darstellung durchgeführt werden muss. TeX-Texte werden hingegen in mehreren Schritten verarbeitet, in denen der Text wiederholt durchlaufen wird, um eine optimale Anordnung der Textzeichen auf der Seite zu erzielen.

Als Tim Berners-Lee Ende der 1980er-Jahre am Genfer Hochenergieforschungszentrum CERN Hypertext als Grundlage für den Informationsaustausch zwischen Wissenschaftlern entwickelte, tat er dies schon auf dem existierenden Fundament der Textauszeichungssprachen für die Textformatierung. Neu an seinem Konzept war jedoch der Einsatz dieser Technologie für die Vernetzung und Verteilung von Dokumenten. Dabei spielte die Textformatierung weiterhin eine große Rolle, was sich in der Textauszeichnungssprache HTML widerspiegelt, in die eine Vielzahl von Befehlen aufgenommen wurde, die der Textformatierung dienen. Insofern stellt HTML in seiner ursprünglichen Form lediglich eine Weiterentwicklung vorhandener Textauszeichnungssprachen dar.

Neu an HTML war hingegen die Möglichkeit, Dokumente zu vernetzen und zu verteilen. Dabei kamen drei neue Technologien zum Einsatz:

HTML bietet die Möglichkeit, Verweise auf andere Dokumente, die sogenannten Hyperlinks oder kurz: Links, in den Text einzufügen. Durch einfaches Klicken mit der Maus auf einen Link kann das zugehörende Dokument aus dem Internet nachgeladen werden, wobei der URI ausgewertet und das HTTP-Protokoll für die Übertragung der Daten benutzt wird.

In Textauszeichnungssprachen wird der Text zumeist für ein bestimmtes Ausgabegerät aufbereitet. Stellt man den Text auf einem anderen Ausgabegerät dar, so besteht die Gefahr, dass er anders aussieht oder gar nicht mehr lesbar ist. Diese Problematik war bei der Konzeption von HTML schon bekannt. Darum entschied man sich, die Formatierungsbefehle so zu gestalten, dass Sie flexibel vom jeweiligen Ausgabegerät, dem Browser interpretiert werden können. So ist z. B. der Textumbruch klassischerweise eine Aufgabe des Browsers.

Als sich in der Folge das WWW immer mehr als Kommunikationsmedium durchsetzte, hatte dies zur Folge, dass mit HTML immer ansprechender gestaltete Seiten umgesetzt werden mussten. Hierfür war aber z. B. eine genaue Platzierung der Inhalte auf der Seite erforderlich. Da HTML dies ursprünglich nicht vorsah, wurden Textauszeichnungsbefehle zunehmend zweckentfremdet. Das bekannteste Beispiel in diesem Zusammenhang sind die Befehle für die Erstellung von Tabellen. Was dafür gedacht war, Tabellen für wissenschaftliche Daten zu setzen, wurde immer mehr zum Hauptgestaltungswerkzeug für den Seitenaufbau.

Parallel zur Entwicklung des WWW fand ebenfalls eine erhebliche Diversifizierung der Ausgabegeräte statt. Zum Computer, dem ursprünglichen Ausgabegerät für Webseiten, traten nun z. B. der PDA und später das Mobiltelefon, die jeweils über weitaus kleinere Bildschirme verfügten, sodass klassische Webseiten auf ihnen nicht darstellbar waren. Darüber hinaus traten politische Aspekte, wie z. B. die Berücksichtigung Behinderter, bei der Verteilung der Informationen zunehmend in den Vordergrund. Ausgabegeräte für Blinde, wie z. B. die Braille-Zeile oder Vorleseprogramme, können aber nicht mit Webseiten umgehen, auf denen der Text, um eine bestimmte Gestaltung zu erzielen, mit Hilfe von Tabellen in einzelne, unzusammenhängende Bereiche aufgeteilt ist.

Hieraus resultierte das Erfordernis für jedes zu unterstützende Ausgabegerät eine eigene Version einer Webseite zu erstellen. Hinzu kam ein weiteres Problem: die Inkompatibilität der Webbrowser. Diese bedingte eine zusätzliche Anpassung der Webseiten an die zu unterstützenden Browser.

Heute stellen Webseiten zunehmend Webapplikationen dar, die Interaktivität und dynamische Inhalte bieten, wozu z. B. das Einfügen aktueller Inhalte gehört. Deshalb kann sich der textuelle Inhalt einer Seite laufend ändern. Die Gestaltung der Seite sollte also unabhängig hiervon sein.

Ebenfalls werden Webseiten zunehmend asynchron von Redakteuren, Gestaltern und Programmierern erstellt. Hierbei ist es erforderlich, paralleles Arbeiten an den Seiten zu ermöglichen, was sich am einfachsten durchführen lässt, wenn Inhalt und Gestaltung voneinander getrennt sind.

Daraus ergibt sich, dass die Bedeutung von HTML im Bereich Textformatierung und Seitengestaltung abnimmt. Für die Gestaltung wurde eine eigene Sprache entwickelt, die sogenannten Cascading Style Sheets, kurz: CSS. Die zentrale Aufgabe von HTML ist nun darin zu sehen, die textuellen Inhalte zu strukturieren und die unterschiedlichen Komponenten, die am Aufbau einer Webseite beteiligt sind, darunter z. B. auch die Gestaltung, zusammenzuführen.

HTML-Dateien schreiben

Das Hauptmerkmal einer Auszeichnungssprache ist das Zuordnen von Textpassagen zu bestimmten Gruppen bzw. Klassen. Dies geschieht durch Einklammern der Textpassagen mit bestimmten Symbolen. Für jede Klasse wird dabei ein eigenes Symbol vereinbart. Als Symbole benutzt man oftmals keine einzelnen Zeichen, sondern Zeichenketten, die umgangssprachlich eine Bedeutung besitzen können, wie z. B. table, für eine Tabelle. Auf diese Weise lassen sich beliebig viele Symbole definieren.

Damit das interpretierende Programm Symbole von gewöhnlichem Text unterscheiden kann, ist es erforderlich, die Symbole im Text zu markieren. Dies geschieht mit Hilfe von Steuerzeichen, die dem interpretierenden Programm signalisieren, dass das folgende Wort der Auszeichnung einer Textpassage dient und nicht Bestandteil des Textes selber ist. In HTML werden hierfür das < und > Symbol benutzt. So wird aus table: <table>.

Um das Ende eines Auszeichnungsbereiches zu markieren ist ebenfalls ein Symbol erforderlich. Nur dann ist für das interpretierende Programm das Ende der Textpassage erkennbar. Hierfür könnte im Prinzip wieder das gleiche Symbol genommen werden, z. B. <table>. Dies hätte allerdings den Nachteil, dass Auszeichnungsbereiche nicht geschachtelt werden könnten. Im folgenden Beispiel wäre z. B. nicht klar, ob die zur Textpassage 2 gehörenden Symbole eine Tabelle in einer anderen Tabelle definieren oder ob die Symbole für die Textpassagen 1 und 3 zwei unabhängige Tabellen definieren, die durch Textpassage 2 getrennt sind:

<table>textpassage1<table>textpassage2<table>textpassage3<table>.

Darum wird hier ein weiteres Steuerzeichen verwendet, der Schrägstrich, der abschließende Symbole markiert, z. B. </table>.

Damit lässt sich die obige Doppeldeutigkeit auflösen. Um im Bereich einer Tabelle eine weitere zu definieren würde notiert:

<table>textpassage1<table>textpassage2</table>textpassage3</table>.

Um zwei unabhängige Tabellen zu definieren würde hingegen folgendes notiert:

<table>textpassage1</table>textpassage2<table>textpassage3</table>.

Grundsätzlicher Seitenaufbau

Damit eine Webseite als solche erkannt und korrekt ausgeliefert und interpretiert wird, muss die zugehörende Datei einige Voraussetzungen hinsichtlich ihres Aufbaus erfüllen.

Hierzu gehört die Endung des Dateinamens. Hier ist entweder .html oder .htm zu verwenden.

Eine Datei mit dieser Endung wird vom Webserver als HTML-Datei erkannt und mit Hilfe des zugehörenden Protokolls an den Webbrowser, das interpretierende Programm, ausgeliefert.

Der Webbrowser muss nun seinerseits erfahren, dass die Daten, die er soeben über das Internet erhalten hat, Text in der Auszeichnungssprache HTML repräsentieren. Dies wird dadurch gewährleistet, dass der Dateiinhalt mit dem Symbol <html> beginnt und dem Symbol </html> endet. Im Rahmen von Auszeichnungssprachen werden Symbole auf englisch als Tags bezeichnet. Das Symbol, welches die Auszeichnung einleitet, ist ein einleitendes Tag. Das Symbol, welches die Auszeichnung abschließt, ein abschließendes Tag. Beide Symbole zusammen repräsentieren ein Element der Auszeichnungssprache.

Der Minimalaufbau einer HTML-Seite sieht also so aus: 

<html>
</html>

Nach dem einleitenden <html>-Tag kommt in der Regel eine Passage, die Zusatzinformationen zum Dateiinhalt enthält. Diese wird durch die Tags <head>...</head> eingeschlossen. Hier lässt sich z. B. ein Eintrag für die Titelleiste des Browserfensters notieren, was durch das Element <title>...</title> geschieht.

Damit ergibt sich für eine HTML-Seite, die nur eine Browserfensterüberschrift enthält: 

<html>
<head>
<title>
Überschrift
</title>
</head>
</html>

Die Tags brauchen dabei nicht in eigenen Zeilen zu stehen. Die Seite könnte also z. B. auch dies enthalten: 

<html>
<head>
<title>Überschrift</title>
</head>
</html>

Oder sogar dies: 

<html><head><title>Überschrift</title></head></html>

Was in diesem Zusammenhang auffällt, ist die hierarchische Strukturierung der Datei, ein Kennzeichen aller modernen Auszeichnungssprachen. Das HTML-Element enthält ein HEAD-Element und dieses wiederum ein TITLE-Element.

Um dieses zu verdeutlichen und die Lesbarkeit zu erhöhen, sollten HTML-Dateien mit einer Einrückstruktur notiert werden. Diese entspricht jener, die auch bei Programmiersprachen verwendet wird. Üblich ist eine Tabulatorposition für jedes eingeschachtelte Element, bzw. 2 oder 4 Leerzeichen. Damit ergibt sich für die Beispieldatei z. B. diese Darstellung: 

<html>
  <head>
    <title>Überschrift</title>
  </head>
</html>

Aufgabe: Erstellen Sie in einem einfachen Texteditor, z. B. SciTE oder jEdit, die Sie jeweils unter Start > Alle Programme > Digital Media Tools finden, eine einfache HTML-Datei, die die Fensterüberschrift "Übungsblatt 1" trägt. Nehmen Sie hierfür keine Textverarbeitungswerkzeuge, wie Word oder WordPad. Diese streuen in den Text unsichtbaren Formatierungscode ein, der die Darstellung des HTML-Codes im Browser scheitern lässt.

Kommen wir nun zum eigentlichen Text. Dieser wird in HTML durch das Element <body>...</body> eingeklammert.

Damit ergibt sich für unsere Beispieldatei z. B. dies: 

<html>
  <head>
    <title>Überschrift</title>
  </head>

  <body>
    Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen
    Umbruch einzufügen, um einen Zeilenwechsel herbeizuführen.
    WWW-Browser ignorieren solche Umbrüche. Dies ist sinnvoll,
    weil sich der Text dann immer automatisch an die Fensterbreite
    anpassen kann. Ändern Sie die Größe Ihres Browserfensters.
    Wie Sie sehen, läuft der Text immer über die gesamte
    Fensterbreite.
  </body>
</html>

Wenn Sie sich den Code oben genau anschauen, sehen Sie, dass sich das BODY-Element in derselben Hierarchieebene befindet, wie das HEAD-Element des HTML-Dokuments. Darum werden beide mit der gleichen Einrücktiefe notiert. Der Text im BODY-Element fällt ein wenig aus dem bisherigen Schema, weil dieser noch keinem strukturierenden HTML-Element zugeordnet ist. Dies äußert sich z. B. darin, dass der Text als zusammenhängender Block ohne Absatzstruktur dargestellt wird. Selbst wenn wir den Text um weitere Absätze ergänzen würden, würde er immer als einzelner Block angezeigt, ungeachtet etwaiger im Editor eingefügter Zeilenumbrüche.

Aufgabe: Kopieren Sie den Beispielcode oben in Ihren Texteditor und speichern Sie ihn ab. Zeigen Sie die Datei danach im Webbrowser an. Sie sehen nur den Text ohne die HTML-Elemente. Fügen Sie in den Text Leerzeilen ein. Der Text erscheint trotzdem immer als ein langer Block.

Um Text strukturieren zu können, sind eigene HTML-Elemente erforderlich. Diese werden wir uns als nächstes anschauen.

Elemente zur Textstrukturierung

Text steht nie einfach direkt in einer HTML-Datei, sondern gehört zumindest zu einem Absatz. Dieser wird durch <p>...</p> ausgezeichnet. Dabei steht das p für die englische Bezeichnung eines Absatzes: Paragraph.

Mit Hilfe dieses Elements können wir nun das Beispiel oben in einzelne Absätze unterteilen, die vom Browser angezeigt werden. 

<html>
  <head>
    <title>Überschrift</title>
  </head>

  <body>
    <p>
      Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen
      harten Umbruch einzufügen, um einen Zeilenwechsel
      herbeizuführen. WWW-Browser ignorieren solche Umbrüche.
    </p>

    <p>
      Dies ist sinnvoll, weil sich der Text dann immer
      automatisch an die Fensterbreite anpassen kann. 
    </p>

    <p>
     Ändern Sie die Größe Ihres Browserfensters. Wie Sie sehen,
     läuft der Text immer über die gesamte Fensterbreite.
    </p>
  </body>
</html>

Aufgabe: Gliedern Sie den Text in Ihrer Beispieldatei mit Hilfe des Absatzelementes. Obwohl der Browser nach wie vor die Laufweite des Textes an die Fenstergröße anpasst, respektiert er nun die von Ihnen vorgegebene Absatzstruktur.

Neben der Möglichkeit, Absätze vorzugeben, ist es ebenfalls möglich, Zeilenumbrüche zu erzwingen. Auf diese Weise kann z. B. verhindert werden, dass ein Text im Browserfenster über die gesamte Fensterbreite läuft. Das Zeilenumbruchelement sollte allerdings mit Bedacht eingesetzt werden, da hiermit möglicherweise Gestaltungsvorgaben unterlaufen werden, die mit Hilfe der Cascading Style Sheets getroffen wurden.

Um einen Zeilenumbruch zu erzwingen tippen Sie <br> (br = break = Umbruch) oder in der neueren, an XML (einer frei definierbaren Auszeichnungssprache) orientierten Form: <br />. Da das Break-Element keinen Text auszeichnet, besteht es nur aus einem Tag. Derartige Elemente werden als leere Elemente bezeichnet. Das einzeln stehende Tag als standalone tag. 

<html>
  <head>
    <title>Überschrift</title>
  </head>

  <body>
    <p>
      Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen<br />
      harten Umbruch einzufügen, um einen Zeilenwechsel<br />
      herbeizuführen. WWW-Browser ignorieren solche Umbrüche.
    </p>

    <p>
      Dies ist sinnvoll, weil sich der Text dann immer<br />
      automatisch an die Fensterbreite anpassen kann.
    </p>

    <p>
     Ändern Sie die Größe Ihres Browserfensters. Wie Sie sehen,
     läuft der Text immer über die gesamte Fensterbreite.
    </p>
  </body>
</html>

Aufgabe: Passen Sie den Beispielcode in Ihrer Übungsdatei an das obige Beispiel an und schauen Sie sich an, wie unterschiedlich die mit <br /> versehenen Zeilen nun umbrochen werden. Der automatische Umbruch findet erst statt, wenn die Fensterbreite geringer ist, als die durch <br /> vorgegebene Zeilenlänge.

Zu Texten gehören in der Regel Überschriften, die unterschiedliche Kapitel oder Abschnitte einleiten. Diese können verschiedenen Hierarchiestufen zugeordnet werden. Ein Abschnitt besitzt normalerweise eine geringere Hierarchiestufe, als ein Kapitel. Die Hierarchiestufe spiegelt sich zumeist in der Formatierung der Überschrift wider. So besitzen Überschriften, die einer höheren Hierarchiestufe angehören, häufig eine größere Schrift.

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden. Notiert werden diese mit einem h, für englisch header, plus der Nummer der gewünschten Hierarchieebene. Dabei gilt: Je kleiner die Nummer, desto höher die Hierarchieebene. Eine Überschrift in der höchsten Hierarchieebene 1 wird also durch das Element <h1>...</h1> ausgezeichnet.

Wir können unseren Beispielcode nun um Überschriften erweitern: 

<html>
  <head>
    <title>Textauszeichnung mit HTML</title>
  </head>


  <body>
    <h1>Allgemeines</h1>
    <p>
      Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen
      harten Umbruch einzufügen, um einen Zeilen- oder Absatzwechsel
      herbeizuführen. WWW-Browser ignorieren solche Umbrüche.
    </p>

    <h2>Zeilenumbrüche einfügen</h2>
    <p>
      Umbrüche können durch Einfügen des Break-Elements in den Text erzwungen werden.
    </p>

    <h2>Absätze einfügen</h2>
    <p>
      Absätze lassen sich durch das Paragraph-Element in den Text einfügen.
    </p>

  </body>
</html>

Aufgabe: Ergänzen Sie Ihre Beispieldatei um die oben angegebenen Überschriften.

Um das Verhalten von Elementen zu steuern, ist es in HTML möglich, diese mit Attributen zu versehen. Attribute werden als Zusatzoptionen im einleitenden Tag notiert.

Bei Überschriften ist es z. B. möglich, mittels Attributen zu steuern, wie diese auszurichten sind. Hierfür dient das Attribut align. Wenn wir align="center" notieren, so bedeutet dies, dass die Überschrift zentriert gesetzt werden soll. Damit können wir z. B. die erste Überschrift unseres Beispielcodes zentriert schreiben: 

    <h1 align="center">Allgemeines</h1>

Aufgaben:

Oftmals möchte man im Text Dinge aufzählen, z. B. Themen, die im weiteren Verlauf behandelt werden oder Aufgaben, die zu bearbeiten sind. Dies könnte natürlich in Form einzelner Absätze geschehen. Es ist aber übersichtlicher, wenn die einzelnen Listeneinträge eine Markierung tragen, wie z. B. einen Punkt oder die Eintragsnummer. Hierfür sieht HTML unterschiedliche Varianten von Listen vor. Als einfachste Form die Aufzählungsliste.

Die Aufzählungsliste ist zugleich das erste HTML-Element, welches wir kennenlernen, das aus unterschiedlichen Elementen besteht. Die Liste umfasst zum einen ein Element <ul>... </ul>, welches die Liste selbst repräsentiert und als Klammer für die Listeneinträge dient. Zusätzlich wird jeder einzelne Listeneintrag durch ein eigenes Element <li>...</li> ausgezeichnet.

Damit ergibt sich insgesamt für den Aufbau einer Aufzählungsliste: 

<ul>
  <li>...</li>
  .
  .
  .
  <li>...</li>
</ul>

Als konkretes Beispieldokument: 

<html>
  <head>
    <title>Textauszeichnung mit HTML</title>
  </head>


  <body>
    <h1>Allgemeines</h1>
    <p>
      Bisher haben wir die folgenden Elemente für die Textauszeichnung
      behandelt:
    </p>

    <ul>
      <li>Das Break-Element</li>
      <li>Das Paragraph-Element</li>
      <li>Die Header-Elemente</li>
      <li>Die Aufzählungsliste</li>
    </ul>

  </body>
</html>

Neben der Aufzählungsliste existieren z. B. noch die nummerierte Liste und die Definitionsliste.

Aufgaben:

Mit den Listen haben Sie zunächst den prinzipiellen Aufbau einer HTML-Datei, die wichtigsten Elemente für die Textstrukturierung sowie die Parameterisierung von HTML-Elementen mittels Attributen kennengelernt. Weitere nützliche Elemente zur Textstrukturierung, wie z. B. die logische Auszeichnung von Wörtern oder das Einfügen von Trennlinien, für die optische Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten, finden Sie im Abschnitt "Elemente zur Textstrukturierung" der HTML-Dokumentation SelfHTML.

Neben der Möglichkeit Text auszuzeichnen, existiert in HTML auch ein Weg, die Anzeige von Text im Browser zu steuern. Auf diese Weise ist es möglich, Kommentare in den Text einzufügen, die nicht im Browser angezeigt werden, oder Textinhalte zu deaktivieren. Hierfür wird der jeweilige Text in das HTML-Element <!--...--> eingefügt.

Aufgabe:

Verweise

Verweise repräsentieren eine Grundidee des WWW. Mit Hilfe der Verweise werden lose im Internet verteilte Texte zu Hypertext verbunden. So entsteht aus losen Textsammlungen ein Webprojekt.

Verweise bzw. englisch Links können beliebige Inhalte referenzieren. Die Art der Interpretation und Darstellung der durch den Verweis geladenen Datei geschieht durch den Webbrowser, in der Regel auf der Grundlage der Dateiendung.

So wird eine Datei mit der Endung .html als Text dargestellt. Dateien mit der Endung .gif oder .jpg werden dagegen als Bilddaten dargestellt.

Die Syntax der Verweise ist einheitlich und vom Typ der referenzierten Datei und vom Zweck des Verweises unabhängig. Ein Verweis sieht in der Standarddsyntax immer gleich aus, egal ob mit ihm ein HTML-Dokument oder ein Video referenziert wird, ob es ein Verweis auf Zusatzinformation ist, oder ein Verweis, der innerhalb der Webanwendung eine Rücksprungfunktion besitzt.

Repräsentiert werden Verweise durch das Element <a>...</a>, wobei das a für Anchor steht.

Damit ergibt sich z. B. für einen textuellen Verweis Mein Verweis:

<a>Mein Verweis</a>

Der zwischen <a> und </a> notierte Text entspricht dabei dem mit der Maus anklickbaren Teil des Verweises.

Damit über diesen Verweis eine Datei aus dem Internet geladen werden kann, wird noch eine Möglichkeit benötigt, dem Verweis ein Ziel anzugeben. Dies erfolgt mit Hilfe eines Universal Resource Identifiers (URI).

Ein URI besteht aus einer Angabe über das zu verwendende Internetprotokoll, z. B. FTP (File Transfer Protocol) für den Datentransfer oder HTTP für den Hypertext-Transport (Hypertext Transfer Protocol) und aus der Adresse der zu ladenden Datei.

Diese Adressen beginnen zum Beispiel mit dem Namen des Webservers, der die Datei ausliefern soll, beispielsweise www.meinServer.de, und haben den Namen der zu ladenden Datei plus eine eventuelle Pfadangabe angehängt, z. B. www.meinServer.de/startseite.html.

Unterschieden werden muss zwischen absoluten und relativen Adressen.

Absolute Adressen referenzieren ein Dokument, welches im Datenbereich irgendeines Servers im Internet liegt. Das Beispiel oben entspricht so einer Adresse. Kennzeichnend ist hier der Name des Webservers, der dem Dateinamen vorangestellt ist. Hier: www.meinServer.de.

Der Webserver ist ein normales Programm, welches auf einem Rechner irgendwo im Internet läuft. Dieses Programm verwaltet seine Internetseiten in einem lokalen Verzeichnisbaum, dessen Startverzeichnis der Position unterhalb des Schrägstriches in www.meinServer.de/startseite.html entspricht. Das Dokument startseite.html im obigen Beispiel liegt also im Startverzeichnis des Webservers.

Angenommen, das Startverzeichnis auf dem Serverrechner ist C:\htdocs, wobei htdocs ein gebräuchlicher Name für Serverstartverzeichnisse ist. Dann würde sich das Dokument startseite.html in diesem Verzeichnis befinden, wäre also physikalisch in C:\htdocs\startseite.html. Zumindest bei einem Server, der unter dem Betriebssystem Windows läuft. Bei einem Server unter einem UNIX-Derivat, wie z. B. Linux, wäre das Dokument physikalisch z. B. unter /usr/local/htdocs/startseite.html abgelegt. Bei Windows-Systemen wird das Verzeichnis mit einem umgekehrten Schrägstrich bzw. Rückstrich \ referenziert, bei Unix-Systemen mit dem normalen Schrägstrich /. Bei der Adressierung von Webseiten orientiert man sich an der unter UNIX üblichen Notation.

Ein weiteres Beispiel: Das Serverdokument C:\htdocs\webauftritt\index.html würde mit der WWW-Adresse www.meinServer.de/webauftritt/index.html geladen. D. h. das Startverzeichnis des Servers kann durchaus Unterverzeichnisse enthalten, um die Daten zu organisieren. Die Unterverzeichnisnamen werden einfach an den Servernamen angehängt.

Es könnte sogar sein, dass im obigen Beispiel zum Laden des Dokuments die Angabe www.meinServer.de/webauftritt reicht. Viele Server sind so konfiguriert, dass sie als Dateinamen der Startseite per Voreinstellung index.html oder default.html annehmen und nach einer derartigen Datei suchen, wenn nur der Verzeichnisname des Webauftrittes angegeben wurde.

In der Regel besteht ein Webauftritt bzw. -projekt aus mehr als einer HTML-Seite. Wie erfolgen Kreuzreferenzierungen in diesen Seiten? Wie referenziert z. B. die Seite C:\htdocs\webauftritt\index.html die Seite C:\htdocs\webauftritt\seiten\seite1.html?

Eine Möglichkeit besteht darin, den absoluten Verweis www.meinServer.de/webauftritt/seiten/seite1.html in index.html einzufügen. Sinnvoller ist es indes, an dieser Stelle eine relative Adresse zu verwenden, die ohne den Servernamen auskommt. Hauptvorteil dieses Ansatzes - neben geringerer Schreibarbeit - ist, dass der gesamte Webauftritt im Bedarsfall problemlos von einem Verzeichnis in ein anderes umziehen kann, ohne dass in den Seiten das neue Startverzeichnis oder gar ein neuer Servername eingetragen werden muss.

Relative Adressen referenzieren ein Dokument, welches sich in einem Pfad relativ zum schon geladenen Dokument befindet. So kann z. B. in der Datei index.html der Verweis auf das Dokument seite1.html auch durch die relative Adresse seiten/seite1.html erfolgen. Alternativ kann man auch ./seiten/seite1.html schreiben. Der Punkt bedeutet soviel wie das gegenwärtige Verzeichnis.

Achtung: /seiten/seite1.html besitzt eine andere Bedeutung als ./seiten/seite1.html! Ohne Punkt verweist der einleitende Schrägstrich auf das Wurzelverzeichnis des Webservers!

Es bleibt noch zu klären, wie die Adressen in den Verweis eingetragen werden. Dies erfolgt mit Hilfe des href-Attributes. href bedeutet soviel wie hyper(text) reference bzw. auf Deutsch Hyper(text)-Referenz.

Für die absolute Adresse oben ergibt sich dann z. B.:

<a href="http://www.meinServer.de/webauftritt/index.html">Einstiegspunkt des Webauftrittes von XY</a>

Für einen relativen Verweis in index.html auf das Dokument seite1.html im Unterverzeichnis seiten des Verzeichnisses webauftritt:

<a href="seiten/seite1.html">Seite 1</a>

Wie Sie sehen, ist bei der relativen Adressierung keine Protokollangabe erforderlich, da hier der Webserver das Standardprotokoll http voraussetzt.

Ein Dokument impressum.html, welches sich im gleichen Verzeichnis wie index.html befindet, würde in index.html so eingetragen:

<a href="impressum.html">Impressum</a>

Befindet sich das Dokument im übergeordneten Verzeichnis, so kann es ebenfalls relativ adressiert werden. Hierfür werden zwei Punkte als Pfadangabe benutzt. In seite1.html würde ein Rücksprungverweis auf index.html so notiert:

<a href="../index.html">Start</a>

Die zwei Punkte bedeuten: im übergeordneten Verzeichnis. Man kann die zwei Punkte auch wiederholt verwenden, um sich im Verzeichnisbaum schrittweise nach oben zu bewegen. Im Dokument C:\htdocs\webauftritt\seiten\seite1.html würde der Rücksprung zur Startseite des Webservers durch den Verweis <a href="../../startseite.html">Startseite</a> eingetragen, da hier zusätzlich das Verzeichnis webauftritt zu überspringen wäre.

Im konkreten Fall könnte man an Stelle von
<a href="../../startseite.html">Startseite</a>
natürlich auch
<a href="/startseite.html">Startseite</a> schreiben. Warum?

Auch bei Unterverzeichnissen ist eine beliebig tiefe Schachtelung möglich. Das Dokument seite1.html würde in startseite.html durch
<a href="webauftritt/seiten/seite1.html">Webauftritt von XY: Seite 1</a> aufgerufen.

Eine Kombination des doppelten Punktes mit Unterverzeichnissen ist ebenfalls möglich:

<a href="../../reisen/berichte/ReiseBericht.html">Reisebericht</a>

Hier referenziert das Dokument seite1.html einen Reisebericht in einem Unterverzeichnis des Startverzeichnisses.

Aufgaben:

Wie oben schon erwähnt, erfolgt die Gestaltung von Verweisen einer Standardvorgabe und besteht damit zunächst lediglich aus unterstrichenem Text. Verweise sehen also in der Voreinstellung immer gleich aus, egal ob es sich um einen Rücksprung handelt oder um einen Verweis, der z. B. auf ein Video zeigt. Die funktionsspezifische Gestaltung der Verweise ist somit Aufgabe des Webdesigners und vom Gesamtdesign eines Webauftrittes abhängig.

In HTML wird dies dadurch unterstützt, dass Verweise z. B. auch durch Bilder dargestellt werden können und sich somit den Ikonen bzw. Icons normaler Desktopapplikationen annähern. Hierzu mehr im Abschnitt Grafiken.

Ob durch Text oder durch eine Ikone repräsentiert: Für Verweise gilt immer, dass sie selbsterklärend sein sollten. Es sollte also ohne Klick auf den Verweis möglich sein, das Ziel des Verweises zu kennen.

Der Sinn des Hypertextes besteht darin, durch Verknüpfung unterschiedlicher Dokumente die Information zu einem bestimmten Thema auf einfache Weise verfügbar zu machen.

Hierzu gehört zum einen, eine ausreichende Anzahl von Verweisen bereitzustellen, zum anderen, den Lesetext oder die Oberfläche der Webapplikation nicht mit Verweisen zu überfrachten. Gibt es zu wenige Verweise, bietet die Applikation bzw. der Text zu wenig Zusatzinformation oder konzentriert diese zu sehr auf ein Dokument, wodurch der Blick auf das Wesentliche eingeschränkt wird. Gibt es auf der anderen Seite zu viele Verweise, so wird der Text oder die Applikation verwirrend und verstellt ebenfalls den Blick auf das Wesentliche.

Der Entwurf eines benutzerfreundlichen Bedienkonzeptes ist daher eine der Herausforderungen des Webdesigns und damit auch Thema in diversen Lehrveranstaltungen dieses Studiengangs.

Alle Verweise, auf die ein Besucher klickt, werden im aktuellen Fenster geöffnet. Dies ist nicht immer sinnvoll, da man häufig dem/der Besucher(in) die Möglichkeit bieten möchte, dass die bestehenden Inhalte im Fenster erhalten bleiben, ohne dass nach dem Lesen der zusätzlich angebotenen Informationen wieder ein Rücksprung in die ursprünglich angezeigte Seite erfolgen muss.

Aus diesem Grund stellt das Verweiselement ein zusätzliches Attribut target zur Verfügung, mit dem das Ziel der zu öffnenden Datei angegeben werden kann.

Die Angabe von _blank als Wert dieses Attributes, führt dann dazu, dass die Inhalte in einem neuen Fenster geöffnet werden. Es gibt weitere Attributwerte, die hier nicht weiter behandelt werden sollen.

Aufgabe: Ändern Sie Ihren absoluten Verweis in der Datei d1 so ab, dass das Übungsblatt in einem neuen Browserfenster angezeigt wird.

Verweise können ihr Ziel auch innerhalb derselben HTML-Datei besitzen, um Sprünge in der Datei zu erlauben. In diesem Fall spricht man von Ankern.

Für ein Dateiziel sind zwei oder mehr Verweise erforderlich, wobei einer von diesen den Anker bzw. das Sprungziel definiert. Dies geschieht mit Hilfe des name-Attributs des Verweises, z. B. so

<a name="dateianfang">...</a>

Wie Sie sehen, besitzt der Anker kein href-Attribut, da er lediglich das Sprungziel ist. Der Name des Ankers kann frei vergeben werden.

Der Text, der zwischen dem einleitenden und abschließenden Tag des Ankers steht, stellt die Beschreibung des Zieles dar. Hierfür wird häufig eine Kapitelüberschrift gewählt, z. B. so:

<h1><a name="dateianfang">Text der Überschrift</a></h1>

Um den Anker anzuspringen, ist mindestens ein weiterer Verweis erforderlich, der diesen Anker als Sprungziel in seinem href-Attribut führt. In diesem wird der Anker mit Doppelkreuz notiert:

<a href="#dateianfang">Dateianfang</a>

Auch der Sprung zu Ankern in anderen HTML-Dateien ist möglich. In diesem Fall ist zusätzlich der URI des Dokuments vor dem Doppelkreuz zu notieren. Der Browser lädt dann zuerst die externe Datei und springt dann in dieser Datei an die Position des Ankers.

Aufgabe: Fügen Sie Ihrer Datei d3 eine Überschrift mit Anker und Blindtext mit einem Verweis auf diesen Anker hinzu.

Mittels Verweisen ist es möglich, beliebige Inhalte mit einer HTML-Datei zu verlinken. Voraussetzung hierfür ist, dass der Webbrowser die Daten entweder selbst anzeigen oder ein passendes externes Programm für die Weiterverarbeitung der Daten aufrufen kann. Dateien mit der Endung .gif für das Graphics Interchange Format kann der Browser normalerweise selbst anzeigen, wohingegen eine .mov-Datei, die auf einen Quicktime-Film verweist, vom Browser an den Quicktime-Player weitergereicht wird. Für die Zuordnung der Daten zu Anwendungen bzw. Aktionen existieren die MIME-Typen, die u. a. in einer Browsertabelle hinterlegt sind und auch von Webservern mitgeschickt werden. MIME steht für Multipurpose Internet Mail Extension und wurde ursprünglich entwickelt, um für Email-Attachments eine Verbindung zu geeigneten Anzeigeprogrammen herzustellen. Da sich diese Technologie als allgemein verwendbar herausstellte, wurde sie für die Webbrowser einfach weiterverwendet. Eine Vielzahl von MIME-Typen ist in SelfHTML dokumentiert. Die offizielle Liste der MIME-Typen wird von der IANA verwaltet. Als zusätzliche Hilfestellung kann der MIME-Typ auch als Attribut im Ankerelement notiert werden. Für eine MS Excel-Tabelle mit Noteneinträgen beispielsweise so: <a href="noten.xls" type="application/vnd.ms-excel">Noten</a>. Diese Angaben werden allerdings üblicherweise von den Browsern ignoriert. Bei diesem Beispiel müsste zunächst Microsoft-Excel gestartet und dem Programm dann das Dokument zur Anzeige übergeben werden.

Neben dem Laden beliebiger Inhalte, ist es mit Verweisen ebenfalls möglich, Emails zu verschicken, sofern der Browser den Aufruf eines externen Email-Programms unterstützt.

Hierzu dient der Email-Verweis, der sich von einem normalen Verweis darin unterscheidet, dass als Wert des href-Attributes eine Email-Adresse zusammen mit dem Schlüsselwort mailto verwendet wird.

Ein Webmaster mit Namen "Klaus Müller" könnte sich z. B. mit dem folgenden Eintrag Emails über eine HTML-Seite schicken lassen:

<a href="mailto:klaus@muellerspace.de">Email für mich</a>.

Für den Email-Verweis existieren noch eine Reihe von Optionen, auf die hier nicht näher eingegangen werden soll.

Ein großer Nachteil der Email-Verweise besteht darin, dass in ihnen die Empfängeradresse im Klartext steht und damit für Programme, die Webseiten automatisch suchen und auswerten, wie z. B. die sogenannten Webrobots, lesbar ist. Ein derartiger Email-Verweis öffnet daher Spammern Tür und Tor und sollte besser vermieden werden.

Eine einfache Alternative zur lesbaren Email-Adresse besteht darin, diese in Form einer kleinen GIF-Datei anzubieten. Diese Lösung ist nicht so komfortabel wie der Email-Verweis, da die Adresse vom Besucher abgetippt werden muss, aber deutlich schwerer automatisch auszuwerten. Weitere Alternativen sind das dynamische Generieren der Email-Adresse mittels JavaScript oder die Verwendung einer dynamischen Webseite mit Formular für die Nachrichteneingabe.

Grafiken

Ein zentrales Element von Webseiten ist die Anreicherung des Textes durch Grafiken. Hierfür bietet HTML das Image-Element <img>:

<img src="..." alt="Alternativtext">.

Die anzuzeigende Grafik wird dabei über das Attribut src eingebunden. Mit Hilfe des Attributes alt sollte ein Alternativtext für Browser angegeben werden, die keine Grafiken anzeigen können, wie z. B. Lesegeräte für Blinde. Vor dem Hintergrund der Barrierefreiheit besitzt das alt-Attribut also eine wichtige Funktion.

Um einen Verweis grafisch darzustellen, muss in das Verweiselement an Stelle des Textes ein <img>-Bildelement eingetragen werden. Auf diese Weise kann z. B. auf die Startseite eines Webauftrittes wie folgt verwiesen werden: 

<a href="/webauftritt/index.html">
  <img src="startseite.gif" width="32" height="32" border="0">
</a>

Durch border="0" wird in diesem Beispiel verhindert, dass der Webbrowser einen Rahmen um die Grafik des Verweises zeichnet. Damit ist der Verweis nur noch durch Fahren mit der Maus über den Verweis als solcher erkennbar. Dies ist z. B. die Standardlösung für Werbebanner. Bei Verweisen sollte sie nur verwendet werden, wenn die Verweisfunktion des Bildes danach noch eindeutig klar ist. Sonst kann es passieren, dass wesentliche Teile des Webauftrittes von den Besuchern nicht wahrgenommen werden.

Die Größe der Grafik wird mit den Attributen width und height angegeben. Reine Zahlenwerte stehen dabei für die Anzahl der verwendeten Bildelemente, d. h. Pixel (engl.: Picture Elements). Die Grafik oben soll also 32 Pixel breit und hoch sein. Prozentwerte, wie z. B. 32%, sind ebenfalls möglich und beziehen sich dann auf die Fensterbreite bzw. -höhe. Die Skalierung der Grafik wird automatisch vom Browser erledigt.

Aufgabe: Fügen Sie Ihrer Datei d3 einen grafischen Verweis auf die Datei d1 hinzu. Nehmen Sie dafür z. B. diese Ikone: , die sie mit Rechtsklick auf Ihrem Rechner speichern können.

Grafiken, die im Fließtext erscheinen, lassen sich vertikal ausrichten. Die Ikone oben wurde z. B. untenbündig in den Text eingefügt. Erreicht wird dies mit Hilfe des align-Attributes. Mehr Informationen hierzu finden Sie im entsprechenden Abschnitt zum Thema Ausrichten von Grafiken von SelfHTML.