Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • World Wide Web • Webseiten
⇦ World Wide Web / Software ⇨
30.07.2014 08:46:29

Webseiten

HTML-Familie

Die Hypertext Markup Language (HTML, Hypertext Auszeichnungs­sprache) ist wohl das am weitesten verbreitete Dateiformat und wohl auch das umstrittenste. Seine Stärken liegen im Klartextformat, in der Einfachheit und in der Erweiterbarkeit.

Angegriffen wurde HTML vor allen von Entwicklern und Designern. Diesen war die Sprache für ihre Bedürfnisse nicht spezifisch genug. Entwickler hätten gerne mehr Programmiermöglichkeiten und Designer mehr Layoutmöglichkeiten gehabt.

Entsprechend wurde HTML um JavaScript (Programmiermöglichkeiten) und CSS (Layoutmöglichkeiten) erweitert.

HTML - Hypertext

Brainstorming:

Wie schlagen sie Informationen in einer Bücherei nach? Schreiben sie kurz ihre Gedanken auf einen Zettel.

(Beispiel Katalog)

„Text lesen“ ist immer ein linearer Vorgang. Oft benötigt man aber Informationen, die an einer anderen Stelle stehen. Klassischerweise gibt es dann einen Verweis im Text.

Ist der Verweis allerdings nicht auf Papier sondern „im Computer“, liegt nichts näher als ihm direkt folgen zu können. Die Fähigkeit, mittels einer Verknüpfung (Link) in einen Text zu verweisen und dorthin springen zu können, nennt sich Hypertext. Diese Idee liegt nahe und ist dementsprechend alt.

HTML - Auszeichnungen

Übung:

Überlegen sie sich, wie früher ein Zeitungsredakteur einem Setzer mitteilte, wie sein Text auszusehen hat. Versetzen sie sich in beide Rollen und spielen sie diese durch.

(Beispiel gesetzter Text)

Anhang: Tastaturkommandos

Auszeichnungen in einem Text dienten ursprünglich den Setzern aus der Druckindustrie als Anweisung für Semantik (Bedeutungen) wie Überschrift oder Fließtext.

Genauso funktioniert auch eine Auszeichnung in HTML. Ein bestimmtes Tag (Etikett oder Auszeichner) weist den Webbrowser an, bestimmte Formatierungen oder Eigenschaften dem Text zuzuordnen. Das sind zum Beispiel Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen.

Tags in HTML sind hierarchisch strukturiert, dass heißt sie stehen in Beziehung zueinander und können geschachtelt werden.

Editor - listenbeispiel
<ul>
  <li>1. Punkt</li>
  <li>2. Punkt</li>
  <li>3. Punkt</li>
</ul>

Am Beispiel kann man folgendes erkennen: Es gibt immer ein Starttag (<li>) und ein Endtag (</li>). Tags können ineinander geschachtelt werden (<ul><li></li></ul>). Allerdings ist dabei immer die Reihenfolge einzuhalten (Achtung falsch! <ul><li></ul></li>). Das Tag das zuletzt geöffnet wurde, muss immer zuerst geschlossen werden. Tags umschließen andere Tags und/oder Text.

HTML ist unabhängig vom Ausgabemedium. So kann ein HTML-Dokument beispielsweise auch über einen Sprachprozessor oder einen Drucker ausgegeben werden.

Stylesheets (CSS)

HTML, als reine Auszeichnungs­sprache, trennt nicht zwischen Darstellung und Inhalt, einem der Grundprinzipien der Informatik. Das stellt vor allem bei großen Projekten ein Hindernis dar, wenn sich das Layout einer Seite ändern soll. Es sind dann entsprechend alle Webseiten händisch aufwendig anzupassen.

Brainstorming:

Was wissen sie zu Formatvorlagen und Vorlagendateien in Word oder OpenOffice Writer? Schreiben sie kurz ihre Gedanken auf einen Zettel.

(Formatvorlagen in der Wikipedia)

Genau hier setzt CSS an: Inhalt (HTML) und Darstellung (CSS) werden in zwei getrennten Dateien gespeichert. Ändert man die Darstellung (CSS), passen sich automatisch allen davon abhängigen Webseiten an.

Dieses Buch verwendet deshalb von Anfang an CSS für Formatierungen, zumal dies längst alle modernen Webbrowser unterstützen.

JavaScript

Brainstorming:

Für was braucht man Programmierung? Schreiben sie kurz ihre Gedanken auf einen Zettel.

(Programmierung in der Wikipedia)

HTML hat für den Informatiker noch ein zweites Problem: Es ist keine Programmiersprache. Jede Interaktivität mit dem Benutzer kann nur durch den Aufruf einer weiteren HTML-Seite erfolgen. Sie kennen das bestimmt: Ein Klick auf einen Link öffnet eine neue Seite.

Das hat aber zwei erhebliche Nachteile. Erstens muss immer eine komplette Seite nachgeladen werden und zweitens verhält sich eine Webanwendung anders als eine Computeranwendung. Dieses Problem löst JavaScript, als eine in die Webseite eingebundene Programmiersprache. Ähnlich wie CSS kann auch JavaScript innerhalb der HTML-Datei oder als gesonderte Datei vorliegen.

Da auch JavaScript aus der modernen Webseitengestaltung nicht mehr wegzudenken ist, wird es auch relativ früh in diesem Buch eingeführt. Allerdings geht es dabei nur um das Einbinden bestehender JavaScript-Funktionen. Die Programmierung ist ein eigenes Kapitel.

Klartextformat

HTML, CSS und JavaScript werden im sogenannten Klartextformat geschrieben. Können also mit jedem beliebigen Texteditor (Notepad) verfasst werden. Besser ist natürlich ein spezieller Editor, der die Syntax (Schreibweise) farblich unterscheiden kann (Notepad2, Notepad++, Hagen, …).

Sollten sie bisher Texte in einer Textverarbeitung geschrieben haben, müssen sie etwas umdenken. Deren Dateiformate sind kein Klartext – öffnen sie einfach einmal eine Office-Datei mit einem Texteditor. Allerdings kann fast jede Textverarbeitung als Dateiformat auch Klartext (meist „Text“ oder „Nur Text“ genannt) schreiben.

Natürlich existieren auch sogenannte WYSIWYG-HTML-Editoren. Doch oft ist deren Ausgabe nicht hundertprozentig standard­konform. Am besten lernen sie HTML tatsächlich mit einem Texteditor.

Versionen

HTML ist leider immer noch nicht so einheitlich wie man das erwarten sollte. Es existieren nach wie vor noch einige Diskrepanzen zwischen den Browsern, die teilweise bei JavaScript und CSS noch größer sind. An diese Grenzen stoßen wir in diesem Buch allerdings eher selten und wenn gehe ich kurz darauf ein.

HTML

HTML liegt in verschiedenen Versionen vor (HTML 1.0, 2.0, 3.2, 4.01, 5.0 und XHTML 1.0, 1.1). Früher konnte es durchaus wichtig sein, sich an eine bestimmte Version zu halten. Heute ist eigentlich nur noch HTML 4.01 sowie XHTML 1.1 und die kommende Version 5 interessant.

HTML beruht auf SGML (Standard Generalized Markup Language, Normierte Verallgemeinerte Auszeichnungs­sprache). Der richtige Sprachgebrauch lautet: HTML ist eine Anwendung von SGML. SGML verwendet eine sogenannte DTD (Document Type Definition, Dokumenttypdefinition), um die syntaktische Gültigkeit eines Dokumentes zu prüfen. Entsprechend existieren DTDs für die HTML-Versionen. Dazu später mehr.

xhtml

XHTML ist eine Neudefinition von HTML 4 auf Basis von XML (Extensible Markup Language, erweiterbare Auszeichnungs­sprache). XML ist eine strengere Teilmenge und Vereinfachung von SGML. Es benutzt zur Gültigkeitsprüfung nicht nur DTDs, sondern auch XML-Schema. Während DTDs eine eigene Syntax benutzen, verwendet XML-Schema wieder XML als Beschreibung der Gültigkeit. Trotzdem wird XHTML mit einer DTD auf Gültigkeit geprüft.

XML hat noch einige weitere Eigenschaften die Profis sehr schätzen. Vor allem die verschiedenen Zugriffs- und Manipulation­methoden sind dabei hervorzuheben. Das mag den Anfänger erst einmal nicht interessieren. Es schadet aber auf dem Weg zum Profi nicht, diese Vorzüge in der Hinterhand zu haben.

CSS und JavaScript

Die kommende CSS Version Level 3 ist zwar schon zu großen Teilen spezifiziert, aber noch nicht in allen Web-Browsern vollständig umgesetzt. CSS Vorlagen bedürfen also, genauso wie JavaScript, eine eingehende Prüfung mit den gängigen Browsern. JavaScript 1.5 ist als ECMA-262 Version 3 beim W3C standardisiert. Microsoft nennt die Sprache Jscript.

HTML/xhtml

Zu den Unterschieden zwischen HTML und XHTML siehe den Anhang: xhtml. In diesem Buch verwenden wir immer die XHTML-Schreibweise, da sie alle modernen Browser korrekt darstellen und sie uns leichter Fehler finden lässt.

⇦ World Wide Web / Software ⇨
Nach oben