Читать книгу HTML & CSS Schnellkurs - Helma Spona - Страница 6

HTML-Grundlagen, wichtige Begriffe und Syntax

Websites werden mithilfe von HTML oder XHTML erstellt, außer es kommen serverseitige Programmier- und Skriptsprachen zum Einsatz. Diese sind nicht Thema des Kurss und werden daher nicht weiter behandelt.

Begriff "XHTML"

XHTML ist wie HTML eine Auszeichnungssprache, die alternativ zu HTML verwendet werden kann, um Webseiten zu erstellen. Die Abkürzung steht für Extensible Hypertext Markup Language. XHTML verwendet dazu weitgehend die gleichen Elemente auch wenn es feine Unterschiede gibt. Wo notwendig, wird nachfolgend auf die Unterschiede hingewiesen.

Hinweis

Wenn es um Aussagen geht, die auf HTML und XHTML zutreffen wird nachfolgend die Bezeichnung (X)HTML verwendet, die "HTML und/oder XHTML" bedeutet.

Die Formatierung sollte bei modernen Websites mithilfe von CSS erfolgen. HTML sorgt für den Inhalt und den Aufbau der Website, CSS für die Formatierung. Die Darstellung übernimmt der Browser des Benutzers, indem er den (X)HTML-Code und den CSS-Code, so gut es geht, interpretiert und darstellt.

Und genau hier liegt das erste Problem. Der Browser "interpretiert" den Code der Seite. Das führt dazu, dass es Differenzen bei der Darstellung des gleichen Codes in verschiedenen Browsern und sogar verschiedenen Browsern gibt. Das ist ein wichtiger Aspekt bei der Gestaltung von Websites. Darüber hinaus sollten Sie aber, insbesondere wenn Sie eventuell aus dem Print-Bereich kommen noch weitere Aspekte des Mediums "Internet" beachten.

Das Internet – ein besonderes Medium

Das Internet ist ein ganz besonderes Medium. Anders als Papier bietet es kein definiertes Format, das heißt keine Größe, die man beim Design berücksichtigen kann. Layouten Sie beispielsweise ein Prospekt in A4-Größe und kennen die Anforderungen der Druckerei, können Sie daran Ihr Layout anpassen. Sie wissen dann, welche und wie viele Farben Sie nutzen können, welche Seitenränder Sie mindestens einhalten müssen und wie klein die Schrift sein darf, um noch gut lesbar zu sein.

All das kennen Sie beim Webdesign nicht. Die Besucher haben unterschiedliche Auflösungen, Monitore, Betriebssysteme und Browser. Das alles wirkt sich darauf aus, wie eine Seite beim Betrachter dargestellt wird, ob er alles lesen kann, ob die verwendeten Schriftarten vorhanden sind oder vielleicht viel zu kleine Ersatzschriftarten genutzt werden.

Aus all diesen Gründen sollten Sie sich von dem Gedanken verabschieden, dass eine gute Webseite auf jedem Rechner gleich aussehen muss. Vielmehr muss eine gute Seite folgende Anforderungen erfüllen:

 Die Inhalte sollten auf allen Rechnern und mit jedem Browser lesbar sein.

 Die Seite sollte barrierefrei und auch für Screenreader zugänglich sein.

Begriff "Screenreader"

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.

Begriff "barrierefreie Webseite"

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.

Hinweis

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.

Hinweis

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.

Regeln zur Benennung von Dateien

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.

Achtung

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.