IPC SE19 Medienpartner 630x250 48558 v1.jpg

SELFHTML ist in diesem Jahr Medienpartner der IPC.

Für die Hauptkonferenz vom 4. – 6. Juni in Berlin verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

Benutzer:MathiasB/HTML CSS und JavaScript

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hinweis

  • Am 16.05.2014 wurden Links an die neue Wiki-Struktur angepasst.
  • Am 02.11.2014 wurden Links auf nicht mehr bestehende / mittlerweile gelöschte Seiten (edit-Status) entfernt.--Matthias Scharwies (Diskussion) 05:59, 4. Nov. 2014 (CET)
  • Am 14.10.2015 wurden die ToDo-Vorlagen in Hinweise umgewandelt.Matthias Scharwies (Diskussion) 16:59, 14. Okt. 2015 (CET)

HTML, CSS und JavaScript[Bearbeiten]

Hinweis

Diese Seite gehört auch zu meinen Experimenten. Siehe meine Benutzerseite. --MathiasB 23:49, 20. Aug. 2010 (CEST)

Überblick[Bearbeiten]

Die folgenden Technologien haben gemeinsam, dass sie vom Browser direkt unterstützt werden. Es werden keine Plugins benötigt. Vereinfacht ausgedrückt:

  • HTML legt fest, was auf der Seite stehen soll.
  • CSS legt fest, wie es dargestellt werden soll.
  • JavaScript legt fest, was passieren soll.

Diese Aufteilung auf drei verschiedene Technologien ist historisch bedingt und sicherlich etwas umständlich, aber es sind eben die Technologien, die die Browser von Haus aus beherrschen.

Hinweis

ToDo: Der folgende Hinweis sollte irgendwo anders hinverschoben werden; weiß aber noch nicht so recht, wohin. --MathiasB 23:40, 9. Okt. 2010 (CEST)

Aus verschiedenen historischen und technischen Gründen ist diese Unterscheidung nicht immer so scharf, wie die obige Aufstellung suggeriert. Diesen Umstand wollen wir aber vorerst nicht weiter beleuchten.

HTML (HyperText Markup Language)[Bearbeiten]

HTML als wichtige Grundlage des World Wide Web[Bearbeiten]

Wir beginnen unsere Reise mit HTML. Vom Web-Gründer Tim Berners-Lee entwickelt, wurde HTML im Zuge des Web-Booms zum erfolgreichsten und verbreitetsten Datenformat der Welt. HTML ist auch heute noch ein wichtiger Bestandteil beim Erstellen von Webseiten, denn jeder Browser, egal ob aktuell oder sehr alt, kann HTML zumindest ansatzweise darstellen. Die Grundlagen von HTML sind zudem sehr einfach zu erlernen.

HTML war gemäß der ursprünglichen Idee eine reine Auszeichnungssprache (Markup Language). Eine solche Auszeichnungssprache hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben. Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen. Um beispielsweise eine Überschrift auszuzeichnen, kennzeichnet man den Anfang und das Ende der Überschrift. Bildhaft gesprochen schreibt man also ins Dokument: "Hier fängt eine Überschrift an", dahinter schreibt man die eigentliche Überschrift, und dahinter wiederum schreibt man "Hier endet die Überschrift". Schematisch dargestellt:

[Überschrift] Text der Überschrift [Ende Überschrift]

Web-Browser, die HTML-Dateien am Bildschirm anzeigen, lösen die Auszeichnungsmarkierungen auf und stellen die Elemente dann in optisch gut erkennbarer Form am Bildschirm dar. So stellen die meisten Browser eine Überschrift fett und in größerer Schrift dar als einen normalen Textabsatz. Dabei ist die Bildschirmdarstellung aber nicht die einzige denkbare Ausgabeform. HTML kann beispielsweise genauso gut mit Hilfe synthetisch erzeugter Stimmen auf Audio-Systemen ausgegeben werden.

Einige Elemente haben wiederum Unterelemente. So enthält ein Textabsatz zum Beispiel eine als betont oder fett markierte Textstelle, eine Aufzählungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen. Dabei werden die Auszeichnungen ineinander verschachtelt.

Hier das Schema, nach dem eine Aufzählungsliste ausgezeichnet wird:

[Liste]

[Listenpunkt] Erster Punkt der Liste [Ende Listenpunkt]

[Listenpunkt] Zweiter Punkt der Liste [Ende Listenpunkt]

[Ende Liste]

Im Browser könnte diese Liste dann etwa so dargestellt werden:

  • Erster Punkt der Liste
  • Zweiter Punkt der Liste

HTML für Hypertext[Bearbeiten]

Eine der wichtigsten Eigenschaften von HTML ist die Möglichkeit, Verweise zu definieren. Verweise ("Hyperlinks") können zu anderen Stellen im eigenen Projekt führen, aber auch zu beliebigen anderen Adressen im World Wide Web und sogar zu Internet-Adressen, die nicht Teil des Web sind (z.B. E-Mail-Adressen - bei einem Klick darauf öffnet sich gewöhnlich das Standard-E-Mail-Programm des Systems).

Durch diese einfache Grundeigenschaft eröffnet HTML völlig neue Welten. Das Bewegen zwischen räumlich weit entfernten Rechnern wird bei modernen grafischen Web-Browsern auf einen Mausklick reduziert. Sie erkennen einen Verweis auf einer HTML-Seite meist daran, dass der Mauspfeil zu einer zeigenden Hand wird. In Ihren eigenen HTML-Dateien können Sie Verweise notieren und dadurch inhaltliche Verknüpfungen zwischen Ihren eigenen Inhalten und denen anderer Anbieter herstellen. Auf dieser Grundidee beruht letztlich das gesamte World Wide Web, und dieser Grundidee verdankt es seinen Namen.

Im Zeitalter der Kommerzialisierung des Internet sind natürlich auch die Verweise zu einem kommerziellen Gegenstand geworden. Anklickbare Werbe-Grafiken ("Banner") auf häufig besuchten Seiten führen zu Anbietern, die für die Platzierung der Banner Miete bezahlen. Auch das sind Verweise. Glücklicherweise gibt es daneben aber weiterhin genügend "herkömmliche" Verweise im WWW, die einfach nur die Grundidee des Web verfolgen und zur weltweiten Vernetzung von Information beitragen wollen.

Außerdem haben Verweise heutzutage auch eine rechtliche Relevanz. Wer Verweise auf fremde Webangebote setzt, nimmt eine gewisse Verantwortung auf sich. Siehe dazu Grundlagen/Rechtsfragen.

Innerhalb der vorliegenden Dokumentation wird HTML ab der Seite Doku:HTML behandelt.

CSS[Bearbeiten]

Formatsprache für HTML-Elemente[Bearbeiten]

Wenn Sie die Textinhalte ihrer Webseite mit HTML strukturiert haben, dann werden die einzelnen Elemente vom Browser einfach untereinander auf dem Bildschirm angeordnet, und zwar in der Reihenfolge, in der sie in der HTML-Datei aufgeschrieben sind.

Die Elemente selbst werden gemäß den Voreinstellungen des Browsers dargestellt; so ist z.B. festgelegt, dass der Hintergrund des Dokuments weiß oder grau darzustellen ist, dass Überschriften in fett und einer Größe von soundsoviel Punkten darzustellen sind.

Die genauen Voreinstellungen des Browsers (die der Anwender zum Teil auch selbst mitbeeinflussen kann) unterscheiden sich von Browser zu Browser, aber allgemein ist das visuelle Ergebnis nicht gerade überwältigend. Als Beispiel eine Webseite, die wir zu Demonstrationszwecken ihrer CSS-Datei beraubt haben:

HTML ohne CSS

An diesem Punkt setzen die Cascading Stylesheets ein. Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit Hilfe von Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 24 Punkt groß sind und mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden. Schematisch würde dies etwa so aussehen:

Überschrift { Schriftgröße: 24 Punkt; Abstand-unten: 16 Punkt; Rahmenfarbe-oben: grün; Rahmenart-oben: doppelt }

Diese und andere Definitionen können Sie aber genauso gut auch für einen beliebigen Text festlegen.

Die nächste Abbildung zeigt, wie die eben gezeigte HTML-Seite mit CSS aussehen soll:

HTML mit CSS
Beachten Sie: Es handelt sich tatsächlich um die gleiche HTML-Datei! Das Aussehen wird hier nur durch eine CSS-Datei verändert.

Die gezeigte Beispielseite stammt übrigens von Jeena Paradies und ist SELFHTML 8.1.2 entnommen. Siehe dazu http://de.selfhtml.org/layouts/nr10/index.htm.

CSS erlaubt es, zentrale Formate zu definieren, beispielsweise für alle Überschriften, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten Text, der innerhalb einer Tabellenzelle vorkommt. Die zentralen Formate können sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden, die Sie dann in allen gewünschten HTML-Dateien einbinden können. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit. In der folgenden Abbildung dient eine einzige CSS-Datei beispielsweise drei HTML-Dateien als Formatvorlage:

Zentrale css datei.png

Die folgende Abbildung zeigt den Zusammenhang zwischen HTML und CSS:

Html und css.png

CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen gleichzeitig zu erlernen. Im HTML-Kapitel der vorliegenden Dokumentation werden Sie bei den Beschreibungen zu einzelnen HTML-Elementen deshalb immer auch auf die Möglichkeiten hingewiesen, wie Sie diese Elemente mit Hilfe von CSS gestalten können.

CSS ist ebenso wie HTML eine Klartextsprache. Auch für CSS brauchen Sie keine bestimmte Software, es genügt ein Texteditor. CSS ist wie HTML eine offen dokumentierte und vom W3-Konsortium standardisierte Sprache, die Sie frei und ohne Lizenzprobleme verwenden können.

JavaScript[Bearbeiten]

Bisher sind wir mit HTML und CSS so weit, dass wir Texte und Bilder auf dem Bildschirm darstellen können. Der Besucher der Seite kann diese Inhalte bisher nur betrachten, aber nicht viel damit machen. Dafür gibt es JavaScript.

Durch JavaScript können Web-Seiten, die mit Hilfe von HTML aus strukturiertem Text bestehen und mit CSS gestaltet sind, ihren reinen "Dokument-Charakter" aufgeben. Tatsächlich handelt es sich um Programme. JavaScript erlaubt es, Mausklicks und Tastatureingaben des Anwenders zu verarbeiten und darauf mit Bildschirmausgaben oder dynamischen Änderungen innerhalb der angezeigten Web-Seite zu reagieren. So lässt sich mit JavaScript beispielsweise ein HTML-Formular zu einem Zinseszinsberechner umfunktionieren. Der Anwender gibt ein paar Werte ein, JavaScript berechnet etwas und gibt das Ergebnis aus.

Damit Programmierer auf dem Rechner des Anwenders keinen Unfug treiben können, ist JavaScript allerdings in seinen Möglichkeiten stark beschränkt. Es ist mit JavaScript beispielsweise nicht möglich, mal eben eine Datei auf dem Rechner des Anwenders auszulesen oder diese gar zu löschen. Die Möglichkeiten von JavaScript sind auf das Umfeld der Webseite eingeschränkt, in die so ein Script eingebettet ist.

Hinweis

Für die Visualisierung von JavaScript bräuchte man einen Film oder ein Animated GIF. --MathiasB 23:49, 20. Aug. 2010 (CEST)