Einführung in das Gestalten von Webseiten


Hypertext - Die etwas andere Art des Strukturierens von Texten

Der Ansatz, Text nicht linear sondern in einer nichtlinearen, netzartigen Struktur mithilfe logischer Verknüpfungen (so genannter Verweise oder Links) als Hypertext anzuordnen geht auf Vannevar Bush zurück, der 1945 die entsprechende Idee dazu hatte. Diese Links sollten Verbindungen zwischen den einzelnen Textstellen herstellen. Der Hintergrund für diese Idee ist, dass die Struktur eines Hypertextes eher der Funktionsweise des menschlichen Denkens (vernetztes Denken!) entspricht als lineare Texte. Er verband dies mit der Hoffnung, dass dadurch das Verständnis der Texte gegenüber der herkömmlichen linearen Darstellung von Texten verbessert werden könnte.

Weitere interessante Informationen zum Thema Hypertext (allerdings auf zum Teil sehr hohen Niveau) findet man beispielsweise in dem entsprechenden Artikel der Wikipedia.

HTML-Die Sprache des World Wide Web

Die Dokumentbeschreibungssprache HTML (HyperText Markup Language) wurde in den achtziger Jahren am europäischen Kernforschungszentrum CERN entwickelt. Sie enthält Anweisungen zur Darstellung von Inhalten in einem Web - Browser. Die entsprechenden Anweisungen werden dazu in spitze Klammern, so genannte Tags, geschrieben.

Der prinzipielle Aufbau eines solchen Tags wird an dem folgenden Beispiel deutlich:
<p align="center">Hier steht ein Text.</p>

Was bedeuten die einzelnen Angaben? Aufschluss darüber soll die folgende Tabelle geben:

Beispiel Allgemeiner Begriff Erläuterung Erläuterung des Beispiels
<p> </p> Objekt grundlegender Bestandteil eines Dokumentes;
Informationsträger;
Elemente des gleichen Typs haben die gleichen Eigenschaften
das Objekt Absatz
align Eigenschaft Merkmal eines Elements Absatzausrichtung
"center" Eigenschaftswert mögliche Merkmalsausprägung der jeweiligen Eigenschaft Der Absatz ist zentriert ausgerichtet.
<p align="center">
...
</p>
Methode verändert die Eigenschaften eines Elements Dem angegebenen Absatz wird eine zentrierte Ausrichtung zugewiesen.
Der Grundaufbau einer Webseite

<HTML>
<HEAD>
<!-- Kommentarzeilen -->
<TITLE> Titelzeile </TITLE>
</HEAD>
<BODY>
Hier steht der Inhalt der HTML - Seite
</BODY>
</HTML>

Eine Hypertext - Seite beginnt stets mit dem Tag <HTML> und endet mit </HTML>. Nur so kann sie von einem Browser dargestellt werden. Zwischen diesen beiden Tags befindet sich der Kopf der Seite (eingeschlossen zwischen <HEAD> und </HEAD>) und der Körper der Seite (zwischen <BODY> und </BODY>). Der im Kopf eingetragene Titel der Seite erscheint bei der Darstellung im Browser in der Titelzeile.

Aufgabe:
Betrachten Sie sich unter Menü -> Web-Entwickler -> Seitenquelltext anzeigen (Firefox) den Quelltext dieser Seite.

Websites planen

Ziel und Zielgruppe festlegen

Bei der Erstellung einer neuen Website sollte man sich zuerst Gedanken über die Ziele machen, die mit der Website verfolgt werden sollen. Es ist zu berücksichtigen, ob man sich als Privatperson im Web darstellen möchte, oder aber ob man einen Verein, eine Behörde bzw. eine Firma repräsentiert.

Aufgabe:
Erläutern Sie weshalb bei der Erstellung einer neuen Website zu unterscheiden ist, ob man sich als Privatperson oder aber als eine Institution, ein Verein oder eine Firma präsentieren möchte. Beschreiben Sie wie sich dies in der Darstellung der Inhalte niederschlägt.

Entsprechend der Ziele einer Website ist die Festlegung der Zielgruppe derjenigen Besucher, die sich bevorzugt auf der Website aufhalten sollen ein weiteres wichtiges Kriterium.

Aufgabe:
Erläutern Sie inwiefern beabsichtigte Zielgruppen eine wichtige Rolle bei der Festlegung des Designs einer Website spielen. Stützen Sie sich bei Ihrer Erläuterung z.B. auf die Webpräsentationen der Fernsehsender KIKA und ARD.

Die Struktur einer Website

Bevor man eine Website anlegt ist es sehr wichtig, dass man sich schon im Voraus Gedanken über die Struktur und die Inhalte der enstehenden Website macht. Die Struktur einer Website sowie die Beziehungen der einzelnen Seiten untereinander lässt sich z.B. mit Hilfe eines Flussdiagrammes verdeutlichen.

Flussdiagramm einer Website

Die Startseite einer solchen Website wird übrigens entweder mit index.html bzw. index.htm (bei englischsprachigen Seiten default.html) bezeichnet. So ist es möglich bei einer großen Anzahl von Dokumenten einer Website relativ schnell die Startseite ausfindig zu machen.

Einheitliches Design

Ein weiterer wichtiger Faktor für die erfolgreiche Gestaltung einer Website ist das einheitliche Design der Seiten. Alle Seiten sollten eine Einheit bilden, so dass der Betrachter erkennt, dass er sich noch immer auf der gleichen Website befindet. Sinnvolle Gestaltungselemente einer Website sind beispielsweise:

Erstellen von HTML - Seiten mit einem gewöhnlichen Editor
  1. Starten Sie einen beliebigen Editor (z.B. den windowseigenen Editor unter Start -> Programme -> Zubehör).
  2. Erstellen Sie eine HTML - Seite, die den üblichen "Hallo World!" Test ausgibt. Beachten Sie dabei die oben angegebene Struktur einer Webseite.
  3. Speichern Sie die Seite mit der Dateierweiterung *.html oder *.htm ab. Achtung! Editoren vergeben die Dateierweiterung gewöhnlich nicht automatisch. Diese muss von Ihnen von Hand eingegeben werden.
  4. Betrachten Sie anschließend die von Ihnen erstellte Seite in einem Browser.
  5. Ermitteln Sie die Größe der erstellten Datei.
Erstellen von HTML - Seiten mit einem Textverarbeitungsprogramm (z.B. MS WORD)
  1. Starten Sie MS Word und geben Sie wiederum den Text "Hallo World!" ein.
  2. Speichern Sie jetzt das Dokument als Webseite ab (Menü Datei -> Als Webseite speichern).
  3. Betrachten Sie die erstellte Webseite mit einem Browser und lassen Sie sich den Quelltext anzeigen.
  4. Vergleichen Sie die Größe der mit Word erzeugten Datei mit der Datei, die Sie mit dem Editor erstellt haben. Was stellen Sie fest?
Erstellen von HTML-Seiten mit einem HTML-Editor

Das Erstellen umfangreicherer HTML - Dokumente mit einem gewöhnlichen Editor ist, wie Sie sicherlich soeben bemerkt haben, sehr mühselig. Deshalb gibt es spezielle Software, so genannte HTML - Editoren, die ein komfortableres Erstellen der Dokumente ermöglichen. Ein solcher HTML - Editor ist beispielsweise der für Schulen und Privatanwender als Freeware erhältliche Editor Phase 5, den Sie sich hier herunterladen können.

  1. Starten Sie den HTML - Editor und wählen Sie aus dem Menü Datei -> Neues HTML - Dokument.
  2. Geben Sie als Seitentitel z.B. HTML - Test ein. Wählen Sie dann Erstellen.
  3. Betrachten Sie zunächst das neu erstellte HTML - Dokument. Es enthält bereits einige wichtige Bestandteile, die automatisch generiert wurden. Geben Sie als Inhalt der Seite wiederum Hallo World! ein und speichern Sie die Seite.
  4. Betrachten Sie Ihr Dokument in der internen Browservorschau.
  5. Ermitteln Sie wiederum die Größe der erstellten Datei und vergleichen Sie diese mit den schon vorher erstellten Dateien.
Eine erste Webseite
  1. Erstellen Sie ein neues HTML - Dokument und geben Sie als Seitentitel Erste Übung ein.
  2. Der Inhalt der Seite sollte aus folgendem bestehen:
    • Überschrift: Meine erste Übungsseite
    • eine Trennleiste zwischen Überschrift und nachfolgendem Text
    • eine kurze Vorstellung des Autors der Seite
    • eine Trennleiste zwischen dem Text und den nachfolgenden allgemeinen Informationen über die Seite
    • das Datum der letzten Änderung
    • den Namen des Autors der Seite.
  3. Speichern Sie die Seite ab und betrachten Sie sie in einem Browser.

Musterlösung für das Weiterarbeiten zu Hause. Das Herunterladen der Musterlösung erfolgt durch Rechtsklick mit der Maus und anschließend Ziel speichern unter.


zuletzt geändert am:
Eine Seite von Mirko Hans