Helma Spona - HTML & CSS Schnellkurs

Ein "Screenreader" ist ein Programm für sehbehinderte Surfer, das in der Lage ist Webseiten vorzulesen. Damit das möglich ist, sollte die Webseite besondere Anforderungen erfüllen. Dazu gehören die Trennung von Inhalt und Formatierung sowie die Verwendung von Alternativtexten für Bilder und andere grafische Elemente um nur die wichtigsten zu nennen.

Die Seite sollte intuitiv und einfach zu bedienen sein.

Die Seite sollte den verfügbaren Platz ausnutzen und dem Benutzer nicht eine bestimmte Fenstergröße oder Auflösung aufzwingen.

Kommt dann noch eine identische Darstellung in allen Browsern hinzu, ist dies natürlich optimal. In der Praxis ist dies aber kaum zu erreichen – schon deshalb nicht, weil die Auflösung und die Fenstergröße bestimmen, wie viel Platz die Seite maximal zur Verfügung hat. Füllt die Seite diesen Platz immer aus, kommt es zwangsweise schon durch verschiedene Auflösungen und Fenstergrößen zu unterschiedlichen Darstellungen.

Berücksichtigt sind dabei natürlich noch nicht die verschiedenen Browser und deren Versionen.

Ein Nutzer von Windows 98 wird nun mal nicht mit dem Internet-Explorer 7 surfen, so dass die Fehler in der HTML- und CSS-Implementation des Internet Explorers 4, 5 und 6 zu verschiedenen Darstellungen führen.

Außerdem unterstützten vor allem die älteren Browser-Versionen den CSS- und (X)HTML-Standard nicht vollständig. Auch daraus ergeben sich wieder Darstellungsunterschiede.

Als barrierefrei gilt eine Webseite dann, wenn sie so gestaltet ist, dass alle Ausgabeprogramme, die (X)HTML beherrschen, die Inhalte der Seite darstellen können.

Barrierefrei bedeutet also keinesfalls, dass die Seite in allen Browsern gleich aussehen muss, sondern nur, dass sie auch behinderten Besuchern zugänglich ist. Diese Besucher nutzen oft besondere Programme oder Hardware, die die Inhalte vorlesen (Screenreader) oder in Blindenschrift darstellen (Braillezeilen). Auf diesen Ausgabegeräten spielt die Formatierung dann keine Rolle.

HTML ist von Haus aus eine Beschreibungs- bzw. Auszeichnungssprache, d.h., sie beschreibt den Aufbau (und ursprünglich auch die Formatierung) einer Webseite. Derzeit ist der HTML-Standard 4.1 aktuell, wenngleich auch Version 4.0 noch gängig ist und durchaus eingesetzt werden kann. Der HTML-Standard 4.1 sieht wie XHTML die strikte Trennung von Struktur und Formatierung eines HTML-Dokuments vor.

XHTML ist eine Fortentwicklung von HTML, die jedoch im Gegensatz zu HTML auf XML (eXtensible Markup Language) basiert. Allerdings nutzt XHTML im Wesentlichen die gleichen Elemente wie HTML und auch die Struktur eines XHTML-Dokuments unterscheidet sich nicht wesentlich von der eines HTML-Dokuments. Die vorhandenen Unterschiede sind bezüglich des Einsatzes von Cascading Style Sheets zu vernachlässigen.

HTML- und XHTML-Dateien sind Textdateien. Daher reicht es aus, wenn Sie einen einfachen Texteditor zum Bearbeiten der Dateien verwenden. Mehr Komfort bieten aber Editoren wie Expression Web oder Dreamweaver.

Aber auch, wenn Sie einen Website-Editor nutzen möchten, sind grundlegende (X)HTML- und CSS-Kenntnisse sehr von Vorteil. Sie fördern das Verständnis des Webdesigns und helfen vor allem, Darstellungsfehler zu finden und zu beheben.

Selbst wenn Sie schon über einen Website-Editor verfügen und diesen nachfolgend nutzen möchten, sollten Sie die Übungen dieses Kurses in der Code-Ansicht Ihres Editors machen. Ungeeignet (für diesen Kurs) sind daher Editoren, die keinen Eingriff in den Code der Seite erlauben.

Sie können in jedem Fall einen einfachen Texteditor verwenden, bspw. falls Sie Windows nutzen, den Windows-Editor "Notepad". Nur bedingt geeignet sind hingegen Microsoft Word und andere Textverarbeitungsprogramme. Bspw. Word kann HTML-Seiten erstellen, erzeugt dabei aber keinen standardkonformen Code und Sie können den Code auch nicht bearbeiten. Sie sollten daher eine (X)HTML-Datei niemals mit Word öffnen. Denn schon beim Öffnen ändert Word den Quellcode und fügt nicht standardkonforme Elemente und unnötige Formatierungen ein.

Wenn Sie ein anderes Betriebssystem als Windows verwenden, können Sie jeden einfachen Texteditor nutzen, der in der Lage ist, Textdateien ohne Formatierung mit einer beliebigen Dateinamenserweiterung zu speichern.

Bevor Sie die erste (X)HTML-Datei erstellen, sollten Sie wissen, wie Sie die Datei benennen. Das ist sehr wichtig, denn nicht alle Dateinamen, die auf Ihrem Rechner zulässig sind, funktionieren noch, wenn Sie die fertige Website auf den Webserver Ihres Providers hochgeladen haben. Meist haben deren Webserver ein Betriebssystem, dass bspw. anders als Windows Groß- und Kleinschreibung in Dateinamen unterscheidet. Auch wenn auf Ihrem Rechner dann "index.html" oder "index.HTML" die gleiche Datei wären, sind das für den Webserver zwei verschiedene Dateien. Auch gibt es abhängig vom Betriebssystem weitere Einschränkungen bei der Namensvergabe.

Wenn Sie Namen für Dateien vergeben, die auf dem Webserver Ihres Providers nicht gültig sind, führt das im Zweifel dazu, dass die Dateien vom Browser des Besuchers nicht angezeigt werden können, Hyperlinks nicht funktionieren oder Bilder nicht geladen werden.

Für Dateinamen von Webseiten gilt:

sie dürfen nur aus Ziffern und Buchstaben (ohne Umlaute und "ß") sowie Unterstrichen "_" bestehen.

sie dürfen keine Leerzeichen enthalten

Groß- und Kleinschreibung in Dateinamen wird berücksichtigt, daher sollten Sie sich angewöhnen, die Dateinamen ausschließlich klein zu schreiben.

Satzzeichen und Sonderzeichen in Dateinamen sind nicht erlaubt.

Dateinamen müssen eine Dateinamenserweiterung haben. Für (X)HTML-Dateien können Sie .htm oder .html verwenden. Üblich ist heute .html. Im Zweifel gibt Ihnen Ihr Provider aber darüber Auskunft, welche Dateinamenserweiterung Sie verwenden sollen.

Die Startseite der Website, also die Seite, die angezeigt werden soll, wenn der Besucher die Domain im Browser angibt, muss in aller Regel "index.html" heißen. Seltener wird auch "index.htm" oder "default.htm" verwendet. Auch den Namen der Startseite können Sie im Zweifel bei Ihrem Provider in Erfahrung bringen.

Um für die nächsten Übungen zunächst eine leere HTML-Datei zu erstellen, erzeugen sollten Sie zunächst ein Verzeichnis erstellen, in dem Sie dann alle Dateien für Ihr Website speichern.

Wie Sie das Verzeichnis nennen, spielt keine Rolle, denn Sie laden später nur die enthaltenen Dateien (und gegebenenfalls Unterverzeichnisse) auf den Webserver.

Abbildung 1: Erstellen Sie zuerst einen Ordner, bspw. "Woche1" in dem Sie alle Dateien der Website speichern.

Wie Sie den Ordner erstellen, hängt von Ihrem Betriebssystem ab. Unter Windows können Sie das übergeordnete Verzeichnis im Explorer oder Arbeitsplatz öffnen und aus dem Kontextmenü des Ordners dann Neu/Ordner auswählen.

Erstellen Sie mit dem von Ihnen gewählten Editor eine leere Textdatei und speichern Sie diese als HTML-Datei ab.

Öffnen Sie den Texteditor, den Sie nutzen möchten. Die meisten Editoren erzeugen dann gleich eine leere Textdatei. Falls das nicht der Fall ist, erzeugen Sie eine leere Datei.