Computerkurs: HTML, CSS und Javascript

(X)HTML

Nutzer von Darstellungsprogrammen (in diesem Zusammenhang häufig mit dem englischen Begriff browser bezeichnet) sind daran gewöhnt, dass ein solches Programm Dokumente aus dem Netz strukturiert präsentieren kann. Doch dieses Programm bekommt keine fertig strukturierte Darstellung der Seite zu Präsentation vorgelegt, sondern einen Quelltext, der interpretiert werden muß, um ihn den Nutzern präsentieren zu können.

Im Grunde gilt das für alle digitalen Formate, ist hier aber noch um eine Stufe weiter abstrahiert, weil der Quelltext nur Angaben beinhaltet, was für eine Bedeutung das hat, was angegeben ist und präsentiert werden soll, nicht wie es präsentiert werden soll. Die dafür zumeist verwendete Sprache ist HTML (englisch: Hypertext Markup Language) oder auch XHTML (englisch: eXtensible Hypertext Markup Language). Für beides wird auch abgekürzt von (X)HTML gesprochen. Bei den gängigen Programmen kann der Quelltext eingesehen werden, wenn mit dem Zeigergerät auf den Hintergrund einer dargestellten Seite geklickert wird ("Rechtsklick -> Quelltext anzeigen").

(X)HTML ist keine Programmiersprache im eigentlichen Sinn, da sie keine dynamischen Inhalte hat. Sie ist vielmehr eine Beschreibungssprache, die von einem Programm interpretiert werden muß, bevor sie dem Nutzer präsentiert wird - ob dies graphisch passiert oder akustisch oder auf einer Braille-Zeile ist dabei nicht festgelegt und hängt vom Programm und den Vorlieben des Nutzers ab. Da die verschiedenen Programme nicht immer alles genau gleich präsentieren, insbesondere, wenn die Dokumente fehlerhaft sind, ist es bei der Erstellung solcher Dokumente wichtig, vor einer Veröffentlichung alle Fehler zu beseitigen und sich das Ergebnis in verschiedenen Programmen präsentieren zu lassen, um sicherzustellen, dass sie für alle Nutzer zugänglich sind.

Es gibt verschiedene Versionen von (X)HTML. Wie die Version angegeben wird, ist von der Version abhängig. Bei älteren Versionen wird immer eine sogenannte Dokumenttypdeklaration angegeben, die auf eine entsprechende und für die Version spezifische Dokumenttypdefinition verweist. Daraus ergibt sich eine Versionsangabe. Bei einigen neueren XHTML-Versionen kann alternativ auch eine etwas einfachere Angabe der Version erfolgen. Beim im Entwurfsstadium befindlichen HTML5 (gibt es sowohl als HTML als auch als XHTML) ist explizit keine Versionangabe vorgesehen, es ist also mit der Version gar nicht möglich anzugeben, dass man diese Version bei einem Dokument verwendet.

Die Basisstruktur von (X)HTML besteht aus Elementen. Elemente werden mit Markierungen gekennzeichnet. Ein Element mit Inhalt beginnt mit einer Anfangsmarkierung und endet mit einer Endmarkierung. Dazwischen steht der Inhalt. Markierungen werden mit einem Zeichen '<' eingeleitet und enden mit einem Zeichen '>'. Dazwischen steht der Name des Elementes, bei der Endmarkierung steht vor dem Namen noch ein '/':
<elementname>Inhalt</elementname>

Elemente ohne Inhalt werden inhaltsleer genannt. Hier unterscheidet sich die Syntax zwischen HTML und XHTML. Bei XHTML können inhaltsleere Elemente mit einer speziellen Markierung notiert werden. Diese entspricht weitgehend einer normalen Anfangsmarkierung, endet aber mit '/>'. Aber auch die normale Notation mit Anfangs- und Endmarkierung ist erlaubt. Bei HTML gibt es nur für bestimmte inhaltsleere Elemente eine Kurznotation, bei diesen wird nur die Anfangsmarkierung gesetzt. Welche das sind, ist in HTML genau festgelegt. Die normale Notation ist in HTML für diese speziellen Elemente nicht erlaubt.

Elemente müssen strikt ineinander verschachtelt sein, deshalb ist so etwas falsch: <p><em>Text</p></em>.
Stattdessen ist zu schreiben: <p><em>Text</em></p>

Um die Bedeutung von Elementen genauer anzugeben, einzuschränken oder um spezielle Funktionen bereitzustellen, können in der Anfangsmarkierung Attribute notiert werden. Attribute sind die zweite grundlegende Struktur der Syntax. Attribute haben einen Namen und einen Wert und dürfen maximal einmal in der Anfangsmarkierung des jeweiligen Elementes notiert werden. Vom Elementnamen und von anderen Attributen werden Attribute mit Leerzeichen separiert. Die Notation besteht aus dem Namen des Attributes, gefolgt von einem Zeichen '=', gefolgt vom Wert, der in Anführungszeichen zu setzen ist, entweder einfache oder doppelte. Bei HTML können unter bestimmten Umständen Anführungszeichen weggelassen werden, empfehlenswert ist das aber auch dort nicht, weswegen hier darauf nicht weiter eingegangen wird.

Editor

Um (X)HTML-Dokumente zu schreiben, verwendet man am besten einen einfachen Texteditor, eventuell einen mit farblicher Hervorhebung der Strukturen von (X)HTML, um schneller Fehler erkennen und beheben zu können.

Unter keinen Umständen sollte man ein Office-Programm wie Microsoft Office Word verwenden, da dieses eigene Syntax einfügt, die mit (X)HTML wenig oder nichts zu tun hat.

Es ist zu empfehlen, ein HTML-Dokument mit der Endung '.html' oder '.htm' abzuspeichern, bei XHTML verwendet man besser '.xhtml'. Solch eine Endung kann graphischen Oberflächen von Betriebssystemen helfen, ein passendes Programm zu starten, wenn das Dokument präsentiert werden soll. Es hilft auch den Darstellungsprogrammen zu erkennen, ob sie versuchen sollen, den Inhalt als HTML, XHTML oder etwas anderes zu präsentieren. Für eine spätere Bearbeitung ist dann die Datei gezielt wieder mit einem Editor zu öffnen, nicht mit dem Darstellungsprogramm.

Grundgerüst

Das Grundgerüst eines Dokumentes, zum Beispiel für ein XHTML-Dokument in der Version 1.1; sieht wie folgt aus:

<?xml version="1.0"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title></title>
   </head>
  <body>
  </body>
</html>

In der ersten Zeile findet sich eine XML-Verarbeitungsanweisung, weil es sich bei XHTML um ein XML-Format handelt. XML (englisch: eXtensible Markup Language) ist eine Sprachfamilie mit gemeinsamer Syntax, bekannt aus dieser Familie sind etwa auch SVG (Skalierbare Vektorgraphik) oder MathML (Mathematische Auszeichnungssprache). Darauf folgt die bereits genannte Dokumenttypdeklaration. Weil sich zumindest diese nicht einfach merken läßt, hat es sich bewährt, diese Grundstruktur einfach zu kopieren und dann mit Inhalt zu füllen.

Die Einrückungen haben nichts mit der späteren Präsentation zu tun und dienen nur zur Übersichtlichkeit.
Nach der Dokumenttypdeklaration steht der eigentliche Inhalt des Dokumentes innerhalb des Wurzelelementes html. Erforderlicher Inhalt von html ist als erstes ein Element head und danach ein Element body.

head behinhaltet Metainformationen über das Dokument. Mindestens ein Element title mit dem Dokumenttitel als einfacher Textinhalt muß vorhanden sein.

body beinhaltet den eigentlichen Inhalt des Dokumentes.

Sonderzeichen

Im Grunde genommen kann der Text jetzt ganz normal geschrieben werden und wird auch so wiedergegeben. Bei obiger Grundstruktur wird eine Kodierung mit UTF-8 impliziert. Damit können sehr viele Zeichen direkt notiert werden. Wenn es keine speziellen Gründe für eine andere Kodierung gibt, ist zu empfehlen, bei dieser zu bleiben.

Nicht direkt notiert werden dürfen aber Zeichen, die in (X)HTML oder allgemeiner in XML eine besondere Bedeutung haben. Diese werden dann durch bestimmte sogenannte Entitäten ersetzt, wie in folgender Tabelle angegeben:

<	&lt;
>	&gt;
&	&amp;
"	&quot;
'	&apos;

Sind Zeichen nicht auf der Tastatur vorhanden und es ist nicht erwünscht, sie aus einer Zeichentabelle ins Dokument zu kopieren, so können Zeichen auch durch ihren Unicode notiert werden. Sie werden folgendermaßen deklariert: &#[Unicode-Nummer]; bzw. &#x[hexadezimale Unicode-Nummer];.

Elemente

Mit den Elementen von (X)HTML wird ihrem Inhalt eine spezifische Bedeutung zugeschrieben oder es wird auch eine bestimmte Funktion beschrieben, etwa die Referenzierung eines anderen Dokumentes, die Einbettung eines Bildes oder die Funktion eines absendbaren Formulares.

Einige Elemente von (X)HTML und ihre Bedeutung:

p repräsentiert den Inhalt eines Absatzes, also einen abgeschlossenen Gedankengang.

a beinhaltet eine Referenz zu einem anderen Dokument. Das ist ein sogenannter Verweis. Um die Seite anzugeben, auf welche verwiesen wird, ist in der Anfangsmarkierung von a ein Attribut zu notieren. Dieses heißt href. Der Wert des Attributes ist ein Dokumentidentifizierer (URI/IRI) oder ein Dokumentfragmentidentifizierer oder letzteres an ersteres angehängt.

Beispiel:

<a href="http://example.org/sample.xhtml">Beispiel</a>

Entsprechend kann mit

<img src="[Bild-URI]" alt="[Alternativ-Text]" />

ein Bild eingebunden werden. Das Bild ist immer alternativ zu einem Text zu sehen, der im Attribut alt notiert wird. Bild und Text repräsentieren gleichwertige Alternativen für die Präsentation des Elementes. Entweder wird also das referenzierte Bild präsentiert oder der Text. Bei einer graphischen Präsentation hat das Bild Vorzug vor dem Text, sofern es geladen werden kann. Bei einer akustischen Präsentation wird einfach der Text vorgelesen.

Mit

<table>
<caption>Tabellenüberschrift</caption>
<tr><td>[Zelleninhalt]</td></tr>
</table>

wird eine Tabelle erzeugt. Hier sieht man sehr schön das Prinzip der Verschachtelung.

tr für eine Tabellenzeile und td für eine Tabellenzelle können mehrmals vorkommen. Es gibt für Tabellen weit mehr Elemente und spezifische Attribute, auch um das Verständnis des Inhaltes der Tabelle zu erleichtern.

Eine einfache Tabelle kann so aussehen:

<table>
<caption>Tabellenüberschrift</caption>
<tr><td>Zelle 1</td><td>Zelle 2</td></tr>
<tr><td>Zelle 3</td><td>Zelle 4</td></tr>
</table>

Eine Präsentation könnte so aussehen:

Tabellenüberschrift

Zelle 1	Zelle 2
Zelle 3	Zelle 4

Möchte man eine Zelle haben, die sich über mehrere Zellen erstreckt, so verwendet man das Attribute colspan beziehungsweise rowspan, jeweils mit der Anzahl der Zellen als Wert. Dazu mehr in einschlägiger Literatur.

Mit

<ul>
  <li>[Listeneintrag]</li>
  <li>[Listeneintrag]</li>
</ul>

wird eine Liste erzeugt. In ul können natürlich mehrere Listenpunkte li notiert sein. ul gibt an, dass die Anordnung im Quelltext keine Rang- oder Reihenfolge mit relevanter inhaltlicher Bedeutung darstellt. Alternativ zu ul kann ol verwendet werden, wenn die Reihenfolge der Notation inhaltlich relevant ist. Bei ol-Listen ergibt sich zumeist eine Präsentation mit zusätzlicher Durchnumerierung der Listenpunkte. Statt Nummern können aber auch Buchstaben verwendet werden.

em beinhaltet besonders betonten Text.

div gibt einen unspezifischen Behälter für Inhalt an. Während p die spezifische Bedeutung eines Absatzes hat, hat div keine spezifische Bedeutung und kann nahezu beliebigen Inhalt haben. Ähnlich wie p, ul, ol, table kennzeichnet auch div einen Bereich, der vom vorherigen und folgenden Inhalt zu separieren ist.

span ist auch ein unspezifischer Behälter für Inhalt. Dieser wird allerdings im fortlaufende Text verwendet und wird nicht vom umgebenden Inhalt separiert. Auch a wird im fortlaufenden Text ohne Separation verwendet, hat aber anders als span eine spezifische Bedeutung und Funktion. em wird auch im fortlaufenden Text ohne Separation verwendet, hat aber eine spezifische Bedeutung.

Weiterführende Literatur

Diese kurze Übersicht reicht nicht, um wirklich gute (X)HTML-Dokumente zu schreiben, auch weil etwa nicht erläutert wird, welche Elemente genau in welchen Elementen notiert werden dürfen. Es ist daher notwendig, weitere Literatur heranzuziehen, um (X)HTML zu lernen.

Empfehlenswert ist zu diesem Zwecke das Wikibook zu XHTML.

Ein etabliertes Nachschlagewerk zu (X)HTML und auch der Stilvorlagensprache CSS (englisch: Cascading Style Sheets) ist selfhtml

CSS

Mit CSS (englisch: Cascading Style Sheets) kann über Stilvorlagen die Präsentation von Dokumenten festgelegt werden, dies geht auch und insbesondere bei Dokumenten im Format (X)HTML. Damit festgelegt werden können zum Beispiel Position und Größe einzelner Elemente, sowie Rand, Schriftart, Schriftfarbe etc.

Um CSS zu lernen, kann zum Beispiel das Wikibook zu CSS verwendet werden.

Einbinden ins (X)HTML-Dokument

CSS kann auf mehrere Arten in ein (X)HTML-Dokument eingebunden werden. Bei einer Methode wird das CSS direkt im gleichen Dokument notiert, bei anderen wird auf externe Dokumente verweisen, in welchen die Angaben stehen. Die Notation im selben Dokument ist daher spezifisch für dieses eine Dokument, während Stilvorlagen in externen Dokumenten offenbar für beliebig viele andere Dokumente verwendet werden können.

Details zur Einbindung je nach Methode finden sich in genannter weiterführender Literatur zu (X)HTML oder CSS.

javascript

javascript ist neben CSS eine weitere Möglichkeit, um Einfluß auf die Präsentation des Inhaltes eines (X)HTML-Dokumentes zu nehmen. Per Definition ändert sich damit wie bei der Verwendung von Stilvorlagen jedoch nicht der Inhalt des (X)HTML-Dokumentes selbst. Leider wird besonders javascript oft mißbräuchlich und anders verwendet, um den Inhalt selbst zu ändern. Damit werden leicht Barrieren für bestimmte Nutzergruppen erzeugt, für die so manipulierte Inhalte nicht zugänglich sind.

Hilfreiche Hinweise hinsichtlich sinnvoller Verwendungsmodelle finden sich etwa im Wikibook Barrierefreiheit und Benutzbarkeit.