Zum Inhalt

Christian Hartnick - Webseiten gestalten - Inhaltsverzeichnis

Informationen über dieses Buch erhalten sie im Anhang: Dieses Buch

Teil 1 - Anfänger

Kapitel

n.v.

Einführung

Zunächst widmen wir uns in diesem ersten Teil etwas Theorie zum Internet und World Wide Web, um die Begriff zu trennen und den Hintergrund zu verstehen. Ein kurzer Anriss der jeweiligen Geschichte komplettiert diese Kapitel.

Dann bauen wir anhand eines Beispiels langsam eine einfache Version unserer Webpräsenz auf. Zunächst beschränken wir uns dabei auf eine Visitenkarte. Später wird das Beispiel dann immer komplexer und mündet in einer kompletten Webpräsenz. Dabei lernen wir die Techniken zur Webentwicklung wie HTML (Inhalte), CSS (Layout) und JavaScript (Dynamik) kennen.

Internet

Unterkapitel

n.v.

Einführung

Bevor wir uns mit dem World Wide Web beschäftigen, sollten wir uns dem Internet zuwenden.

Da gibt es einen Unterschied?! Ja, denn nur umgamgssprachlich werden die beiden Begriffe nicht unterschieden. Für Profis sind das zwei ganz verschiedene Dinge.

Wir betrachten das Netz an sich und seinen Aufbau. Als Infrastruktur bietet sich das Internet als Plattform für verschiedene Dienste an. Und seine Geschichte lehrt uns, warum das Netz heute so ist wie es ist.

Ein Netz

Internet

Brainstorming:

Was fällt ihnen zum Internet ein? Schreiben sie kurz ihre Gedanken auf einen Zettel.

(Wenn sie den Begriff Brainstorming (http://de.wikipedia.org/wiki/Brainstorming) nicht kennen, schlagen sie ihn zunächst in Wikipedia nach.)

Das Internet „an sich“ ist nicht direkt greifbar und somit auch nicht begreifbar. Wie können wir uns also dem Internet nähern. Fangen wir doch am besten mit einem praktischen Vergleich an.

Zwischennetz

Das Wort Internet besteht aus zwei Teilen: inter und net. Als Deutsche klingt uns das vertraut und wir dürfen wirklich Internetz übersetzen. „Inter“ bedeutet „zwischen“ und ein Netz verbindet Dinge (siehe Telefonnetz).

Machen wir einen kurzen Ausflug in die uns bekannte Welt: Eine Stadt. Eine Stadt hat ein Straßennetz. Auf dem Straßennetz komme ich von Punkt A nach Punkt B. Oder noch besser: Es verbindet Adresse A mit Adresse B. Von oben gesehen sieht so ein Straßennetz (http://de.wikipedia.org/wiki/Straßennetz) wie ein Spinnennetz (http://de.wikipedia.org/wiki/Spinnennetz) aus und so ist es sicherlich auch als Analogie (http://de.wikipedia.org/wiki/Analogie_(Rhetorik)) zu verstehen.

Übung:

Zeichnen sie das Straßennetz ihrer Stadt und der umgebenen Städte in einen Plan.

(Beispiel Straßennetz (images/Strassennetz.svg))

Anhang: Tastaturkommandos

Wenn wir jetzt aber von Stadt zu Stadt oder Bundesland zu Bundesland fahren wollen, sind die Straßennetze der Städte wieder durch ein – vereinfacht gesagt – Überlandstraßennetz verbunden. Dieses Überlandstraßennetz entspricht in unserer Analogie dem Internet: Das Internet verbindet weltweit lokale Netze (LANs (http://de.wikipedia.org/wiki/Local_Area_Network)) von Firmen, Institutionen und heutzutage auch Privatpersonen.

Wie das Straßennetz ist das Internet also eine Infrastruktur (http://de.wikipedia.org/wiki/Infrastruktur) um Dinge zu befördern. Auf Straßen werden Personen und Güter transportiert, das Internet befördert Daten und Informationen. Es ist also dem Telefonnetz vergleichbar, das Faxe und Gespräche weiterleitet.

Wem gehört es?

Wie auch bei anderen Netzen (Straßen und Telefon) gehört das Internet keiner Institution. Bestimmte Firmen betreiben einen Teil des Netzes auf eigene Kosten. Andere Firmen vermieten wiederum ihre Infrastruktur oder binden den Endkunden gegen Gebühr an. Hier gibt es eine gewisse Diskrepanz zwischen Firmen, die mit Internetdiensten großen Profit machen und den Firmen, welche die Infrastruktur betreiben.

Netzneutralität

In diesem Zusammenhang spricht man heute immer mehr über Netzneutralität (http://de.wikipedia.org/wiki/Netzneutralität). Um diesen Begriff besser zu verstehen, folgt ein Beispiel aus dem Telefonnetz: Anbieter von Diensten mit 0190er/0900ter Nummern (Sex-Hotlines, Börsentelefone) können sehr viel Geld verdienen. Die Betreiber der Netze (Telekom, Arcor, …) bekommen aber immer nur einen festen kleinen Betrag.

Das Netz verhält sich aber trotzdem neutral gegenüber dem Dienst, d.h. er wird nicht bevorzugt. Der Netzbetreiber behandelt also diesen Premiumkunden genauso wie beispielsweise eine kostenlose Telefon­seelsorge.

Infrastruktur

Übung:

Zeichnen sie in das bestehende Straßennetz einige wichtige Geschäfte und Dienstleister ein.

(Beispiel Straßennetz mit Geschäfte (images/Strassennetz_mit_geschaefte.svg))

Anhang: Tastaturkommandos

Damit ist aber auch schon eine wichtige Unterscheidung klar geworden: Das Internet ist wie das Telefonnetz eine reine Infrastruktur. Die Dienste, die darauf laufen, sind eigentlich davon klar zu trennen. Umgangssprachlich vermischt sich das aber. So spricht man von der Telefonabzocke, obwohl das Telefon niemand abzockt, sondern höchstens der Diensteanbieter.

Ähnlich ist es mit dem Internet. Umgangssprachlich gebraucht man das Wort für zwei verschiedene Dinge. Einmal tatsächlich für die Infrastruktur, aber andererseits auch für den bekanntesten Dienst: das World Wide Web (WWW)! In diesem Buch meint das Wort „Internet“ allerdings immer die Infrastruktur.

Aufbau

Physischer Aufbau

Wie das Internet physikalisch funktioniert, mag uns an dieser Stelle nicht interessieren, da es für das Entwerfen von Webseiten nicht wichtig ist. Die Wikipedia gibt zur Technik (http://de.wikipedia.org/wiki/Internet#Technik) und den Protokollen (http://de.wikipedia.org/wiki/TCP/IP-Referenzmodell#TCP.2FIP-Referenzmodell) gerne Auskunft.

Der logische Aufbau des Netzes und seine Begriffe sind für uns aber sehr wohl wichtig.

Logischer Aufbau

Kommen wir zu unserem Vergleich mit dem Straßennetz zurück. Im Internet nehmen sie bestimmte Dienste wie das WWW in Anspruch. Genauso machen sie es ja auch in der Realität einer Stadt. Sie wollen beispielsweise ein Medikament in einer Apotheke holen.

Gehen wir davon aus, das sie sich in der Stadt nicht auskennen. Sie besorgen sich zu nächst - beispielsweise in den Gelben Seiten - den Namen einer Apotheke X. Anhand des Namens erfragen oder schlagen sie dann die Adresse nach. Mit der Adresse fahren sie beispielsweise per Taxi zu Apotheke.

Im Internet läuft das im Prinzip genauso. Sie besorgen sich (googeln) den Namen einer Internetapotheke (www.x-apotheke.de). Beim Besorgen der Adresse haben sie es im Internet einfacher. Das macht ein weiterer Dienst für sie, der Domain Name Service (http://de.wikipedia.org/wiki/Domain_Name_Service) (DNS, s. Anhang: Fachbegriffe). Auch die Fahrt mit dem Taxi bleibt ihnen erspart, da sie ja mit dem Browser ein dauerhaftes, preiswertes Transportmittel besitzen.

Tabelle: Vergleich Realität und Internet 1
BegriffRealitätInternet
Medium:StraßennetzInternet
Name:Apotheke Xwww.x-apotheke.de
Auskunft:Gelbe SeitenDNS
Adresse:Hauptstraße 1123.45.67.89
Dienst:LadenWWW

Das Internet kennt also auch die Unterscheidung von Namen und Adressen, wie im realen Leben. Diese sind übrigens - wie im wirklichen Leben - unabhängig vom verwendeten Dienst. Dass heißt, eine Adresse kann ein Dienst wie WWW und/oder Email bereitstellen.

Begriffe

Unter einer Adresse 123.45.67.89 kann sich sowohl eine Apotheke als auch ein Schuster befinden. Dann unterscheidet beide der Name – auch wie im richtigen Leben. Die Portnummer :80 (s.u.) kennzeichet eine WWW-Seite (Realität: Ladengeschäft) und kann normalerweise weggelassen werden. Andere Portnummern (http://de.wikipedia.org/wiki/Portnummer) sind für andere Dienste wie Post ausliefern (SMTP: 587) und Postfächer (POP3: 110) bestimmt.

Tabelle: Vergleich Realität und Internet 2
BegriffRealitätInternet
Adresse:Hauptstraße 1123.45.67.89
Namen:

und
weitere
Adressen:
Apotheke X Schuster
Briefkasten
(Nebenstr. 2)
Postamt
(Anderestr. 3)
www.x-apotheke.de:80 www.lederschuster.de:80
smtp.provider.de:587
(12.34.56.78)
pop.provider.de:110
(98.76.54.32)
Dienst:Laden/KastenWeb-Dienst
Anfahrt:z.B. TaxiProgramm
(Webbrowser/Mail-Client)

Wie sie sehen kann ein Name auch mehrere Adressen haben. Gerade bei stark frequentierten Diensten wie Google ist das oft der Fall.

Nomenklatur

Für den Begriff der Webseite existieren leider sehr viele Synonyme (http://de.wikipedia.org/wiki/Synonym). Man spricht auch von Homepage, Website, Portal und Webpräsenz. Alle diese Begriffe habe ihre eigenen Ausprägungen, aber je nach Autor können diese variieren.

Dieses Buch verwendet durchgängig Webseite für ein einzelnes HTML-Dokument und Webpräsenz für den gesamten Internetauftritt.

Dienste

Client/Server

Dienste sind Leistungen die ihnen jemand anbietet. In der Informatik spricht man in diesem Fall von Server (http://de.wikipedia.org/wiki/Server_(Software)) und Client (http://de.wikipedia.org/wiki/Client). Der Server bietet dem Client bestimmte Dienste an. Das können pro Server durchaus mehrere sein.

Achtung! In der Informatik kann ein Server und ein Client durchaus sowohl Hardware (http://de.wikipedia.org/wiki/Hardware) als auch Software (http://de.wikipedia.org/wiki/Software) sein. Wobei zur endgültigen Verwirrung sowohl auf einem Server (Hardware) auch ein Client (Software) und auf einem Client (Hardware) auch ein Server (Software) laufen kann (und heutzutage fast auch immer tut).

Dienste

Dienste werden also immer von einem (Software-)Server angeboten. Ein Software-Client stellt diesen Dienst dann dem Benutzer komfortabel zur Verfügung. Ein Protokoll (http://de.wikipedia.org/wiki/Protokoll) sorgt dabei dafür, das sich Client und Server verstehen.

Brainstorming:

Welche Dienste kennen sie im Internet? Schreiben sie kurz ihre Gedanken auf einen Zettel.

(Internetdienste (http://de.wikipedia.org/wiki/Internetdienste))

Wir identifizieren die Internetdienste (http://de.wikipedia.org/wiki/Internetdienste) am einfachsten an den Client-Programmen: Outlook/Thunderbird (Mail-Client), Skype (Telefonie-Client), Whatsapp (Chat-Client), Internet Explorer/Firefox (Web-Client oder Webbrowser) usw.

Einige weitere Dienste als Beispiele:

Alte Dienste
Diese Dienste sind der breiten Öffentlichkeit nur als Spielarten des WWW bekannt.
Gopher (http://de.wikipedia.org/wiki/Gopher)
ein entfernter Vorläufer des WWW
Usenet (http://de.wikipedia.org/wiki/Usenet)
Diskussionsgruppen
Das Usenet ist beispielsweise mittels Google durchsuchbar (groups.google.com (http://groups.google.com)).
IRC (http://de.wikipedia.org/wiki/Internet_Relay_Chat)
Chat, Unterhaltung durch Texteingabe
Profidienste
Der Web-Profi kommt um bestimmte Dienste nicht herum.
Telnet (http://de.wikipedia.org/wiki/Telnet), SSH (http://de.wikipedia.org/wiki/Ssh)
(sicherer) Zugriff auf einen entfernten Rechner
FTP (http://de.wikipedia.org/wiki/File_Transfer_Protocol), SFTP (http://de.wikipedia.org/wiki/SSH_File_Transfer_Protocol)
(sicherer) Dateitransfer mit einen entfernten Rechner
Neuere Dienste
Sie haben das Internet auch bei nicht Technikern bekannt und beliebt gemacht.
E-Mail (http://de.wikipedia.org/wiki/E-mail)
Email senden und empfangen
World Wide Web (http://de.wikipedia.org/wiki/Www)
Web-Seiten anzeigen und Web-Anwendungen benutzen
Internettelefonie (http://de.wikipedia.org/wiki/Voip)
Telefonieren über das Internet

Da dieses Buch Webseiten gestalten will, ist für uns natürlich vor allem das WWW interessant.

Geschichte

Das Internet ist erst Ende der neunziger Jahre des zwanzigsten Jahrhunderts in das Bewusstsein der Menschen gerückt. Es ist allerdings schon erstaunlich viel älter. Die Anfänge reichen fast bis zu den Wurzeln der modernen Informationstechnologie (IT) zurück.

Wurzeln

Auch wenn das heutzutage immer wieder gerne verneint wird, liegt zumindest die Wurzel des Internets im militärischen Bereich. In den sechziger Jahren, zur Zeit des Kalten Krieges, entwickelten die Forscher der US-Militärs die Idee eines verteilten paketbasierten Datennetzes, welches dann später die Advanced Research Projects Agency (ARPA (http://de.wikipedia.org/wiki/DARPA)) umgesetzt hat.

Der Vorteil des ARPA-Netzes waren eben diese Attribute „verteilt“ und „paketbasiert (http://de.wikipedia.org/wiki/Paketvermittlung)“. „Verteilt“ meint, das es keine zentrale (also angreifbare) Instanz gibt und „paketbasiert“, das die Daten als kleine Paket individuell verschickt und registriert werden. Pakete die nicht angekommen sind, können so noch einmal angefordert werden.

Übung:

Zerlegen sie eine Nachricht in Pakete (numerierte Zettel) und schicken sie sie über verschiedene Stationen (Kursmitglieder) an einen Empfänger.

Was passiert, …

  • wenn eine weiterreichende Person ausfällt?
  • ein Paket nicht ankommt?

(Vereinfachtes Beispielpaket (images//beispiel_paket.txt))

Anhang: Tastaturkommandos

Fortentwicklung

Weil sich dieses Netz als sehr robust erwies, haben die amerikanischen Universitäten schnell daran gefallen gefunden. Als offene Architektur konnten sie das ARPA-NET einfach an ihre Bedürfnisse anpassen und weiterentwickeln. Daraus entstand das TCP/IP-Protokoll, wie es auch heute noch im Internet verwendet wird. Als offener und einheitlicher Standard sorgte dieses Protokoll für den relativ schnellen Siegeszug des Internet auf der ganzen Welt.

Doch zunächst war das Internet als Infrastruktur noch sehr nackt. Als Dienste gab es vor allem den Zugriff auf Uni-Server und die Synchronisierung dieser. Die Studenten der Unis entdeckten allerdings schnell die weiteren Möglichkeiten. Sie schufen Blackboards (Nachrichtenbretter) und das Usenet (Diskussionsforen).

Verbreitung

In den USA, Europa und anderen Teilen der Welt arbeitete man zu dieser Zeit an eigenen Standards und Netzen. Große Firmen wie AOL, CompuServe und die Deutsche Post schufen eigene Datennetze. Doch der Einfluss der USA auf die IT sowie der offene Standard TCP/IP brachten das Internet auch in diesen Ländern voran.

In den USA war das militärisch und das zivile Netz mittlerweile entkoppelt. Für das zivile Backbone (Rückgrat) des Netzes setzte sich der Name Internet durch. Zuletzt bliebt dieses Internet als alleiniges weltweites Datennetz bestehen.

Struktur des ArpaNet 1977
ArpaNet 1977,
Quelle: Wikimedia (http://www.wikimedia.org),
Lizenz: CC-BY-SA (http://creativecommons.org/licenses/by-sa/2.0/)

World Wide Web

Unterkapitel

n.v.

Einführung

Der Dienst WWW (World Wide Web) bestand ursprünglich nur aus dem Transferprotokoll HTTP (http://de.wikipedia.org/wiki/HTTP) und der Hypertextsprache HTML (http://de.wikipedia.org/wiki/Html). Dafür hat sich auch der Begriff Webseiten eingebürgert. Heute sind die Vorlagensprache CSS (http://de.wikipedia.org/wiki/Cascading_Style_Sheets) und die Programmier­sprache JavaScript (http://de.wikipedia.org/wiki/JavaScript) dazu gekommen. Auf diese Teile gehen wir im weiteren Kursverlauf noch ausführlich ein.

Wir betrachten außerdem in einem Überblick die Software für die Webseitenentwicklung und erfahren wie wir zu relevanten Informationen kommen. Auch beim WWW ist seine Geschichte durchaus für uns interessant.

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 (images/beispiel_katalog.txt))

„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 (images/beispiel_setzen.txt))

Anhang: Tastaturkommandos

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

Genauso funktioniert auch eine Auszeichnung in HTML. Ein bestimmtes Tag (http://de.wikipedia.org/wiki/Tag_%28Informatik%29) (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 (http://de.wikipedia.org/wiki/http://de.wikipedia.org/wiki/Formatvorlage))

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 (http://de.wikipedia.org/wiki/Programmierung))

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 (http://de.wikipedia.org/wiki/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 (http://de.wikipedia.org/wiki/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 (http://de.wikipedia.org/wiki/SGML) (Standard Generalized Markup Language, Normierte Verallgemeinerte Auszeichnungs­sprache). Der richtige Sprachgebrauch lautet: HTML ist eine Anwendung von SGML. SGML verwendet eine sogenannte DTD (http://de.wikipedia.org/wiki/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 (http://de.wikipedia.org/wiki/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 (http://de.wikipedia.org/wiki/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.

Software

Lokale Programme

Als Klartextformat bedarf das Schreiben von Webseiten normalerweise keiner speziellen Software. Trotzdem kann eine Software so manche spezielle Aufgabe vereinfachen. Da es nicht „die“ Software zur Web-Entwicklung gibt und sicherlich auch nie geben wird, folgt eine kurze, unvollständige Übersicht.

Webbrowser

Damit ihre Webseiten auf möglichst vielen Webbrowsern funktionieren, sollten sie sie entsprechend testen. Eine Mindestauswahl ist: Firefox (Rendering-Engine (http://de.wikipedia.org/wiki/HTML-Rendering): Gecko), Internet Explorer (Trident/Tasman), Google Chrome (WebKit) und Lynx auf zwei verschiedenen Betriebssystemen.

Tabelle: Übersicht Webbrowser
WebbrowserEnginePlattformen
FirefoxGeckoAndroid, Linux, Mac, Windows
Internet ExplorereigeneMac, Windows
OperawebkitAndroid, Linux, Mac, Windows, weitere
SafariwebkitMac
Chrom(e/ium)webkitAndroid, Linux, Mac, Windows, weitere
Lynx, LinkseigeneTextbrowser

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#Browser) und bei Wikipedia (http://de.wikipedia.org/wiki/Liste_von_Webbrowsern).

Für den Mozilla Firefox (und Google Chrome) existieren einige interessante Erweiterungen für Webentwickler. Allerdings sind diverse dieser Erweiterungen in den neusten Versionen von Firefox schon enthalten.

Tabelle: Übersicht Firefox-Addons
Firefox-AddonBeschreibung
Web DeveloperWerkzeugleiste für Webentwickler (enthalten)
FirebugHTML-Seiten analysieren und Fehler suchen (debuggen) (enthalten)
FireFTPDatei per FTP auf Webserver übertragen
NoScriptJavaScript pro Site ein-/ausschalten

Weitere bei Firefox Addons (http://addons.mozilla.org/de/firefox/).

HTML-Editoren

Bei den HTML-Editoren unterscheidet man textorientierte und WYSIWYG (http://de.wikipedia.org/wiki/WYSIWYG)-Editoren (What you see is what you get). Textorientierte Editoren helfen dem Entwickler meist mit Grundgerüsten und Vorlagen für gängige HTML-Tags. Oft haben sie auch eine integrierte Vorschau­funktion und eine rudimentäre Projektverwaltung. WYSIWYG-Editoren arbeiten im Grunde genommen wie eine Textverarbeitung. Man erstellt eine Webseite so, wie sie nachher aussehen soll.

Tabelle: Übersicht HTML-Editoren
HTML-EditorBeschreibung
DreamweaverTeurer WYSIWYG-HTML-Editor von Adobe
NVU/KompozerFreier WYSIWYG-HTML-Editor von Mozilla (s. Firefox)
AmayaFreier WYSIWYG-HTML-Editor vom W3C )
HagenFreier, textorientierter HTML-Generator
BlueFishFreier, textorientierter HTML-Editor

Weitere bei selfhtml (http://aktuell.de.selfhtml.org/links/html-editoren.htm) und bei Wikipedia (http://de.wikipedia.org/wiki/Liste_von_HTML-Editoren).

Wenn sie einen WYSIWYG-Editor ausprobieren möchten, sollten sie erste Erfahrungen mit den freien Editoren NVU oder Kompozer sammeln.

Webserver

Es würde den Rahmen dieses Buches sprengen auf Webserver genauer einzugehen. Ein guter Einstiegspunkt für Informationen zu diesem Thema sind selfhtml und die Wikipedia (siehe Tabelle).

Tabelle: Übersicht Webserver
HTML-EditorBeschreibung
ApacheDefacto-Standard Webserver
LighttpdKleiner, schneller Webserver
Internet Information ServicesStandardwebserver unter Windows

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#Webserver) und bei Wikipedia (http://de.wikipedia.org/wiki/Webserver).

FTP-Clients

Tabelle: Übersicht FTP-Clients
FTP-ClientBeschreibung
ftpKommandozeilenprogramm für Linux und Windows
FireFTPErweiterung für Firefox
FilezillaFreier FTP-Client

Heutzutage können auch viele Dateibrowser (MS Explorer, Nautilus, Dolphin, Finder, …) bei Angabe des Dienstes (ftp://name:password@server.local) auf FTP-Server zugreifen.

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#FTP) und bei Wikipedia (http://de.wikipedia.org/wiki/Kategorie:FTP-Client).

Grafikprogramme und Multimedia

Tabelle: Übersicht Grafikprogramme
GrafikprogrammBeschreibung
The GimpFreies Grafikprogramm für Linux und Windows
PintaFreies Grafikprogramm für Linux und Windows
XNViewGrafikbetrachter und -manipulator
IrfanViewGrafikbetrachter und -manipulator

Weitere bei selfhtml (http://wiki.selfhtml.org/wiki/Grundlagen/Hilfsmittel/Software#Multimedia) und bei Wikipedia (http://de.wikipedia.org/wiki/Grafiksoftware).

Portable Apps

Portable Apps (http://portableapps.com/de) sind Anwendungen, die auf einem USB-Stick installiert werden. D.h. sie können auf beliebigen (Windows) Rechnern von dem Stick gestartet werden. Für uns nützliche Apps sind:

und vielleicht

Für fortgeschrittene Webanwendungen kann man außerdem einen Webserver wie Server2Go (http://server2go-web.de/) auf dem Stick installieren.

Infos nachschlagen

SelfHTML

Eine komplette Referenz aller Informationen zur Webseitengestaltung finden sie unter: wiki.selfhtml.org (http://wiki.selfhtml.org/wiki/%%0%%) (veraltet, aber noch umfangreicher: de.selfhtml.org (http://de.selfhtml.org/%%0%%)). Ich werde mich in diesem Buch immer wieder auf Selfhtml beziehen, da ich der Meinung bin, dass man das Rad (HTML-Referenz) nicht ständig neu erfinden muss.

Alle neuen Tags bekommen auch eine Linksammlung auf diese Seiten in Klammern hinzugestellt: <p>. „S“ steht für die Referenz für das Tag in SelfHTML, „A“ für die Attribute des Tags und „W“ für das Tag im SelfHTML-WIKI. Da diese Referenz automatisch erstellt wird, muss sie nicht immer vollständig sein oder kann sogar ganz fehlen.

Entsprechendes gilt für CSS-Eigenschaften color: „W“ für die Eigenschaft im SelfHTML-WIKI und „C“ für die Eigenschaft im CSS-WIKI.

Kurzreferenzen zum schnellen Nachschlagen finden sie auch im Anhang.

Übung:

Surfen sie die Seiten selfhtml Wiki (http://wiki.selfhtml.org/wiki/%%0%%) und selfhtml (http://de.selfhtml.org/%%0%%) an und machen sie sich mit ihnen vertraut.

Anhang: Tastaturkommandos

Andere Seiten

Weitere Seiten:

Außerdem finden sie in den Buchhandlungen viele Referenzbücher, die allerdings sehr schnell veralten. Deshalb kann ich an dieser Stelle keine Empfehlung abgeben. Für sehr Papieraffine ist allerdings eine beliebige Referenz sicherlich nicht verkehrt.

Ein Blick ins Netz ist für neuste Informationen immer nötig. Zu schnell ändern sich heutzutage die Browserversionen und damit die Unterstützung von neuen Features.

Geschichte

Wissenschaft

Die Geschichte des World Wide Web (WWW) wäre ohne das Internet nicht denkbar. Sie beruht auf den universitären Wurzeln des Netzes. In Publikationen sind die Verweise auf andere Publikationen für Forscher sehr wichtig.

So war es ein logischer Schritt, das Internet dazu zu nutzen. Erstaunlicherweise kommt gerade heute wieder die Diskussion auf, wissenschaftliche Artikel wieder frei im Netz zu veröffentlichen ( Artikel dazu (http://www.heise.de/ct/artikel/Offene-Wissenschaft-289060.html)).

HTML: Tim Berners-Lee

Tim Berner-Lee 2009
Tim Berner-Lee 2009,
Quelle: Wikimedia (http://www.wikimedia.org),
Lizenz: CC-BY-SA (http://creativecommons.org/licenses/by-sa/2.0/)

In den achtziger Jahren entwickelte der Informatiker Tim Berner-Lee am Genfer Forschungszentrum für Teilchenphysik (CERN) den Urahn des heutigen Dienstes WWW. Es war ein Pascal (http://de.wikipedia.org/wiki/Pascal_%28Programmiersprache%29)-Programm welches er Enquire (sich erkundigen) nannte.

Wie damals üblich war das Programm eine rein textbasierte Anwendungen mit der man ein wissenschaftliches Journal (Adressen, Gesprächsnotizen, Ideen, Erlebnisse, Arbeitsergebnisse und so weiter) verwalten konnte. Die Besonderheit des Programms war seine Hypertextfähigkeit.

Mit Hypertext bezeichnet man die Möglichkeit Dinge in einem Text miteinander zu verknüpfen oder zu verweisen. So kann man die Linearität eines Textes durchbrechen. Ein Buch ist immer Linear. Das ist aber nicht unbedingt das, was der Leser sich wünscht.

Oft braucht er zu einer Information eine andere, die sich aber ganz woanders im Buch findet. Der Autor kann ihm mit einem Verweis auf eine Seite oder ein Kapitel helfen. Suchen muss der der Leser selbst. Im Hypertext kann er den Verweis direkt folgen.

Nach Anregung eines Kollegen entwickelte Tim Berner-Lee diese Idee fürs Internet weiter und fand den Namen World Wide Web (WWW). Es dauerte dann allerdings noch eine Weile bis sich das Konzept immer mehr durchsetzte und das CERN verließ. Erst als einige unabhängige Programmierer Browser (Anzeigeprogramme) für das WWW schrieben, kam die Sache langsam ins Rollen. Die erste Website war übrigens 1990 unter der Adresse info.cern.ch (http://info.cern.ch) erreichbar.

Webbrowser: Marc Andreessen

Marc_Andreessen, 2013
Marc Andreessen 2013,
Quelle: Wikimedia (http://www.wikimedia.org),
Lizenz: CC-BY-SA (http://creativecommons.org/licenses/by-sa/2.0/)

Marc Andreessen war einer dieser Programmierer, der einen Browser für das WWW schrieb: den Mosaic. Anders als die meisten anderen dachte er dabei durchaus kommerziell. Er erweiterte den Browser mit neuen Features – sehr zum Ärger von Berner-Lee – und machte damit das Web populär.

Um wirklich Geld zu verdienen, schied Andreessen bald aus dem Mosaic-Projekt aus und gründete die Firma Netscape. Mitte der Neunziger hatte der Netscape Communicator schon einen Marktanteil von etwa 90%.

Microsoft verschlief zunächst die Entwicklung des Internet; es wollte seine eigene Technologie (MSN) durchsetzen. Erst als dies scheiterte, entwickelte man mit Hochdruck einen eigenen Browser, den man mit seinem Betriebssystem­monopol am Markt durchdrückte. Der Kampf um die Marktanteile mit Netscape wurde mit immer neuen, zum Teil inkompatiblen, Features ausgetragen. Zum Schluss wurde es eine Kunst Webseiten für beide System zu entwickeln.

Da diese Entwicklung sehr schnell sichtbar wurde, wurde mit dem W3-Konsortium (W3C) bald ein Standardisierungskomitee gegründet. Es hat bis heute viele Standards für das Internet und insbesondere das WWW (HTML 4.01 und XHTML 1.1) geschaffen. Leider halten sich die Browser auch in ihren neusten Versionen (Stand Anfang 2014) nicht 100% daran.

Inhalte

Unterkapitel

n.v.

Einführung

Zunächst widmen wir uns dem HTML-Teil einer Webseite - also den Inhalten. Wie schon beschrieben, trennen moderne Webpräsenzen in Inhalt (HTML) und Layout (CSS). Aber auch historisch gesehen kommt HTML zuerst. Außerdem wollen wir zu Anfang ja auch einige schnelle Erfolge (für die Motivation :-).

Ich gehe davon aus, das sie mit einem Dateibrowser (Windows Explorer), einem Webbrowser (Internet Explorer oder besser Firefox) und einem Texteditor (Notepad) umgehen können. Für unsere ersten Gehversuche benutzen wir den Text-Editor „Notepad2“ oder „Notepad++“ und den Browser „Firefox“. Diese Programme sollten auf ihrem Rechner installiert sein.

Beide Programme bekommen sie auch als portable Versionen für den USB-Stick. Laden (http://portableapps.com/de/download) sie dazu die „Portable Apps“ herunter und installieren sie sie auf einem schnellen USB-Stick (http://de.wikipedia.org/wiki/USB-Speicherstick).

Unter Mac OS und Linux können sie die normalen Standard-Editoren verwenden.

Vorbereitung

Vorbereitungen

Richten sie sich ihren USB-Stick ein oder legen sie sich ein Verzeichnis für ihre Übungsdateien an. Sollten sie PortableApps verwenden, findet sich auf dem Stick ein Verzeichnis „documents“. Wenn nicht legen sie es an. In diesem Verzeichnis sollten sie ihre Dateien ablegen.

Anmerkung: Wenn sie mit den PortableApps arbeiten, achten sie darauf, auch wirklich alle Programme von dort zu starten. Wenn sie ein Programm gestartet haben, zieht sich PortableApps in das Benachrichtigungsfeld (http://de.wikipedia.org/wiki/Benachrichtigungsfeld) (Systemtray) zurück. Öffnen Sie Dateien auch nicht mit Doppelklick, da sonst die lokal installierten Programme benutzt werden.

Arbeitsweise

Um Webseiten zu erstellen, sollten sie sich einen gewissen Arbeitsablauf aneignen.

Öffnen sie Firefox und den Editor (Notepad2 oder Notepad++). Klicken sie dann rechts auf die Taskleiste und wählen „Fenster nebeneinander anzeigen“. Sollten weitere Fenster erscheinen, schließen sie diese und wiederholen sie die Prozedur. Wenn sie jetzt in beiden Programmen die selbe Datei öffnen, können sie diese im Editor bearbeiten und speichern Strg + S. Danach drücken sie im Firefox F5, um die Änderungen sofort zu sehen.

Achtung: Kopieren sie die bestehende Datei immer vor jedem neuen Beispiel, damit sie alle Versionen ihrer Arbeit aufheben können. Entsprechend sind auch alle Beispieldateien durchnumeriert.

Um effektiv und schnell arbeiten zu können, beachten sie bitte den Anhang: Tastaturkommandos.

Zeichenkodierung

Ein Zeichensatz (http://de.wikipedia.org/wiki/Zeichensatz) teilt einem Betriebssystem oder einem Programm mit, wie die Zeichen (Buchstaben, Zahlen, …) intern zu codieren (darzustellen) sind. Noch vor einiger Zeit hatte jedes System seinen eigenen Zeichensatz (ASCII, ANSI, EBCDIC, …). Heute existiert zum Glück UTF-8 über (fast) alle Systemgrenzen hinweg.

Achten sie in ihrem Texteditor also auf die (Zeichen-)Kodierung UTF-8.

Lesen sie außerdem in der Wikipedia über Textdateien (http://de.wikipedia.org/wiki/Textdatei) nach.

Visitenkarte

Aller Anfang …

Der einfachste Fall einer Webpräsenz ist eine Visitenkarte.

Brainstorming:

Was gehört auf eine Visitenkarte? Schreiben sie kurz ihre Gedanken auf einen Zettel.

(Beispiel Visitenkarte (images/brainstorming_visitenkarte.txt))

Wir setzten nun das Ergebnis des Brainstormings in die Praxis um. Dabei verfeinern wir die Ergebnisse suksessive.

Anmerkung: Lesen sie in der Wikipedia nach, was QR-Codes (http://de.wikipedia.org/wiki/QR-Code) sind. Zum Erzeugen können sie einen Generator (http://qr-code-generator.de) verwenden. Allerdings muss ich sie leider noch ein bisschen vertrösten, bis wir eine Grafik (wie einen QR-Code oder ein Passfoto) in unsere Webseite einbauen können, dauert es noch ein wenig.

Visitenkarte als Text

Übung:

Öffnen sie den Editor und schreiben sie jetzt ihre Visitenkarte. Speichern sie den Text unter dem Dateinamen „visitenkarte.txt“ in ihren Arbeitsordner. Öffnen sie Ihren Webbrowser und laden sie die Datei „visitenkarte.txt“.

(Beispiel 01_visitenkarte.txt (beispiele/03a/01_visitenkarte.txt))

Anhang: Tastaturkommandos

Sie haben gerade ihre erste Webseite geschrieben, die in etwa wie im Beispiel 1 aussehen sollte. Ich gebe zu, hier habe ich ein wenig gemogelt. Denn HTML-Seiten sollten auch die Endung .html haben. Nichtsdestotrotz können sie diese Seite auf einen Webserver legen und im Internet abrufen.

Umlaute?

Computer kodieren Umlaute durch Zahlen in einem Zeichensatz (http://de.wikipedia.org/wiki/Zeichensatz). Dafür existieren verschiedene Zeichensatzsysteme. Am Anfang werden die Umlaute deshalb noch falsch dargestellt. Dazu später mehr.

UTF-8!

Wenn sie die Zeichenkodierung im Browser unter „Ansicht / Zeichenkodierung“ auf „Unicode“ (UTF-8) stellen, sollten die Umlaute richtig dargestellt werden.

Visitenkarte als HTML

Übung:

Speichern sie die Datei visitenkarte.txt unter dem neuen Namen visitenkarte.html. Alternativ können sie sie auch kopieren und umbenennen. Öffnen sie die Datei dann mit ihrem Webbrowser.

(Beispiel 02_visitenkarte_txt.html (beispiele/03a/02_visitenkarte_txt.html))

Anhang: Tastaturkommandos

Sind sie nun enttäuscht? Diese Ausgabe hatten sie wohl nicht erwartet. Doch wie kommt diese zustande? Scheinbar hat der Webbrowser jegliche Formatierung (Zeilenumbrüche) übergangen und hat den Text an einem Stück ausgegeben.

Whitespaces

Generell kann man sagen, dass ein Webbrowser alle sogenannten Leerräume oder White­spaces (http://de.wikipedia.org/wiki/Leerraum) (Tabulatoren, Zeilen­umbrüche und mehr als ein Leerzeichen) überliest und deshalb nicht ausgibt.

Anmerkung: Warum er das tut, lernen wir im Unterkapitel über die Formatierung von Quellcode.

Absätze

Denken sie an den Redakteur und den Setzer. Woher weiß der Setzer, ob ein bestimmter Textabschnitt zusammengehört und nicht auf die nächste Spalte oder Seite umgebrochen werden soll? Er braucht eine logische Formatierung: den Absatz. Dieser ist also ein logisch zusammen­gehöriger Textabschnitt.

In einer Textverarbeitung erzeugen sie einen Absatz mit Enter. Wenn sie die Steuerzeichen eingeblendet haben, erscheint an dieser Stelle ein Pi-Zeichen (¶). Auf jeden Fall behandelt die Textverarbeitung den Absatz als logische Einheit, auf die Formatierungen angewendet werden können (Absatzformate).

Da ein Texteditor (http://de.wikipedia.org/wiki/Textdatei) eine solche logische Formatierung nicht kennt, simuliert man ihn normalerweise durch zweimaliges Enter drücken. Man erhält so eine Leerzeile zwischen den Absätzen; die logische Formatierung wird durch eine sichtbare ersetzt. Das Drücken der Taste Enter bewirkt das Einfügen eines unsichtbaren Zeichens (ASCII/Unicode: 13) in Mac OS, (ASCII/Unicode: 10) in Unix oder der Zeichenkombination (ASCII/Unicode: 13,10) in DOS/Windows.

Anmerkung: Die Zeichencodes 10 und 13 nennt man auch Linefeed (http://de.wikipedia.org/wiki/Linefeed) (Zeilenvorschub) und Carriage return (http://de.wikipedia.org/wiki/Carriage return) (Wagenrücklauf).

Speicherauszug

Im folgenden sehen wir die Datei 01_visitenkarte.txt (Windows-codiert) als Speicherauszug (http://de.wikipedia.org/wiki/Speicherauszug) (sogenannter Hex-Dump). Hervorgehoben sind die Speicherzellen 013 010 (CR LF) für einen Zeilenumbruch und 013 010 013 10 (CR LF CR LF) für einen Absatz.

0000: 067 104 114 105 115 116 105 097 Christia
0008: 110 032 072 097 114 116 110 105 n Hartni
0010: 099 107 013 010 068 105 112 108 ck←↓Dipl
0018: 046 045 087 105 114 116 115 099 .-Wirtsc
0020: 104 046 045 073 110 102 046 013 h.-Inf.←
0028: 010 070 114 101 105 101 114 032 ↓Freier
0030: 066 101 114 097 116 101 114 013 Berater←
0038: 010 013 010 083 097 110 100 119 ↓←↓Sandw
0040: 101 103 032 049 048 013 010 049 eg 10←↓1
0048: 054 055 050 055 032 079 098 101 6727 Obe
0050: 114 107 114 195 164 109 101 114 rkrä_mer
0058: 032 079 084 032 066 195 164 114 OT Bä_r
0060: 101 110 107 108 097 117 013 010 enklau←↓
0068: 013 010 084 101 108 046 058 032 ←↓Tel.:
0070: 048 051 051 048 052 032 053 048 03304 50
0078: 056 049 054 050 048 013 010 070 81620←↓F
0080: 097 120 058 032 032 048 051 051 ax: 033
0088: 048 052 032 053 048 056 049 054 04 50816
0090: 050 049 013 010 077 111 098 105 21←↓Mobi
0098: 108 058 032 048 049 055 057 032 l: 0179
00A0: 050 049 048 050 051 053 052 013 2102354←
00A8: 010 013 010 104 105 108 102 101 ↓←↓hilfe
00B0: 064 104 097 114 116 110 105 099 @hartnic
00B8: 107 046 100 101 013 010 104 116 k.de←↓ht
00C0: 116 112 058 047 047 104 105 108 tp://hil
00C8: 102 101 046 104 097 114 116 110 fe.hartn
00D0: 105 099 107 046 100 101 013 010 ick.de←↓

Sie sehen also, dass auch in einer reinen Textdatei Umbrüche und Absätze über spezielle Steuerzeichen erstellt werden.

Zusammenfassung

Absatz und Umbrüche

Absatz

Denken sie an unser Beispiel mit dem Redakteur und dem Setzer. Damit auch der Webbrowser (Setzer) die logische Formatierung eines Absatzes in eine sichtbare umsetzt, müssen wir diese Formatierung entsprechend mit einem Tag (sprich Tägg) <p> (paragraph - Absatz) kenn­zeichnen.

Die Kennzeichnung eines Textabschnittes mit einem Tag geschieht immer durch Umschließung. Um einen Absatz zu taggen schreiben wir zunächst den Starttag <p>, dann folgt der Text des Absatzes und zuletzt kommt der Endtag </p>:

<p>Hier steht der Absatz.</p>

oder übersichtlicher:

<p>
  Hier steht der Absatz.
</p>

Da wir uns hier zum ersten mal mit einem Tag beschäftigen, schauen wir kurz auf die Informationen, die uns Selfhtml bietet: <p> (klicken sie dazu auf →w).

Zunächst unterscheidet Selfhtml verschiedene HTML-Versionen. Wie schon gesagt, interessiert uns zunächst nur „XHTML 1 Strict“. Folgen wir diesem Link, bekommen wir Infos zu Bedeutung des Tags, Start-/Endetag, Elternelemente (darf vorkommen in) und Kindelemente (darf beinhalten). Zu den Attributen kommen wir später.

Anmerkung: PCData ist (einfach gesagt) nur Text.

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen. Fügen sie dann die Tags <p> und </p> in ihre Datei so ein, das sie ihre logischen Absätze umschließen.

(Beispiel 03_visitenkarte_p.html (beispiele/03a/03_visitenkarte_p.html))

Anhang: Tastaturkommandos

Anmerkung: Schauen sie in den Tastatur­kommandos nach, wie sie sich den Quelltext des Beispiels anzeigen können.

Wenn sie wirklich nur (echte logische) Absätze mit <p></p> umschlossen haben, sollte ihre Webseite jetzt wie im Beispiel 3 erscheinen.

Zeilenumbruch

Innerhalb eines Absatzes kann es nötig sein, die Zeile umzubrechen und am Anfang fortzusetzen. Das nennt man dann entsprechend Zeilen­umbruch. Der augen­schein­lichste Unterschied zwischen Absatz und Zeilenumbruch ist, das ein Zeilenumbruch ein leeres Tag ist, also nichts umschließt. Er soll ja nur anzeigen, dass hier (also dort wo er steht) die Zeile umgebrochen wird.

In einer Textverarbeitung erzeugen sie einen Zeilenumbruch mit Umschalt + Enter. Wenn sie die Steuerzeichen eingeblendet haben, erscheint an dieser Stelle meist ein geknickter Pfeil nach links (↵). Da ein Texteditor eine solche Formatierung nicht kennt, simuliert man ihn normalerweise durch einmaliges Enter drücken.

Innerhalb eines Absatzes existiert in HTML für einen solchen Zeilenumbruch das Tag <br> (break - Umbruch). Außerhalb von <p> ist <br /> nicht erlaubt!

<p>
  Hier steht der Absatz mit Zeilenumbruch.<br />
  Hier geht der Absatz weiter.
</p>

Achtung: In XHTML (s. Anhang: xhtml) muss jedes Tag ein schließendes haben, also schreibt man <br></br> oder kurz <br />. Das Leerzeichen vor dem "/" erlaubt älteren Webbrowsern den Tag korrekt zu erkennen.

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen. Ergänzen sie die <br /> in der Datei innerhalb von <p></p>.

(Beispiel 04_visitenkarte_p_br.html (beispiele/03a/04_visitenkarte_p_br.html))

Anhang: Tastaturkommandos

Block und Inline

Der Absatz <p> ist ein typisches Blockelement (http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente) und der Zeilenumbruch <br /> ein nicht ganz so typisches Inlineelement (http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente).

Blockelemente bilden Absätze (als logische Formatierung). Sie beinhalten im allgemeinen Text und Inlineelemente sowie weitere Blockelemente.

Inlineelemente enthalten im allgemeinen Text und andere Inlineelemente, allerdings niemals Blockelemente. Sowohl Block- als auch Inlineelemente können leer sein.

Später werden wir noch andere Unterschiede zwischen Block und Inline kennenlernen!

Ergebnis

Voila. Nun haben sie wirklich die erste HTML-Seite geschrieben, die etwa wie im Beispiel 4 aussehen sollte. Diese Visitenkarte ist zwar noch nicht schön, aber zumindest richtig strukturiert. Wie man eine Webseite formatiert, lernen sie im folgenden Kapitel.

Leider sind die heutigen Webbrowser sehr fehlertolerant. Wenn sie falschen HTML-Code schreiben, heißt das noch lange nicht, das der Browser einen Fehler meldet. Später sollten sie deshalb ihren Code immer mit einen HTML-Validator (http://validator.w3.org) (Gültigkeitsprüfer) prüfen.

Zusammenfassung

Verweise

Verweise

Jetzt fehlt eigentlich nur noch der interaktive Teil (Hypertext). So eine Visitenkarte enthält schon einige potenzielle Kandidaten für Links an andere Stellen: Telefon, E-Mail und Webpräsenz (Homepage).

Anmerkung: Tags können mit sogenannten Attributen um weitere Eigenschaften erweitert werden. So existiert der Tag <a>, der ohne Attribute keine Bedeutung hat.

Hypertextlinks (Hyperlinks oder einfach Links) fügen wir mit der Tag/Attribut-Kombination <a href=""> (anchor / href = hypertext reference) in HTML ein. Ein Attribut erweitert ein Tag um bestimmte Eigenschaften.

<a href="http://domain.de">Text</a>
<a … >
Starttag
href="…"
Attribut
http://domain.de
Wert des Attribut
Text
Angezeigter Text
</a>
Endtag

Lassen sie mich das durch ein kleines Beispiel erläutern: Das Tag <a> ist generell für Referenzen zuständig. Mit dem Attribut href="" teilen wir dem Webbrowser mit, das wir irgendwas referenzieren wollen. Das kann eine andere Webseite sein, aber auch ein anderes Programm, das sich dann beispielsweise um das Verschicken einer E-Mail kümmert.

Verweisziele (href="…"):

http://www.google.de
Springt zur Homepage von Google
mailto:maria@mail.de
Verschickt Mails über ein externes Programm
callto:033045081620
Telefoniert über ein externes Programm (veraltet)
tel:033045081620
Telefoniert über ein externes Programm
faxto:033045081621
Faxt über ein externes Programm (veraltet)
fax:033045081620
Faxt über ein externes Programm
sms:015175081620
Simst über ein externes Programm

Anmerkung: Telefonnummern können die Ziffern „0“-„9“, „+“, „*“, „#“ und ein „,“ (Pause) enthalten. Bei SMSs können mehrere Nummern durch Komma getrennt und ein Betreff mit „*?body=“ angegegeben werden.

Sicherlich haben sie das Prinzip durchschaut. Der Wert des Attributs href="" muss ein URI (http://de.wikipedia.org/wiki/Uniform_Resource_Identifier) (siehe Anhang: Fachbegriffe) sein. Anhand des Schemas (http://de.wikipedia.org/wiki/Uniform_Resource_Identifier#Scheme) (http, mailto, callto) der URI stellt der Webbrowser fest, ob er den Verweis selbst (http) behandeln (folgen) kann oder ihn an ein externes Programm (mailto, tel, fax) übergeben muss. Ist kein externes Programm für das Schema definiert, erscheint eine Fehlermeldung.

Anmerkung: Das Tag <a> ist nicht nur für einen Verweissprung, sondern je nach Attribut, auch für andere Aufgaben (s. Selfhtml) zuständig. Dazu aber erst später mehr.

Verweise innerhalb der Domain

Allerdings existiert noch eine vereinfachte Darstellung von href-Werten. Wie im lokalen Dateisystem, können sie auch einfach ein Unterverzeichnis oder einen sonstigen Pfad (http://de.wikipedia.org/wiki/Pfadname) inklusive Dateinamen angeben. Das ist später bei Webpräsenzen wichtig, wenn sie mehrere Seiten haben, die sie untereinander verlinken wollen.

Beachten sie dabei, das sie nicht wie unter DOS und Windows üblich als Pfadtrenner das  \ -Zeichen benutzen, sondern wie in der Unix-Welt üblich das  / -Zeichen.

Verzeichnisbaum (Beispiel)

  •  / 
    • bilder/ 
      • symbole/ 
      • layout/ 
      • bild.png
    • css/ 
      • formate.css
    • js/ 
      • funktionen.js
    • index.html

Absolute Adressierung

<a href=" / ">
Springt ins Hauptverzeichnis
<a href="/bilder/bild.png">
Öffnet die Datei bild.png im Verzeichnis bilder

Relative Adressierung …

… vom Ordner  /  aus

<a href=" . ">
Springt ins Hauptverzeichnis ( .  ist aktuelles Verzeichnis)
<a href="css">
Springt ins Unterverzeichnis css
<a href="bilder/bild.png">
Öffnet die Datei bild.png im Verzeichnis bilder

… vom Ordner css aus

<a href=" .. ">
Springt ins Hauptverzeichnis ( ..  ist übergeordnetes Verzeichnis)
<a href="../bilder">
Springt ins nebengeordnete Verzeichnis bilder
<a href="../bilder/layout">
Springt ins Verzeichnis layout

Anmerkung: Wenn sie nur einen Ordner und keine Datei angeben, wird im lokalen Dateisystem ein Inhaltsverzeichnis, auf einem Webserver meist die Datei index.htm(l) (Apache) oder default.htm (IIS) ausgegeben.

Referenz: Referenzieren in selfhtml (http://wiki.selfhtml.org/wiki/HTML/Referenzieren_in_HTML)

Übung

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen. Fügen sie dann die Verweise in die Datei ein. Achten sie dabei auf die korrekte Syntax!

(Beispiel 05_visitenkarte_href.html (beispiele/03a/05_visitenkarte_href.html))

Anhang: Tastaturkommandos

Probieren sie die Verweise ruhig einmal aus, in dem sie daraufklicken. Sollte ihr Browser eine Fehlermeldung ausgeben, ist das URI-Schema wahrscheinlich nicht richtig verknüpft, weil sie beispielsweise kein Programm zur Internet­telefonie installiert haben.

Zusammenfassung

Grundgerüst

Eine echte Webseite

Damit ein HTML-Validator unsere Seite als gültig erkennt, müssen wir sie noch mit einem allgemeinen HTML Grundgerüst ausrüsten.

Dieses Grundgerüst sollten sie in eine leere Datei einfügen und diese Datei als Basis für ihre Webseiten verwenden. So sparen sie sich das dauernde Nachschlagen nach der korrekten Syntax des HTML-Grundgerüstes.

Editor - Grundgerüst
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> ««
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Beschreibung der Seite</title>
  </head>

  <body>
    <!-- Hier stehen unsere HTML-Tags -->
  </body>
</html>
<!DOCTYPE ...>
Diese Zeile gibt den Umfang der HTML-Befehle für ein Dokument an. Anhand dieser DTD (http://de.wikipedia.org/wiki/Dtd) (document type defintion) kann der Browser oder Validator die Gültigkeit der HTML-Syntax überprüfen. Mehr dazu später.
<html></html>
Dieses Tag umschließt die gesamte HTML-Seite. Nur der <!DOCTYPE> steht außerhalb.
<html xmlns="http://www.w3.org/1999/xhtml">
Wenn sie, wie hier geschehen, xHTML verwenden, müssen sie auch noch einen XML-Namensraum (http://de.wikipedia.org/wiki/XMLNS) angeben. Dies ist eine Besonderheit von XML auf die ich im Rahmen dieses Buches nicht eingehen will.
<head></head>
Der Kopf der Seite. Hier geben sie allgemeine Definitionen, Verweise und den Titel der Seite an.
<title></title>
Der Titel der Seite. Diesen zeigt der Browser normalerweise oben rechts in der Fensterüberschrift an.
<body></body>
Der Körper der Seite. Hier steht der eigentliche HTML-Text. Also alles was wir bisher ohne Grundgerüst in der Visitenkarte geschrieben haben.

Meta-Tags

In den sogennannten <meta>-Tags geben sie besonderen Information für den Browser oder automatische Suchroboter an.

<meta name="author" content="Christian Hartnick" />
Kennzeichnet den Autor eines Dokumentes.
<meta name="robots" content="noindex" />
Mit dem Tag verweigern sie Suchrobotern optional das Auswerten dieses Dokuments.
<meta name="keywords" lang="de" content="Suchbegriffe, ..." />
Mit dem Tag können sie diesen Suchbegriffe vorgeben.
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Legt den Typ und die Zeichenkodierung des Dokuments für HTML fest. Damit erscheinen jetzt auch Umlaute korrekt. Allerdings müssen sie darauf achten, dass ihr Editor auf „UTF-8“ eingestellt ist oder dies beim Speichern abfragt!

Referenz: Kopfdaten in Selfhtml (http://wiki.selfhtml.org/wiki/HTML/Kopfdaten)

Entities

In alten HTML-Browsern und Versionen waren das "ß" - wie auch die Umlaute - nicht erlaubt. Sie mußten als sogenannte Entities kodiert werden. Mit der Zeichensatzkodierung UTF-8 hat sich das geändert.

Allerdings müssen sie die Sonderzeichen  < ,  >  und  &  nach wie vor als Entität schreiben, da diese ja innerhalb des HTML-Quelltextes eine besondere Bedeutung haben. Eine Liste aller Entities finden sie im Anhang: HTML-Entities.

Tabelle: Wichtige Entitäten
ZeichenEntität
<&lt;
>&gt;
&&amp;

Andere Doctypes

Im folgenden finden sie weitere Doctypes, die sie kennen sollten, aber in diesem Buch nicht verwendet werden:

HTML 4 Transitional

(Übergangsversion zur Kompatibilität)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Die Transitional-Variante enthält noch ältere Elemente wie <font>, <center> und <u> sowie Attribute wie bgcolor="", align="" und target="". Mit dieser DTD können auch Webautoren, die nicht Layout und Inhalt voneinander trennen, standardkonformes HTML schreiben.

Außerdem soll er sicherstellen, dass bestehende Webseiten weiterhin durch aktuelle Webbrowser angezeigt werden können.

HTML 4 Frameset

(Übergangsversion zur Kompatibilität)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD für Framesets. Also für in mehrere Bereiche geteilte Webseiten. Diese Buch geht nicht näher auf Framsets ein, da sie einige grundsätzliche Nachteile haben. Siehe dazu: frameset und frames in selfhtml (http://wiki.selfhtml.org/wiki/HTML/Frames)

HTML 4 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Diese DTD umfasst Elemente und Attribute, die zusammen mit Stylesheets Layout und Inhalt trennen. Text und Inline-Elemente müssen sich grundsätzlich innerhalb eines Block-Elements befinden, zum Beispiel in einem <p>-Element.

XHTML 1 Transitional

(Übergangsversion zur Kompatibilität)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

s. HTML Transitional - allerdings in xhtml-Syntax.

XHTML 1 Frameset

(Übergangsversion zur Kompatibilität)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Frameset DTD für XHTML 1.

HTML 5

<!doctype html>

Erfrischend einfach :-)

Praxis

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen (Ab sofort solllten sie selbst daran denken). Fügen sie die bisherige Visitenkarte in den HTML-Rahmen ein und speichern sie sie.

Beachten Sie, dass jetzt auch die Sonderzeichen korrekt dargestellt werden!

(Beispiel 06_visitenkarte.html (beispiele/03a/06_visitenkarte.html))

Anhang: Tastaturkommandos

Nach dem Einfügen des Grundgerüstes sieht die Seite wie im Beispiel 6 aus. Bis auf den Seitentitel oben links sollte sich an der Darstellung nichts getan haben. Jetzt können sie aber einen HTML-Validator (http://validator.w3.org/) über die Seite laufen lassen.

(Der allerdings für unser Beispiel noch einen Fehler ausgibt, da die horizontale Linie im Beispiel noch nicht HTML-konform ist.)

Sollten sie Fragen zum Grundgerüst haben, schauen sie sich erst einmal den Quellcode des Beispiels 6 an.

Zusammenfassung

Layout

Unterkapitel

n.v.

Einführung

Jetzt widmen wir uns dem CSS-Teil einer Webseite - also dem Layout. Wie schon beschrieben, trennen moderne Webpräsenzen in Inhalt (HTML) und Layout (CSS). Ähnlich wie in einer modernen Textverarbeitung können sie mit CSS HTML direkt formatieren. Oder sie schaffen Formatvorlagen, die sie auf mehrere Webseiten anwenden können, um ein einheitliches Layout für die ganze Webpräsenz zu schaffen.

Allerdings ist für uns nicht nur die Formatierung der eigentlichen Seite interessant. Auch der HTML-Text den wir bisher geschrieben haben, sollte eine gewisse Form einhalten.

Quellcode

Code

Ganz am Anfang hatten wir gelernt, dass HTML eine Sprache (L - Language) ist. Wenn man bei Computern von Sprachen „spricht“, meint man damit eine formale Beschreibung, die in sogenannten Quellcode (http://de.wikipedia.org/wiki/Quellcode) geschrieben wird.

Wir haben den Computer (Webbrowser) also eine Reihe von Anweisungen, in einer Datei verpackt, zum Ausführen gegeben. Zwar haben wir kein Programm im ursprünglichen Sinn geschrieben, aber wir sind auf dem besten Weg dorthin. Also sollten wir auch ein paar Regeln befolgen, die unseren Quellcode für Andere besser lesbar macht.

Wahrscheinlich haben sie sich am Anfang unseres Beispiels gefragt warum HTML Whitespaces überliest. Dies ist eine Eigenschaft, die es mit vielen Computersprachen (wie auch CSS und JavaScript) teilt: Der Quellcode kann so formatiert werden.

Formatierung

Es gibt einige einfache Regeln um Quellcode - also unseren HTML-Text - besser lesbar (http://de.wikipedia.org/wiki/Quelltextformatierung) zu machen:

Jedes Anfangstag, das einen logischen Abschnitt (Block) anfängt, kommt in eine neue Zeile.

<p>
  1. Absatz
</p>

<p>
  2. Absatz
</p>

<p>
  3. Absatz
</p>

Rücken Sie untergeordnete Tags mit Leerzeichen ein:

<body>
  <div>
     <p>
       Absatz 1
     </p>

     <p>
       Absatz 2
     </p>
  </div>
</body>

Trennen Sie große logische Bereiche mit einer oder mehreren Leerzeilen:

<body>
  <h1>Erste Überschrift</h1>
  <p>
    Ein Absatz
  </p>

  <h1>Zweite Überschrift</h1>
  <p>
    ein gänzlich anderer Absatz
  </p>
</body>

Verwenden Sie Kommentare:

<!-- Das wollte ich noch sagen -->

Übung:

Bereinigen und prüfen sie ihren Code. Fügen sie Kommentare ein.

(Beispiel 07_visitenkarte_quellcode.html (beispiele/03b/07_visitenkarte_quellcode.html))

Anhang: Tastaturkommandos

Mittels Programm

Sie können auch ein Programm wie HTML Tidy verwenden, um sowohl ihren Code zu prüfen, als auch eine Bereinigung durchzuführen. Für Firefox existiert eine entsprechende Erweiterung mit Namen Total Validator (addon).

Sonst verwenden sie am besten den Web-Service (http://services.w3.org/tidy/tidy).

Zusammenfassung

Direkte Formate

Im HTML-Text

HTML bietet zwar von Haus aus Formatierungen mit Tags wie <b> (bold – fett), <i> (italics - kursiv) und <u> (underline - unterstrichen).

<p>
  Dies ist ein <b>fetter</b>,
  ein <i>kursiver</i> oder
  ein <u>unterstrichener</u> Text.
<(p>

Doch diese sind mit dem Einzug von CSS als „deprecated“ - das heißt veraltet - gekenn­zeichnet. Und sollen in den nächsten Versionen nicht mehr unterstützt oder zumindest (HTML5) umgedeutet werden. Dementsprechend sind sie auch kein Bestandteil der HTML/XHTML Strict-Varianten (s. DTD).

Übung:

Überlegen Sie welche Formatierungs­möglichkeiten ein Zeitungsverleger, ein Redakteur und ein Setzer hat.

(Beispiel Zeitungsformat (images//beispiel_zeitungformat.txt))

Anhang: Tastaturkommandos

Moderne Webpräsenzen setzen also zu recht auf Cascading Stylesheets (CSS). CSS haben den Vorteil, das Layout (Formatierung) und Inhalte (Texte, Bilder, ...) zu trennen.

Der „Verleger“ einer Webpräsenz bestimmt einmalig das Layout (CSS), der „Redakteur“ einer Webseite schreibt den Inhalt (HTML) und der „Setzer“ also der Webbrowser fügt beides zusammen. Ändert der Verleger das Layout, passen sich alle Inhalte automatisch an. Was also auf den ersten Blick nach mehr Arbeit aussieht, vereinfacht komplexere Webpräsenzen (wie dieses Buch) enorm.

Im Anhang: Formatierende Tags finden Sie die CSS-Eigenschaften, welche die alten HTML-Tags ersetzen. Um sie direkt zu verwenden, müssen sie das <span> Tag verwenden (s. Beispiel).

<p>
  Dies ist ein <span style="font-weight: bold;">fetter</span>,
  ein <span style="font-style: italic;">kursiver</span> oder
  ein <span style="text-decoration: underline;">unterstrichener</span> Text.
<(p>

Anmerkung: Schalten sie in Firefox spaßeshalber einmal unter „Ansicht“ den „Webseiten-Stil“ auf „Kein Stil”.

Unter Anhang: Wichtige Tags steht eine Liste der wichtigsten Tags. Wenn sie experimentierfreudig sind, können sie diese nach Lust und Laune in ihre Visitenkarte schon einbauen: Gute Kandidaten sind <address> (Adressblock kennzeichnen), <hr> (horizontale Trennlinie) und <ul>/<li>) (für Telefonlisten). Schlagen sie in der Referenz nach, wie sie diese Tags benutzen.

Übung:

Probieren sie eine Formatierung mit <b></b> und die Alternative mit <span style="font-weight:bold;"></span>. Experimentier­freudige können jetzt schon weitere Tags (s.o.) einbauen.

(Beispiel 08_visitenkarte_format.html (beispiele/03b/08_visitenkarte_format.html))

Anhang: Tastaturkommandos

CSS-Styles

Wie sie im Quelltext des Beispiels sehen, können sie (fast) jedem Tag einen Style hinzufügen. Probieren sie das ruhig auch mit <p> (<p style="…">). Die entsprechenden CSS-Eigenschaften finden sie im Anhang: CSS-Eigenschaften.

Beachten sie dabei, das nicht für jedes Tag auch jeder Style Sinn ergibt. So sind viele Styles beispielsweise nur für Inline- oder Block-Tags erlaubt. Später werden wir sogar lernen, wie man aus einem Inline- ein Block-Tag und andersherum macht.

Einem allgemeinen Tag wie <p> einen bestimmten Stil (Style) zuzuordnen, ist „schlechter Stil“. Denn normalerweise wendet man einen Stil immer auf eine bestimmte Kategorien (oder Klassen) an. So könnten alle Überschriften in der Schriftart „Arial“ erscheinen und der Fließtext in „Times New Roman“. Bestimmter Fließtext sollte aber als Anmerkung „kursiv“ sein. Es muss also eine Möglichkeit geben, Tags oder speziell gekennzeichnete Tags für einen Stil zu selektieren.

Formatvorlagen

Formatvorlagen

Um Tags für einen Stil zu selektieren, definieren wir die Stile in einem speziellen Bereich <style> des HTML-Headers (<head>). Dazu benutzen wir eine eigene CSS-Syntax: Selektor: { CSS­Eigenschaft1: Wert; CSS­Eigenschaft2: Wert; … }.

Anmerkung: Nicht umsonst wird in diesem Buch verschiedene Farben für die verschiedenen Sprachen HTML, CSS und JavaScript benutzt. Ihre Syntaxen sind grundlegend verschieden und sie sollten sie deshalb nicht durcheinander bringen (s. Anhang: Syntaxübersicht).

Editor - 09_visitenkarte_css_inline.html
<head>
  <title>09 Meine Visitenkarte (css inline)</title>
  <style type="text/css">
    /* … Formatdefinitionen … */ 
    #Nachname { font-weight:bold; } 
  </style>
</head>

Erklärungen zur Syntax der Stildefinitionen finden sie im Anhang: CSS-Syntax.

Im Beispiel finden sie die übliche Vorgehensweise einen Stil für das HTML- Universalattribut id="" zu spezifizieren. Das heißt der Selektor #Name selektiert beisielsweise das HTML-Tag <span id="Name">. Der „Name“ muss innerhalb der HTML-Datei eindeutig sein, darf also kein zweites Mal vorkommen. Wollen sie mehreren Tags den gleichen Stil zuweisen, benutzen sie das Attribut <span class="Beruf">, welches sie mit dem Selektor .Beruf selektieren.

Tabelle: HTML und Stylesheets 1
HTML ElementCSS SelektorBeschreibung
<span id="ID">ID { E: W; }Stil für „ID“
<span class="Klasse">.Klasse { E: W; }Stil für „Klasse“

Die HTML-Tags <span> und <div> sind speziell für CSS-Forma­tierungen geschaffen worden.

<span>
Universal Inline-Tag für CSS
<div>
Universal Block-Tag für CSS

Weitere CSS Eigenschaften (Formatierungen) finden sie im Anhang: CSS-Eigenschaften oder im Selfhtml Wiki (http://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften).

Übung:

Schreiben sie den Quellcode mit der Stildefinition im Header um.

(Beispiel 09_visitenkarte_css_inline.html (beispiele/03b/09_visitenkarte_css_inline.html))

Anhang: Tastaturkommandos

Vorlagendatei

Wächst ihre Webpräsenz über diese eine Seite hinaus, ist das Einbetten von Stildefinitionen innerhalb der HTML-Seite von Nachteil – entsprechende Stiländerungen müssten sie in alle Dateien permanent übertragen. Deshalb sollten sie die Stildefinitionen in eine eigene Datei auslagern:

Editor - 10_visitenkarte.css
/* Definitionen */
#Name    { font-weight:bold; }
#Grad    { font-size: small; }
.Beruf   { font-style: italic; }
a        { text-decoration:none; color:WindowText;}
a:before { content:"→"; color: blue; }
a:hover  { color: blue; }
hr       { width: 300px; margin-left: 0; }
.label   { display: inline-block; width: 3em; }

Für dieses Beispiel müssen wir unsere Tabelle erweitern:

Tabelle: HTML und Stylesheets 2
HTML ElementCSS SelektorBeschreibung
<span id="ID">#ID { E: W; }Stilzuweisung an ID
<div class="Kl">.Kl { E: W; }Stilzuweisung an Klasse
<hr>hr { E: W; }Stilzuweisung an alle <hr>
_<a>a:before { E: W; }Stilzuweisung für den Bereich vor <a>
<a>a:hover { E: W; }Stilzueisung für <a>, wenn es mit der Maus überfahren wird.

Hinweis: Der Internet Explorer kennt die Pseudo-Eigenschaften :before und :after erst ab Version 8.

Anmerkung: An dieser Stelle kommt das erste Mal eine zweite Datei ins Spiel. Für diese CSS-Datei erstellen sie eine neue leere Datei im Texteditor und kopieren dort alles hinein was zwischen <style type="text/css"> und </style> steht. (Und ergänzen beispielsweise mit dem obigen Beispiel.) Diese Datei speichern sie dann unter einen Namen wie visitenkarte.css oder stylesheet.css.

In der HTML-Datei steht dann nur noch ein Verweis (<link>) auf diese externe Datei. Also müssen sie den ganzen Text innerhalb von <style type="text/css"></style> inklusive dieser Tags wie folgt löschen:

Editor - 10_visitenkarte_css.html
<head>
  <title>10 Meine Visitenkarte (css datei)</title>
  <link rel="stylesheet" type="text/css" href="10_visitenkarte.css" />
</head>
<link …>
Verlinkt eine externe (CSS-)Datei
rel="stylesheet"
bestimmt den Typ der Verknüpfung
type="text/css"
bestimmt den Dateityp
href="vk.css"
verweist auf die externe Datei

Übung:

Schreiben sie den Quellcode entsprechend um und probieren sie andere Formatierungen aus der Referenz.

(Beispiel 10_visitenkarte_css.html (beispiele/03b/10_visitenkarte_css.html)
/ Beispiel 10_visitenkarte.css (beispiele/03b/10_visitenkarte.css))

Anhang: Tastaturkommandos

Hinweis: Sie können natürlich auch interne und externe Stylesheets mischen (wie im Beispiel 10 geschehen). Allerdings sollten sie dann darauf achten, dass auch nur seitenspezifische Formatierungen im (seiten-)internen Stylesheet stehen.

Block und Inline

Wie versprochen kommen wir noch einmal auf Block- und Inline-Elemente zurück. Wenn sie sich das Styleesheet aus dem Beispiel genau anschauen, finden sie die CSS-Eigenschaften display: inline-block; und width: 3em;.

Wie schon geschrieben, bilden Blockelemente eine logischen „Block“, dem man entsprechend auch unter anderem eine Höhe (height) und Breite (width) zuweisen kann. Inline-Elemente stehen mitten im fließenden Text. Es macht also normalerweise keinen Sinn ihnen Höhe und Breite zu geben.

Um möglichst flexibel zu bleiben, kann CSS aber HTML-Tags umetiquettieren. CSS kann also Blockelement in Inline-Elemente und umgekehrt verwandeln. Dazu existiert die Eigenschaft display. Allerdings kennt diese Eigenschaft auch den Wert „inline-block“, der das Tag als Inline-Element belässt, aber trotzdem eine Zuweisung einer Breite erlaubt. Damit ist es einfach Texte untereinander zu positionieren.

Im Anhang: CSS-Eigenschaften finden sie weitere Hinweise auf Block- oder Inline-Eigenschaften. Allerdings können sie fast alle Inline-Eigenschaften auch Blöcken zuweisen. Zu den Einheiten (hier em) lesen sie am besten Anhang: CSS-Einheiten und Farben.

Zusammenfassung

Dynamik

Unterkapitel

n.v.

Einführung

Bevor wir zu JavaScript an sich kommen, machen wir einen kleinen Ausflug in die Theorie des Programmierens. Sinn dieses Kapitels ist es nicht programmieren zu lernen, sondern die Konzepte dahinter zu verstehen, damit sie fremden Code in ihre Webseiten einbinden können.

Danach lernen wir das einbinden von JavaScript in die Webseite direkt oder als Funktion. Zuletzt manipulieren wir die Seite über das DOM, was gerade mit Fremdfunktionen viele Vorteile bringt.

Programme verstehen

Bauanleitung

Programme sind eine Ansammlung von Anweisungen, die ein Computer oder anderes Programm ausführt. So etwa wie eine Bauanleitung, die Anweisungen für einen Menschen enthält, etwas bestimmtes zusammenzubauen. Bewegen wir uns also in dieser Analogie.

Brainstorming:

Was steht in einer Bauanleitung? Schreiben sie kurz (ohne nachzudenken) ihre Gedanken auf einen Zettel.

(Brainstorming Bauanleitung (images//brainstorming_bauanleitung.txt))

Ein Bauanleitung (hier das Beispiel Tisch) ist wie folgt strukturiert:

Definitionen

Benutze
Werkzeug und Material das nicht beiliegt (also extern zu besorgen ist).
Inhalt
Werkzeug und Material das beiliegt und bem Aufbauer bekannt zu machen ist.

Elemente des Arbeitsablaufs

Anweisungen
Konkrete Arbeitsanweisungen für den Aufbauer
Unteranweisungen
Komplexere Tätigkeiten werden zusammen­gefasst und als ein Schritt in den Arbeits­anweisungen ausgeführt.
Zuweisungen
Schraube S1 = Schraube mit Gewinde x / Länge y
Bedingungen
End- oder Abbruch­bedingung für eine Anweisung oder eine Wiederholung.
Wiederholungen (Schleifen)
Sich wiederholende Anweisungen
Kommentare
Kommentierung der Anweisungen

Übung:

Schreiben sie einen Bauanleitung für einen Tisch, nach dem obigen Vorbild.

(Beispiel Tisch (images//beispiel_tisch.txt))

Anhang: Tastaturkommandos

Computerprogramm

Ein Programm ist ähnlich strukturiert:

Definitionen

Extern
Variablen, Objekte und Funktionen die in gesonderten Dateien/Bibliotheken stehen.
Intern
Selbstdefinierte Variablen, Objekte und Funktionen bekannt machen.

Elemente des Programmablaufs

Anweisungen
Konkrete Programmanweisungen
Funktionen/Objekte
Mehrere Anweisungen / Zuweisungen werden zusammengefasst.
Zuweisungen
Variablen einen Wert zuweisen. (Auch eine Anweisung!)
Bedingungen
End- oder Abbruchbedingung für eine Anweisung oder eine Wiederholung.
Schleifen
Sich mehrfach wiederholende Anweisungen
Kommentare
Kommentierung der Anweisungen

Man erkennt sofort die Ähnlichkeit mit einem Bauanleitung.

Hier haben wir einige Konzepte, die sich nicht so einfach erschließen. Genaueres lesen sie im Kapitel über JavaScript.

Variablen
Variablen speichern veränderliche (variable) Werte.
variable = wert;
Funktion
Funktionen fassen parametrisierte Anweisungen zusammen und können einen Wert zurückgeben.
Rückgabewert = Funktion (Parameter1, Parameter2);
Objekt
Objekte fassen Variablen (als Attribute) und Funktionen (als Methoden) als Eigenschaften zusammen. Diese Eigenschaften können sie an andere Objekte vererben.

Programmieren mit Pseudocode

In der Informatik versteht man unter Pseudocode (http://de.wikipedia.org/wiki/Pseudocode) eine formalisierte Schreibweise von Anweisungen, die theoretisch ein Computer ausführen könnte. D.h. Pseudocode verzichtet auf alles sprachliche Beiwerk und konzentriert sich auf das wesentliche.

Übung:

Schreiben sie ein Pseudoprogramm (und/oder Anweisungen für einen Menschen), welches wiederholt (10x) die Uhrzeit ausgibt.

(Pseudocode Mensch (images//pseudocode_mensch.txt)
, Pseudocode Computer (images//pseudocode_computer.txt))

Anhang: Tastaturkommandos

In dem Beispiel für ein Pseudo-Programm sind alle wesentlichen Konzepte der Programmierung enthalten:

Definitionen

Extern
Benutze Ausgabe, Datum
Intern
Definiere Jetzt vom Typ Datum/Uhrzeit, Definiere Wdh vom Typ Zahl;

Programmablaufs

Anweisungen
Ausgabe.Ausgeben (Jetzt);
Funktionen/Objekte
Datum.Jetzt;
Ausgabe.Ausgeben ();
Zuweisungen
Speicher 0 in Wdh; // Wdh=0;
Jetzt = Datum.Zeit;
Erhöhe Wert von Wdh um 1;
Bedingungen
Wdh == 10
Schleifen
wiederhole … bis ( … );
Kommentare
// Ablauf

JavaScript

Das Programm als JavaScript (Beispiel Zähler):

<!DOCTYPE html>
<html>
<head>
  <title>Zaehler</title>
</head>
<body>
  <script type="text/javascript">
    // Datumsbibliothek ist implizit enthalten
    var Datum = new Date(); // Sonderfall Objekt
    var jetzt;
    var i = 10;

    do {
      jetzt = Datum.toLocaleString(Datum.getTime());
      document.write('\n<p>' + jetzt + '<\/p>');
      i--; // enspricht i = i - 1
    } while (i>0);
  </script>
</body>
</html>

Dies ist natürlich ein sehr einfaches Programm, das uns nur die grundsätzliche Funktionsweise näher bringen soll. Denken sie daran, dass sie an dieser Stelle nicht Programmieren lernen sollen, sondern nur die Konzepte verstehen, um JavaScript-Funktionen verwenden zu können!

Definitionen

Extern
JavaScript-Funktionen werden über <script src=""> im Header eingebunden.
Aber: Viele Objekte sind implizit enthalten (Date, document)
Intern
var jetzt;
Variable „jetzt“ definieren.
var i = 10;
Variable „i“ definieren und mit „10“ vorbelegen.
var Datum = new Date();
Datum ist eigentlich ein Objekt der Klasse Date (s.u.). Klassen stellen wieder Funktionen (Methoden) zur Verfügung.

Programmablauf

Anweisungen
document.write('\n<p>' + jetzt + '<\/p>');
Zeichenkette ('<p>3.6.2014 20:21:01</p>') in HTML-Dokument ausgeben.
Funktionen/Obj.
document.write();
Zeichenkette in Dokument ausgeben.
Datum.toLocaleString();
Zeit/Datum in lesbare Zeichenkette (wie 3.6.2014 20:21:01) wandeln.
Datum.getTime();
Aktuelle Zeit/Datum holen.
Zuweisungen
jetzt = …;
In Variable „jetzt“ lesbare Zeit/Datum Zeichenkette speichern.
i--; //enspricht i = i - 1
Inhalt der Variablen „i“ um „1“ verringern.
Bedingungen
i > 0
Vergleiche linke und rechte Seite mit Vergleichsoperator (>).
Schleifen
do { … } while (i > 0);
Tue das folgende ( … ) solange die Bedingung „i > 0“ wahr ist.
Kommentare
// Datumsbibliothek ist implizit enthalten

Zusammenfassung

Dynamisches HTML

DHTML

Wie schon erwähnt bringt erst der Einsatz von JavaScript Interaktivität auf eine Webseite. Man spricht dann auch von dynamischen HTML, da JavaScript HTML zur Laufzeit (also nach dem Laden der Seite) ändern kann.

Anmerkung: Das unterscheidet JavaScript von einer Sprache wie PHP (http://de.wikipedia.org/wiki/PHP), Perl (http://de.wikipedia.org/wiki/Perl_(Programmiersprache)) oder ASP (http://de.wikipedia.org/wiki/Active_Server_Pages) die schon vor dem Ausliefern einer Seite auf dem Server ausgeführt werden.

Da moderne Webseiten aber nicht ohne Interaktivität auskommen, biete ich Ihnen in diesem Kapitel einen Einstieg in JavaScript. Sie können so zumindest bestehenden Code aus dem Web in ihre Projekte einfügen.

Eine Einführung in JavaScript bietet der fünfte Teil.

JS als Spamschutz

Als sinnvolle Anwendung für eine Visitenkarte bietet sich JavaScript beispielsweise an, wenn man aus Spamschutzgründen die E-Mail-Adresse nicht direkt in den HTML-Code schreiben will. Dort kann sie nämlich von sogenannten Spidern (spezialisierte Such­maschinen) gefunden und in Spam-Verteiler eingetragen werden.

Damit der Browser erkennt, dass an dieser Stelle Javascript steht, wird das Skript innerhalb des Tags <script> geschrieben. In JavaScript kodiert, kann das dann folgendermaßen aussehen:

Editor - 11_visitenkarte_js_inline.html
<p>
  <!-- Script an Stelle des direkten Links -->
  <script type="text/javascript">
    var name   = "hilfe";
    var domain = "hartnick";
    var tld    = "de";
    document.write('\n<a href=\"mailto:' + name + '@' + domain + '.' + tld + '\">'
                   + name + '@' + domain + '.' + tld
                   + '</a>');
  </script>
  <noscript>_nick_at_domain_._de_</noscript> <br />
</p>

Sollte der Browser kein JavaScript darstellen, bestimmen sie im <noscript> Bereich einen alternativen Text.

Noch einmal der Hinweis: Nicht umsonst wird in diesem Buch verschiedene Farben für die verschiedenen Sprachen HTML, CSS und JavaScript benutzt. Ihre Syntaxen sind grundlegend verschieden und sie sollten sie deshalb nicht durcheinander bringen.

Übung:

Bauen sie das Skript an der entsprechenden Stelle in ihre Visitenkarte ein.

(Beispiel 11_visitenkarte_js_inline.html (beispiele/03c/11_visitenkarte_js_inline.html))

Anhang: Tastaturkommandos

Anmerkung: Bedenken sie, dass das Beispiel nur der Weg zum Verständnis von JavaScript dient. Normalerweise binden sie bei ihrem Wissensstand, keinen JavaScript-Code sondern höchstens JavaScript-Funktionen ein.

Externes JS

Etwas komfortabler und noch sicherer ist die Auslagerung der Funktionalität in eine externe Datei. So können sie den JavaScript-Code dann auch auf anderen Webseiten nutzen. Dazu verfrachten sie den Code in eine eigene Datei mit der Endung .js und wandeln ihn in eine Funktion ohne Rückgabewert (Funktion enthält kein "return") um: (Beispiel 12 (beispiele/03c/12_visitenkarte.js))

Anmerkung: In JavaScript umschließen Hochkommas  ''  oder Hochkommatas  ""  eine Zeichenkette (String). Soll jetzt in der Zeichenkette ein ' oder ein " Zeichen erscheinen, muss dieses besonders gekennzeichnet werden. Dazu schreibt man das Escape-Zeichen  \  davor. Weitere Zeichen finden sie im Anhang: JS Escape-Sequenzen

Die externe JS-Datei ist im Header ihrer HMTL-Datei anzugeben. Der Funktionaufruf erfolgt an gewohnter Stelle im HTML-Code:

Editor - 12_visitenkarte_js.html
<html>
  <head><script src="12_visitenkarte.js" type="text/javascript"></script>
  </head>

  <body><p>
      <!-- Script an Stelle des direkten Links -->
      <script language="JavaScript" type="text/javascript">
        insertEmail("nick","domain","de")
      </script>
      <noscript>_nick_at_domain_._de_</noscript> <br /></p>
  </body>
</html>

Auf diese Weise binden sie jegliche externe JavaScript-Funktion ein. Normalerweise finden sie im Netz eine entsprechende Funktion mit einer Anleitung, wie diese einzubinden ist. Meist ist dann auch eine externe CSS-Datei dabei:

Editor - meine_seite.html
  <head><script type="text/javascript" src="externe_funktion.js"></script>
    <link rel="stylesheet" type="text/css" href="externe_funktion.css" />
  </head>

Übung:

Bauen sie das Skript ihrer Visitenkarte im Header und Body entsprechend um und legen sie die externe Funktion an:

(Beispiel 12_visitenkarte_js.html (beispiele/03c/12_visitenkarte_js.html)
, Beispiel 12_visitenkarte.js (beispiele/03c/12_visitenkarte.js))

Anhang: Tastaturkommandos

Zusammenfassung

Dokument Object Model

DOM

Zuletzt möchte ich noch eine Variante vorstellen, die mehrere Vorteile hat: Sie verwendet normale Links in einer Standardsyntax, welche nur durch einen Namen gekennzeichnet sind. Außerdem benötigt sie keinen <noscript> Teil und ist damit weniger anfällig für Fehler.

Weiterhin lernen sie gleich das wichtige DOM (http://de.wikipedia.org/wiki/Document_Object_Model) (document object modell) kennen. Mit dem DOM greifen sie über JavaScript auf HTML-Dokumente zu. Im modernen Webdesign spielt es eine gewichtige Rolle.

Das DOM stellt eine Webseite als Baumstruktur dar. Für den Zugriff auf diese Hierarchie stellt JavaScript verschiedene Funktionen bereit. Außerdem präsentiert jeder Knoten im Dokumentenbaum auch ein Objekt in JavaScript (deshalb „DOM“).

Anmerkung: Viele in JavaScript geschriebene Erweiterung verwenden das DOM. Zu bearbeitende Elemente werden einfach mit einem bestimmten Attribut gekennzeichnet. Ein weiteres Beispiel dazu finden sie im Kapitel Bildergallerie.

Im Firefox können sie den DOM-Baum auch mit dem DOM-Inspektor (Extras / Webentwickler / DOM-Inspector) erforschen.

Browser - DOM-Ansicht visitenkarte.html
  • <html xmlns="http://www.w3.org/1999/xhtml">
    • <head>
    • <body onload="convertEmail('Email')">
      • <p>
        • <span id="Name">
          • Christian Hartnick*
          • <br />
        • <span id="Grad">
          • Dipl.-Wirtsch.-Inf.
          • <br />
        • <span class="Kursiv">
          • Freier Berater
      • <address>
        • Sandweg 10
        • <br />
        • 16727 Oberkrämer OT Bärenklau
      • <hr />
      • <ul>
        • <li>
          • Telefon
          • <a href="tel:033045081620">
            • 03304 5081620
        • <li>
          • Fax
          • <a href="fax:033045081621">
            • 03304 5081621
        • <li>
          • Mobil
          • <a href="tel:015175081620">
            • 1517 5081620
      • <p>
        • <a class="Email" href="mailto:hilfe_at_hartnick_dot_de">
          • hilfe_at_hartnick_dot_de*
          • <br />
        • <a class="Email" href="mailto:christian_at_hartnick_dot_de">
          • christian_at_hartnick_dot_de
          • <br />
        • <a href="http://hilfe.hartnick.de">
          • hilfe.hartnick.de

Hervorgehoben sind hier die mitttels der Klasse „Email“ gekennzeichneten Adressen. Diese werden von der JavaScript-Funktion gefunden und umgewandelt!

Beispiel

Übung:

Schauen sie sich die JavaScript- und die HTML-Datei an. Es ist nicht wichtig, den Quellcode zu verstehen. Sie sollten das Script aber als Funktion in die eigene Webseite einbauen können.

(Beispiel 13_visitenkarte_js_dom.html (beispiele/03c/13_visitenkarte_js_dom.html)
, Beispiel 13_visitenkarte.js (beispiele/03c/13_visitenkarte.js))

Anhang: Tastaturkommandos

Wie sie sehen, rufen sie die JavaScript-Funktion nicht mehr an einer bestimmten Stelle im Code auf, sondern mit einem Attribut im Tag <body onload="convertEmail('Email')">. Da die Funktion auf das DOM zugreift, fügt sie nicht Text in den HTML-Quelltext ein, sondern verändert seine Struktur direkt.

Anmerkung: Eine der beiden Methoden (Aufruf der Funktion direkt im Quelltext oder mit dem Attribut „onload“ im Body) kommt praktisch immer bei externen JavaScript zum Einsatz.

Erklärung

Erläuterungen zum Progamm (für alle die es hier schon interessiert):

while (document.getElementsByClassName ("Email")[i]) {
Solange ein Element im HTML-Code mit dem Attribut class="Email" existiert, durchlaufe die Schleife. (DOM-Funktion)
anker = document.getElementsByClassName ("Email")[i]
Variable anker zeigt auf i-te Element (Objekt) mit der Klasse „Email“.
adresse = anker.href;
Speichere den Wert des Attributs "href".
temp = adresse.split("_at_"); name = temp[0]; domain = temp[1];
Splitte adresse an Zeichenkette "_at_" in Array temp
temp = domain.split("_dot_"); domain = temp[0]; tld = temp[1];
Splitte domain an Zeichenkette "_dot_" in Array temp
adresse = name + "@" + domain + "." + tld;
Setze die Adresse neu zusammen.
anker.href = adresse;
Speichere die "adresse" wieder im Attribut "href".
anker.firstChild.nodeValue = adresse.substr(7,255);
Speichere die "adresse" ohne "mailto:" auch als Wert des Kindknotens – also als Text.
i++;
Erhöhe den Wert der Variable i (entspricht i = i +1;).
}
Ende der Schleife.

Übung:

Zum Abschluss dieser Lektion sollten sie mit dem bisher Gelernten etwas herumspielen, die benutzten Elemente und Funktionen im Referenzbuch oder Web nachschlagen sowie eigene Ideen ausprobieren.

Anhang: Tastaturkommandos

Webpräsenz

Unterkapitel

n.v.

Einführung

Nachdem wir nun alle grundlegenden Techniken einer Webseite kennengelernt haben, folgt nun ein vertiefendes Beispiel. In diesem werden wir auch weitere Funktionalitäten lernen.

Wir bauen diesmal eine gesamte Webpräsenz (mehrere Seiten) auf. Dazu müssen wir uns erst einmal einige Vorkenntnisse erarbeiten. Zuletzt habe sie damit eine Grundlage für eine eigene Webpräsenz.

Weitere Tags

Weitere Tags

Eine Webseite besteht aus mehr als nur Text. HTML kann externe Objekte (Bilder, Töne, Videos usw.) einbinden sowie Tabellen und Listen erstellen.

In der folgenden Definitionen sind nur die wichtigsten Attribute und Tags angegeben. Weitere finden sie in ihrer HTML-Referenz. Beachten sie, dass auch für die folgenden Tags CSS zur Formatierung genutzt werden sollte.

Weitere Tags finden sie im Anhang: Wichtige Tags und im Anhang: Semantische Tags. Nur zur Vollständigkeit hier der Verweis zum Anhang: Formatierende Tags.

Anker

<a>

<a name="name">
interner Sprungpunkt.
<a href="#name">
Sprung dorthin.

Überschriften

<h1_h6>

<h1>
Überschriftebene 1 (höchste)
<h2>
Überschriftebene 2
<h3>
Überschriftebene 3
<h4>
Überschriftebene 4
<h5>
Überschriftebene 5
<h6>
Überschriftebene 6 (niedrigste)

Listen

<ul>, <ol>,

<ol start="">
geordnete Liste mit Startwert
<ul type="">
ungeordnete Liste mit Listenpunkttyp
<li>
Listeneintrag

Tabellen

<table>

<table border="">
Tabelle mit Rahmen
<tr rawspan="">
Tabellenzeile (raw) mit Überspannung
<th>
Zellenkopf (head)
<td width="" colspan="">
Tabellenzelle (data) mit Breite und Überspannung
&nbsp;
Leerzeichen für leere Spalten (auch <br />)

Grafiken

<img>

<img src="" alt="" width="" height="" />
Bild einfügen
Attribute
src: URI des Bildes
width: Breite in Prozent oder Pixel
height: Höhe in Prozent oder Pixel
alt: Alternativer Text

Seiten

<iframe>

<iframe src="" />
Andere Webseite per URI (src) einfügen

Multimedia-Objekte

<object>

<object data="" type="" />
Beliebiges Objekt mit Typ (Ton, Video, ...) per URI (data) einfügen

Bilder können sie als <img> oder <object> mit dem entsprechenden Typ einbinden. Auch externe Webseiten können sie als <iframe> oder <object> mit dem Typ "text/html" einbinden. <object> soll in Zukunft alle anderen Tags dieser Art ersetzen. Zumindest zur Zeit funktioniert das noch nicht in jedem Browser.

Beispiele zu den Tags finden sie im weiteren Verlauf dieser Lektion.

Exkurse dazu

Exkurs Grafikformate

Tabelle: Grafikformate
FormatVor-/Nachteile
jpgBilder mit variabler Komprimierung und vollem Farbspektrum.
gifBilder mit fester Komprimierung und geringen Farbspektrum. Kann durchsichtig und bewegt sein.
pngMischung aus jpg und gif (volles Farbspektrum und durchsichtig).
svgGrafiken im Vektorformat (d.h. aus Punkten, Linien und Flächen zusammengesetzt)

Grafikformate (http://de.wikipedia.org/wiki/Grafikformat) in der Wikipedia.

Exkurs MIME-Typen

Wir haben schon bei einigen HTML-Tags das type-Attribut kennengelernt. Dieses gibt den sogenannten MIME-Type (http://de.wikipedia.org/wiki/MIME-Type) (Multipurpose Internet Mail Extensions) einer Datei an. Windows erkennt den Typ einer Datei über die Endung. Im Web regelt das der MIME-Type, welcher ursprünglich aus dem E-Mail Bereich kommt.

Tabelle: Mime-Typen
Mime-TypBeschreibung
text/textReiner Text (.txt)
text/htmlReiner Text im HTML-Format (.html)
text/cssReiner Text im CSS-Format (.css)
text/javascriptReiner Text mit JavaScript-Code (.js)
image/gifBild im GIF-Format (.gif)
audio/mpegMusik im MP3-Format (.mp3)
video/mpegVideo im MPEG-Format (.mpg)

Referenz: MIME-Typen (http://wiki.selfhtml.org/wiki/Referenz:MIME-Typen) im selfHTML Wiki.

Tags schachteln

Liste und Tabellen lassen sich auch ineinander schachteln.

Verschachtelte Liste

Editor - Verschachtelte_Liste
<ul>
  <li>Morgens
    <ol>
      <li>geh ich nach Haus</li>
      <li>schlaf ich aus</li>
    </ol>
  </li>
  <li>Abends
    <ol>
      <li>geh ich in die Bar</li>
      <li>mach ich mich zuhause rar</li>
    </ol>
  </li>
</ul>

Das sieht dann im Browser folgendermaßen aus:

Webbrowser - Verschachtelte_Liste

  • Morgens
    1. geh ich nach Haus
    2. schlaf ich aus
  • Abends
    1. geh ich in die Bar
    2. mach ich mich zuhause rar

Verschachtelte Tabellen

Editor - Verschachtelte_Tabellen
<table border="1">
   <tr> <td>1a</td><td>1b</td><td>1c</td> </tr>
   <tr> <td>2a</td><td>2b</td><td>2c</td> </tr>
   <tr> <td>3a</td><td>3b</td><td>3c</td> </tr>
   <tr> <td colspan="3">
          <table>
            <tr> <td>4 1a</td><td>4 1b</td> </tr>
            <tr> <td>4 2a</td><td>4 2b</td> </tr>
          </table>
   </td></tr>
</table>

Das sieht dann im Browser folgendermaßen aus:

Webbrowser - Verschachtelte_Tabellen

1a1b1c
2a2b2c
3a3b3c
4 1a4 1b
4 2a4 2b

Liste in Tabelle

Editor - Liste_in_Tabelle
<table border="1">
   <tr> <td>1a</td><td>1b</td><td>1c</td> </tr>
   <tr><td colspan="3">
           <ol>
             <li>Punkt 1</li>
             <li>Punkt 2</li>
           </ol>
   </td></tr>
</table>

Das sieht dann im Browser folgendermaßen aus:

Webbrowser - Liste_in_Tabelle

1a1b1c
  1. Punkt 1
  2. Punkt 2

Übung:

Schlagen sie die Tags in der Referenz nach und prüfen sie was sie noch für Möglichkeiten mit diesen haben. Bauen sie diese Tags in ihre Visitenkarte ein.

Anhang: Tastaturkommandos

Zusammenfassung

Vorbereitungen

Erschrecken sie nicht – jetzt kommt alles auf einmal. Gehen wir also Schrittweise vor:

Weitere Seiten

Eine Webpräsenz besteht normalerweise aus mehr als einer Webseite (HTML-Datei). Oder anders gesagt, mehrere HTML-Dateien, eine oder mehrere CSS-Dateien und eine oder mehrere JS-Dateien zusammen, bilden einen Auftritt im Internet (Webpräsenz).

Unsere Visitenkarte wäre beispielsweise eine gute Kontaktseite - wir bräuchten allerdings auch noch weitere Seiten wie Willkommens- oder Startseite, Impressum usw. Diese Seiten sind dann normalerweise über ein Menü verlinkt, das heißt auf jeder Seite stehen Links (<a href="index.html">Startseite</a>) zu den anderen Seiten.

Da alle unsere Seiten allerdings einem Grundaufbau folgen sollen, erstellen wir zunächst eine Seitenvorlage, von der wir die anderen Seiten dann ableiten. Gleichzeitig bringen wir ein wenig Struktur (Unter­verzeichnisse) in unser Webprojekt.

Um unsere Webpräsenz etwas einfacher anpassen zu können, überlegen wir uns noch, wie wir den Kopf und das Menü auch nachträglich noch einfach ändern können, ohne jede Seite dann händisch zu ändern.

Übung:

Überlegen sie wie sie Code (CSS und JavaScript) für viele Seiten verfügbar gemacht haben. Wie ist das dann mit HTML-Code?

  • Kann man HTML in eine separate Datei auslagern?
  • Welcher Tag ist dafür zuständig?

Die Lösung wird im folgenden vorgestellt!

Anhang: Tastaturkommandos

Präsenz

Vorlage

Zunächst wählen wir ein Projektverzeichnis und/oder legen dieses an. Dann erstellen wir dort eine Textdatei mit dem Namen Seitenvorlage_zum_Kopieren.html. In diese schreiben wir dann folgendes Grundgerüst:

Editor - Seitenvorlage_zum_Kopieren.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta content="author" name="Fügen sie hier ihren Namen ein" />
  <title>Fügen sie ihren Seitentitel hier ein</title>

  <link rel="stylesheet" type="text/css" href="css/layout.css" />
  <style type="text/css">
    /* Interne CSS-Formatvorlagen */
  </style>
  <script type="text/javascript" src="js/funktionen.js"></script>
</head>

<body>
  <div id="KopfDiv">
    <iframe src="iframes/kopf.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <h1 class="Kopf">Fügen sie ihren Seitentitel hier ein</h1>
    </iframe>
  </div>

  <div id="MenuDiv">
    <iframe src="iframes/menu.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <a class="Menue" href="iframes/menu.html">Sitemap</a>
    </iframe>
  </div>

  <div id="InhaltDiv">
    <!-- Hier fügen sie das ein, was sie bisher innerhalb des <body>-Tags stehen hatten -->
  </div>
</body>
</html>

Klären wir zunächst die neuen Tags:

<div id="KopfDiv">
<div> ist wie <span> ein Element speziell für CSS-Definitionen. Im Gegensatz zu <span> überspannt <div> nicht nur einen Textbereich, sondern einen oder mehrere Absätze (Blockelement). Hier definiert <div> einen Kopfbereich, den wir mit Hilfe von CSS positionieren. Da es nur einen Kopf geben sollte, verwenden wir als Attribut id="KopfDiv"!
<div id="MenuDiv"> und <div id="InhaltDiv">
Entsprechende <div> für die Bereiche Menü und Inhalt (also der eigentliche Seiteninhalt).
<iframe src="iframes/kopf.html" ...> und
<iframe src="iframes/menu.html" ...>
Wie schon oben besprochen bindet <iframe> eine andere Seite in eine HTML-Seite ein. Hier benutzen wir es, um einen Kopf und ein Menü für die Webpräsenz nur einmal zu hinterlegen.
<h1 class="Kopf">
Dieses <h1> steht innerhalb von <iframe>, es wird also nur angezeigt, wenn der Browser keine Inline-Frames unterstützt. Wir weisen allen Tags innerhalb des Kopfes oder des Menüs eine Klasse (hier Kopf) zu, damit wir sie gegebenenfalls im Stylesheet gesondert behandeln können.
<div id="InhaltDiv">
Innerhalb dieses <div> steht der eigentliche Inhalt der Seite, also das, was sie sonst innerhalb von <body> schreiben würden.

Übung:

Schlagen sie alle Tags und Attribute, die sie nicht kennen oder verstehen, in ihrer Referenz nach. Speziell sollten sie das Tag <iframe> untersuchen und prüfen, ob es mit der XHTML-Strict-Variante verträgt.

Anhang: Tastaturkommandos

Anmerkung: Prüfen sie im Beispiel (beispiele/03d/index.html) welche HTML-Version gewählt ist.

Unterverzeichnisse

Jetzt legen wir die Unterverzeichnisse bilder/ , css/ , iframes/ und js/ an. Die Namen der Verzeichnisse sind soweit selbsterklärend:

  • mein_projekt/
    • bilder/
      • logo.png
    • css/
      • layout.css
    • iframes/
      • kopf.html
      • menu.html
    • js/
      • funktionen.js
    • Seitenvorlage_zum_Kopieren.html

Wenn wir zukünftig eine neue Seite in unserer Webpräsenz anlegen wollen, kopieren wir die Seitenvorlage und benennen sie entsprechend um. Sobald die Datei im Explorer markiert ist, geht das am einfachsten mit der Tastenfolge Strg + C (kopieren), Strg + V (einfügen) und dann F2 (umbenennen). Das Umbenennen können sie übrigens mit Esc abbrechen.

Noch einmal der Hinweis: Das Web ist Unix-basiert und deshalb werden Groß- und Kleinschreibung bei Dateien und Verzeichnissen unterschieden. Außerdem ist der Pfadtrenner  / .

Weitere Dateien

Wir haben innerhalb unseres Gerüstes mehrere Verweise auf Dateien. Diese Dateien müssen wir nun noch anlegen. Folgen sie dazu dem jeweiligen Link und kopieren sie den Quelltext aus der Datei. Bei den HTML-Dateien müssen sie zuvor noch den Seitenquelltext öffnen (Strg + U).

css/layout.css
Genauere Angaben zu den verwendeten CSS-Eigenschaften finden sie im folgenden Unterkapitel.
iframes/kopf.html
Passen Sie den Kopf nach ihren Wünschen an!
iframes/menu.html
Passen Sie das Menü nach ihren Wünschen an! Es müssen hier vor allem Links auf alle ihre Seiten stehen.
In <a href=""> findet sich ein neues Attribut target="". Normalerweise wird ein Verweisziel immer im selben Frame (<iframe>) wie der aufrufende Link dargestellt. target="_top" durchbricht dies und schreibt die neue Seite ins gesamte Fenster. Denken sie auch daran, dass sich die Datei menu.html im Unterverzeichnis iframes/ befindet und die aufzurufenden Webseiten im Projektverzeichnis (../index.html).
js/funktionen.js
Diese JavaScript-Funktion kennen wir schon aus Beispiel 13. Es gibt dazu also nichts weiter zu sagen.

Neue Tags und Eigenschaften

<img class="Kopf" src="" alt="..."/>
Hier binden wir ein Bild mit einer URI (src="") und einem Alternativtext (alt="") ein. Außerdem bekommt das Bild seine eigene Klasse, kann also wieder direkt mit CSS selektiert werden.
h1 { font-size:x-large; color:darkblue; }
h2 { font-size:large; color:darkblue; }
Wenn es um die reinen Textformatierungen geht, schlagen sie bitte in der Referenz nach. Die meisten CSS-Anweisungen sind selbsterklärend.
(Anhang: CSS-Eigenschaften)

Wichtige Formatierungen:

body {font-family:"Arial",Helvetica,sans-serif;
Weist dem gesamten Dokument eine Grundschriftart zu. Als Werte stehen durch Kommata getrennt mehrere Schriftarten. Im Beispiel sind das serifenlose („ohne Füßchen“) Schriften für Windows, Linux/Mac und allgemein.
background-color: #88f;
Farbangabe für den Hintergrund eines Tags.
position: absolute;
Das Tag (hier <div>) soll absolut, das heißt immer gleichbleibend zur linken oberen Ecke des Dokumentes, platziert werden.
position: fixed;
Das Tag (hier <div>) soll fixiert, das heißt immer gleichbleibend zur linken oberen des darstellenden Fenster, platziert werden.
border: 0; padding: 2pt;
Das Tag (hier <div>) hat keinen Rahmen und einen Innenabstand von 2 Punkten zwischen Rahmen und Text.
border: .5em ridge #fff; padding: 1em;
Das Tag (hier <div>) hat einen Rahmen von 0,5 Zeichenhöhen, ist vom Typ „ridge“, hat die Farbe #fff (weiß) und einen Abstand von einer Zeichenhöhe zwischen Rahmen und Text.
left: 2%; top: 0px;
Das Tag (hier <div>) hat 2% Abstand vom linken und 0 Pixel vom oberen Dokumentrand (keinen).
height: 100%; width: 95%;
Das Tag (hier <div>) hat eine Höhe von 100% und eine Breite von 95%.
z-index: 1;
Das Tag (hier <div>) liegt auf der Z-Achse (in den Raum hinein) auf Ebene 1 und ist damit das unterste.

Bitte beachten sie den Anhang: CSS-Einheiten und Farben, den Anhang: CSS-Eigenschaften und den Anhang: CSS-Boxmodell an dieser Stelle.

Übung:

Es bleibt noch die Vorlage und die Grafik für den Kopf (Name und Grafik selbst) anzupassen. Öffnen sie die Datei Seitenvorlage_zum_Kopieren.html mit dem Webbrowser, um sie zu überprüfen.

(Beispiel Webpräsenz (beispiele/03d/index.html))

Anhang: Tastaturkommandos

Hauptseite einer Webpräsenz

Die Hauptseite einer Webpräsenz heißt so gut wie immer index.html. Dies ist eine Vorgabe des Webservers, der eine Seite an den Browser ausliefert. Das heißt, wenn keine Webseite im Browser angegeben wird, liefert der Webserver die Seite index.html (beim IIS früher auch default.htm) zurück.

Zusammenfassung

Webpräsenz

Webpräsenz mit Leben füllen

Das war jetzt eine ganze Menge Holz auf einmal. Aber jetzt können wir weitere Seiten für unser Projekt erstellen.

Zunächst zur Übersicht noch einmal die Verzeichnisstruktur (Verzeichnisse enden mit „/“):

  • mein_projekt/
    • bilder/
      • logo.png
    • css/
      • layout.css
    • iframes/
      • kopf.html
      • menu.html
    • js/
      • funktionen.js
    • Seitenvorlage_zum_Kopieren.html
    • index.html
    • kontakt.html
    • impressum.html

Übung:

  • Spielen sie mit den vorhanden Dateien herum und schlagen sie in der Referenz neue Attribute und Werte nach.
  • Erstellen sie die Seiten (index.html, impressum.html und kontakte.html) auf Basis der Seitenvorlage.
  • Erstellen auf Basis der Seitenvorlage weitere Seiten (bilder.html, ) und passen sie das Menü (vorlagen/menu.html) entsprechend an.

Anhang: Tastaturkommandos

Wenn sie eine weitere Seite erstellen wollen, kopieren sie die Seitenvorlage und benennen sie entsprechend um. Vergessen sie nicht, diese Seite im Menü zugänglich zu machen. Als Kontaktseite können sie beispielsweise ihre Visitenkarte benutzen. Für das Impressum benutzen sie eine Impressumsgenerator (googlen (http://www.google.de/search?q=impressumsgenerator)). Auf der Hauptseite (index.html) stellen sie sich beispielsweise selbst kurz vor.

Zu guter letzt können sie die Seite auf einen Webserver kopieren. (Anhang: Benutzung von FTP)

Zusammenfassung

Teil 2 - Fortgeschritten

Kapitel

n.v.

Einführung

Im zweiten Kursteil verfeinern wir unsere Kenntnisse und lernen neue Tipps und Tricks. Nicht zu letzt beschäftigen wir uns auch mit Formularen.

Außerdem kümmern wir uns um die Rahmenbedingungen (Barrierefreiheit, Rechte, Werbung, Datenschutz und Suchoptimierung) einer Webpräsenz. Wir kümmern uns um die neue Heimat unser Webpräsenz (Webserver) und beschäftigen uns kurz mit Projekt­management im Webumfeld.

Fortgeschrittene Methoden

Unterkapitel

n.v.

Einführung

Hier im Kursteil II erweitern wir unsere Webpräsenz aus Kursteil I um einige fortgeschrittene Methoden. Eine moderne Webpräsenz benötigt nicht nur eine Startseite, eine Kontaktseite und ein Impressum, sondern auch Bildergalerien, Anfahrtskarten und ähnliches.

Außerdem sollten wir die Dateien unserer Webpräsenz auch mal auf einen FTP-Server hochladen: Anhang: Benutzung von FTP

Quellcode analysieren

Beispiel analysieren

Diesmal gehen wir etwas professioneller an die Analyse des Beispiels heran. Schauen wir uns aber zunächst erst einmal das erweiterte Beispiel der Webpräsenz (beispiele/04_erweiterte_Webpraesenz/index.html) an. Dazu klicken sie den vorstehenden Link mit der Kombination Strg + an, um ihn in einem neuen Tab zu öffnen.

Download: 04_erweiterte_Webpraesenz.zip (beispiele/04_erweiterte_Webpraesenz/04_erweiterte_Webpraesenz.zip)

Wie sie bereits wissen, können sie in Firefox (aber beispielsweise auch Chrome) mit der Strg + U den Quelltext der Seite öffnen. Wenn sie die Web Developer Erweiterung installiert und dort in den Optionen das Anzeigen von Quellcode in einem Tab aktiviert haben, können sie den Quelltext mit Shift + Alt + U in einem Tab anzeigen. Der Übersicht wegen, sollte das unser Standard werden.

Wenn sie jetzt den Quelltext geöffnet haben, können sie mit Strg + im Quelltext die weiteren Dateien (layout.css, funktionen.css) in neuen Tabs öffnen. Um auch die Dateien standard.css und erweitert.css zu sehen, benutzen sie die Webdeveloper Funktion "CSS / View CSS" (Shift + Alt + C) jeweils mit umgeschalteten Stylesheet. (s. Anhang: Tastaturkommandos)

Mit dieser Methode können sie den Quellcode einer interessanten Website schnell und einfach analysieren. Das Verwenden von Tabs erleichtert dabei die Übersicht ganz erheblich, da sich die Dateien nicht auf mehrere Fenster verteilen.

Übung:

Vollziehen sie dieses Vorgehen zur Analyse einer Webseite nach (beispielsweise diese).

Anhang: Tastaturkommandos

Anmerkung: Ab sofort werde ich dieses Vorgehen als bekannt voraussetzen und nur noch anmerken, dass wir beispielsweise den Quellcode oder eine bestimmte Datei anschauen wollen.

Die Erweiterungen

Widmen wir uns jetzt Schritt für Schritt den Neuerungen in unserem Beispiel. Öffnen sie sich dazu zunächst die Dateien des Beispiels, wie oben beschrieben. Alle relevanten Neuerungen sind mit doppelt unterstrichenen Kommentaren versehen, die mit den Überschriften hier im Buch korrellieren.

(Siehe dazu die folgenden Seiten).

Zusammenfassung

Erweitertes Layout

Dateien: layout.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/layout.css)

Drucklayout

Mit dem CSS-Befehl @media können sie Stylesheet auf bestimmt Ausgabemedien optimieren. Entsprechend finden sie die Beispiele auch in der Datei vorlagen/layout.css. Wichtig ist das für die Ausgabe der Seite auf dem Drucker und besonders großen oder kleinen Displays.

Für das Drucklayout wird das Menu versteckt und der Inhalt ganz nach links verschoben, um den ganzen Druckbereich ausnutzen zu können.

Editor - layout.css
/* Drucklayout */
@media print {
  #MenueDiv { display: none; }
  #InhaltDiv { left: 0px; }
}

Mit der Druckvorschau von Firefox, können sie sich dieses Varhalten anschauen.

dynamisches Layout

Das dynamische Layout verändert Poition und Aussehen des Menüs auf Geräten die weniger als 480 Pixel in der Breite haben. Neu sind hier die Umdefinition der <ul> als display: inline;, das heißt aus dem Block-Element wird ein Inline-Element und damit stehen alle Menüpunkt hintereinander.

Außerdem werden die Positionen der <div> nicht mehr position: absolute; oder position: fixed; sondern position: static; definiert. Das bewirkt, dass Kopf, Menü und Inhalte wie normale HTML-Elemente direkt untereinander gestellt werden (wie in unserem Visitenkartenbeispiel die <p>). So wird das kleine Display optimal ausgenutzt.

Editor - layout.css
/* Dynamisches Layout */
@media only screen and (min-width: 481px) {
  ul.Menue { width: 10em; margin: 0; padding: 2pt; }
  li.Menue { list-style: none; margin: 2pt;
             padding: 2pt; border: 1px solid gray;
             background-color: silver; }
}

/* Spezielle Defintionen für Mobilgeräte */
@media only screen and (max-width: 480px) {
  ul.Menue { display: inline; }
  li.Menue { list-style: none; border: 1px solid gray;
             background-color: silver; display: inline; }
}

@media only screen and (max-width: 480px) {
  #KopfDiv { position: static; height: auto; width: 100%; }
  #MenueDiv { position: static; padding: 0; width: 100%; height: 50px; }
  #InhaltDiv { position: static; min-width: 50%; min-height: 50%; }
}

Zusammenfassung

Animation

Dateien: index.html (beispiele/04_erweiterte_Webpraesenz/index.html), schmetterling.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/schmetterling.js)

Doppelt animierte Grafiken

Mit doppelt animierter Grafik ist hier gemeint, dass die Grafik selbst ein animiertes GIF (mit transparenten Hintergrund) ist und dieses GIF zusätzlich noch die Position auf der Seite wechselt. Die entsprechenden Stellen sind im Quelltext mit „Animation Schmetterling“ gekennzeichnet.

Position durch CSS

Durchsuchen wir zunächst wieder den Quelltext der Index-Seite des Beispiels: Als erstes finden wir dort mehrere Positionen (.pos0 - .pos9), welche im JavaScript-Teil zur Animation benutzt werden. Hier können sie ihrem Schmetterling also die Flugroute vorgeben.

Editor - index.html
/* Animation Schmetterling (für function animateButterfly()) */
.pos0 { position:absolute; Left:230px; Top:60px;  }
.pos1 { position:absolute; Left:215px; Top:70px;  }
.pos2 { position:absolute; Left:225px; Top:60px;  }
.pos3 { position:absolute; Left:240px; Top:65px;  }
.pos4 { position:absolute; Left:255px; Top:75px;  }
.pos5 { position:absolute; Left:285px; Top:90px;  }
.pos6 { position:absolute; Left:275px; Top:110px; }
.pos7 { position:absolute; Left:255px; Top:135px; }
.pos8 { position:absolute; Left:270px; Top:170px; }
.pos9 { position:absolute; Left:295px; Top:195px; }

Aufruf JavaScript

Dann finden wir das <img>-Tag des Schmetterlings innerhalb eines <div> (mit der Vorgabepoition .pos1). Interessant ist das neue Attribut onmouseover="", welches die JS-Funktion animateButterfly() startet, wenn die Maus über das Element (hier das Bild) fährt.

Editor - index.html
<div class="pos1" id="butterflyDiv">
<!-- Animation Schmetterling per mouseover starten -->
  <img id="butterflyImg"
       src="bilder/schmetterling.gif"
       height="80"
       alt="animierter Schmetterling"
       onmouseover="javascript:animateButterfly())"/>
</div>

Ein Stückchen weiter unten wird diese Funktion noch einmal innerhalb eines Links aufgerufen. Der Link bekommt dazu als Schema „javascript:“ angewiesen, damit er weiss, dass er Javascript aufrufen soll.

Editor - index.html
<p>
<!-- Animation Schmetterling per Link starten -->
  <a href="javascript:animateButterfly()">
    Flieg, Schmetterling, flieg!
  </a>
</p>

Den eigentlichen JavaScript-Code in schmetterling.js werden wir nicht genauer analysieren, da er an dieser Stelle viel zu komplex ist.

Zusammenfassung

Animationen auf Webseiten erreichen sie mittels

Stylesheet umschalten

Dateien: index.html (beispiele/04_erweiterte_Webpraesenz/index.html), standard.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/standard.css), erweitert.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/erweitert.css), switchStyle.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/switchStyle.js)

Stylesheet einbinden

Ein immer wieder interessanter Effekt, ist das Umschalten des Stylesheets im laufenden Betrieb.

Auch hier starten wir wieder im Quelltext der Hauptseite. Zunächst stossen wir da innerhalb der Definition der internen Stylesheets auf die Zeile <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" />. Hier verlinken wir zusätlich zum normalen Stylesheet layout.css ein leeres standard.css.

Editor - index.html
  <!-- Stylesheet umschalten - Einbinden des Stylesheets
       ================================================= -->
  <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" />

Stylesheet umschalten

Weiter unten findet sich dann nur noch der Aufruf der JS-Funktion changeCSSFile() aus einem Link heraus, wie schon oben beim Schmetterling beschrieben.

Editor - index.html
    <!-- Stylesheet umschalten
         ===================== -->
      <a href="javascript:changeCSSFile('vorlagen/standard.css', 0);">Style „Standard“</a> /
      <a href="javascript:changeCSSFile('vorlagen/erweitert.css', 0);">Style „Erweitert“</a>

JavaScript

Diese Funktion findet sich in der Datei vorlagen/switchStyle.js. Sie ersetzt die Zeile <link rel="stylesheet" type="text/css" href="vorlagen/standard.css" /> durch <link rel="stylesheet" type="text/css" href="vorlagen/erweitert.css" />.

Zusammenfassung

Absätze einblenden

Dateien: index.html (beispiele/04_erweiterte_Webpraesenz/index.html), toggleDiv.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/toggleDiv.js)

Vorbemerkung

Das Ein- und Ausblenden von Elementen auf Webseiten ist zwar ein interessanter Effekt. Stellt aber für manche Nutzer durchaus eine Barriere dar und sollte deshalb nur sparsam eingesetzt werden.

Absätze ausblenden

Im Quelltext der Hauptseite findet sich dazu zunächst innerhalb der internen Stylesheets zwei Definitionen #Absatz1 {display:none;} und #Absatz2 {display:none;}. Die Eigenschaft display:none; verhindert das Anzeigen des so formatierten Tags. Die Defintion auf der Seite ist durchaus gewollt, da das Verstecken der Absätze ja auch nur für diese Seite gilt!

Editor - index.html
    /* Absätze einblenden (function toggleDiv(myDiv)) */
    #Absatz1 { display:none; }
    #Absatz2 { display:none; }

Absätze einblenden

Um sie wieder einzublenden, findet sich der Aufruf der JS-Funktion toggleDiv() mit dem Parameter „Absatz1“ oder „Absatz2“ jeweils vor dem versteckten Absatz. Bitte beachten sie, dass der Parameter und die id="" übereinstimmen müssen.

Anmerkung: Hier macht übrigens wieder eine „ID“ Sinn, da sich das Ein-/Ausblenden jeweils nur auf einen bestimmten Absatz auswirken soll.

Editor - index.html
    <!-- Absatz 1 einblenden -->
      <a href="%%1%%">
        mehr ...
      </a>
    </p>
    <div id="Absatz1">

JavaScript

In der Datei vorlagen/toggleDiv.js ist diese Funktion definert. Sie manipuliert den Wert display: zwischen "" (leer) und block. Der leere Wert provoziert das Standardverhalten (hidden) aus dem Stylesheet und block ist der Standardwert für ein <div> (Blockelement). Damit zeigt block den <div> an.

Zusammenfassung

Anfahrt (OSM)

Dateien: anfahrt.html (beispiele/04_erweiterte_Webpraesenz/anfahrt.html), osm.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/osm.js), osm.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/osm.css)

OpenStreetMap

Für eine Anfahrtsbeschreibung bietet sich heute die Verwendung von OpenStreetMap (http://www.openstreetmap.de) an. Openstreetmap ist die Wikipedia der Landkarten, es stellt also frei Geodaten und Karten zur Verfügung.

Einbindung

Das Beispiel dazu finden sie nicht auf der Hauptseite sondern unter anfahrt.html.

Hier finden sich drei Stellen: im Header das Einbinden von drei zusätzlichen JS-Funktionsbibliotheken und der CSS-Datei, im <body> der Aufruf der darstellenden Funktion drawmap() und im Inhalte-Div ein <div id="map">, der Platz für die Karte schafft (formatiert in osm.css).

Anmerkung: Beachten sie, dass die Reihenfolge der JavaScript-Bibliotheken wichtig ist. osm.js benutzt OpenStreetMap.js und OpenLayers.js, OpenStreetMap.js wiederum benutzt OpenLayers.js. Entsprechend müssen sie zuerst OpenLayers.js dann OpenStreetMap.js und zuletzt osm.js einbinden.

Editor - index.html
<head><!-- Anfahrt mit Open Source -->
  <link rel="stylesheet" type="text/css" href="vorlagen/osm.css" />
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script type="text/javascript" src="vorlagen/osm.js"></script></head>
Editor - index.html
  <!-- Anfahrt mit Open Source Map darstellen -->
  <body onload="drawmap(13.150072,52.714831,12,'CIS - Ch. Hartnick, Sandweg 10<br/>16727 Oberkrämer OT Bärenklau')">
Editor - index.html
<body onload=""><!-- Anfahrt mit Open Source Bereich -->
  <div id="map"></div></body>

JavaScript

Den eigentlichen JavaScript-Code werden wir nicht genauer analysieren, da er viel zu komplex ist. Allerdings können wir über die Aufrufparameter die Karte beeinflussen.

Tabelle: Funktion drawmap
#Beschreibung
1Längengrad
(erscheint unten rechts als erstes, wenn Maus über die Karte fährt)
2Breitengrad
(erscheint unten rechts als zweites, wenn Maus über die Karte fährt)
3Zoom-Faktor der Karte
4Text der bei Klicken auf den roten Pfeil erscheinen soll

Für die Parameter können sie unter www.osm.org (http://www.osm.org) auf das Symbol für „Teilen“ (Viereck mit Pfeil) klicken und ihren Kartenausschnitt wählen. Markieren sie „Kartenmarker setzen“. Die Daten für Zoom, Längengrad und Breitengrad erscheinen dann in der Eingabezeile des Browsers (allerdings in umgekehrter Reihenfolge).

Mitmach-Projekt

Openstreetmap ist ein Mitmachprojekt. Sollten sie mitmachen wollen, finden sie alles für den Einstieg auf der Homepage (http://www.openstreetmap.de) unter „Wie kann ich mitmachen“. Auf der Projektseite (http://www.osm.org) können sie mit dem Symbol „Hinweis/Fehler melden“ (Sprechblase) Anmerkungen zur Karte geben.

Zusammenfassung

Bildergallerie

Dateien: bilder.html (beispiele/04_erweiterte_Webpraesenz/bilder.html), jquery-1.10.2.min.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/jquery-1.10.2.min.js), lightbox-2.6.min.js (beispiele/04_erweiterte_Webpraesenz/vorlagen/lightbox-2.6.min.js), lightbox.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/lightbox.css)

Allgemein

Moderne Webpräsenzen sind ohne eine animierte Bildergallerie kaum denkbar. Dafür müssen wir JavaScript benutzen. Natürlich programmieren wir eine entsprechende Funktion nicht selbst, sondern nutzen ein bestehende Bibliothek aus dem Netz: LightBox von Lokesh Dhakar (http://www.lokeshdhakar.com/projects/lightbox2/) (Download LightBox 2.6 (beispiele/04_Lightbox/lightbox2.6.zip))

Anmerkung: Auf der Website von Lokesh steht mittlerweile eine neuere Version zur Verfügung. Deshalb ist es sinnvoll alle Dateien/Bibliotheken immer auf die eigene Site zu kopieren.

Lightbox

Sowohl JQuery (http://de.wikipedia.org/wiki/JQuery) als auch Lightbox sind in einer Minimalversion (.min.js) beigelegt, die nicht für Sichtbarkeit, sondern für möglichst kleine Dateigrößen ausgelegt sind. Sie sind also auf Ladezeit optimiert. Sollten sie externes JavaScript verwenden, achten sie immer auf solche Minimalversionen!

Vorbereitung

Die Dateien jquery-1.10.2.min.js, lightbox-2.6.min.js und lightbox.css sind im Header der HTML-Datei eingebunden.

Editor - index.html
  <!-- LightBox -->
  <link rel="stylesheet" type="text/css" href="vorlagen/lightbox.css" />
  <script type="text/javascript" src="vorlagen/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="vorlagen/lightbox-2.6.min.js"></script>

Im bilder-Ordner finden sie die Dateien close.png, loading.gif, prev.png und next.png, die lightbox.css benötigt. Die Orginaldatei von Lokesh Dhakar sucht sie im Ordner img, das habe ich aber für unser Beispiel angepaßt.

Benutzung

Jedes Bild wird als Link (<a href="">) in der Seite eingebunden. Dieser Link bekommt ein spezielles Attribut (<a href="" data-lightbox="Gruppe">), damit er von Lightbox behandelt wird. Das innerhalb des Links eingebundene Bild selbst sollte ein Thumbnail (Vorschaubild (http://de.wikipedia.org/wiki/Vorschaubild)) des eigentlichen Bildes sein.

Dieses Attribut data-lightbox="" sollte bei einer einzelnen Grafik eindeutig sein:

Editor - beispiel.html
<a href="bilder/single.jpg" data-lightbox="Einzeln" title="Bildüberschrift"><img src="bilder/thumb_single.jpg" /></a>

Bei einer Diashow sollte er dagegen für alle Bilder gleich sein.

Editor - index.html
<div class="Bilder">
  <a href="bilder/image-1.jpg" data-lightbox="Gruppe1" title="Bild1"><img src="bilder/thumb-1.jpg" /></a>
  <a href="bilder/image-2.jpg" data-lightbox="Gruppe1" title="Bild2"><img src="bilder/thumb-2.jpg" /></a>
  <a href="bilder/image-3.jpg" data-lightbox="Gruppe1" title="Bild3"><img src="bilder/thumb-3.jpg" /></a>
  <a href="bilder/image-4.jpg" data-lightbox="Gruppe1" title="Bild4"><img src="bilder/thumb-4.jpg" /></a>
  <a href="bilder/image-5.jpg" data-lightbox="Gruppe1" title="Bild5"><img src="bilder/thumb-5.jpg" /></a>
</div>

Anmerkung: Vielleicht ist es ihnen ja aufgefallen. Lightbox wird nicht auf der HTML-Seite aufgerufen (kein Funktionsaufruf). Dies ist (natürlich) kein Fehler, sondern ein Trick im Javascript Code.

Zusammenfassung

Formulare

Einführung

HTML-Formulare brauchen immer eine „Gegenstelle“ auf dem Server, der sie die eingegebenen Daten übergeben können. Zwar kann man die Formulardaten auch mit JavaScript weiterverarbeiten, doch irgendwann müssen sie gespeichert werden. Deshalb benötigen wir zum Testen des folgenden Beispiels einen lokalen oder entfernten Webserver (s.Anhang XAMPP).

Referenz: Formulare (http://de.selfhtml.org/navigation/html.htm#formulare) in SelfHTML.

Neue Tags

Folgende Tags existieren für Formulare:

<form>
Beginn des Formulars
<fieldset>
Gruppierung
<legend>
Legende
<label for="Feld">
Beschriftung eines Eingabefeldes
<input id="Feld">
Eingabefeld
<select>
Listenauswahl
<option>
Listenpunkt
<textarea>
Eingabebereich
<button>
Schalter

Die einzelnen Tags haben recht vielfältige Attribute:

form

<form … >
name=""
Formularname (bsw. für JS)
action=""
URI des Serverscripts
onsubmit=""
JS-Funktion beim Abschicken
method=""
GET/POST (s.u.)

GET und POST sind Verfahren um die Werte von Formularen an eine Auswerteseite zu übergeben. GET versendet die Werte in der URI (name.html?variable=wert) und kann so etwa bis zu 200 Zeichen übergeben. GET ist schneller als POST.

POST versendet die Werte über die Standardeingabe (also direkt). Die Werte erscheinen so nicht in der URI und werden damit nicht in den Log-Dateien des Servers gespeichert. Außerdem sind Passwörter nicht zu sehen.

Get und Post in SelfPHP (http://www.selfphp.info/praxisbuch/praxisbuchseite.php?site=183&group=32)

label

<label for="FeldID"> bezeichnet ein Eingabefeld. Dies kann zwar auch mittels normalen HTML erfolgen, aber <label> ist barrierefrei und besser mit CSS zu händeln.

input type="…"

<input … >
name
Inputname (bsw. für JS)
id
ID für das Zusammenspiel mit <label>
type
Verschiedene Eingabetypen
text: Texteingabe
passwort: Passworteingabe
file: Dateiauswahl
checkbox (<option>): Auswahl
radio (<option>): Auswahl
reset: Schalter zum Leeren
submit: Schalter zum Absenden
image: Grafischer Schalter
value
Vorgabewert
accesskey
Barrierfreiheit: Taste für direkten Zugriff
tabindex
Barrierfreiheit: Reihenfolge für Tab

Beispiel

Dateien: kontakt.html (beispiele/04_erweiterte_Webpraesenz/kontakt.html), antwort.php (_show_plain.php?name=beispiele/04_erweiterte_Webpraesenz/antwort.php) formular.css (beispiele/04_erweiterte_Webpraesenz/vorlagen/formular.css)

Beachten sie, dass dieses Beispiel nur auf einem Webserver funktioniert! Sie sehen schon an der Dateiendung ".php (http://de.wikipedia.org/wiki/PHP)", das es sich bei der Antwortdatei (antwort.php) um ein Serverskript handelt.

Ähnlich wie bei Javascript können sie viele freie PHP-Skripte im Netz finden und benutzen. Selbst die meisten großen Webanwendungen wie Conten Management Systeme und Shops sind im Endeffekt PHP-Skripte.

Neben PHP existieren noch andere Sprachen für Server. Klären sie mit ihrem Provider, welche ihr Hostingangebot unterstützt. (s. Webserver)

Kontaktseite

form span input { display:none }
Blendet das <input>-Tag, welches von einen <span> umgeben ist, aus. Dieses erste Feld sollte leer bleiben und ist eine Falle für Spammer, welche über das Formular automatisch Werbung verschicken wollen.
label { display: inline-block; width: 12em;
Wandelt das <label>-Tag in ein gemischtes "inline-block"-Element um, um ihn eine Breite (width) zuordnen zu können. So müssen die einzelnen Eingabefelder nicht in einer formatierenden Tabelle angeordnet werden.
.ak { border-bottom: 0.1em solid blue; }
Formatierung um Tastenkürzel (analog zu Windows) per Unterstreichung hervorzuheben. Firefox ruft die Tastenkürzel mit Shift + Alt + Tastenkürzel auf.
function checkFields ()
Diese JS-Funktion prüft die Eingabefelder Name, Email und Nachricht auf Eingaben und verweigert sonst das Abschicken des Formulars (return false;).
<form name="Contact" action="kform.php" method="post" onsubmit="return checkFields();">
Das Formular ruft beim Abschicken die Datei "kform.php" auf. Vorher prüft die JS-Funktion "checkFields()" die Eingabefelder.
<span><input …>
Markierung für das ausgeblendete Spamfeld (s.o.).
<span class="ak">N</span>ame … <input accesskey="n"
Hervorheben des Tastenkürzel (s.o.)
maxlength="70" size="47"
Es dürfen höchstens 70 Zeichen eingegeben werden und das Eingabefeld ist 47 Zeichen breit.
<input type="radio" name="rbtn" checked="checked" …>
<input type="radio" name="rbtn"
<input type="radio" name="rbtn" ))
Diese Umschalteauswahl (Radiobutton) mit drei Schaltern erlaubt nur jeweils eine Auswahl. Die Zusammengehörigkeit der Felder erfolgt über den gleichen Namen. Das Attribut checked="checked" belegt diesen Schalter vor.
<input name="cbx[…]" type="checkbox" …>
Diese Mehrfachauswahl (Checkbox cbx[1]-cbx[5]) mit fünf Schaltern erlaubt eine beliebige Auswahl. Die Zusammengehörigkeit der Felder erfolgt über den gleichen Namen. (Anmerkung: Die eckigen Klammern definieren ein Array für PHP).
<select> <option>
Definition einer Auswahlliste.
<textarea cols="56" rows="13">
Definition eines Eingabebereichs mit der Größe 56*13.
<input type="reset" …>
Schalter zum Leeren (reset) und Abschicken (submit) des Formulars.

Antwortseite

PHP-Dateien werden auf dem Server interpretiert. Dieser liefert dann die interpretierte Datei als reine HTML-Datei aus. PHP-Code ist deshalb auf dem Client niemals zu sehen.

Ich gehe hier kurz auf den PHP-Code ein, damit sie eine Vorstellung bekommen, wie dieser Aussieht. Beachten sie das PHP und Javascript zwei völlig verschiedene Sprachen sind, auch wenn hier zur Unterscheidung von HTML die selbe Farbe eingesetzt wird!

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
Die Kennung "<?php *..* ?>" leitet einen PHP-Skriptteil innerhalb einer HTML-Datei ein. Allerdings muss die Datei dazu vom Webserver als PHP-Datei erkannt werden (Endung: PHP). Da "<?xml … ?>" auch mit "<?" anfängt, wird es hier per echo in die HTML-Datei ausgegeben.
<a href="javascript:history.back();">
Entspricht der Funktionalität des Browser-Schalters "Zurück".
$mymail='buch@example.com';
Hier muss ihre Email-Adresse stehen.
$pname= $_POST['name'];
Variablen beginnen in PHP immer mit "$". Die Funktion $_POST[] übergibt per POST übertragene Werte. Bei der Checkbox wird ein komplettes Array übergeben ($pcheck['1'] - $pcheck['5']).
die('Meldung');
Beendet (die - stirb) das PHP-Skript an dieser Stelle.
$msgbr=nl2br($pmsg);
Die Funktion nl2br() wandelt Zeilenumbrüche in <br /> um.
$mx=<<<cb

cb;
Der Operator "<<<" liest die nächsten Zeilen in eine Variable ein, bis er die Endekennung (hier "cb") findet. Die Endekennung muss immer in der ersten Zeile stehen!
mail()
Die Funktion mail() verschickt eine Mail über einen Mailserver (MTA (http://de.wikipedia.org/wiki/Mail_Transfer_Agent)). Wenn ein solcher nicht installiert ist, kommt es zu einem Fehler.

Anpassung

Wenn sie das Mailformular auf ihrer Seite verwenden wollen, benötigen sie sicherlich nicht alle Formularfelder. Wenn sie nun Felder in der HTML-Datei löschen, müssen sie diese auch in der PHP-Datei entfernen.

Suchen sie dazu unter dem Kommentar //Hole alle Inhalte der Formularfelder das entsprechende Feld über das Attribut name="". Merken sie sich die zugehörige Variable. Mit dieser finden sie die entsprechenden Zeilen unter dem Kommentar //Prüfen der Felder und //Zusammenfügen der Mail. Diese Zeilen unter den Kommentaren können sie dann löschen.

Zusammenfassung

Spezielle Dateien

favicon.ico

Definition

Ein Favicon (Favoriten-Symbol) ist ein 16×16 oder 32×32 Pixel großes Symbol. Es dient der Wiedererkennung einer Webpräsenz. Das Favicon taucht auch in der Lesezeichenliste (Favoriten), bei den Register­karten und unter Windows beim Speichern einer Seite auf dem Desktop auf.

Einbindung

Um ein Favicon einzubinden, existieren zwei Möglichkeiten:

Das Attribut type="" wird bei anderen Formaten als .ico verwendet:

Die Standardgrößen für .ICO sind 16×16 Pixel oder 32×32 Pixel. Die Farbtiefen können 16 bis 16,7 Millionen Farben (4-16 Bit). Für .GIF und .PNG entsprechend 16×16 Pixel und 256 Farben (8 Bit).

Generator

Die einfachste Art eine Favicon zu erstellen, ist ein Webgenerator:

Favicon Generator (http://www.favicon.cc/)

robots.txt

Robots.txt (http://de.wikipedia.org/wiki/Robots.txt) in der Wikipedia.

# robots.txt # Zugriff auf alle Dateien erlauben

User-agent: * Disallow:

.htaccess

.htaccess (http://de.wikipedia.org/wiki/.htaccess) in der Wikipedia.

Manifest

http://www.mediaevent.de/xhtml/manifest.html

Zusammenfassung

Webpräsenz generieren

Einfacher Generator

Eine Vorlage für eine Webpräsenz haben wir am Ende des letzten Hauptkapitels mit unserem Vorlagensystem kennengelernt. Dieses können wir relativ einfach noch ein wenig erweitern.

Als Vorüberlegung trennen wir eine Webseite aus der Webpräsenz in verschiedene Sektionen auf. Bisher haben wir die Unterseiten seiten_vorlage.html, kopf.html und menu.html. Innerhalb der Seitenvorlage haben wir noch die Sektion für den Inhalt.

Die Idee für unser Mini-Generator ist nun folgende: Unsere Vorlage wird jetzt per Platzhalter (%%menu%% und %%inhalt%%) mit dem automatisch generierten Menu und den Inhaltsdateien (index.source, ….source) befüllt. Der Kopf ist in die Vorlage integriert. Außerdem können beliebige Platzhalter (%%Seitentitel%%, %%Autor%%) mittels der Datei ersetzen.liste ersetzt werden.

Das Generieren des Menüs (cms/_menu.template) und das Ersetzen der Platzhalter übernimmt ein kleines Programm (Windows: generate.bat / Linux: generate.sh). Wobei das Windows-Programm das Linux-Programm mittels einer Windows-Bash (http://de.wikipedia.org/wiki/Bourne-again_shell) einfach aufruft. (Beispiel Generate)

Schema: Vergleich einfache Generatoren

Die eigentlichen Inhalte bekommen jeweils eine eigene Datei mit der Endung .source im Unterverzeichnis cms. Außerdem wird jeder Source-Datei eine Ziffer vorangestellt, die die Reihenfolge des Menüs vorgibt (0index.source, 1anfahrt.source, 2…). Das System verwaltet also höchstens zehn Seiten.

Unser Projekt sieht dann so aus:

  • mein_projekt/
    • cms/
      • 0index.source
      • 1kontakt.source
      • 2impressum.source
      • 3anfahrt.source
      • ersetzen.liste
      • vorlage.template
      • _menu.template
    • extern/
      • funktionen.js
      • layout.css
    • bilder/
      • logo.png
    • index.html
    • 1kontakt.source
    • 2impressum.source
    • 3anfahrt.source
    • generate.bat
    • generate.sh

Der Vorteil des Mini-CMS besteht darin, das immer alles neu generiert wird - also sich selbst Änderungen in der Datei cms/vorlage.template in den generierten Seiten auswirken. Außerdem müssen sie sich nicht um das Menü kümmern. Darin liegt dann auch gleich der größte Nachteil. Mehr als zehn Seiten lassen sich nicht verwalten und es gibt kein hierarchisches Menü.

Übung:

Laden sie sich das Archiv mit dem Beispiel herunter. Spielen sie damit herum.

Anhang: Tastaturkommandos

Hagen

Hagen (HTML-Generator) funktioniert nach dem selben Prinzip, ist aber um Größenordnungen komplexer. Es unterstützt den Webentwickler bei nahezu alle Aufgaben.

Zu Hagen existiert ein eigenes Handbuch (http://buch.im-ned.de/hagen/).

Übung:

Laden sie sich das Archiv mit dem Beispiel herunter. Spielen sie damit herum.

Anhang: Tastaturkommandos

Zusammenfassung

Webserver

Hosting

Der Begriff Hosting (http://de.wikipedia.org/wiki/Hosting) bedeutet „Gastgeber sein“. Wenn sie eine Webpräsenz geschaffen haben, möchten sie diese auch der Allgemeinheit zugänglich machen. Dazu mieten sie normalerweise bei einem Provider (http://de.wikipedia.org/wiki/Provider) oder Webhoster (http://de.wikipedia.org/wiki/Webhoster) Dienstleistungen wie

Außerdem kümmern sich Webhoster um

Normalerweise haben Hoster verschiedene Angebote für private Websites, Firmen-Websites und kommerzielle Internetprojekte.

Beispiel: WEBHOSTONE (http://www.webhostone.de)

Arten von Webservern

Es gibt verschiedene Arten von Webservern. Für den einfachen Einstieg bekommt man Webspace (http://de.wikipedia.org/wiki/Webspace) bei Sharehostern (http://de.wikipedia.org/wiki/Sharehoster). Dort kann man beliebige Dateien im Netz ohne eigenem Domainnamen speichern.

Bei einem Webhoster bekommt man verschieden Angebote wie: Eine eigene Domain auf einem geteilten Server (virtuelle Domain (http://de.wikipedia.org/wiki/Virtual_Hosting) (IP/Name)), eine eigene Domain auf einem virtuellen Server (virtuelle Maschine (http://de.wikipedia.org/wiki/Virtuelle_Maschine)), eine eigene Domain auf einem echten Server (dedicated Server (http://de.wikipedia.org/wiki/Server#Dedizierte_Server) bzw. RootServer (http://de.wikipedia.org/wiki/Host_%28Informationstechnik%29#Einem_Kunden_zugeordnet_.28dedicated_to_customer.29)), oder eine eigene Domain auf einem eigenem Server (Homing (http://de.wikipedia.org/wiki/Homing_%28Informationstechnologie%29)/Eigener Server). Wenn der Server vom Provider gewartet wird, spricht man vom managed Server (http://de.wikipedia.org/wiki/Managed_Server#Managed_Host).

Beispiel: WHO Produkte (http://www.webhostone.de/webspace.html)

Angebote im Webhosting

In einem Hosting-Vertrag sind meist Inklusivdomains enthalten. Man sollte darauf achten das der Traffic (http://de.wikipedia.org/wiki/Datenverkehr) (Datenverkehr) nicht extra berechnet wird (also eine Art Flatrate). Wird die eigene Webpräsenz plötzlich stark frquentiert, könnte es sonst teuer werden.

Die Leistungsfähigkeit wird auch stark durch die Anbindung ans Internet beschränkt. Je nach Anwendungsfall sollte es schon mindestens Fast Ethernet (http://de.wikipedia.org/wiki/Fast_Ethernet) (100MBit) seien. Normalerweise werden sie ein freies Unix (Linux, BSD) als Betriebssystem bekommen, manche Provider bieten allerdings auch Windows. Achten sie auch auf die Rechnerressourcen wie CPU (http://de.wikipedia.org/wiki/CPU) und Speicher (http://de.wikipedia.org/wiki/Arbeitsspeicher).

Fast jedes Webhosting bietet heute auch gleich Email-Dienste an. So können sie gleich vernünftige Adressen auf ihrer Webpräsenz angeben. Weitere Leistungen sind SSL (http://de.wikipedia.org/wiki/Transport_Layer_Security), PHP (http://de.wikipedia.org/wiki/PHP), MySQL (http://de.wikipedia.org/wiki/MySQL), CMS (http://de.wikipedia.org/wiki/Content-Management-System) und ähnliches.

Außerdem sollte es eine Administrationsoberfläche mit Zugriff auf Statistiken, Backups, das eigentliche Angebot (FTP, SSH)und Support geben. Die Verwaltung des Angebots sollte das Anlegen von Subdomains, Zugängen und Mailkonten, den Neustart des Systems, das Verändern der Konfiguration, das Einspielen von Updates und eine virtuelle Konsole (http://de.wikipedia.org/wiki/Kommandozeile) umfassen.

Beispiel: WHO Adminpanel (http://www.webhostone.de/who_adminpanel_einfuehrung.html)

Zusammenfassung

Rahmenbedingungen

Unterkapitel

n.v.

Einführung

Im Internet bewegt man sich in der Öffentlichkeit. Und eine Präsenz dort ist wie ein Schaufenster in der Realität. Es ist also wichtig auch das drumherum zu beachten.

Barrieren

Standards

Die Web_Accessibility_Initiative (WAI (http://de.wikipedia.org/wiki/Web_Accessibility_Initiative)) ist eine Gruppe innerhalb des W3C, die sich um Standards (WCAG) zum barrierfreien Zugang im Web kümmert.

Auszug aus Wikipedia (cc-by-sa):

WCAG 1.0: Die wichtigsten Punkte

Zur Einhaltung des Standards WCAG 1.0 bedarf es insbesondere der folgenden vierzehn Punkte:

  1. Stellen Sie äquivalente Alternativen für Audio- und visuellen Inhalt bereit.
  2. Verlassen Sie sich nicht auf Farbe allein (beim Auszeichnen von Struktur/Semantik).
  3. Verwenden Sie Markup und Stylesheets und erledigen Sie dies auf korrekte Weise.
  4. Verdeutlichen Sie die Verwendung natürlicher Sprache (verwenden Sie beispielsweise das HTML-lang Attribut für das gesamte Dokument und Teile in einer spezifischen Sprache).
  5. Erstellen Sie Tabellen, die geschmeidig transformieren (verwenden Sie Tabellen für tabuläre Daten, aber nicht für das Layout allein. Verwenden Sie die entsprechenden Elemente wie <thead> und <tbody> für die Auszeichnung von Tabellenbereichen).
  6. Sorgen Sie dafür, dass Seiten, die neue Techniken verwenden, geschmeidig transformieren (und damit auch auf älteren bzw. für Accessibility geeigneten Benutzeragenten lauffähig sind).
  7. Sorgen Sie für eine Kontrolle des Benutzers über zeitgesteuerte Änderungen des Inhalts (indem beispielsweise eine Abschaltung oder eine Verzögerung erlaubt wird - gilt im Besonderen auch für den Ablauf der Benutzersitzung oder für den Refresh von Seiten).
  8. Sorgen Sie für direkte Zugänglichkeit eingebetteter Benutzerschnittstellen (Applets/Skripts sollten über dieselbe Art und Weise wie die Browserschnittstelle selbst bedienbar sein).
  9. Wählen Sie ein geräteunabhängiges Design (unabhängig vom Eingabegerät, sei es Tastatur, Maus, Sprache).
  10. Verwenden Sie Interim-Lösungen (bis die Standards in diesem Bereich von allen Eingabegeräten vollständig unterstützt werden).
  11. Verwenden Sie W3C-Techniken und -Richtlinien.
  12. Stellen Sie Informationen zum Kontext und zur Orientierung bereit.
  13. Stellen Sie klare Navigationsmechanismen bereit.
  14. Sorgen Sie dafür, dass Dokumente klar und einfach gehalten sind.

WCAG 2.0

WCAG 2.0 wurde am 11. Dezember 2008 als W3C Recommendation veröffentlicht. Während die WCAG 1.0 stark an HTML und CSS gebunden waren, und daher nach einigen Jahren nicht mehr dem Stand der Technik entsprachen, haben die WCAG 2.0 zum Ziel, unabhängig von bestimmten Technologien zu sein.

Die Richtlinien sind in 4 Prinzipien gruppiert:

BITV

Die Barrierefreie Informationstechnik Verordnung (BITV (http://de.wikipedia.org/wiki/Barrierefreie-Informationstechnik-Verordnung)) ist an WCAG angelehnt. Sie ist für den öffentlicher Bereich verpflichtend, wird aber auch in private Zielvereinbarungen aufgenommen.

Barrieren (25% der Benutzer)

Typische Barrieren für Behinderte im Web sind:

Barrieren abbauen

Website der Aktion Mensch

www.einfach-fuer-alle.de (http://www.einfach-fuer-alle.de)

Zusammenfassung

Recht

Telemediengesetz

Wer sich im Internet präsentiert, muss das Telemediengesetz (TMG (http://de.wikipedia.org/wiki/Telemediengesetz)) beachtet. Es enthält unter anderen folgende Regelungen:

Namen als Domains

Urheber- und Leistungsschutzrechte

Verantwortlichkeit für Inhalte

Legale Inhalte

Abmahnungen

Zusammenfassung

Werbung

Internetwerbung (http://de.wikipedia.org/wiki/Internetwerbung) in der Wikipedia.

Begriffe

Werbebegriffe
BegriffErläuterung
Ad(vertising)Werbeanzeige auf Webseite
Ad-Impression (AI)Anzahl der Anzeigen einer Werbung
Ad-Serverspeziller Server zum Ausliefern von Werbung
Cost per click Cost per leadKosten pro Klick Kosten pro Action
Click through rateVerhältnis AI zu realen clicks
LeadWerbeaktion
Page-impressionsSeitendarstellungen
VisitBesucher einer Präsenz
TargetingWerbung auf bekannten Besucher zuschneiden

Formen

Akzeptanz

Kostenlose Werbung

Zusammenfassung

Datenschutz

Datenschutz

Datenschutz (http://de.wikipedia.org/wiki/Datenschutz) beruht auf einem Grundrecht (Recht auf informationelle Selbstbestimmung)
(Aber: Ausland)

Bundesdatenschutzgesetz (BDSG)

Bundesdatenschutzgesetz (http://de.wikipedia.org/wiki/Bundesdatenschutzgesetz)

international anerkannte Datenschutzprinzipien

Zusammenfassung

Suchoptimierung

Arbeitsweise

Optimierung

Webmastertools

https://www.google.com/webmasters

Kritik

Zusammenfassung

Projektmanagement

Unterkapitel

n.v.

Einführung

Ein vernünftige Planung erleichtert das Erstellen einer Webpräsenz. Projekt­management ist dafür das probate Mittel.

Schema: Vergleich einfache Generatoren

„Baustellenschilder“ sind verboten! Projekte werden erst nach Fertigstellung online gestellt!

Phase Ideenfindung

Die Phase der Ideenfindung reicht von der Ideensammlung bis zu einem ersten Ergebnisbericht.

Ideensammlung

Ergebnisse

Zusammenfassung der Protokolle als Dokumentation der Ideenfindungsphase.

Dann erfolgt der eigentliche Projektbeginn.

Phase Initialisierung

Die Phase Initialisierung verbindet die übergeordnete Ideenfindung mit der operativen Ausführungsebene und schafft für das Projekt eine definierte Ausgangsbasis.

Festlegung der Projektziele

Zielgruppen

Organisatorischer Rahmen

Technischer Rahmen

Anforderungsdefinition

erste Risikoanalyse

(eventuell Abbruch des Projekts)

Ergebnisse

Phase Analyse

Die Phase Analyse ist ein Klärungsprozess, der mit vertretbarem Aufwand eine Entscheidung über die grundsätzliche Art der Systemrealiserung herbeiführt. Unwirtschaftliche oder nicht realisierbare Vorhaben sollen erkannt und rechtzeitig abgebrochen werden.

Situationsanalyse

Die Situationsanalyse ist keine objektive IST-Analyse sondern die Betrachtung der augenblicklichen subjektiven Situation, die zum Projektstart führt.

Sollanalyse

Die Sollanalyse beschreibt das zukünftige System.

Lösungsvorschläge

Ergebnisse

eventuell Abbruch des Projekts oder Rückschritt zur „Initialisierung“

Phase Konzept

Die Konzeptphase dient zur Verfeinerung des gewählten Lösungsvorschlags und ermöglicht eine fundierte Beurteilung des Systems. Das erarbeitete Konzept legt den Rahmen für die nachfolgenden Realisierung und Einführung fest.

Vollständige Darstellung des Systems

Ergebnisse

eventuell Rückschritt zur Initialisierung oder Analyse bei definitorischen oder analytische Schwächen.

Phase Realisierung

Die Realisierungsphase dient zur Erstellung des einführbereiten Systems einschließlich Migrationsverfahren und schafft die Voraussetzungen für die nachfolgende Einführung.

Abschluß Spezifikationen

Implementierung / Prüfen

Testen

Ein Testplan ist anzugeben. Er enthält Testfälle (Eingaben und erwartete Ausgaben) oder auch Testszenarien (z.B. Einfügen, Anschauen, Ändern, Anschauen, Löschen, Anschauen).

Ergebnisse

eventuell Rückschritt zur Analyse oder zum Konzept bei analytischen oder konzeptionellen Schwächen

Phase Einführung

Die Phase Einführung dient der Installation des Systems und der Aufnahme des Betriebs. Sie gewährleistet einen sicheren Übergang vom bestehenden System zum neuen System.

Migration/Installation

Durchführung der Migration/Installation nach dem Handbuch.

Kommunikation

Abnahme und Beurteilung

Entscheid über den Projektabschluss

Ergebnisse

eventuell Rückschritt zur Realisierung zwecks Nachbesserung

Betrieb

Der Betrieb ist wie die Planung kein Teil des eigentlichen Projekts. Allerdings sollten die Projektphasen einen sichern Betrieb ermöglichen (Handbücher, Entwicklung).

Kontrolle

Maßnahmen

Teil 3 - Profi

Kapitel

n.v.

Einführung

Im dritten Kursteil steigern wir unsere fortgeschrittenen Kentnisse zum Profi.

Techniken

Unterkapitel

n.v.

Einführung

Webtechniken für mehr Pep auf der Seite.

Boxen

http://www.mediaevent.de/css/display-flex.html

Schriften

@font-face {
   font-family: WRWestern;
   src: url( images/WesternNormal.eot );
   src: local('Ø'), url( images/WesternNormal.woff) format('woff'), url( images/WesternNormal.ttf) format('truetype');
}

Texte

p { font-size: medium; widows:5; orphans:5; text-align: justify; } p+p { text-indent: 1em; }

  1. spalten { -moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;
  2. moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em;
  3. moz-column-rule: 1px dotted gray; -webkit-column-rule: 1px dotted gray; column-rule: 1px dotted gray; }
  4. //li.level1:before { content:counter(kz1) ' '; } li.level2:before { content:counter(kz1) '.' counter(kz2,lower-alpha) ' '; } li.level3:before { content:counter(kz3) ' '; } li.level1 { counter-increment:kz1; counter-reset:kz2; } li.level2 { counter-increment:kz2; counter-reset:kz3; } li.level3 { counter-increment:kz3; }

Formeln

http://www.mediaevent.de/2012/12/mathml-formeln-in-webseiten-mit-html5/

Canvas

http://www.mediaevent.de/xhtml/canvas.html http://www.mediaevent.de/javascript/canvas.html

Rezepte

Unterkapitel

n.v.

Einführung

Rezepte für wohschmeckende Webseiten :-)

Mehrsprachige Webpräsenz

Editor - functions.js
// --------------------------------------------------------------
// Cookie Handling
// --------------------------------------------------------------
function cookie_restore()  // Auslesen des Zustands aus Cookie
// --------------------------------------------------------------
{
  var cookiecontent;
  var sprache = "";

  if (document.cookie)
  {
    // Wert aus Cookie lesen
    cookiecontent = unescape(document.cookie);

    cookiearray = cookiecontent.split(";");
    for (var i = 0; i < cookiearray.length; i++) {
      name_wert = cookiearray[i].split("=");
      if ( name_wert[0]=="sprache" ) sprache = String (name_wert[1]);
    }
  }
  return sprache;
}
Editor - functions.js
// --------------------------------------------------------------
function cookie_persist(sprache)
// --------------------------------------------------------------
{
  var Verfallszeit;
  var Auszeit;
  var jetzt;

  // Verfall berechnen: 1 Jahr
  Verfallszeit = 1000*60*60*24*365;  // 1 Jahr in Millisekunden
  jetzt = new Date();
  Auszeit = new Date(jetzt.getTime() + Verfallszeit);

  // Werte _einzeln_ in cookie schreiben
  document.cookie = "sprache=" + sprache  + ";expires=" + Auszeit.toGMTString() + ";";
  // Wahr zurückgeben
  return true;
}
Editor - functions.js
// --------------------------------------------------------------
// CSS Handling
// --------------------------------------------------------------
function changeCSSFile(cssFile,cssLinkIndex) {
// --------------------------------------------------------------
  var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
  var newlink = document.createElement("link");

  newlink.setAttribute("rel",  "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);
  document.getElementsByTagName("head").item(0).replaceChild(newlink,oldlink);

  cookie_persist(cssFile);
}

var sprache = '';
sprache =  cookie_restore();
if ((sprache=='') & (navigator.language.indexOf("de") > -1)) sprache = 'de.css';
   if (sprache!='') changeCSSFile(sprache,0);
Editor - en.css
.en { display: auto; }
.de { display: none; }
Editor - de.css
.en { display: none; }
.de { display: auto; }
Editor - index.html
<p>
  <img src="images/en.png" onclick="javascript:changeCSSFile('en.css',0)" /> |
  <img src="images/de.png" onclick="javascript:changeCSSFile('de.css',0)" />
</p>
<h1>
  <span class="en">Hagen user manual</span>
  <span class="de">Hagen Benutzerhandbuch</span>
</h1>
<div class="en">
  <p>Hagen is a open source (lgpl) cross platform html generator (or client side cms).
    It supports the web developer by generating a website and writing the pages. For
    that purpose Hagen will automate as much tasks as it can.
  </p>
  <p>You can use Hagen to write a slideshow in cooperation with slidy  too. To do this look in
    <a href="slidy/">this slideshow</a>.
  </p>
  <p>Hagen was developed with Lazarus.
  </p>
</div><!-- Div: en -->
<div class="de">
<p>Hagen ist ein HTML-Generator / Client-Side CMS. Er unterstützt den Webentwickler
  beim Anlegen von Webpräsenzen und Schreiben der Seiten. Dazu automatisiert Hagen
  möglichst viele Aufgaben.
</p>
  <p>Hagen kann auch zusammen mit slidy zum Schreiben von Präsentationen benutzt werden.
    Sehen sie dazu <a href="slidy/">diese Präsentation</a>.
  </p>
  <p>Hagen wird mit Lazarus entwickelt.
  </p>
</div><!-- Div: de -->

SVG oder PNG

http://www.mediaevent.de/2013/04/svg-in-html-seiten/ http://www.mediaevent.de/2014/03/svg-in-einem-image-tag/

lokale Datei lesen

http://www.mediaevent.de/javascript/filereader.html

Suchen

Frameworks

Unterkapitel

n.v.

Einführung

Frameworks für besondere Seiten.

Slidy

YAML

http://www.yaml.de

http://www.scriptol.com/html5/frameworks.php http://www.sinnfly.de/web/html-und-css-frameworks/

Teil 4 - CMS

Kapitel

n.v.

Einführung

Im dritten Kursteil beschäftigen wir uns mit Content Management Systemen (CMS).

Dazu bauen wir selbst ein kleines Content Management System und schauen uns ein professionelles CMS (Joomla) an.

Content Management

Unterkapitel

n.v.

Einführung

Zunächst besprechen wir den allgemeinen Aufbau eines CMS und danach die Unterschiede zwischen einen client-basierten und einem server-basierten CMS.

CMS

Zusammspiel Server und Browser

Nach der Adressauflösung (DNS) sendet der Client (Browser) die Webseitenanfrage an den Server. Sollten weitere Objekte (CSS, JavaScript, Bilder, Text, ...) auf der Seite eingebunden sein, werden auch diese von den entsprechenden Servern angefragt. Die Server liefern dann die Ergebnisse an den Client zurück und dieser stellt sie dar.

Schema: Seitenabruf

Bevor der Browser die Abfragen losschickt, prüft er deren Vorhandensein im lokalen Cache. Sind diese noch aktuell, verwendet er diese. Hat er alle Objekte zusammen, baut er daraus die komplette Webseite auf. Dazu muss er natürlich den HTML-, CSS- und JS-Code korrekt interpretieren. Er bestimmt also, welche Tags und Eigenschaften (Versionen) benutzt werden können.

Schema: Seitenabruf Client

Die Webserver holen die angefragten Daten aus dem lokalen Dateisystem. Ein Webserver war am Anfang entsprechend sehr einfach gestrickt. Allerdings übernimmt er heute noch viele andere Aufgaben (Server-Skripte, …) und ist entsprechend komplex geworden.

Schema: Seitenabruf Server

Inhalt erstellen

Wenn wir Inhalte händisch erstellen, entwicken und strukturieren wir sie lokal. Dazu legen wir Dateien und Verzeichnisse an. Das müssen wir dann entsprechend auf dem Server wiederholen (lassen - von einem Programm).

Schema: Seitenerstellung

Auf dem Client benutzen wir dazu zwei Programme: Den Webeditor und einen FTP-Client (FTP-Dateimanager oder FTP-Synchronisator). Der Editor erstellt die Inhalte und der FTP-Client kopiert sie auf den Server.

Schema: Seitenerstellung Client

Das Gegenstück zum FTP-Client auf dem Server heißt entsprechend FTP-Server. Auch er ist ein relativ einfach gestricktes Programm. Er sorgt dafür, das wir mit einem FTP-Client mit Dateien und Verzeichnissen wie auf dem lokalen System arbeiten können.

Schema: Seitenerstellung Server

Inhalteverwaltung

Content Management kann man mit Inhalteverwaltung übersetzen. Das ist für uns eigentlich nichts neues - irgendwie müssen wir die Inhalte unserer Webseiten ja erstellen und anordnen. Content Mangement Systeme (CMS) sind Programme die uns dabei helfen. Sie haben vor allen Dingen folgende Funktionalitäten:

CMS sind Client- oder Serverbasiert.

Verschiedene CMS
"Händisches" CM
StrukturEigene Verantwortung
Keine Unterstützung
Inhalteselbstverwaltet
Entwicklung auf dem Client
BenutzerZusammenarbeit ist schwer zu händeln
Client-basiertes CM
StrukturMeist Vorgegeben
Automatische Verwaltung
Inhaltesystemverwaltet
Entwicklung auf dem Client
BenutzerMeist auf einen Rechner beschränkt
CMS
StrukturFast immer Vorgegeben
Automatische Verwaltung
Inhaltesystemverwaltet
Entwicklung auf dem Server
Module
BenutzerBenutzer- bis hin zur Rechteverwaltung

Baukasten

Darüber hinaus gibt es noch sogenannte Web- oder Homepagebaukästen (http://de.wikipedia.org/wiki/Homepage-Baukasten) wie Jimdo (http://de.jimdo.com/) oder Webnode (http://de.webnode.com/). Sie sind meist Server-basiert.

Mit diesen können sie mit wenigen Klicks eine Webseite zusammenklicken. Vorteile:

Nachteile:

Zusammenfassung

Client CM

Client-CMS

Client-CMS generieren Webpräsenzen auf einem Rechner (siehe Generatoren in Webpräsenz generieren). Im Prinzip funktioniert jedes Client-CMS wie das Beispielsystem dort. Die meisten haben natürlich mehr Komfort und Funtionalität (s. Hagen (http://buch.im-ned.de/hagen/)).

Schema: Vergleich einfache Generatoren

Es gibt einige Desktop CMS: googlen: Desktop CMS. (Weblica, Zeta Producer, BuddyW, …)

Zusammenfassung

Server CMS

Server CMS

Ein Server-Side CMS stellt ein sogenanntes Backend zum Erstellen und Verwalten von Strukturen sowie ein Frontend zur Darstellung der Inhalte (Content) zur Verfügung. Das CMS (meist in PHP oder anderen Serversprachen geschrieben) nimmt die Eingaben des Frontends entgegen und speichert sie (Datenbank).

Schema: CMS

Beim Seitenabruf holt der Server die Dateien nicht mehr aus dem Dateisystem, sondern aus einer Datenbak, wo er sie besser verwalten kann und zeigt sie im Frontend an.

Schema: CMS Seitenabruf

Während auf der Clientseite alles beim Alten bleibt, geschieht alle Programmlogik jetzt auf dem Server (php). Das System sucht sich aus dem Dateisystem und der Datenbank alle Bestandteile zusammen, fügt sie dann zusammen und liefert sie aus. Wenn das System eine Benutzer-/Rechteverwaltung hat, prüft es vorher noch diese Zugriffsrechte.

Schema: CMS Seitenabruf Server

Die Seitenerstellung geschieht jetzt auch ganz über den Server im Backend.

Schema: CMS Seitenerstellung

Zur Seitenerstelllung zeigt der Server im Browser einen entsprechenden Editor (wysiwyg) an und speichert zuletzt die Inhalte in der Datenbank. Meist können die Inhalte durch Kategorien strukturiert und Medieninhalte (Bilder, Videos, ...) verwaltet werden.

Schema: CMS Seitenerstellung Client

Im Server speichert das CMS die Daten in der Datenbank oder im Dateisystem.

Schema: CMS Seitenerstellung Server

Zusammenfassung

Joomla

Unterkapitel

n.v.

Einführung

Joomla ist ein freies CMS, das gerne auf kleineren bis mittleren Webpräsenzen eingesetzt wird.

Ich will das Rad nicht doppelt erfinden. Also folgt hier ein Verweis auf externe Literatur: (PDF unter „Book Details“)

Joomla Begriffe

Übersicht

Joomla ist einfach zu erlernen, sobald man das Begriffsystem verstanden hat:

Tabelle: Joomla allg. Begriffe
BegriffErläuterung
FrontendDie Darstellung der Webpräsenz
BackendVerwaltung (Administration) der Webpräsenz
BenutzerAnwender, der sich an das System anmelden kann
AdministratorSpezieller Benutzer, der System(-teile) verwaltet.
Author – Editor – PublisherSpezielle Benutzer für Inhalte
Manager - AdministratorSpezielle Benutzer für Verwaltung
BenutzerverwaltungBenutzer gewisse Rechte gewähren
(bsp. Administration oder Ansichten)
BeiträgeEin Text mit einem Titel und Grafiken …
KategorienJeder Beitrag kann genau einer Kategorie aus dem Kategorienbaum zugewiesen werden.


Tabelle: Joomla techn. Begriffe
BegriffErläuterung
MenüDas kennen wir schon. Es gibt aber mehrere
TemplatesWie unsere Seitenvorlage, aber mit viel mehr und flexibleren Sektionen (Modulpositionen)
ModuleAnzeige auf Modulpositionen: Alles was kein Beitrag ist (Menüs, Anmeldung, ...)
KomponentenAnzeige im <body>: Foren, Shops, Galerien, Blogs, …
Plug-InsMeist keine Anzeige: Anwendungen im Backend
LokalisierungJoomla unterstützt von Anfang an mehrere Sprachen
TinyMCEWysiwyg-Editor Plug-In
Markdown ist über Erweiterungen verfügbar

Joomla Überblick

Benutzer

Benutzergruppen für das Frontend

Benutzergruppen für das Backend

Zugriffsebenen

Menüs

Joomla kann beliebige viele Menüs verwalten, die Inhalte anzeigen oder Funktionen zur Verfügung zustellen.

Die Menüs werden durch CSS-Klassen formatiert (div class=""): (Die Klassen stammen aus dem Framework „Bootstrap (http://getbootstrap.com/)“ und müssen im Menüklassensuffix eingetragen werden.)

Inhalte und Komponenten

Alle Arten von Inhalten in Joomla können (müssen aber nicht) zur Strukturierung in Kategorien eingeteilt werden.

Sie werden erst durch Menüeinträge oder Module sichtbar.

und dazu

Module in Beiträge einfügen:

Erweiterung

Joomla Zusammenhang

Schema: Zusammenhänge in Joomla

Joomla Erweiterungen

Einige Beispiele

Template erstellen

Vorüberlegungen

Zunächst bauen wir uns ein Grundgerüst für ein Layout. Im Beispiel legen wir ein drei­spaltiges Layout mit Header und Footer an. Die Spalten heißen „sidebarLeft“, „sidebarRight“ und „Content“.

Um ein Template zu erzeugen, sollten sie zunächst ein Arbeitsverzeichnis erstellen und dort die Testdatei template_test.html anlegen. Neben dem Verweis auf eine CSS-Vorlage (im Beispiel css/format.css) sollten in der Datei Divisions (<div>) für „header“, „footer“, „sidebarLeft“, „sidebarRight“ und „Content“ stehen.

Editor - template_text.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Template Test</title>
  <link rel="stylesheet" href="css/format.css" type="text/css" />
</head>

<body>
<div id="wrap">

<div id="header">
  <img src="images/logo.png" />
</div>

<div id="sidebarLeft"><div class="padd">
  <ul class="nav">
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a></li>
    <li><a href="#">Hyperlink 3</a></li>
    <li><a href="#">Hyperlink 4</a></li>
  </ul>
</div></div>

<div id="content"><div class="padd">
  <h1>Inhalt</h1>
  <p>mit Text und Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec</p>
</div></div>

<div id="sidebarRight"><div class="padd">
  <p>Anmeldung</p>
</div></div>

<div id="footer"><div class="padd">
  <p>Fußzeile</p>
</div></div>

</div>
</body>
</html>

Positioniert und gefärbt wird die Webseite in der CSS-Datei format.css, die im Unterverzeichnis css liegen sollte. Die drei Spalten werden dabei mit der Formatierung „float: left;“ erzeugt. Der zusätzliche <div class="padd"> setzt ein Padding im umgebenden <div> ohne das Layout zu zerstören (s. Boxmodell).

Natürlich ist diese Einteilung für das Joomla- Template nicht maßgeblich und kann beliebig an die eigenen Bedürfnisse angepaßt werden.

Editor - format.css
body          { background-color: #f0f0f0; }
#wrap         { margin: 0 auto; background-color: lightblue; border:1px solid black; }
#header       { background-color: lightblue; }
#sidebarLeft  { float: left; width: 20%; background-color: aqua; }
#content      { float: left; width: 60%; background-color: silver; }
#sidebarRight { float: left; width: 20%; background-color: aqua; }
#footer       { clear: both; background-color: lightblue; }
.padd         { padding: 1em; }

Perfektionieren sie erst diese Testdateien, bevor sie mit dem Erzeugen des eigentlichen Templates fortfahren.

In Template umwandeln

Um die Datei template_test.html in ein Template umzuwandeln, müssen sie sie zunächst in index.php umkopieren. Wie sie bereits wissen, ist Joomla in PHP programmiert und entsprechend ist das Template auch in dieser Sprache geschrieben.

Fügen sie ganz oben in die Datei die folgenden, roten Zeilen ein und passen sie den HTML-Header entsprechend an:

Editor - index.php
<?php
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$sitename = $app->getCfg('sitename');
$itemid = $app->input->getCmd('Itemid', '');

JHtml::_('bootstrap.framework');
JHtmlBootstrap::loadCss();
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <jdoc:include type="head" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/format.css" type="text/css" />
</head>

Die ersten vier Zeilen holen Objekte und Variablen aus dem Joomla Framework (http://www.joomla-wiki.de/dokumentation/Joomla!_Framework). Die nächsten drei binden das Bootstrap (http://getbootstrap.com/) Framework ein. Beide werden für den Zugriff auf und die Formatierung des Templates benötigt.

<jdoc:include type="head" /> erweitert den HTML-Header durch Joomla-Definitionen und ihre Eingaben in den entsprechenden Konfigurations­feldern (System / Konfiguration / Globale Metadaten). Damit bleibt der Header variabel anpassbar.

Nun müssen im Body noch die Joomla-Platzhalter statt des Beispieltextes eingefügt werden.

Editor - index.php
<body>
  <div id="wrap">
    <div id="header">
      <a href="<?php echo $this->baseurl ?>">
        <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" />
      </a>
      <jdoc:include type="modules" name="banner" style="xhtml" />
      <jdoc:include type="modules" name="position-1" style="xhtml" />
    </div>
    <div id="sidebarLeft"><div class="padd">
      <jdoc:include type="modules" name="left" style="xhtml" />
      <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div></div>
    <div id="content"><div class="padd">
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
      <jdoc:include type="modules" name="position-3" style="xhtml" />
      <jdoc:include type="component" />
      <jdoc:include type="message" />
      <jdoc:include type="modules" name="debug" />
    </div></div>
    <div id="sidebarRight"><div class="padd">
      <jdoc:include type="modules" name="position-7" style="xhtml" />
      <jdoc:include type="module" name="search" style="xhtml" />
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div></div>
    <div id="footer"><div class="padd">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div></div>
  </div>
</body>
</html>

<jdoc:include type="component" /> ist der Platzhalter für den eigentlichen Inhalt wie Beiträge und/oder Kategorie­übersichten. <jdoc:include type="module" name="search" style="xhtml" /> wird vom Suchmodul verwendet. <jdoc:include type="message" /> zeigt System­nachrichten wie eine fehlgeschagene Anmeldung an. Und <jdoc:include type="modules" name="debug" /> gibt Fehlermeldungen aus, sofern dies in der Konfiguration eingeschaltet ist.

Alle anderen Platzhalter können für Modulpositionen verwendet werden. Die Positionen mit den Nummern sind zur Kompatibilität mit dem Protostar Template eingefügt.

Außerdem ist im Header eine Logo-Grafik (logo.png) eingebunden. Diese Datei liegt im Unterverzeichnis „images“. Konstrukte wie <?php echo $this->baseurl ?> (oder ->template) fügen an dieser Stelle den entsprechenden Basispfad (oder Template-Pfad) von Joomla ein.

Modul Stile (Styles)

Vorschau

Damit man sich eine Vorstellung vom Template machen kann, müssen zwei Vorschaubilder erstellt werden. Dazu machen sie eine Bildschirmkopie der Ausgabe des Template-Tests. Diese werden mit der Breite von 400 Pixeln als „template_preview.png“ und mit 200 Pixeln als „template_thumbnail.png“ gespeichert.

Installation

Damit ist das Template praktisch fertiggestellt. Es können noch die Dateien „component.php“ (Funktions­erweiteerung), „error.php“ (Fehlerseite) und „offline.php“ (Offline-Seite) ergänzt und angepasst werden. Diese können sie aus dem Protostar sowie Standard Templates kopieren oder aus der Beispieldatei extrahieren.

Zuletzt legen sie die Datei templateDetails.xml an, welche der Joomla Installation die Information liefert.

Editor - templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">

<name>Simplate</name>
<creationDate>22. November 2013</creationDate>
<description>Simple Template</description>
**Christian Hartnick</author>
<authorEmail>hilfe@hartnick.de</authorEmail>
<authorUrl>http://hilfe.hartnick.de</authorUrl>
<copyright>Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>2.5.0</version>

<files>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>index.html</filename>
  <filename>index.php</filename>
  <filename>offline.php</filename>
  <filename>favicon.ico</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>templateDetails.xml</filename>
  <filename>css/format.css</filename>
  <filename>images/logo.png</filename>
</files>

<positions>
  <position>left</position>
  <position>breadcrumb</position>
  <position>search</position>
  <position>right</position>
  <position>footer</position>
  <position>banner</position>
  <position>position-1</position>
  <position>position-3</position>
  <position>position-7</position>
  <position>position-8</position>
</positions>

</extension>

Wie sie leicht erkennen können, werden hier alle wichtigen Informationen zum Template aufgeführt. Wenn hier Namen und Pfade nicht mit der Realität übereinstimmen, wird die Installation des Templates verweigert!

Zuletzt werden die Dateien und Verzeichnisse gezippt und können dann als Erweiterung installiert werden. (Achtung! Nicht das Verzeichnis sondern alle Dateien und Unterverzeichnisse zippen)

Zusammenfassung

Typo 3

Unterkapitel

n.v.

Einführung

Typo 3 ist ein freies CMS, das gerne auf mittleren bis großen Webpräsenzen eingesetzt wird.

Ich will das Rad nicht doppelt erfinden. Also folgt hier ein Verweis auf externe Literatur: (PDF unter „Book Details“)

Typo3 Begriffe

Übersicht

Joomla ist einfach zu erlernen, sobald man das Begriffsystem verstanden hat:

Tabelle: Joomla allg. Begriffe
BegriffErläuterung
FrontendDie Darstellung der Webpräsenz
http://www.domain.tld
BackendVerwaltung (Administration) der Webpräsenz
http://www.domain.tld/typo3
BenutzerAnwender, der sich an das System anmelden kann
Admin(istrator)Spezieller Benutzer, der System(-teile) verwaltet.
Author – Editor – PublisherSpezielle Benutzer für Inhalte - in Typo3 selbst anzulegen und in Workspaces verwalten
BenutzerverwaltungBenutzer gewisse Rechte gewähren
(bsp. Administration, Zugriff oder Ansichten)
SeitenSeiteinhalte (Links, Normal, Rdchts, Rand)
KategorienKategorien für Seiten
DateilisteMediainhalte hochladen (Bilder, Schriften, …)


Tabelle: Joomla techn. Begriffe
BegriffErläuterung
MenüDas kennen wir schon. Es gibt aber mehrere
OrdnerDatenbanken für Nutzer, News, Kalender …
TemplatesWie unsere Seitenvorlage, aber viel flexibler durch TypoScript
TypoScriptObjektbaum mit Fallunterscheidung
ErweiterungenErweiterungen für das System (Suche, Skripte …)
LokalisierungTypo3 unterstützt von Anfang an mehrere Sprachen

Typo3 Überblick

Einrichtung

Achtung! Die Bedienung erfolgt teilweise direkt oder über Rechtsklick.

Backend

Backend-Menü passt sich dem Benutzer an

Aufruf

http://meine-typo3-seite.tld/typo3

Module

Web
redaktionelle Arbeiten
Seite
Struktur (Menüs) und Inhalte
Liste¹
Datensätze anzeigen (aus "Ordnern")
Funktionen¹
Nützliche Funktionen wie das massenhafte anlegen von Seiten
Formulare¹
Formulare (Eingabe, Kontakt, …) erstellen
Template
Template(s) für Verhalten und Design erstellen
Datei
Dateiliste
Dateimanager zum Hochladen von Inhalten (HTML-Templates, JS, CSS, Bilder, …)
Adminwerkzeuge
administrative Aufgaben
Sprachen
Weitere Sprachen installieren
Erweiterungen
Erweiterungen installieren und (de-)aktivieren
System
Typo3 selbst anpassen
Zugriff
Zugriff auf das System einschränken (Backend-Benutzer)
Backend-Benutzer
weitere Backend-Benutzer anlegen
Installation
Das „Install-Tool“ aufrufen
Protokoll
Systemprotokoll
DB-Überprüfung
Überprüfen der hinterlegten Datenbank
Konfiguration
Einsehen von Konfigurationsvariablen
Berichte
Berichte über den Systemstatus
Benutzer
„oben rechts“
Benutzereinstellungen
Email, Sprache, …

¹: von Erweiterungen abhängig

Frontend

Aufruf

http://meine-typo3-seite.tld

Benutzer

Benutzergruppen für das Frontend → Erweiterungen

Inhalte und Komponenten

Typo3 Zusammenhang

Schema: Zusammenhänge in Typo3

Typo3 Erweiterungen

Einige Beispiele

Template und TypoScript

Vorüberlegungen

Zunächst bauen wir uns ein Grundgerüst für ein Layout. Im Beispiel legen wir ein drei­spaltiges Layout mit Header und Footer an. Die Spalten heißen „sidebarLeft“, „sidebarRight“ und „Content“.

Um ein Template zu erzeugen, sollten sie zunächst ein Arbeitsverzeichnis erstellen und dort die Testdatei template_test.html anlegen. Neben dem Verweis auf eine CSS-Vorlage (im Beispiel css/format.css) sollten in der Datei Divisions (<div>) für „header“, „footer“, „sidebarLeft“, „sidebarRight“ und „Content“ stehen.

Editor - template_text.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Template Test</title>
  <link rel="stylesheet" href="css/format.css" type="text/css" />
</head>

<body>
<div id="wrap">

<div id="header">
  <img src="images/logo.png" />
</div>

<div id="sidebarLeft"><div class="padd">
  <ul class="nav">
    <li><a href="#">Hyperlink 1</a></li>
    <li><a href="#">Hyperlink 2</a></li>
    <li><a href="#">Hyperlink 3</a></li>
    <li><a href="#">Hyperlink 4</a></li>
  </ul>
</div></div>

<div id="content"><div class="padd">
  <h1>Inhalt</h1>
  <p>mit Text und Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec</p>
</div></div>

<div id="sidebarRight"><div class="padd">
  <p>Anmeldung</p>
</div></div>

<div id="footer"><div class="padd">
  <p>Fußzeile</p>
</div></div>

</div>
</body>
</html>

Positioniert und gefärbt wird die Webseite in der CSS-Datei format.css, die im Unterverzeichnis css liegen sollte. Die drei Spalten werden dabei mit der Formatierung „float: left;“ erzeugt. Der zusätzliche <div class="padd"> setzt ein Padding im umgebenden <div> ohne das Layout zu zerstören (s. Boxmodell).

Natürlich ist diese Einteilung für das Joomla- Template nicht maßgeblich und kann beliebig an die eigenen Bedürfnisse angepaßt werden.

Editor - format.css
body          { background-color: #f0f0f0; }
#wrap         { margin: 0 auto; background-color: lightblue; border:1px solid black; }
#header       { background-color: lightblue; }
#sidebarLeft  { float: left; width: 20%; background-color: aqua; }
#content      { float: left; width: 60%; background-color: silver; }
#sidebarRight { float: left; width: 20%; background-color: aqua; }
#footer       { clear: both; background-color: lightblue; }
.padd         { padding: 1em; }

Perfektionieren sie erst diese Testdateien, bevor sie mit dem Erzeugen des eigentlichen Templates fortfahren.

In Template umwandeln

Um die Datei template_test.html in ein Template umzuwandeln, müssen sie sie zunächst in index.php umkopieren. Wie sie bereits wissen, ist Joomla in PHP programmiert und entsprechend ist das Template auch in dieser Sprache geschrieben.

Fügen sie ganz oben in die Datei die folgenden, roten Zeilen ein und passen sie den HTML-Header entsprechend an:

Editor - index.php
<?php
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$sitename = $app->getCfg('sitename');
$itemid = $app->input->getCmd('Itemid', '');

JHtml::_('bootstrap.framework');
JHtmlBootstrap::loadCss();
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <jdoc:include type="head" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/format.css" type="text/css" />
</head>

Die ersten vier Zeilen holen Objekte und Variablen aus dem Joomla Framework (http://www.joomla-wiki.de/dokumentation/Joomla!_Framework). Die nächsten drei binden das Bootstrap (http://getbootstrap.com/) Framework ein. Beide werden für den Zugriff auf und die Formatierung des Templates benötigt.

<jdoc:include type="head" /> erweitert den HTML-Header durch Joomla-Definitionen und ihre Eingaben in den entsprechenden Konfigurations­feldern (System / Konfiguration / Globale Metadaten). Damit bleibt der Header variabel anpassbar.

Nun müssen im Body noch die Joomla-Platzhalter statt des Beispieltextes eingefügt werden.

Editor - index.php
<body>
  <div id="wrap">
    <div id="header">
      <a href="<?php echo $this->baseurl ?>">
        <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" />
      </a>
      <jdoc:include type="modules" name="banner" style="xhtml" />
      <jdoc:include type="modules" name="position-1" style="xhtml" />
    </div>
    <div id="sidebarLeft"><div class="padd">
      <jdoc:include type="modules" name="left" style="xhtml" />
      <jdoc:include type="modules" name="position-8" style="xhtml" />
    </div></div>
    <div id="content"><div class="padd">
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />
      <jdoc:include type="modules" name="position-3" style="xhtml" />
      <jdoc:include type="component" />
      <jdoc:include type="message" />
      <jdoc:include type="modules" name="debug" />
    </div></div>
    <div id="sidebarRight"><div class="padd">
      <jdoc:include type="modules" name="position-7" style="xhtml" />
      <jdoc:include type="module" name="search" style="xhtml" />
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div></div>
    <div id="footer"><div class="padd">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div></div>
  </div>
</body>
</html>

<jdoc:include type="component" /> ist der Platzhalter für den eigentlichen Inhalt wie Beiträge und/oder Kategorie­übersichten. <jdoc:include type="module" name="search" style="xhtml" /> wird vom Suchmodul verwendet. <jdoc:include type="message" /> zeigt System­nachrichten wie eine fehlgeschagene Anmeldung an. Und <jdoc:include type="modules" name="debug" /> gibt Fehlermeldungen aus, sofern dies in der Konfiguration eingeschaltet ist.

Alle anderen Platzhalter können für Modulpositionen verwendet werden. Die Positionen mit den Nummern sind zur Kompatibilität mit dem Protostar Template eingefügt.

Außerdem ist im Header eine Logo-Grafik (logo.png) eingebunden. Diese Datei liegt im Unterverzeichnis „images“. Konstrukte wie <?php echo $this->baseurl ?> (oder ->template) fügen an dieser Stelle den entsprechenden Basispfad (oder Template-Pfad) von Joomla ein.

Modul Stile (Styles)

Vorschau

Damit man sich eine Vorstellung vom Template machen kann, müssen zwei Vorschaubilder erstellt werden. Dazu machen sie eine Bildschirmkopie der Ausgabe des Template-Tests. Diese werden mit der Breite von 400 Pixeln als „template_preview.png“ und mit 200 Pixeln als „template_thumbnail.png“ gespeichert.

Installation

Damit ist das Template praktisch fertiggestellt. Es können noch die Dateien „component.php“ (Funktions­erweiteerung), „error.php“ (Fehlerseite) und „offline.php“ (Offline-Seite) ergänzt und angepasst werden. Diese können sie aus dem Protostar sowie Standard Templates kopieren oder aus der Beispieldatei extrahieren.

Zuletzt legen sie die Datei templateDetails.xml an, welche der Joomla Installation die Information liefert.

Editor - templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">

<name>Simplate</name>
<creationDate>22. November 2013</creationDate>
<description>Simple Template</description>
**Christian Hartnick</author>
<authorEmail>hilfe@hartnick.de</authorEmail>
<authorUrl>http://hilfe.hartnick.de</authorUrl>
<copyright>Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>2.5.0</version>

<files>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>index.html</filename>
  <filename>index.php</filename>
  <filename>offline.php</filename>
  <filename>favicon.ico</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>templateDetails.xml</filename>
  <filename>css/format.css</filename>
  <filename>images/logo.png</filename>
</files>

<positions>
  <position>left</position>
  <position>breadcrumb</position>
  <position>search</position>
  <position>right</position>
  <position>footer</position>
  <position>banner</position>
  <position>position-1</position>
  <position>position-3</position>
  <position>position-7</position>
  <position>position-8</position>
</positions>

</extension>

Wie sie leicht erkennen können, werden hier alle wichtigen Informationen zum Template aufgeführt. Wenn hier Namen und Pfade nicht mit der Realität übereinstimmen, wird die Installation des Templates verweigert!

Zuletzt werden die Dateien und Verzeichnisse gezippt und können dann als Erweiterung installiert werden. (Achtung! Nicht das Verzeichnis sondern alle Dateien und Unterverzeichnisse zippen)

Zusammenfassung

Teil 5 - JavaScript

Kapitel

n.v.

Einführung

Sollten sie noch nie vorher mit der Programmierung von Computern zutun gehabt haben, lesen sie das Kapitel Programme verstehen aus dem ersten Teil.

Zur Wiederholung hier der Aufbau eines Programms. Man unterscheidet einen Definitionsbereich und den eigentlichen Programmablauf. Der Definitionsbereich gibt an was alles benötigt wird und was im Programm vorhanden ist. Der Ablauf gibt dem Computer Anweisungen, die mit Bedingungen und Schleifen kontrolliert werden.

Zusätzlich müssen wir uns noch genauer mit dem DOM und mit Ajax Beispiel beschäftigen.

Definitionen

Unterkapitel

n.v.

Einführung

Traditionell teilt man Computerprogramme in die zwei Bereiche Definitionen und Programmablauf. Der Definitionsteil bindet externe Funktionen ein und deklariert Variablen und Objekte. Oder traditionell gesagt: Was wird benutzt und was brauche ich.

Extern
Variablen, Objekte und Funktionen die in gesonderten Dateien/Bibliotheken stehen.
Intern
Selbstdefinierte Variablen, Objekte und Funktionen bekannt machen.

Das entsprach in unserem Bauplan:

Benutze
Werkzeug und Material das nicht beiliegt.
Inhalt
Werkzeug und Material das beiliegt.

Extern

Allgemein

Wie man externe JS-Funktionen benutzt und in bestehende Projekte einbindet, steht schon in Kursteil I. Lesen sie dazu das Kapitel Dynamik.

In unserem Bauplan haben wir an dieser Stelle Werkzeuge und Materialien aufgeführt, die wir zusätzlich benötigen. Entsprechendes gilt auch für Programmiersprachen. Vieles müssen wir nicht neu erfinden, sondern finden es schon in externen Funktionen.

Innerhalb von JS ist es nicht vorgesehen, andere Funktionen (http://de.wikipedia.org/wiki/Funktion_(Programmierung)) und Bibliotheken (http://de.wikipedia.org/wiki/Programmbibliothek) einzubinden. Das unterscheidet es von den meisten anderen Programmiersprachen (http://de.wikipedia.org/wiki/Programmiersprache).

Möchten sie JS-Funktionen benutzen, so müssen sie diese im HTML-Header in der richtigen Reihenfolge einbinden. Eine Bibliothek (OpenStreetMap), die eine andere (Openlayers) benutzt, muss nach dieser im HTML-Quelltext eingebunden werden.

Als Beispiel dazu lesen sie Kapitel Anfahrt (OSM).

Zusammenfassung

Intern

Einführung

In unserem Bauplan hatten wir an dieser Stelle beschrieben, was dem Paket (Tisch) beiliegt. Übertragen auf unser Programm hatten wir das auf Konstrukte wie Variablen, Funktionen und Objekte, welche wir selbst schreiben. Das heißt, an dieser Stelle machen wir dem Browser (der JavaScript ausführt) diese Konstrukte bekannt.

Dabei müssen wir zwischen diesen Konstrukten klar unterscheiden: Einfache Variablen werden hier nur deklariert. Objekte und Arrays als Datenstrukturen müssen genauer definiert werden und haben deshalb ein eigenes (nachfolgendes) Kapitel.

Zuletzt müssen auch Funktion definiert sein, da sie aber nur Anweisungen zusammenfassen, besprechen wir sie erst im Ablauf.

Variablen

In unserer Einführung hatten wir eine Variable mit einem Zettel verglichen. Auf den Zettel schrieben wir eine Zahl, um sie uns zu merken. Auch aus der Mathematik kennen wir Variablen (http://de.wikipedia.org/wiki/Variable_(Mathematik)), die Werte speichern. Im Gegensatz zur Mathematik können sie in JS-Variablen (http://de.wikipedia.org/wiki/Variable_(Programmierung)) auch Zeichenketten (http://de.wikipedia.org/wiki/Zeichenkette) und Wahrheitswerte (http://de.wikipedia.org/wiki/Wahrheitswert) speichern.

Deklaration

JS hat eine sehr laxe Syntax und kann Variablen einfach überall ohne Deklaration (http://de.wikipedia.org/wiki/Deklaration_(Programmierung)) verwenden. Eine Deklaration können sie sich wie eine Struktur auf dem Zettel (Variablenspeicher) vorstellen. Es wird auf dem Zettel vermerkt, wieviel Platz und welchen Typ (Zahl, Datum, …) eine Variable annehmen darf.

In anderen Programmiersprachen müssen Variablen immer erst deklariert werden. Dazu wird im Definitionsbereich Name und Typ (Wertebereich) der Variable bekannt gegeben. Auch JS erlaubt dies und wir sollten das auch verwenden, um einfacher Fehler zu finden.

Dazu kennt JS das Schlüsselwort (http://de.wikipedia.org/wiki/Schlüsselwort_(Programmierung)) var und den Aufzählungsoperator ,. var deklariert die Variable (sie wird dem Computer bekannt gemacht) und , erlaubt es mehrere Variablen­deklarationen nacheinander zu schreiben.

var x = 1;
var y = 2;
var Vorname = "Christian", Nachname = "Hartnick";

Zur Bildung von Variabelnamen schlagen sie bitte im Anhang: JS-Bezeichner nach.

Werte und Datentypen

Die Werte, die in einer Variablen gespeichert werden, haben einen (Daten-)Typ (http://de.wikipedia.org/wiki/Datentyp). Diese Typen ergeben sich aus der Verwendung. So besteht der Unterschied zwischen einer Zahl und einem Text darin, dass man Zahlen berechnen kann. Texte dagegen, kann man durchsuchen, zerlegen und zusammensetzen. Am Typ erkennt der Computer also, wie er eine Variable intern speichern und verwenden soll.

Hinweis: Werte, die direkt im Quelltext stehen, bezeichnet man auch als Literale (http://de.wikipedia.org/wiki/Literal#Literale_in_Programmiersprachen).

JS konvertiert automatisch zwischen den verschieden Datentypen. Dass heißt, dass eine Zahl automatisch in eine Zeichenkette verwandelt wird, wenn sie diese als Zeichenkette benutzen. In den wenigen Fällen in denen eine automatische Konvertierung nicht funktioniert, müssen sie entsprechende Funktionen zur Konvertierung verwenden (Anhang: JS-Funktionen und Objekte).

Zahlen

JS kennt im Gegensatz zu anderen Sprachen nur Zahlen (keine Ganzzahlen (http://de.wikipedia.org/wiki/Ganzzahl), Gleitkomma (http://de.wikipedia.org/wiki/Gleitkommazahl), und so weiter).

Zahlen werden - wie im englischen üblich - mit dem Dezimalpunkt „.“ zwischen „Vorkomma“- und „Nachkomma“-Anteil getrennt. Zehner­potenzen schreibt man mit trennenden „e“ oder „E“.

Beispiele:

1E1
entspricht 10
1.2345E4
entspricht 12345
2e-3
entspricht 0.002

Zeichenketten

Eine Zeichenkette repräsentiert Texte, also beliebige Kombinationen von Zeichen, Ziffern und Sonderzeichen. Zeichenketten werden in Hochkommas ('') oder in Hochkommata ("") eingeschlossen. Zeichenketten nennt man auf gut neudeutsch auch Strings.

Zu Zeichenketten beachten sie auch bitte den Anhang: JS Escape-Sequenzen.

Beispiel: "Das ist eine Zeichenkette!"

Wahrheitswerte

Ein Wahrheitswert kann nur die beiden Werte „wahr“ (true) oder „falsch“ (false) annehmen. Wahrheitswerte nennt man auf gut neudeutsch auch boolsche Werte. Man benötigt sie vor allem für Vergleiche. Das Ergebnis eines Vergleichs ist entweder „wahr“ oder „falsch“

Weitere

In JS hat eine Funktion den Datentyp Function. Alle weiteren Daten (Objekte, Arrays, …) sind vom Typ Object. In der Praxis bedeutet das, man kann auch Funktionen und Objekte einer Variablen zuweisen. Dazu später mehr.

Zuweisung

Anmerkung: Zuweisungen gehören eigentlich in den Programmablauf. Da JS aber schon während der Deklaration Zuweisungen erlaubt, sprechen wir sie kurz an. Später folgt dann die genauere Beschreibung.

Bei einer Zuweisung wird einer Variablen ein Wert mit dem Zuweisungsoperator = zugewiesen: x = 5 (x hat jetzt den Wert 5). Steht eine Variable nicht links vom =, repräsentiert die Variable ihren Wert: y = x + 5 (x steht für 5; y bekommt den Wert 10).

Variablen, denen noch kein Wert zugewiesen wurde, gelten als nicht initialisiert (http://de.wikipedia.org/wiki/Variable_(Programmierung)#Initialisierung). Allerdings sorgt die automatische Konvertierung von JS dafür, dass eine leere Variable bei Gebrauch als Zeichenkette den Wert "" (Leerstring), bei Gebrauch als Zahl den Wert 0 und bei Gebrauch als Wahrheitswert den Wert „falsch“ hat.

Editor - index.html
<script type="text/javascript">
var x = 5, y = x + 5;
var Ergebnis = "x=5 und y=x+5. y=";
alert(Ergebnis+y);
</script>

Beispielskript ausführen

Lokal/Global

Variablen die mit var deklariert wurden, sind innerhalb einer Funktion Funktion(){ Anweisungen; } immer lokal, dass heißt sie sind nur innerhalb dieses Blocks gültig. Ein weiterer guter Grund, Variablen immer zu deklarieren.

Genaueres zu Funktionen lesen sie in den nächsten Kapiteln.

Variablen die sie ohne Deklaration verwenden, sind immer global, also immer überall innerhab eines Dokuments verwendbar. So können sie schnell mit Variablen aus externen Skripten in Konflikt geraten.

Zusammenfassung

Datenstrukturen

Einführung

Im internen Definitionsbereich deklarieren sie neben einfachen Variablen auch komplexe Datenstrukturen wie Arrays oder Objekte.

Komplexere Datenstrukturen kennen sie aus der Realität vor allem als Listen und Tabellen. Aber auch alle Strukturen wie Listen mit Unterpunkten können als Daten benutzt werden. Alle diese Konstrukte können sie in JS mit Arrays und Objekten nachbilden.

Datenstrukturen

Datenstrukturen (http://de.wikipedia.org/wiki/Datenstruktur) (komplexe Variablen) sind in JS vor allen verschiedene Array-Typen aber auch Objektklassen.

Felder (Array)

Arrays können sie sich wie durchnumerierte Schubfächer vorstellen, in denen sie Werte gleichen Typs (Zahl, Zeichenkette) ablegen können.

Array
SchubfachInhalt
1"Montag"
2"Dienstag"
3"Mittwoch"
4"Donnerstag"
5"Freitag"
6"Samstag"
7"Sonntag"

In JS schreibt man das dann wie folgt:

var tage = new Array ("Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag");

Allerdings beginnt die automatische Numerierung (der Schubfächer) bei Null und nicht bei Eins. Der Zugriff auf ein Schubfach erfolgt mit tage[Schubfachnumer].

tage[3] → "Donnerstag"

Sie können allerdings Arrays nur über die Elementeanzahl (Bespiel → 10) auch ohne Angabe konkreter Elemente mit

var tage = new Array (10);

deklarieren oder sogar ganz ohne Anzahl mit

var tage = new Array ();

Mehrdimensionale Arrays

Mehrdimensionale Arrays erzeugen wir, in dem wir einen normalen Array-Element wieder ein Array zuweisen (allerdings meist in einer Schleife):

var Dim1 = new Array (4);
Dim1[0] = new Array (3);
Dim1[1] = new Array (3);
Dim1[2] = new Array (3);
Dim1[3] = new Array (3);

In diesem Fall haben wir also die Schubladen der Spalte 0-3 und der Reihe 0-2.

Schubladen des 4x3 Arrays
0 / 01 / 02 / 03 / 0
0 / 01 / 12 / 13 / 1
0 / 01 / 22 / 23 / 2

Der Zugriff erfolg dann mit a[x][y]

Anmerkung: Wenn sie jetzt an Excel und seine Organisation in Zellen denken, liegen sie sicherlich nicht verkehrt.

Assoziative Arrays

In normalen Arrays greifen sie auf die Elemente mit einen Zahlenindex (auch Schlüssel genannt) zu. So ein Schlüssel muss allerdings nicht unbedingt eine Zahl sein, sondern kann auch eine Zeichenkette sein. Dann spricht man vom assoziativen Array.

Da allerdings JS assoziative Arrays nur als Sonderform des Objekts benutzen kann, werden wir diese dort besprochen.

Objektklassen

Objektklassen (auch Objekttypen oder einfach nur Klassen genannt) sind die Definitionen von Objekten (http://de.wikipedia.org/wiki/Objekt_(Programmierung)) (auch (Objekt-)Instanzen). Die Objektorientierte Programmierung (http://de.wikipedia.org/wiki/Objektorientierte_Programmierung) (OOP) versucht das Konzept (http://de.wikipedia.org/wiki/Konzept) eines Objektes der realen Welt in die Welt der Informatik zu übertragen.

Objektorientierung umfaßt:

Eigenschaften
Objekte haben bestimmte Eigenschaften (Attribute und Methoden)
Attribute
Attibute speichern wie Variablen Eigenschaften eines Objekts
Beispiel Mensch
Größe, Farbe, Alter, …
Beispiel HTML-Dokument
Größe, Hintergrundfarbe, Schriftart, …;
Methoden
Führen wie Funktionen Anweisungen zu dem Objekt aus
Beispiel Mensch
er kann laufen, reden, schlafen, …
Beispiel HTML-Dokument
man kann Texte einfügen, Tags auswählen und maipulieren, …
Vererbung
Bei der Verbung werden Eigenschaften von einer Vaterklasse an eine Kindklasse weitergegeben
Beispiel Mensch
Der Vater vererbt seine Eigenschaften an sein Kind. Einzelne Eigenschaften können variieren.
Beispiel HTML-Dokument
Jedes Tag hat bestimmte Eigenschaften, die es erbt. Es kann aber weitere Attribute bekommen.

function Klassenname() {
this.Attribut = "Wert";
this.Methode = MethodenFunktion;
}
function MethodenFunktion(Parameter1) {
Anweisungsblock;
}

var Objekt = new Klassenname();

Da Objekte mit ihren Methoden sich wie Funktionen verhalten, besprechen ich sie ausführlich weiter unten im „Ablauf“.

Zusammenfassung

Ablauf

Unterkapitel

n.v.

Einführung

Traditionell teilt man Computerprogramme in die zwei Bereiche Definitionen und Programmablauf. Der Programmablauf ist das eigentliche Programm - also die Funktionalität.

Anweisungen
Konkrete Programmanweisungen
Funktionen/Objekte
Mehrere Anweisungen / Zuweisungen werden zusammengefasst.
Zuweisungen
Variablen einen Wert zuweisen. (Auch eine Anweisung!)
Bedingungen
End- oder Abbruchbedingung für eine Anweisung oder eine Wiederholung.
Schleifen
Sich mehrfach wiederholende Anweisungen
Kommentare
Kommentierung der Anweisungen

Das entsprach in unserem Bauplan:

Anweisungen
Konkrete Arbeitsanweisungen
Unteranweisungen
Komplexere Tätigkeiten werden zusammen­gefasst und als ein Schritt in den Arbeits­anweisungen ausgeführt.
Zuweisungen
Schraube S1 = Schraube mit Gewinde x / Länge y
Bedingungen
End- oder Abbruch­bedingung für eine Anweisung oder eine Wiederholung.
Wiederholungen
Sich wiederholende Anweisungen
Kommentare
Kommentierung der Anweisungen

Anweisungen

Hallo Welt

Um eine einfachen Einstieg in eine Programmiersprache zu schaffen, nutzt man traditionell ein Hello-World-Programm (http://de.wikipedia.org/wiki/Hello_World). In diesem ist die einfachste Form eines lauffähigen Programms verwirklicht. Meist ist das eine Anweisung (http://de.wikipedia.org/wiki/Anweisung_(Programmierung)) die „Hallo Welt“ ausgibt.

Anmerkung: Javascript kennt zwei Arten von Kommentaren. // leitet einen Kommentar bis zum Zeilenende ein. /* und */ umschließen einen Kommentar.

Editor - index.html
<script type="text/javascript">
'use strict';
// Ausgabe als Meldungsfenster
alert('Hallo Welt');
// Ausgabe im HTML-Dokument
document.write('Hallo Welt');
// Ausgabe in die Log-Datei (gibt es nicht bei allen Browsern)
console.log('Hallo Welt');
</script>

Beispielskript ausführen

Einzelne Anweisungen

Eine Anweisung ist also ein Befehl der den Computer anweist etwas zu tun („Hallo Welt“ ausgeben). In JS trennt man Anweisungen mit einem ; oder einem Zeilenumbruch. Allerdings sollte man übersichthalber, immer dem Semikolon den Vorzug geben.

Beispiele für Anweisungen:

x = 2;
Einer Variablen einen Wert zuweisen.
x = 2 + 2;
Einer Variablen einen berechneten Wert zuweisen.
document.write('Hallo Welt');
Eine Funktion ausführen.

Anweisungsblöcke

An bestimmten Stellen innerhalb von JS muss man Anweisungen zu einem Block zusammenfassen. Für JS ist dann dieser Block eine Anweisung. Einen Anweisungsblock umschließen sie mit geschweiften Klammern {}.

Beispiele für Anweisungsblöcke finden sie in den folgenden Kapiteln unter Funktionen, Bedingungen und Schleifen.

Zusammenfassung

Funktionen

Allgemein

Funktionen (http://de.wikipedia.org/wiki/Funktion_(Programmierung)) fassen Anweisungen zusammen, um diese dann (parametrisiert (http://de.wikipedia.org/wiki/Parameter_(Informatik))) immer wieder aufrufen zu können. Mit solchen Funktionen stellen Programmierer ihre JS-Anwendungen auch der Allgemeinheit zur Verfügung (s. Kursteile I und II).

Stellen sie sich eine parametrisierte Funktion wie eine Bohrmaschine vor, die sie je nach Aufsatz (Parameter) verschieden verwenden können. Bohrmaschine(5,Bohrer) wäre dann eine Bohrmaschine mit einem 5mm Bohrer und Bohrmaschine(10,Fräse) entspräche einer 1cm Fräse.

Eine weitere Besonderheit von JS ist, das nicht innerhalb einer Funktion stehender Code, immer sofort ausgeführt wird. Das ist allerdings nur in den seltesten Fällen erwünscht. Beachten sie dabei, das JS im <head> ausgeführt wird, wenn die Seite noch gar nicht vollständig geladen ist. Im <body> wird der Code an der Stelle ausgeführt, an der er steht. Wenn sie ihn erst ausführen wollen, wenn die Seite geladen wurde, gehört er in <body onload="">.

Funktionen heißen auf gut Deutsch auch Unterprogramme und das nicht zu unrecht. Eine Funktion stellt ein eigenes kleines Programm dar und deshalb sind beispielsweise alle innerhalb der Funktion deklarierten Variabeln lokal. Eine Funktion sollte also wie ein Programm immer mit einem Deklarationsteil beginnen.

Definieren

Bevor man eine Funktion vewenden kann, muss sie (ähnlich wie Variablen) erst definiert werden. In JS ist es üblich alle Funktionen deshalb am Anfang des Quelltexts zu stellen. Wenn eine Funktion eine andere aufruft, muss sich die aufgerufene vor der aufrufenden befinden (sonst wäre sie ja noch nicht definiert!).

Eine Funktion wird formal wie folgt definiert:

function fnname(parameter1,…,parameterN){
  Anweisungen;
  return Wert;
}

Die Syntax (http://de.wikipedia.org/wiki/Syntax) setzt sich dabei wie folgt zusammen:

function
Schlüsselwort zur Einleitung einer Funktionsdefinition
fnname
Selbstgewählter Name der Funktion
(parameter1,…,parameterN)
Parameter (Variablen) der Funktion; kann auch leer sein
{ Anweisungen; }
Anweisungen für die Funktion, welche die Parameter verwenden
return Wert
Schlüsselwort innerhalb des Anweisungsblock, das den Rückgabewert bestimmt und die Funktion abbricht

Hinweis: Eine Funktion kann auch fnname = function (parameter1,…,parameterN) { … } definiert werden.

Hinweis: Ein Schlüsseltwort ist ein reserviertes Wort (s. Anhang: JS reservierte Wörter) welches für die Programmiersprache eine besondere Bedeutung hat.

Zur Bildung von Funktions- und Parameter­namen schlagen sie bitte im Anhang: JS-Bezeichner nach.

Aufrufen

Wenn eine Funktion definiert ist, kann sie dann wie folgt aufgerufen werden:

fnname()

oder bei Funktionen mit Parametern:

fnname(wert1,…,wertN)

oder bei Funktionen mit Parametern und Rückgabewert:

rueckgabewert = fnname(wert1,…,wertN)

Die Syntax setzt sich dabei wie folgt zusammen:

rueckgabewert =
Variable, die den Rückgabewert speichert
fnname
Selbstgewählter Name der Funktion
(wert1,…,wertN)
Werte, die der Funktion als Parameter übergeben werden

Beispiel

Editor - index.html
<script type="text/javascript">
function Addiere(param1,param2){
  return param1 + param2;
}

alert(Addiere(2,2));
</script>

Beispielskript ausführen

Parameterübergabe

Wertparameter

Call by value (http://de.wikipedia.org/wiki/Call_by_value): Bei der Übergabe einer Variablen an eine Funktion benutzt diese den Wert der Variablen. Selbst wenn der Variablen innerhalb der Funktion ein neuer Wert zugewiesen wird. Außerhalb der Funktion ändert sich der Wert der Variablen deshalb nicht.

Wenn sie wieder an unseren Zettel denken, wird der Zettel innerhalb der Funktion abgeschrieben. Der ursprüngliche Zettel verändert sich so nicht.

Das ist die Standardübergabe für Zahlen, Zeichenketten und Wahrheitswerte.

Referenzparameter

Call by reference (http://de.wikipedia.org/wiki/Call_by_reference): Wenn sie Objekte als Ganzes übergeben, wird nur eine Referenz auf dieses übergeben. Alle Änderungen am Objekt gelten dann auch außerhalb der Funktion.

Hier wird also nicht innerhalb der Funktion ein neuer Zettel verwendet, sondern der ursprüngliche Zettel direkt.

Vordefinierte Funktionen

Vordefinierte Funktionen finden sie im Anhang Anhang: JS-Funktionen und Objekte.

Funktionen verschachteln – Closures

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#closures

Anonyme Funktion

Funktionen ohne Namen

Zusammenfassung

Objekte

Eigene Objekte

Im Definitionsbereich haben wir schon eigene Objekte definiert. Nun wollen wir mit Objekten arbeiten.

Beispiel:

function Benutzer(vn,nn) {
  // Attribute
  this.Vorname = vn;
  this.Nachname = nn;
  this.Name = BenutzerName;
}
// Methoden
function BenutzerName() {
  return (this.Vorname + " " + this.Nachname);
}

var Nutzer1 = new Benutzer("Christian","Hartnick");
var Nutzer2 = new Benutzer("Max","Mustermann");

Anmerkung: Das Schlüsselwort this ist immer eine Referenz auf das aktuelle Objekt. Das funktioniert zum Beispiel auch im HTML-Quelltext bei „on“-Ereignissen: <input type="button" value="OK" onclick="alert( this.form.Feld.value )">.

Eigenschaften: Attribute und Methoden

Der Zugriff auf Attribute und Methoden geschieht über den .-Operator bei Attributen

Nutzer2.Vorname = "Petra";

und Methoden

alert (Nutzer1.Name() + ", " + Nutzer2.Name());

, also im Endeffekt wie bei einer Variable und bei einer Funktion.

Beispielskript ausführen

with

Zur Vereinfachung kann man Objektebezeichner auch mit dem Schlüsselwort with voraussetzen:

with (Nutzer2) {
  Vorname = "Petra";
  Nachname = "Musterfrau";
  alert (Name());
}

Vordefinierte Objekte

Die große Stärke von JS ist die hohe Anzahl vordefinierter Objektklassen. Diese können sie wie eine eingebaute Funktionsbibliothek einfach benutzen. Innerhalb dieser Objekte müssen wir zwischen JS-Objekten und Browser-Objekten unterscheiden.

s. Anhang: JS-Funktionen und Objekte

von JS

JS-Objekte stellen so etwas wie eine Bibliothek von Basisfunktionen dar. Sie haben mit ihnen Zugriff auf mathematische Funktionen und Datumsfunktionen. Außerdem haben alle Datentypen (Zahlen (Number), Zeichenketten (String), Wahrheitswerte (Boolean)) eigene Klassen. Außerdem gibt es eine Klasse für Reguläre Ausdrücke (http://de.wikipedia.org/wiki/Regulärer_Ausdruck), die wir hier allerdings nicht besprechen.

Das Datumsobjekt (Date) besitzt beispielsweise die Methoden:

getDate()
Holt das aktuelle Datum samt Uhrzeit als Zahlenwert
toLocaleString()
Wandelt einen Datum/Uhrzeit-Wert in einen menschlich lesbaren um
Editor - index.html
<script type="text/javascript">
var Datum = new Date();
with (Datum) {
  alert(toLocaleString(getDate()));
}
</script>

Beispielskript ausführen

des Browser

Auch der Browser stellt viele Objekte bereit (damit sind sie aber auch abhängig von dem Browser und der Browserversion). Diese Objekte werden aus dem HTML-Quelltext und der Browserkonfiguration dynamisch erzeugt.

Auf diese Objekte werden wir im Kapitel DOM genauer eingehen.

Editor - index.html
<script type="text/javascript">
var Liste = new Array();
for (var Element in window) {
  Liste.push ( "(" + typeof (window[Element]) + ") " + Element + "\n");
}
alert(Liste.sort().join(""));
</script>

Beispielskript ausführen

Assoziatives Array

Bei assoziativen Arrays erfolgt der Zugriff auf einzelne Elemente mit einer Zeichenkette. Im Gegensatz zu anderen Programmiersprachen gibt es in JavaScript keine assoziativen Arrays. Man kann jedoch mit Objekten ein assoziatives Arrays grundlegend nachbauen.

Alternativ zum .-Operator funktioniert auch der Index-Operator (objekt["attribut"]) bei Objekten. So lassen sich über Attribute beliebige Schlüssel erzeugen.

Anmerkung: Ein solches "unechtes" assoziatives Array besitzt nicht die gewöhnlichen Methoden und Eigenschaften eines Arrays. So können sie nicht über length() die Anzahl der Elemente zu ermitteln. Die Elemente eines solchen „Arrays“ können sie nur über den Namen oder über eine for-in-Schleife ansprechen.

Zusammenfassung

Zuweisungen und Ausdrücke

Zuweisungen (http://de.wikipedia.org/wiki/Zuweisung) von Variablen kennen wir schon. Allerdings kennt JS auch an anderen Stellen Zuweisungen, die wir teilweise schon implizit benutzt haben.

Einfache Zuweisungen

x = 1;
Direkte Zuweisung eines Wertes an eine Variable.
Addiere(2,4);
Direkte Zuweisung von Werten an die Parameter einer Funktion.
return true;
Direkte Zuweisung an den Rückgabewert einer Funktion.

Überall wo etwas zugewiesen wird, wird auch ein Ausdruck (http://de.wikipedia.org/wiki/Ausdruck_(Programmierung)) erwartet, der einen Wert bereitstellt. Im einfachsten Fall ist das der Wert einer Variable oder der Rückgabewert einer Funktion.

Addiere(x,y)
Die Werte der Variablen x und y werden übergeben.
alert(Addiere(2,2))
Der Rückgabewert der Funktion Addiere wird ausgegeben.

Berechnete Ausdrücke

Ausdrücke können aber viel komplexer sein. Sie können auch berechnet werden. Dafür existieren in JS verschiedene Operatoren (http://de.wikipedia.org/wiki/Operator_(Mathematik)) und Funktionen.

Mathematische Operatoren

+
Addition
Beispiel: 3 + 2 → 5 (der Ausdruck 3 + 2 hat den Wert 5)
Subtraktion
Beispiel: 3 - 2 → 1
*
Multiplikation
Beispiel: 3 * 2 → 6
/
Division
Beispiel: 3 / 2 → 1.5
%
Restwert
Beispiel: 3 % 2 → 1

Mit Zuweisung (x = 3):

+=
Addition und Zuweisung
Beispiel: x += 2 → x=5
++
Inkrement
Beispiel: x++ → x=4
−=
Substraktion und Zuweisung
Beispiel: x -= 2 → x=1
−-
Dekrement
Beispiel: x-- → x=2
*=
Multiplikation und Zuweisung
Beispiel: x *= 2 → x=6
/=
Division und Zuweisung
Beispiel: x /= 2 → x=1.5
%=
Restwert und Zuweisung
Beispiel: x %= 2 → x=1

Bitoperatoren

Bitoperatoren brauchen sie so gut wie nie. Sollten sie sie trotzdem interessieren lesen sie bitte über Bit-Operatoren (http://de.wikipedia.org/wiki/Bitweiser_Operator) in der Wikipedia nach.

<<
Bitweises linksverschieben
>>
Bitweises rechtsverschieben
&
Bitweises „Und“
|
Bitweises „inklusives Oder“
^
Bitweises „exklusives Oder“
~
Bitweises „Nicht“

Wahrheitsoperatoren

Alle bisherigen Operatoren haben Zahlen manipuliert (Mathematik). Da sie Wahrheitswerte wie Zahlen (wahr=1, falsch=0) benutzen können, gelten sie auch für diese.

Zeichenkettenoperatoren

Zeichenketten haben einen einzigen Operator:

+
Zeichenketten verknüpfen
Beispiel: "Zeichen" + "kette""Zeichenkette".

Wenn sie eine Zahl und eine Zeichenkette mit + verknüpfen, wird die Zahl automatisch in eine Zeichenkette gewandelt!

Funktionen für Variablen

JS kennt einige vordefinierte Funktionen, um Variablen auszuwerten:

typeof()
Gibt den Typ einer Variable zurück
Rückgabewerte:
boolean
Wahrheitswertvariable
string
Zeichenkettenvariable
number
numerische Variable
function
Funktion
object
Objekt
undefined
unbestimmter Typ
void
Rückgabewert einer Funktion verwerfen (Bookmarklets (http://de.wikipedia.org/wiki/Bookmarklet))
delete
Speicherplatz von Objekten freigeben

Rangfolge von Operatoren

  1. , (Aneinanderreihung von Variablen und Parametern)
  2. = += -= <<= >>= &= ^= |=
  3. ?: (Entweder-Oder-Bedingung)
  4. ||
  5. &&
  6. |
  7. ^
  8. &
  9. == === != !==
  10. < <= > >=
  11. << >> >>>
  12. + -
  13. * / %
  14. ! ~ - ++ --
  15. () [] . (Klammerung und Vektoren)

Zusammenfassung

Bedingungen

Vergleiche

Vergleichsoperatoren

JS kennt mehrere Operatoren, um Werte miteinander zu vergleichen. Der Rückgabewert einer solchen Operation ist ein Wahrheitswert (wahr/falsch).

==
Testen ob Werte gleich (=) sind
Beispiel: "0"==0 → wahr (automatische Konvertierung!)
!=
Testen ob Werte ungleich (≠) sind
Beispiel: 1!=0 → wahr
<
Testen ob linker Wert kleiner (<) ist als rechter Wert
Beispiel: 1<0 → unwahr
<=
Testen ob linker Wert kleiner oder gleich (≤) ist als rechter Wert
Beispiel: 1<=0 → unwahr
>
Testen ob linker Wert größer (>) ist als rechter Wert
Beispiel: 1>0 → wahr
>=
Testen ob linker Wert größer oder gleich (≥) ist als rechter Wert
Beispiel: 1>=0 → wahr
===
Testen ob Werte und Typen gleich sind
Beispiel: "0"===0 → unwahr
!==
Testen ob Werte und Typen ungleich sind
Beispiel: "0"!==0 → wahr

Beispiel:

Editor - index.html
<script type="text/javascript">
var Datum = new Date();
var vormittags = ( Datum.getHours() < 13 );
alert(vormittags);
</script>

Beispielskript ausführen

Achtung: Verwechseln sie nicht den Zuweisungs­operator = und den Vergleichs­operator ==. JS gibt keinen Fehler bei der falschen Verwendung aus, da eine Zuweisung immer „wahr“ ist!

Logische Verknüpfungen

Mit den logischen Verknüpfungen können sie mehrere Wahrheitswerte (also auch Vergleiche) miteinander verknüpfen. So können sie komplexe Vergleiche mit mehreren Variablen erschaffen.

a=true; b=false;

&&
Beide Werte müssen wahr sein, damit die Verknüpfung wahr ist.
Beispiel: (a && b) → falsch
||
Der eine oder der andere Wert muss wahr sein, damit die Verknüpfung wahr ist.
Beispiel: (a || b) → wahr
!
Wenn der Wert wahr ist, wird er falsch und andersherum
Beispiel: (!a) → falsch
Beispiel: (!b) → wahr

Beispiel:

Editor - index.html
<script type="text/javascript">
var Datum = new Date();
var tagsueber = ( (Datum.getHours() > 6) && (Datum.getHours() < 18) );
alert(tagsueber);
</script>

Beispielskript ausführen

Bedingter Programmablauf

Bedingter Operator

Mit dem bedingten Operator können sie Vergleiche innerhalb eines Ausdrucks verwenden, da dieser einen Wert zurück gibt.

Wahrheitswert?Wert1:Wert2
Wenn der Wahrheitswert „wahr“ ist, dann gibt der Operator Wert1, sonst Wert2 zurück
Beispiel:
Antwort = (x == 1) ? "x ist gleich 1" : "x ist ungleich 1"

Beispiel:

Editor - index.html
<script type="text/javascript">
var Datum = new Date();
var Begruessung = "Guten " + ((Datum.getHours() > 17) ? " Abend." : " Tag.");
alert(Begruessung);
</script>

Beispielskript ausführen

Bedingte Ausführung

Auch den Programmablauf sollten sie mittels Vergleich beeinflussen können. Dazu existiert das if () {} else {} Konstrukt. Wenn (if) der Wahrheitswert des Vergleichs wahr ist, werden die Anweisungen direkt danach ausgeführt, sonst (else) die Anweisungen nach „else“. Allerdings ist der „else“-Teil optional, er muss also nicht geschrieben werden.

if (Wahrheitswert) {
  Anweisungen wenn wahr;
} else {
  Anweisungen wenn falsch;
}

Beispiel:

Editor - index.html
<script type="text/javascript">
var Datum = new Date();
var Stunde = Datum.getHours();
if (Stunde<17) {
    alert("Guten Tag");
} else {
    alert("Guten Abend");
}
</script>

Beispielskript ausführen

Alternative Ausführung

Wenn sie nicht nur zwischen „wahr“ und „falsch“ unterscheiden wollen, können sie auch per Schalter (switch) die Werte einer Variable auf bestimmte Fälle (case) prüfen. Allerdings ist ein Abbruch (break) dieser Prüfung jederzeit möglich und vielleicht auch nötig. Der Standardablauf (default) wird gewählt, wenn sonst kein Fall eingetreten ist.

switch (Eingabe) {
  case "1":
    alert("Sie haben „1“ gewählt!");
    break;
  case "2":
    alert("Sie haben „2“ gewählt!");
    break;
  case "3":
    alert("Sie haben „3“ gewählt!");
    break;
  default:
    alert("Sie haben weder „1“ noch „2“ noch „3“ gewählt!");
    break;
}

Beispiel:

Editor - index.html
<script type="text/javascript">
var Datum = new Date();
var Stunde = Datum.getHours();
switch (Stunde) {
  case 4:  case 5:  case 6:  case 7:
    alert("Guten Morgen!");
    break;
  case 8:  case 9:  case 10:  case 11:
    alert("Guten Vormittag!");
    break;
  case 12:  case 13:
    alert("Mahlzeit!");
    break;
  case 14:  case 15:  case 16:  case 17:
    alert("Guten Nachmittag!");
    break;
  case 18:  case 19:  case 20:  case 21:
    alert("Guten Abend!");
    break;
  default:
    alert("Gute Nacht!");
    break;
}
</script>

Beispielskript ausführen

Ereignisse

Zur bedingten Ausführung gehören auch sogenannte Eventhandler. Diese kennen wir schon aus HTML (<body onload="javascript:funktionsname()">. Die Funktion die diesem Handler zugewiesen wird, ruft erst dessen Ereignis auf.

windows.onload = fnname;

http://www.mediaevent.de/javascript/event-handler.html

Exception

try … catch(e) … throw

Zusammenfassung

Schleifen

Schleifen führen Anweisungen mehrfach hintereinander aus, bis eine bestimmte Bedingung erfüllt ist.

Zählschleife

Bei Zählschleifen ist die Bedingung ein Zähler oder eine Elementanzahl.

Über Zählervariable

Die For-Schleife erwartet als Parameter einen Anfangsausdruck (Deklaration und Initialisierung der Zählervariable: var i=0), danach eine Bedingung (Test der Zählervariable: i<10) und zuletzt eine Veränderung (verändern der Zählervariable: i++). Im Gegensatz zu Funktionsparametern werden diese mit Semikolon getrennt.

Der Anfangsausdruck wird vor Schleifenbeginn ausgeführt. Dann werden die Anweisungen im Block ausgeführt. Die Bedingung wird nach jeden Schleifendurchlauf geprüft und die Veränderung zuletzt durchgeführt.

Anmerkung: Für Zählervariablen nimmt man gerne die Variablennamen „i“, „j“, „n“ und „m“.

for (Anfangsausdruck; Bedingung; Veränderung) {
  Anweisungen;
}

Beispiel:

Editor - index.html
<script type="text/javascript">
var Schleife = "Durchlauf:";
for (var i=0; i<10; i++) {
  Schleife = Schleife + " " + i;
}
alert(Schleife);
</script>

Beispielskript ausführen

Über Elementanzahl

Die For-Schleife über eine Elementanzahl braucht keine Bedingung und Veränderung. Die Zählervariable durchläuft automatisch die Anzahl der Elemente des Objekts, das nach dem Schlüsselwort in angegeben ist.

Beachten sie, dass die Zählervariable numerische Werte enthält. Wollen sie beispielsweise die Elemente eines Arrays durchlaufen, greifen sie auf dessen Elemente mit [Zählervariable] zu.

for (var Element in Array/Objekt) {
  Anweisungen;
}

Beispiel:

Editor - index.html
<script type="text/javascript">
var Tiere = new Array ('Hund','Katze','Maus');
var Schleife = "Tiere:";
for (var t in Tiere) {
  Schleife = Schleife + " " + Tiere[t];
}
alert(Schleife);
</script>

Beispielskript ausführen

Bedingte Schleifen

Schleifen laufen nicht nur über eine Anzahl, sondern können auch eine allgemeine Bedingung (Ereignis) als Abbruch haben. Dass heißt, es ist vorher noch nicht bekannt, wieviele Durchläufe eine Schleife hat.

Diese Art von Schleifen können anfangs- oder endbedingt sein.

anfangsbedingt

Bei anfangsbedingten Schleifen wird die Schleifenbedingung vor dem ersten Durchlauf der Schleife geprüft. So kann es sein, dass die Schleife auch gar nicht ausgeführt wird. Diese Schleifenart benötigt nur eine Bedingung und einen Anweisungsteil:

while (Wahrheitswert) {
  Anweisungen;
}

Beispiel:

Editor - index.html
<script type="text/javascript">
var Anzahl = 0;
while (confirm("Nochmal? (" + Anzahl + ")")) {
  Anzahl++;
}
</script>

Beispielskript ausführen

endbedingt

Bei endbedingten Schleifen wird die Schleifenbedingung nach dem ersten Durchlauf der Schleife geprüft. So wird die Schleife immer mindens einmal ausgeführt. Diese Schleifenart benötigt nur eine Bedingung und einen Anweisungsteil:

do {
  Anweisungen;
} while (Wahrheitswert);

Beispiel:

Editor - index.html
<script type="text/javascript">
var Anzahl = 0;
do {
  Anzahl++;
} while (confirm("Nochmal? (" + Anzahl + ")"))
</script>

Beispielskript ausführen

Kontrollfluss von Schleifen

Um noch flexibler innerhalb von Schleifen auf Bedingungen eingehen zu können, können sie mit break und continue den Schleifenablauf noch besser kontrollieren.

break
Direkter Abbruch der Schleife an dieser Stelle
(Damit ist eine mittenbedingte Schleife möglich!)
continue
Direktes Fortsetzen des Ablaufs am Schleifenanfang

Beispiel:

Editor - index.html
<script type="text/javascript">
var Anzahl = 0;
do {
  if (!confirm("Nochmal? (" + Anzahl + ")")) break;
  continue;
  Anzahl++;
} while (true)
</script>

Beispielskript ausführen

Zusammenfassung

DOM

Unterkapitel

n.v.

Einführung

Document Object Model

http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#schichtenmodell

Website ändern

GetElementById

Website erweitern

appendChild(dasNeueObjekt)

insertBefore(dasNeueObjekt, BezugsObjekt)

Ajax Beispiel

Unterkapitel

n.v.

Einführung

Beispiel Chatbox

Anhang

Kapitel

n.v.

Einführung

Hier im Anhang finden sie Fachbegriffe und Referenzen zu HTML, CSS und JavaScript.

Anhang: Allgemein

Unterkapitel

n.v.

Einführung

Hier im Anhang finden sie Fachbegriffe und Referenzen.

Anhang: Dieses Buch

Dieses Buch

Über mich

  1. Christian Hartnick
  2. Diplom-Wirtschaftsinformatiker
  3. Freier Berater, Entwickler und Dozent; Journalist
  4. über 30 Jahre Beruferfahrung
  5. http://hilfe.hartnick.de (http://hilfe.hartnick.de)

Entstehung

Dieses Buch ist im Rahmen meiner Kurse „Webseiten gestalten“ an der VHS Aschaffenburg und der KVHS Oranienburg entstanden.

Es enthält im ersten Teil ein durchgehendes Beispiel von einer (web-)Visitenkarte bis zu einer Webpräsenz (http://de.wikipedia.org/wiki/Webpräsenz). Im zweiten und dritten Teil (Fortgeschrittenen und Profi-Kurs) werden dann neue Techniken sowie Tipps und Tricks eingeführt.

Kursteil 4 beschäftigt sich mit Content Management Systemen (Inhalteverwaltung) und der letzte Teil mit der JavaScript-Programmierung.

Disclaimer

Dieses Buch steht unter der Creative Commons-Lizenz (http://de.wikipedia.org/wiki/Creative_Commons) CC-BY-NC-SA (http://de.wikipedia.org/wiki/Creative_Commons#Die_Rechtemodule)

Aufbau

Beschreibung

Dieses Buch verwendet verschiedene Kennzeichnung, die dem Leser das Leben vereinfachen sollen:

Besondere Formatierungen

Ein ganz wichtiges Wort. Und ein Stück HTML-Code, CSS-Code und JavaScript-Code. Neu eingeführte Syntax (http://de.wikipedia.org/wiki/Syntax) sieht so aus: HTML-Code, CSS-Code und JS-Code.

Übung / Brainstorming

Übung:

Übungen geben Arbeitsanweisungen, die der Leser nachvollziehen soll.

Anhang: Tastaturkommandos

Quelltext

Editor - Eine_Datei
So ist ein Quelltext gekennzeichnet.
HTML: <tag attribut="Wert"> Text </html-tag>
CSS: selektor {color:blue;}
JavaScript: reserviertes Wort, Quellcode, Wert, Bezeichner

Vorraussetzungen

Sie können

  1. Mit Windows, Mac OS oder Linux umgehen
  2. Einen Dateimanager (Windows Explorer) benutzen
  3. Einen Webbrowser (Internet Explorer, Firefox, Chrome, …) benutzen
  4. Dateien und Verzeichnisse verwalten

Sie brauchen

  1. Einen schnellen USB-Stick
  2. Stift/Papier
  3. Geduld :-)

Empfehlenswert

  1. Firefox
  2. Notepad++ oder Notepad2
  3. Gimp oder Pinta
  4. 7-Zip
  5. IrfanView
  6. VLC
  7. Lynx
  8. PortableApps (http://portableapps.com/de)

Anhang: Fachbegriffe

URI
Einheitlicher Ressourcenbezeichner (Uniform Resource Identifier) dessen Schema den Aufbau bestimmt.
HTTP-URI: http://[Benutzer[:Passwort]@Domain[:Port][/Pfad][?Anfrage][#Fragment]
Beispiel: http://www.beispiel.de/bsp1/visitenkarte.html
Beispiel: mailto:Benutzername@Domain
Beispiel: tel:telefonnummer
Schema
Bestimmt den Aufbau und Verwendung der URI.
Schemata: http, https, ftp, file, mailto, callto
Domain
Eine Domain ist ein (Namens-)Bereich, der mit Punkten („.“) weiter in Subdomains und TLDs unterteilt werden kann.
Beispiel: x-apotheke.de
TLD
Eine Top-Level-Domain ist der oberste Namensbereich des DNS. Oft steht sie für Länder. In lokalen Netzen fällt sie weg oder man benutzt „.local“
Beispiel: .de - Deutschland, .com - Firma, .org - Organisation, .eu - Europa
Subdomain
Eine Subdomain untergliedert eine Domain. Meist wird sie zur Dienstkennzeichnung benutzt; es besteht aber kein direkter Zusammenhang zwischen Diensten und Subdomains!
Beispiel: www. - Webpräsenz, ftp. - FTP-Server, svr1. - Server 1, de. - Dt. Server
Name
Konstrukt: Subdomain.Domain.TLD (Umgangssprachlich: Domainname oder URL)
Beispiel: www.x-apotheke.de
Port
Bestimmt den Dienst an einer Adresse. Einem Dienst ist ein Protokoll zugeordnet.
Beispiel: :80 - http (www), :443 - https (sicher), :21 - ftp (Dateitransfer)
Pfad
Pfad zu einer Webseite auf dem Server; analog zum Dateisystem auf einem Rechner. Der Pfad muss nicht dem Dateisystem auf dem Server entsprechen.
Beispiel: /beispiel/1/text3.html
Anfrage
Parameter für eine Webseite (Formulare und Programme)
Beispiel: ?Benutzer=Name
Fragment
Ein Ankerpunkt auf einer Webseite. So kann man beispielsweise mitten in die Webseite verzweigen.
Beispiel: #ZweiterAbsatz
Adresse
Jeder Server besitzt eine Internetadresse, an der er mehrere Dienste anbieten kann.
Beispiel: 123.45.67.89
Server
Ein Computer im Internet der Webseiten oder andere Dienste anbietet.
DNS
Das Domain Name System löst Namen in Adressen auf. Gelbe Seiten!
Dienst
Dienste sind Anwendungen im Internet die über Ports angeboten werden.
Beispiel: WWW, E-Mail, FTP
Protokoll
Ein Protokoll regelt die Kommunikation zwischen Server und Browser. Oft ist ein Protokoll auch ein Schema!
Beispiel: http, https, ftp, pop
Benutzername
Ein Name

Anhang: Tastaturkommandos

Windows

Tastaturkommandos Windows
KommandoBeschreibung
Alt+TabAnwendung umschalten
Alt+F4Anwendung schließen

Notepad2

Tastaturkommandos Notepad2
KommandoBeschreibung
Strg+ODatei öffnen
Strg+SDatei speichern
Strg+Shift+SDatei speichern unter neuen Namen
Strg+AAlles markieren
Strg+XMarkierten Text in Zwischenablage ausschneiden
Strg+CMarkierten Text in Zwischenablage kopieren
Strg+VZwischenablage einfügen

Firefox

Tastaturkommandos Firefox
KommandoBeschreibung
Strg+ODatei öffnen
Strg+Link im neuen Tab öffnen
Strg+USeitenquelltext im neuen Fenster anzeigen
Shift+Alt+USeitenquelltext im neuen Tab anzeigen
(mit Web Developer Erweiterung)
Shift+Alt+CCSS-Text im neuen Tab anzeigen
(mit Web Developer Erweiterung)
Strg+TNeuen Tab öffnen
Strg+WAktuellen Tab schließen
Strg+AAlles markieren
Strg+CMarkierten Text in Zwischenablage kopieren
Strg+VZwischenablage einfügen
Strg++Darstellung vergrößern
Strg+-Darstellung verkleinern
Strg+0Darstellung auf Standard

Windows Explorer

Tastaturkommandos Windows Explorer
KommandoBeschreibung
Strg+AAlles markieren
Strg+XMarkierte Datei in Zwischenablage ausschneiden
Strg+CMarkierte Datei in Zwischenablage kopieren
Strg+VZwischenablage einfügen

Anhang: Beispiel

Beispiel 1Beispiel 2Beispiel 3Beispiel 4Beispiel 5Beispiel 6Beispiel 7Beispiel 8Beispiel 9Beispiel 10HTMLCSSBeispiel 11HTMLBeispiel 12HTMLJSBeispiel 13HTMLJSDOMBeispiel WebpräsenzHTMLHTML KopfHTML MenuCSS

Von Dateiversion zu Dateiversion sind die Änderungen mit gelben Hintergrund gekennzeichnet. Sobald externes CSS / JS dazukommt, ist die jeweilige Datei hinten angehängt.

Beispiel 1

Editor - 01_visitenkarte.txt
Christian Hartnick
Dipl.-Wirtsch.-Inf.
Freier Berater

Sandweg 10
16727 Oberkrämer OT Bärenklau

-----------------------------

- Telefon 03304 5081620
- Fax     03304 5081621
- Mobil   01517 5081620

Email hilfe@hartnick.de
Web   http://hilfe.hartnick.de

Beispiel 2

Editor - 02_visitenkarte.html
Christian Hartnick
Dipl.-Wirtsch.-Inf.
Freier Berater

Sandweg 10
16727 Oberkrämer OT Bärenklau

-----------------------------

- Telefon 03304 5081620
- Fax     03304 5081621
- Mobil   01517 5081620

Email hilfe@hartnick.de
Web   http://hilfe.hartnick.de

Beispiel 3

Editor - 03_visitenkarte_p.html
<p>
  Christian Hartnick
  Dipl.-Wirtsch.-Inf.
  Freier Berater
</p>

<p>
  Sandweg 10
  16727 Oberkrämer OT Bärenklau
</p>

-----------------------------

<p>
  - Telefon 03304 5081620
  - Fax     03304 5081621
  - Mobil   01517 5081620
</p>

<p>
  Email hilfe@hartnick.de
  Web   http://hilfe.hartnick.de
</p>

Beispiel 4

Editor - 04_visitenkarte_p_br.html
<p>
  Christian Hartnick <br />
  Dipl.-Wirtsch.-Inf. <br />
  Freier Berater
</p>

<p>
  Sandweg 10 <br />
  16727 Oberkrämer OT Bärenklau
</p>

-----------------------------

<p>
  - Telefon 03304 5081620 <br />
  - Fax     03304 5081621 <br />
  - Mobil   01517 5081620
</p>

<p>
  Email hilfe@hartnick.de <br />
  Web   http://hilfe.hartnick.de
</p>

Beispiel 5

Editor - 05_visitenkarte_linked.html
<p>
  Christian Hartnick   <br />
  Dipl.-Wirtsch.-Inf. <br />
  Freier Berater
</p>

<p>
  Sandweg 10 <br />
  16727 Oberkrämer OT Bärenklau
</p>

-----------------------------

<p>
  - Telefon <a href="tel:033045081620">03304 5081620</a> <br />
  - Fax     <a href="fax:033045081621">03304 5081621</a> <br />
  - Mobil   <a href="tel:015175081620">01517 5081620</a>
</p>

<p>
  Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a> <br />
  Web   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
</p>

Beispiel 6

Editor - 06_visitenkarte.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>06 Meine Visitenkarte (Zwischenstand)</title>
  </head>

  <body>
    <p>
      Christian Hartnick   <br />
      Dipl.-Wirtsch.-Inf. <br />
      Freier Berater
    </p>

    <p>
      Sandweg 10 <br />
      16727 Oberkrämer OT Bärenklau
    </p>

    -----------------------------

    <p>
      - Telefon <a href="tel:033045081620">03304 5081620</a> <br />
      - Fax     <a href="fax:033045081621">03304 5081621</a> <br />
      - Mobil   <a href="tel:015175081620">01517 5081620</a>
    </p>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a> <br />
      Web <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 7

Editor - 07_visitenkarte_kommentar.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>07 Visitenkarte (Kommentar)</title>
  </head>

  <!-- Dies ist ein Kommentar -->
  <!-- Kommentare sind Anmerkungen zum HTML-Text, die nicht im Browser erscheinen -->
  <!-- Mit Kommentaren können sie Tags auskommentieren: <p> erscheint nicht </p> -->

  <body>
    <p>
      Christian Hartnick   <br />
      Dipl.-Wirtsch.-Inf. <br />
      Freier Berater
    </p>

    <p>
      Sandweg 10 <br />
      16727 Oberkrämer OT Bärenklau

    -----------------------------

    <p>
      - Telefon <a href="tel:033045081620">03304 5081620</a> <br />
      - Fax     <a href="fax:033045081621">03304 5081621</a> <br />
      - Mobil   <a href="tel:015175081620">01517 5081620</a>
    </p>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a> <br />
      Web <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 8

Editor - 08_visitenkarte_format.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>08 Meine Visitenkarte (formatiert)</title>
  </head>

  <body>
    <p>
      <b>Christian Hartnick</b><br />
      <span style="font-weight:bold;">Dipl.-Wirtsch.-Inf.</span><br />
      Freier Berater
    </p>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr style="width:300px; margin-left:0;" />

    <ul>
      <li>Telefon <a href="tel:033045081620">03304 5081620</a></li>
      <li>Fax     <a href="fax:033045081621">03304 5081621</a></li>
      <li>Mobil   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a><br />
      Web   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 9

Editor - 09_visitenkarte_css_inline.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>09 Meine Visitenkarte (css inline)</title>
    <style type="text/css">
      #Name   { font-weight: bold; } 
      #Grad   { font-size:   small; } 
      .Beruf  { font-style:  italic; } 
    </style>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr style="width:300px; margin-left:0;" />

    <ul>
      <li>Telefon <a href="tel:033045081620">03304 5081620</a></li>
      <li>Fax     <a href="fax:033045081621">03304 5081621</a></li>
      <li>Mobil   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      Email <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a><br />
      Web   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

Beispiel 10

HTML

Editor - 10_visitenkarte_css.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>10 Meine Visitenkarte (css datei)</title>
    <link rel="stylesheet" type="text/css" href="10_visitenkarte.css" />
    <style type="text/css">
      address { font-style:normal; } 
    </style>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
      <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
      <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      <span class="label">Email</span> <a href="mailto:hilfe@hartnick.de">hilfe@hartnick.de</a><br />
      <span class="label">Web</span>   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </body>
</html>

CSS

Editor - 10_visitenkarte.css
/* Formatvorlage "Name" für Tag mit Attribut id="Name" */
#Name    { font-weight:bold; }
/* Formatvorlage "Grad" für Tag mit Attribut id="Grad" */
#Grad    { font-size: small; }
/* Formatvorlage "Beruf" für Tag mit Attribut class="Beruf" */
.Beruf   { font-style: italic; }
/* Formatvorlage für das Tag <a> */
a        { text-decoration:none; color:WindowText;}
/* Formatvorlage für den Platz vor dem Tag <a> */
a:before { content:"→"; color: blue; }
/* Formatvorlage für das Tag <a> wenn die Maus darüber ist */
a:hover  { color: blue; }
/* Formatvorlage für Tag <hr> */
hr       { width: 300px; margin-left: 0; }
/* Einheitliche Breite für Label (Bezeichner) */
.label   { display: inline-block; width: 3em; }

Beispiel 11

HTML

Editor - 11_visitenkarte_js_inline.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>11 Meine Visitenkarte (js inline)</title>
    <link rel="stylesheet" type="text/css" href="visitenkarte.css" />
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
      <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
      <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      <span class="label">Email</span>
      <script type="text/javascript">
        var name   = "hilfe"; 
        var domain = "hartnick"; 
        var tld    = "de"; 
        document.write('\n<a href=\"mailto:' + name + '@' + domain + '.' +tld + '\">' + name + '@' + domain + '.' +tld + '<\/a>'); 
      </script>
      <noscript> hilfe_at_hartnick_._de </noscript><br />
      <span class="label">Web</span> <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>

  </body>
</html>

Beispiel 12

HTML

Editor - 12_visitenkarte_js.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>12 Meine Visitenkarte (js extern)</title>
    <link rel="stylesheet" type="text/css" href="visitenkarte.css" />
    <script src="12_visitenkarte.js" type="text/javascript"></script>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
      <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
      <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
    </ul>

    <p>
      <span class="label">Email</span>
      <script type="text/javascript">
        insertEmail("hilfe","hartnick","de")
      </script>
      <noscript> hilfe_at_hartnick_._de </noscript><br />
      <span class="label">Web</span> <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>

  </body>
</html>

JS

Editor - 12_visitenkarte.js
  // insertEmail fügt als Spamschutz an der Aufrufstelle einen Email-Adress-Link (name@domain.tld) ein
  function insertEmail(name,domain,tld) {
    document.write('\n<a href=\"mailto:'+name+'@'+domain+'.'+tld+'\">'+name+'@'+domain+'.'+tld+'</a>');
  }

Beispiel 13

HTML

Editor - 13_visitenkarte_js_dom.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>13 Meine Visitenkarte (js dom)</title>
    <link rel="stylesheet" type="text/css" href="visitenkarte.css" />
    <script src="13_visitenkarte.js" type="text/javascript"></script>
  </head>

  <body onload="convertEmail('Email')">
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

  <ul>
    <li><span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a></li>
    <li><span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a></li>
    <li><span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a></li>
  </ul>

    <p>
      <span class="label">Email</span> <a class="Email" href="mailto:em1_at_domain_dot_de">em1_at_domain_dot_de</a><br />
      <span class="label">Email</span> <a class="Email" href="mailto:em2_at_domain_dot_de">em2_at_domain_dot_de</a><br />
      <span class="label">Web</span>   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>

  </body>
</html>

JS

Editor - 13_visitenkarte.js
// convertEmail(Klasse) konvertiert bestehende Email-Links mit dem Attribut <a class="Klasse" ...>
// Aufbau des href: <a href="mailto:name_at_domain_dot_tld">beliebiger Text</a>

function convertEmail(ClassName) {
  var adresse,name,domain,tld,temp;
  var anker;
  var i;

  i = 0;

  while (document.getElementsByClassName(ClassName)[i]) {
    anker   = document.getElementsByClassName(ClassName)[i];
    adresse = anker.href;

    temp   = adresse.split("_at_");
    name   = temp[0];
    domain = temp[1];

    temp   = domain.split("_dot_");
    domain = temp[0];
    tld    = temp[1];

    adresse = name + "@" + domain + "." + tld;
    anker.href = adresse;
    anker.firstChild.nodeValue = adresse.substr(7,255);

    i++;
  }
}

DOM

Beispiel Webpräsenz

HTML

Editor - kontakt.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta content="author" name="Fügen sie hier ihren Namen ein" />
  <title>Christian Hartnick - Kontakt</title>

  <link rel="stylesheet" type="text/css" href="css/layout.css" />
  <style type="text/css">
    /* Interne CSS-Formatvorlagen */
  </style>
  <script type="text/javascript" src="js/funktionen.js"></script>
</head>

<body onload="convertEmail('Email')">
  <div id="KopfDiv">
    <iframe src="iframes/kopf.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <h1 class="Kopf">Fügen sie ihren Seitentitel hier ein</h1>
    </iframe>
  </div>

  <div id="MenuDiv">
    <iframe src="iframes/menu.html" frameborder="0" scrolling="no" width="100%" height="100%">
      <a class="Menue" href="iframes/menu.html">Sitemap</a>
    </iframe>
  </div>

  <div id="InhaltDiv">
    <p>
      <span id="Name">Christian Hartnick</span> <br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Beruf">Freier Berater</span>
    </p>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <hr />

    <ul>
      <li> <span class="label">Telefon</span> <a href="tel:033045081620">03304 5081620</a> </li>
      <li> <span class="label">Fax</span>     <a href="fax:033045081621">03304 5081621</a> </li>
      <li> <span class="label">Mobil</span>   <a href="tel:015175081620">01517 5081620</a> </li>
    </ul>

    <p>
      <!-- Alle Email-Links sind mit class="Email" zum Konvertieren gekennzeichnet! -->
      <span class="label">Email</span> <a class="Email" href="mailto:hilfe_at_hartnick_dot_de">hilfe_at_hartnick_dot_de</a><br />
      <span class="label">Email</span> <a class="Email" href="mailto:christian_at_hartnick_dot_de">christian_at_hartnick_dot_de</a><br />
      <span class="label">Web</span>   <a href="http://hilfe.hartnick.de">hilfe.hartnick.de</a>
    </p>
  </div>
</body>
</html>

HTML Kopf

Editor - iframes/kopf.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Kopf</title>
  <link rel="stylesheet" type="text/css" href="../css/layout.css" />
</head>

<body class="KopfFrame">
  <p class="Kopf">
    <a href="http://hilfe.hartnick.de" target="_top">
      <img class="Kopf" src="../bilder/logo.png" alt="logo hilfe.hartnick.de" />
    </a>
  </p>
</body>
</html>

HTML Menu

Editor - iframes/menu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Sitemap</title>
  <link rel="stylesheet" type="text/css" href="../css/layout.css" />
</head>

<body class="MenuFrame">
  <h1 class="Menu">Menü</h1>
  <ul class="Menu">
    <li class="Menu"><a class="Menu" href="../index.html" target="_top">Start</a>
      <ul class="Menu">
        <li class="Menu"><a class="Menu" href="../kontakt.html" target="_top">Kontakt</a></li>
        <li class="Menu"><a class="Menu" href="../impressum.html" target="_top">Impressum</a></li>
      </ul>
    </li>
    <li class="Menu"><a class="Menu" href="http://de.selfhtml.org" target="_top">SelfHTML</a></li>
    <li class="Menu"><a class="Menu" href="http://www.drweb.de" target="_top">Dr. Web</a></li>
  </ul>
</body>
</html>

CSS

Editor - vorlagen/layout.css
/* Allgemeine Definitionen */
body     { background-color: #000040; font-family: "Arial",Helvetica,sans-serif;}
h1       { font-size: x-large; color: darkblue; }
h2       { font-size: large;   color: darkblue; }
p        { font-size: medium; }
#Name    { font-weight: bold; }
#Grad    { font-size: small; }
.Beruf   { font-style: italic; }
a        { text-decoration: none; color: WindowText;}
a:hover  { color: blue; }
hr       { width: 300px; margin-left: 0; }
address  { font-style: normal; }
.label   { display: inline-block; width: 3.5em; }

/* Definitionen für den Kopf der Webpräsenz */
/* Hintergrundfarbe hier und bei .KopfFrame muss gleich sein! */
#KopfDiv { background-color: #88f; border: 0; padding: 2pt;
           position: absolute; left: 2%; top: 0px; width: 95%; height: 100%; z-index: 1; }
.KopfFrame{background-color: #88f;}
p.Kopf   { text-align:center; }

/* Definitionen für das Menü der Webpräsenz */
/* Hintergrundfarbe hier und bei .MenueFrame muss gleich sein! */
#MenuDiv { background-color: #44f; border: 0; padding: 2pt;
           position: fixed; left: 0px; top: 95px; width: 200px; height: 300px; z-index: 2; }
.MenuFrame{background-color: #44f; overflow: hidden; }

ul.Menu  { padding-left: .5em; }
li.Menu  { list-style: none; margin: 3px }
a.Menu   { display: inline-block; width: 7em;
           padding: 1px; padding-left: 1em; border: 1px solid gray; background-color: silver; }

/* Definitionen für den Inhalt der Webpräsenz */
#InhaltDiv { background-color: #eee; border: .5em ridge #fff; padding: 1em;
             position: absolute; left: 210px; top: 95px; min-width: 50%; min-height: 50%; z-index: 3; }

Anhang: Syntaxübersicht

SyntaxvergleichSyntaxzuordnung

HTML-Syntax (Satzlehre/Rechtschreibung) steht stets in einer HTML-Datei. Entsprechend steht CSS- und JS-Syntax in den entsprechenden Dateien. Allerdings steht CSS-Syntax auch zwischen <style type="text/css"> und </style> sowie innerhalb des style="" Attributs. Entsprechend steht JS-Syntax auch zwischen <script> und </script> sowie als Referenz mit dem Schema „javascript:“ (<a href="javascript:">) und nach HTML-Ereignissen wie onload="".

Syntaxvergleich

Syntaxvergleich HTML/CSS/JS
KonstruktHTMLCSSJavaScript
Anweisung<leerestag />@importAnweisung;
Funktion<starttag> </endtag>Selektor { }Funktion () { }
Zuweisungattribut="wert"eigenschaft: wert;variable = wert;
Bedingungonload="wert"@media print {}if (Bed) { Anw; }
Schleife *for (Bed) { Anw; }
Kommentar<!-- Kommentar -->/* Kommentar */
// bis Zeilenende
/* Kommentar */
// bis Zeilenende

Syntaxzuordnung

HTMLCSSJavaScript
Editor - index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
      *content="text/html; charset=UTF-8" />
    <title>Meine Visitenkarte</title>
    <script src="funktionen.js"
            type="text/javascript"></script>
    <link rel="stylesheet"
          type="text/css" href="vorlagen.css" />
    <style type="text/css">
        address { font-style:normal; } 
    </style>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Kursiv">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <p>
      <script type="text/javascript">
        insertEmail("hilfe","hartnick","de")
      </script>
      <noscript>
        hilfe_at_hartnick_._de
      </noscript><br />
      <a href="http://hilfe.hartnick.de">
        hilfe.hartnick.de
      </a>
    </p>

  </body>
</html>
Editor - impressum.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
      *content="text/html; charset=UTF-8" />
    <title>Impressum</title>
    <script src="funktionen.js"
            type="text/javascript"></script>
    <link rel="stylesheet"
          type="text/css" href="vorlagen.css" />
  </head>

  <body>
    <p></p>

  </body>
</html>
Editor - bilder.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
      *content="text/html; charset=UTF-8" />
    <title>Bildergallerie</title>
    <script src="funktionen.js"
            type="text/javascript"></script>
    <script src="gallerie.js"
            type="text/javascript"></script>
    <link rel="stylesheet"
          type="text/css" href="vorlagen.css" />
    <link rel="stylesheet"
          type="text/css" href="gallerie.css" />
  </head>

  <body>
    <p></p>

  </body>
</html>
Editor - vorlagen.css
#Name   { font-weight:bold; }
#Grad   { font-weight:lighter; }
.Kursiv { font-style:italic; }
a        { text-decoration:none;
           color:WindowText;}
a:before { content:"\21d2";
           color:#0000ff; }
a:hover  { color:#0000ff; }
Editor - gallerie.css
Editor - funktionen.js
function insertEmail(name,domain,tld) {
  document.write(
    '\n<a href=\"mailto:'
    +name+'@'+domain+'.'+tld+'\">'
      +name+'@'+domain+'.'+tld
    +'</a>');
}
Editor - gallerie.js

Anhang: Benutzung von FTP

Cients

s. Software

Da wir Firefox benutzen, ist für uns FireFTP als Addon am besten geeignet.

Benutzung

FTP-Clients benutzen sie wie einen lokalen Dateimanager (Browser). Unter Windows ist das der Explorer, unter Mac der Finder und unter Linux existieren diverse wie Nautilus, Dolfin, PCManFM, Thunar usw.

Meist ist ein FTP-Client zweigeteilt. Links sind die lokalen Dateien und rechts die entfernten (auf dem FTP-/Webserver). Um eine Verbindung zum FTP-Server zu bekommen, müssen wir uns auf diesem anmelden. Dazu bekommen wir von unserem Provider Zugangsdaten.

Sobald wir angemeldet sind, können wir die Dateien und Verzeichnisse einer Webpräsenz ganz normal hin- und herkopieren.

Anhang: HTML

Unterkapitel

n.v.

Einführung

Hier im Anhang finden sie Fachbegriffe und Referenzen zu HTML.

Anhang: Wichtige Tags

<html>
HTML-Seite
<head>, <body>
<head>
Kopfbereich (Infos zur Webseite)
<base>
Basis-URI für Referenzen
leer
<link>
Log. Beziehung zu einer Datei (Bsp. CSS)
leer
<meta>
Meta-Daten wie Beschreibung und Stichwörter
leer
<script>
(Java)Script-Definitionen
JavaScript
<style>
Stylesheet-Definitionen
Stylesheet
<title>
Titel der Datei
Text
<body>
Körperbereich (Inhalt der Seite)
<h1>-<h6>
Block: Heading (Überschrift) 1-6
Inline
<p>
Block: Paragraph (Absatz)
Inline
<div>
Block: Division (logischer Abschnitt) für CSS
Block/Inline
<address>
Block: Logischer Addressbereich
Block/Inline
<hr>
Block: Horizontale Linie
leer
<ol>,<ul>
Block: (un)geordnete Liste
<li>
Block: Listenpunkt
Inline
<dl>
Block: Definitionsliste
<dt>
Block: Definitionsterm (Ausdruck)
Inline
<dd>
Block: Definition
Inline
<table>
Block: Tabelle
<thead>
Block: Tabellenkopf
<tr>
<tbody>
Block: Tabellenkörper
<tr>
<tfoot>
Block: Tabellenfuß
<tr>
<caption>
Block: Tabellenüber(/unter-)schrift
Inline
<tr>
Block: Tabellenzeile
<th>
Block: Tabellenheaderzelle
Inline
<td>
Block: Tabellenzelle
Inline
<form>
Block: Formular
<fieldset>
Block: Gruppierung von Feldern
Formularelemente
<legend>
Inline: Gruppenbeschriftung
<optgroup>
Block: Optionsgruppe
<input>
Inline: Eingabeelemente
leer
<textarea>
Inline: Eingabebereich
leer
<label>
Inline: Beschriftung für Eingabe
Inline
<option>
Block: Auswahlliste
<select>
Inline: Auswahlpunkte
<span>
Inline: (Spanning) Textabschnitte (CSS)
Inline
<br>
Inline: (Break) Zeilenumbruch
leer
<a>
Inline: Anker (href="": Verweis)
Inline
<img>
Inline: Image (Grafik)
leer
<object>
Inline: Bindet externe Objekte ein (meist Multimedia)
leer
<iframe>
Inline: eingebettetes Fenster
Block/Inline
<script>
Inline: (Java)Script
Javascript
<noscript>
Inline: Alternaitve zum Script
Block/Inline
<pre>
Block: vorformatierter Text
Kein HTML
<button>
Inline: Schalter
leer

Anhang: Semantische Tags

<address>
Block: Adresse
<blockquote>
Block: Zitat
<del>
Block/Inline: deleted (gelöscht)
<ins>
Block/Inline: inserted (eingefügt)
<abbr>
Inline: Abbreviation (Abkürzung)
<acronym>
Inline: Akronym - (sprechbare) Abkürzung
<cite>
Inline: Citation (Zitat)
<q>
Inline: Quellenangabe für Zitat (<q cite="URI">)
<code>
Inline: Quellcode (einer Programmiersprache)
<dfn>
Inline: Definition
<em>
Inline: Emphase (besonders betont)
<kbd>
Inline: Keyboard (Text ist eine Tastatureingabe)
<samp>
Inline: Sample (Beispiel)
<strong>
Inline: betont
<tt>
Inline: Teletyper (Schreibmaschine)
<var>
Inline: Variable

Anhang: Formatierende Tags

Die meisten formatierenden Tags sind in der Strict-Variante von HTML 4 verboten. Manche bekommen in HTML 5 eine neue Semantik.

<center>
Block: zentriert
CSS: text-align: center;
<b>
Inline: bold (fett)
CSS: font-weight: bold;
<big>
Inline: groß
CSS: font-size: large;
<font>
Inline: Schriftauszeichnungen
CSS: font
<i>
Inline: italics (kursiv)
CSS: font-style: italic;
<s, strike>
Inline: durchgestrichen
CSS: text-decoration: line-through;
<small>
Inline: klein
CSS: font-size: small;
<sub>
Inline: tiefgestellt
CSS: vertical-align: sub;
<sup>
Inline: super (hochgestellt)
CSS: vertical-align: super;
<u>
Inline: underlined (unterstrichen)
CSS: text-decoration: underline;

Anhang: HTML-Universalattribute und Events

Universalattribute

<xyz class="">
Stylesheet-Klasse
<xyz id="">
Stylesheet-Id(entifier)="">
<xyz style="">
direkte CSS-Formatierungen
<xyz title="">
Titel oder eine kurze Beschreibung (Tooltip)
<xyz dir="">
Schreibrichtung (je nach Landessprache)
<xyz lang="">
Landessprache (nach RFC 1766)

Univ.-attribute und Events

<xyz onclick="">
Script-Code bei Klick
<xyz ondblclick="">
Script-Code bei Doppelklick
<xyz onmousedown="">
Script-Code bei drücken/loslassen der Maustaste
<xyz onmouseup="">
Script-Code bei drücken/loslassen der Maustaste
<xyz onmouseover="">
Script-Code bei überfahren mit dem Mauszeiger
<xyz onmousemove="">
Script-Code bei ziehen mit dem Mauszeiger
<xyz onmouseout="">
Script-Code bei verlassen des Mauszeigers
<xyz onkeypress="">
Script-Code nach drücken einer Taste
<xyz onkeydown="">
Script-Code beim drücken einer Taste
<xyz onkeyup="">
Script-Code nach loslassen einer Taste

Events

<xyz onabort="">
Script-Code bei Abbruch (stop button)
<xyz onblur="">
Script-Code beim Verlassen (z.B. <input>)
<xyz onchange="">
Script-Code bei erfolgter Änderung (z.B. <input>)
<xyz onerror="">
Script-Code im Fehlerfall bei <img>
<xyz onfocus="">
Script-Code beim Aktivieren (z.B. <input>)
<xyz onload="">
Script-Code nach dem Laden einer Datei im <body>
<xyz onreset="">
Script-Code beim Zurücksetzen des Formulars
<xyz onselect="">
Script-Code beim Selektieren von Text (z.B. <input>)
<xyz onsubmit="">
Script-Code beim Absenden des Formulars
<xyz onunload="">
Script-Code beim Verlassen der Datei im <body>

Anhang: HTML-Entities

Alle Entities lassen sich auch &Dezimalwert; schreiben.

Referenz: HTML Zeichenreferenz (http://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz) im selfHTML Wiki.

Entities 0–127 (0–7F)
Z.Dez.Hex.Entity
 0-800-08nicht belegt
 0909Tabulator
 100AZeilenumbruch
 11-310B-1Fnicht belegt
„leer“3220&sp;
!3321&excl;
"3422&quot;
#3523&num;
$3624&dollar;
%3725&percnt;
&3826&amp;
'3927&apos;
(4028&lpar;
)4129&rpar;
*422A&ast;
+432B&plus;
,442C&comma;
-452D&hyphen; &minus;
.462E&period;
/472F&sol;
0-948-5730-39Ziffern
:583A&colon;
;593B&semi;
<603C&lt;
=613D&equals;
>623E&gt;
?633F&quest;
@6440&commat;
A-Z65-9041-5AGroßbuchstaben
[915B&lsqb;
\925C&bsol;
]935D&rsqb;
^945E&circ;
_955F&lowbar; &horbar;
`9660&grave;
a-z97-12261-7AKleinbuchstaben
{1237B&lcub;
|1247C&verbar;
}1257D&rcub;
~1267E&tilde;
 1277Fnicht belegt
Entities 128–191 (80–BF)
Z.Dez.Hex.Entity
12880&euro;
 12981nicht belegt
13082&lsquor;
ƒ13183&fnof;
"13284&ldquor;
13385&hellip; &ldots;
13486&dagger;
13587&Dagger;
ˆ13688&circ;
13789&permil;
Š1388A&Scaron;
1398B&lsaquo;
Œ1408C&OElig;
 1418Dnicht belegt
Ž1428E&Zcaron;
 1438Fnicht belegt
 14490nicht belegt
14591&lsquo; &rsquor;
14692&rsquo;
"14793&ldquo; &rdquor;
14894&rdquo;
14995&bull;
15096&ndash;
15197&mdash;
˜15298&tilde;
15399&trade;
š1549A&scaron;
1559B&rsaquo;
œ1569C&oelig;
 1579Dnicht belegt
ž1589E&zcaron;
Ÿ1599F&Yuml;
 160A0&nbsp;
¡161A1&iexcl;
¢162A2&cent;
£163A3&pound;
¤164A4&curren;
¥165A5&yen;
¦166A6&brvbar; &brkbar;
§167A7&sect;
¨168A8&uml; &die;
©169A9&copy;
ª170AA&ordf;
«171AB&laquo;
¬172AC&not;
­173AD&shy;
®174AE&reg;
¯175AF&macr; &hibar;
°176B0&deg;
±177B1&plusmn;
²178B2&sup2;
³179B3&sup3;
´180B4&acute;
µ181B5&micro;
182B6&para;
·183B7&middot;
¸184B8&cidil;
¹185B9&sup1;
º186BA&ordm;
»187BB&raquo;
¼188BC&frac14;
½189BD&frac12; &half;
¾190BE&frac34;
¿191BF&iquest;
Entities 192–255 (C0–FF)
Z.Dez.Hex.Entity
À192C0&Agrave;
Á193C1&Aacute;
Â194C2&Acirc;
Ã195C3&Atilde;
Ä196C4&Auml;
Å197C5&Aring;
Æ198C6&AElig;
Ç199C7&Ccedil;
È200C8&Egrave;
É201C9&Eacute;
Ê202CA&Ecirc;
Ë203CB&Euml;
Ì204CC&Igrave;
Í205CD&Iacute;
Î206CE&Icirc;
Ï207CF&Iuml;
Ð208D0&ETH;
Ñ209D1&Ntilde;
Ò210D2&Ograve;
Ó211D3&Oacute;
Ô212D4&Ocirc;
Õ213D5&Otilde;
Ö214D6&Ouml;
×215D7&times;
Ø216D8&Oslash;
Ù217D9&Ugrave;
Ú218DA&Uacute;
Û219DB&Ucirc;
Ü220DC&Uuml;
Ý221:DD&Yacute;
Þ222DE&THORN;
ß223DF&szlig;
à224E0&agrave;
á225E1&aacute;
â226E2&acirc;
ã227E3&atilde;
ä228E4&auml;
å229E5&aring;
æ230E6&aelig;
ç231E7&ccedil;
è232E8&egrave;
é233E9&eacute;
ê234EA&ecirc;
ë235EB&euml;
ì236EC&igrave;
í237ED&iacute;
î238EE&icirc;
ï239EF&iuml;
ð240F0&eth;
ñ241F1&ntilde;
ò242F2&ograve;
ó243F3&oacute;
ô244F4&ocirc;
õ245F5&otilde;
ö246F6&ouml;
÷247F7&divide;
ø248F8&oslash;
ù249F9&ugrave;
ú250FA&uacute;
û251FB&ucirc;
ü252FC&uuml;
ý253FD&yacute;
þ254FE&thorn;
ÿ255FF&yuml;

Anhang: xhtml

Unterschiede HTML/XHTML
UnterschiedHTMLXHTML
Schreibweise der TagsAlles erlaubt:
<br>,<Br>,<BR>
nur klein: <br />
Tags ohne Inhalt<br>entweder leeres Tag: <br />
oder mit Endtag: <br></br>)
Endtagweglassen erlaubt:
<ul>
  <li>Text
  <li>Text
</ul>
immer angeben
<ul>
  <li>Text</li>
  <li>Text</li>
</ul>
Attributwert in ""Optional:
<img alt=Grafik>
Immer:
<img alt="Grafik">
boolesche AttributeErlaubt:
<input type="radio" checked>
Name als Wert angeben:
<input type="radio" checked="checked" />

Anhang: HTML 5

Grundgerüst

Editor - vorlage_html5.html
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Seitentitel</title>
  </head>

  <body>
    <p>content</p>
  </body>
</html>

Neue Tags

für DIVs

für Content

für Formulare

Geändert

CSS

header  { background-color: yellow; }
nav     { background-color: orange; }
section { background-color: yellowgreen; }
footer  { background-color: deepskyblue; }

// Für ältere Browser
header, nav, section, footer {display: block;}

Für IE:

<script>
  document.createElement("header");
  document.createElement("nav");
  document.createElement("section");
  document.createElement("footer");
</script>

xhtml5

Dokumente, die den Medientyp „text/html“ besitzen, gelten als HTML-Dokumente. Sie werden mit dem HTML-Parser verarbeitet. Diese Variante wird umgangssprachlich als HTML5 bezeichnet.

Dokumente, die einen XML-Medientyp – z. B. „application/xhtml+xml“ oder „application/xml“ – besitzen, gelten als XML-Dokumente, die von einem XML-Parser verarbeitet werden. Diese Variante wird umgangssprachlich als XHTML5 bezeichnet.

Microdata

...

Anhang: CSS

Unterkapitel

n.v.

Einführung

Hier im Anhang finden sie Fachbegriffe und Referenzen zu CSS.

Anhang: CSS-Syntax

In HTML

<h1 style="eigenschaft:wert;">
Style im HTML-Tag anwenden
<style type="text/css">
Selektor {Eigenschaft: Wert; }
</style>
CSS-Defintionen im <head>
<link rel="stylesheet" media="screen" type="text/css" href="formate.css" />
CSS-Datei im <head> einbinden
media: Ausgabe auf Bildschirm (screen), Drucker (print), Sprache (aural), …
type: Contenttype
href: Pfad/Dateiname

CSS

Allgemeine CSS-Syntax:

Selektor { Eigenschaft1: Wert1; …; EigenschaftN: WertN; }

Referenz: CSS Selektoren (http://wiki.selfhtml.org/wiki/Referenz:CSS/Selektoren) in selfHTML Wiki.

Selektoren

*
Universalselektor (Jedes beliebige Tag)
p
Selektor für ein Tag (hier <p>)
h1,h2
Selektor für Tags (hier <h1> und <h2>)
*#id oder kurz #id
Selektor für id="id"
*.kl oder kurz .kl
Selektor für class="kl"
p.kl
Selektor <p class="kl">
p#id
Selektor <p id="id">

Selektoren für verschachtelte Tags

p a
<a> irgendwo innerhalb <p>
p + a
<a> folgt unmittelbar auf <p>
p > a
<a> genau eine Ebene tiefer als <p>
p * a
<a> mindestens zwei Ebenen tiefer als <p>

Selektor für Tag mit Attribut

* [lang]
Alle Tags mit Attribut lang=""
a [href]
<a href="">
a [href=".."]
<a href="..">
a [href^="http:"]
<a href=""> das mit dem Wert „http:“ anfängt
a [href$=".html"]
<a href=""> das mit dem Wert „.html“ endet
a [href*="wiki"]
<a href=""> das den Wert „wiki“ enthält
p [value~="eins"]
<p value=""> das in einer Menge „eins“ enthält
p [lang|="de"]
<p lang=""> das mit „de-“ anfängt

Pseudo-Elemente

a:link
Normaler Verweis
a:visited
Besuchter Verweis
a:focus
Element das den Fokus hat
a:hover
Element unter der Maus
a:active
Angeklicktes Element
a:before
Etwas vor einem Tag einfügen
a:after
Etwas nach einem Tag einfügen
ul:first-child
Erstes Unterelement
p:first-line
Erste Zeile
p:first-letter
Erster Buchstabe
p:lang(lc)
Sprachattribut

Weitere Syntax

p { font-size:1em !important; }
Stylesheetpriorität ändern
@import url("normal.css") screen;
Weitere CSS-Datei im Stylesheet einbinden
@media screen { … }
Bereich für Ausgabe auf Bildschirm
/* Kommentar */
Kommentar im Stylesheet
// Kommentar bis Zeilenende
Kommentar im Stylesheet

Priorität

  1. Benutzer-Stylesheet mit !important
  2. Autoren-Stylesheet mit !important
  3. Autoren-Stylesheet
  4. Benutzer-Stylesheet
  5. Browser-Stylesheet

Anhang: CSS-Eigenschaften

Textformatierungen (Inline)

font
Schriftart (Stil Variante Gewicht Größe Familie)
font-family
Schriftfamilie (Arial, Times, …)
font-style
Stil wie italic (kursiv), normal und oblique (kursiv)
font-variant
Variante wie small-caps (Kapitälchen) und normal
font-size
Größe (s. Anhang: CSS-Einheiten und Farben)
font-weight
Gewicht wie normal, bold (fett), bolder (fetter), lighter (leichter)
text
Keine Eigenschaft
text-decoration
Dekoration wie none, underline (unterstrichen), overline (überstrichen) und linethrough (durchgestrichen)
text-decoration-line
CSS3: Linientyp
text-decoration-color
CSS3: Farbe
text-decoration-style
CSS3: Stil
text-transform
Transformation wie lowercase (klein), uppercase (groß) und capitalize
text-shadow
CSS3: Schatten (farbe ort)
color
Farbe (s. )
opacity
CSS3: Transparenz
letter-spacing
Zeichenabstand (normal)
word-spacing
Wortabstand (normal)
hyphens
CSS3: Worttrennzeichen

Absatzformatierungen (Block)

text
Keine Eigenschaft
text-indent
Einrückung
text-align
Ausrichtung (left, right, center, justify)
text-align-last
CSS3: Ausrichtung der letzten Zeile
vertical-align
Vertikale Ausrichtung (top, bottom, center, …)
direction
Schreibrichtung (ltr, rtl)
unicode-bidi
CSS3: Umkehr der Schreibrichtung
line-height
Zeilenhöhe (normal)
white-space
Textumbruch (normal,pre,nowrap,pre-line,pre-wrap)

Hintergrundformatierungen (Block)

background
Hintergrund (farbe bild attach repeat pos )
background-color
Farbe
background-image
Bild
background-repeat
Wiederholungs-Effekt (no-)repeat(-x/-y)
background-attachment
Bild fixieren/scrollen (fixed/scroll)
background-position
Postion per Angabe oder Ausrichtung
background-origin
CSS3: Startpunkt auf Hintergrund
background-clip
CSS3: Clipping-Bereich
background-size
CSS3: Größe

Listenformatierungen

list-style
Listendarstellung (Bild Position Typ)
list-style-type
Darstellungstyp (none, … , decimal)
list-style-position
Listeneinrückung (inside, outside)
list-style-image
eigene Bullet-Grafik

Tabelle

border
Keine Eigenschaft
border-collapse
einzelne oder gemeins. Rahmen
border-spacing
Rahmenabstand im Gitternetz
caption-side
Tabellenüberschrift oben/unten (top, bottom)
empty-cells
leere Zellen (nicht) anzeigen (show, hide)
table-layout
Tabelle fixe/variable Breiten (auto, fixed)

Spalten

columns
CSS3: Spalten (allgemein)
column
Keine Eigenschaft
column-count
CSS3: Anzahl der Spalten
column-fill
CSS3: Verteilung des Inhalts auf Spalten
column-gap
CSS3: Spaltenabstand
column-rule
CSS3: Spaltentrennlinie (allgemein)
column-rule-color
CSS3: Farbe der Spaltentrennlinie
column-rule-style
CSS3: Darstellung der Spaltentrennlinie
column-rule-width
CSS3: Stärke der Spaltentrennlinie
column-span
CSS3: Elemente über alle Spalten
column-width
CSS3: Spaltenbreite
break
Keine Eigenschaft
break-after
CSS3: Umbruch hinter einem Block-Element / am Spaltenende
break-before
CSS3: Umbruch vor einem Block-Element / vor Spaltenanfang
break-inside
CSS3: Umbruch im Block-Element (innerhalb von Spalten)

Inhalt (Inline)

content
CSS3: Fügt Inhalt bei :before und :after ein
counter-increment
CSS3: Zähler erhöhen
counter-reset
CSS3: Zähler zurücksetzen
quotes
CSS3: In Anführungszeichen setzen

Benutzerinterface

cursor
Mauszeiger (auto, default, crosshair, …, url())
outline
Inlinerahmen (Farbe Stil Dicke)
outline-width
Dicke (thin, medium, thick)
outline-color
Farbe
outline-style
Typ (none, dotted, dashed, solid, …)
outline-offset
CSS3: Abstand
box-sizing
CSS3 : Berechnungsmodell einer Box
content
CSS3 : Content erzeugen
resize
CSS3 : Größenveränderbarkeit (s. <textarea>)
zomm
CSS3 : Vergrößerungsfaktor

Positionierung (Block)

position
Positionsart (static, absolute, relative, fixed)
top
Position von oben
bottom
Position von unten
left
Position von links
right
Position von rechts
height
Höhe
min-height
Mindesthöhe
max-height
Maximalhöhe
width
Breite
min-width
Mindestbreite
max-width
Maximalbreite
display
Anzeigeart (none, block, inline, list-item,…)
z-index
Überlappung (Zahl für Z-Achse)
visibility
Verstecken (visible, hidden, collapse)
overflow
Überlauf (visible, hidden, scroll, auto)
clip
Anzeigeausschnitt (rect(), auto)
clear
Textumfluss beenden (left, right, both, none)
float
Textumfluss (left, right, none)

Flexbox:

flex-direction
CSS3: Ausrichtung in einer Flexbox
display
CSS3: display: flex; => Flexbox
order
CSS3: Reihenfolge in Flexboxen
align-items
CSS3: Vertikale Ausrichtung aller Elemente in Flexboxen
align-self
CSS3: Vertikale Ausrichtung einzelner Elemente in Flexboxen

Rahmen und Schatten

border
Blockrahmen (Farbe Stil Dicke)
border-top
Blockrahmen oben
border-top-width
Dicke
border-top-color
Farbe
border-top-style
Typ
border-bottom
Blockrahmen unten
border-left
Blockrahmen links
border-right
Blockrahmen rechts
border-width
Dicke (thin, medium, thick)
border-color
Farbe
border-style
Typ (none, dotted, dashed, solid, …)
border-image
CSS3: Grafiken für den Rahmen
border-radius
CSS3: Runde „Ecken“
box-shadow
CSS3: Schatten

Abstand

margin
Außenabstand
margin-top
… oben
margin-bottom
… unten
margin-left
… links
margin-right
… rechts
padding
Innenabstand
padding-top
… oben
padding-bottom
… unten
padding-left
… links
padding-right
… rechts

Animationen und Übergänge

animation
CSS3: Keine Eigenschaft
animation-delay
CSS3: Startverzögerung einer Animation
animation-direction
CSS3: Abspielrichtung einer Animation
animation-duration
CSS3: Dauer einer Animation
animation-iteration-count
CSS3: Wiederholungen einer Animation
animation-play-state
CSS3: Aktivitätsstatus einer Animation
transition
CSS3: Transition (allgemein)
transition-delay
CSS3: Verzögerung einer Transition
transition-duration
CSS3: Dauer / Länge einer Transition
transition-property
CSS3: CSS-Eigenschaft der Transition
transition-timing-function
CSS3: Geschwindigkeits­verhalten einer Transition

Pseudo

:after
Nach einem Element
:before
Vor einem Element
:first-letter
Das erste Zeichen einer Zeile
:first-line
Die erste Zeile in einem Absatz
:active
Hyperlink
:first-child
Das erste "Kind"
:last-child
Das letzte "Kind"
:focus
Fokus
:hover
Hyperlink
:lang
Sprache
:link
Hyperlink
:visited
Besuchter Link

Sprache

azimuth
Raum-Effekt links/rechts/vorne/hinten
elevation
Raum-Effekt oben/unten
pitch
Sprechhöhe
pitch-range
Sprechweise
play-during
Hintergrund-Sound
richness
Stimmgewalt
speech-rate
Sprechgeschwindigkeit
stress
Sprechhast
voice-family
Sprechertyp
volume
Lautstärke
cue
Klang vor/nach einem Element
pause
Pause vor/nach einem Element
pause-after
… nach einem Element
pause-before
… vor einem Element
speak
Aussprache
speak-header
Art der Sprachausgabeunterstützung
speak-numeral
Konvention für Zahlenausgabe
speak-punctuation
Satzzeichen explizit ausgeben

Druck

@page
Seiten-Layout definieren (:left,:right,:first)
size
Seitengröße
marks
Schnitt- und Passermarken
orphans
Alleinstehende Zeilen am Seitenende
widows
Alleinstehende Zeilen am Seitenanfang
page-break
Keine Eigenschaft
page-break-before
Seitenumbruch vor einem Element
page-break-after
nach einem Element
page-break-inside
innerhalb eines Elements

Anhang: CSS-Boxmodell

Referenz: Box-Modell (http://wiki.selfhtml.org/wiki/CSS/Box-Modell) im selfHTML Wiki und in css4you (http://www.css4you.de/wsboxmodell/index.html).

Die Eigenschaften left (links), right (rechts), top (oben) und bottom (unten) sowie alternativ width (Breite) und height (Höhe) legen die Position eines Blockelements fest. Und zwar immer relativ zum übergeordneten Blockelement. Voraussetzung dafür ist die Angabe der Positionsart mit position: absolute;, position: relative; oder position: fixed;.

Normales Box-Modell

Box-Modell
          top          
          margin          
          border          
          pading          
        width    ↤        
left      heightEin beliebiger
Inhalt der Box!
        right
                    
                      
                      
                      
          bottom          

100% des Anzeigefenster oder des übergeordneten Blockelements entsprechen:

Anpassen des Modells

Sie können das Box-Modell mit der Eigenschaft box-sizing anpassen:

content-box
Normales Box-Modell (Standardwert, W3C-Standard)
padding-box
Die Box bleibt auch mit Innenabstand gleich groß, für den eigentlichen Inhalt steht dann weniger Platz zur Verfügung.
100% = left + margin(-left) + border-size + width + border-size + margin(-right) + right
border-box
Eine Box mit Rahmen und Innenabstand bleibt insgesamt genauso hoch und breit, wie über das CSS definiert
100% = left + margin(-left) + width + margin(-right) + right
margin-box
Eine Box mit Außernabstand, Rahmen und Innenabstand bleibt insgesamt genauso hoch und breit, wie über das CSS definiert
100% = left + width + right

Anhang: CSS-Einheiten und Farben

Referenz: CSS Einheiten (http://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Maße_und_Maßeinheiten) in selfHTML Wiki.

Absolute Einheiten

in
1 Inch entspricht 2.54 cm
cm
Zentimeter
mm
Millimeter
pc
1 Pica entspricht 12 Punkt. Typografische Maßeinheit.
pt
1 Punkt entspricht 1/72 Inches. Typografische Maßeinheit.
px
Bildschirmpixel. Abhängig von der Pixeldichte (dpi) des Ausgabegeräts.

Relative Einheiten

%
Prozent der elementeigenen Größe oder der des Elternelements.
em
Größe entspricht Schriftgröße des Elements.
Ausnahme: Bei "font-size" bezogen auf die Schriftgröße des Elternelements.
ex
Höhe des Kleinbuchstaben x (x-Höhe) in diesem Element oder 0.5 em.
Bei "font-size" s. "em"
ch
Breite des Ziffer 0 (Null-Breite) oder durchschnittliche Breite.
rem
Schriftgröße des Wurzelelements (<html>)
vw
Entspricht dem 100. Teil der Breite des Anzeigebereichs (Viewport)
vh
Entspricht dem 100. Teil der Höhe des Anzeigebereichs (Viewport)
vmin
Entspricht dem 100. Teil der Breite/Höhe (welche kleiner ist) des Anzeigebereichs (Viewport)
vmax
Entspricht dem 100. Teil der Breite/Höhe (welche größer ist) des Anzeigebereichs (Viewport)

Farben

Referenz: CSS Farben (http://wiki.selfhtml.org/wiki/Referenz:CSS/Farben) in selfHTML Wiki.

rgb(r,g,b)
CSS-RGB-Farbensyntax (Dezimal für Rot-Grün-Blau)
Werte von 0-255 oder 0% - 100%
#rrggbb
HTML-RGB-Farbensyntax (Hexadezimal für Rot-Grün-Blau)
Werte von 00-FF
#rgb
Farbverdopplung #rgb → #rrggbb (#8F0 → #88FF00)
Werte von 0-F
CSS Einheiten
ColorFarbe#rrggbbFarbe
aquaTürkis#00FFFF            
blackSchwarz#000000            
blueBlau#0000FF            
fuchsiaPurpurrot#FF00FF            
grayGrau#808080            
greenGrün#008000            
limeHellgrün#00FF00            
maroonKastanienbraun#800000            
navyMarineblau#000080            
oliveOliv#808000            
orangeOrange#FFA500            
purpleViolett#800080            
redRot#FF0000            
silverSilber#C0C0C0            
tealAquamarin#008080            
whiteWeiß#FFFFFF            
yellowGelb#FFFF00            

Anhang: JavaScript

Unterkapitel

n.v.

Einführung

Hier im Anhang finden sie Fachbegriffe und Referenzen zu JavaScript.

Anhang: JS-Syntax

JavaScript-Syntax
SyntaxArtBeschreibung
var name = Wert;
var name1,name2;
VariableDeklaration einer Variable (mit Wert)
Variablen innerhalb einer Funktion sind lokal (nur innerhalb des) dieser gültig.
1, 3.1414, "Hallo"Wert (Literal)Ein Wert ist entweder ein direkter Wert, ein Variablenwert oder ein Funktionswert.
Escape: \", \', \\, \/, \n, \r, , \b, \f
nameBezeichnerName für Variablen, Funktionen und Objekte.
Darf nur A-Z, a-z, 0-9, und _ enthalten und muss mit einem Buchstaben beginnen.
/* ... */
// ...
KommentarKommentieren des Quelltextes.
// gilt bis zum Ende der Zeile.
Alert("Hallo Welt");AnweisungEine Anweisung ist ein Befehl den der Computer verarbeitet.
Die Trenner zwi­sche Anweisungen ist das Semikolon (;)
{}Anweisung
Block
Die geschweiften Klammern fassen mehrere Anweisungen zu einem Block zusammen.
Dieser gilt dann als eigene Anweisung.
function name (p) {}FunktionFunktion mit Parametern definieren
fn { return Wert; }FunktionRückgabewert einer Funktiondefinieren
name(Wert);FunktionFunktion mit Wert für Parameter aufrufen
var obj=new klasse();ObjektErzeugt eine neue Instanz einer Klasse
objekt.methode();ObjektMethode (Funktion) eines Obj. aufrufen
objekt.attribut;ObjektAttribut (Variable) eines Obj. benutzen
function klasse(p){
this.attr = p;
this.meth=function}
ObjektKlasse mit Attributen (attr) und Methoden (meth) definieren.
with (obj) { ... }ObjektAuf Methode und Attribute ohne führendes "obj." zugreifen
var1 = Wert;ZuweisungVariablen einen Wert zuweisen.
==, !=, >, => , <, <=OperatorVergleich (gleich ==, ungleich !=)
+, -, /, *, %OperatorBerechnung (Geteilt /, Mal *, Restwert %)
++, --OperatorZuweisung + Berechnung (var = var + 1)
&&, ||, !Operator OperatorLogisch (und &&, oder ||, nicht !)
>>, <<, &, |, ^, ~OperatorBit-Operatoren
+OperatorZeichenketten verknüpfen "Hallo" + "Welt"
?:OperatorEntweder-Oder (s.u.)
(), []OperatorKlammerung
if (Vergleich) A1;
else A2;
BedingungWenn Vergleich wahr ist, dann Anweisung A1 sonst Anweisung A2
(Vergl)?W1:W2;BedingungWenn Vergleich wahr ist, dann Wert W1 sonst Wert W2
switch (Variable){
case "1" : A1;break;
...
default : A; break;}
BedingungVerschiedene Anweisungen Ax je nach Wert der Variable.
Wenn keine zutrifft, dann "default"-Zweig.
while (Vgl.) A;SchleifeSolange der Vergleich wahr ist, führe Anweisung A (meist Block {}) aus
do A while (Vgl.);SchleifeSolange der Vergleich wahr ist, führe Anweisung A (meist Block {})aus
for (Var, Vgl, Zuw) ASchleifeVariable Var einen Startwert zuweisen,
Var mit Endbedingung vergleichen und
Var neuen Wert zu weisen.
Beispiel: for (i=0, i<=9, i++) { ... }
break;SchleifeBricht eine Schleife ab
continue;SchleifeSetzt mit erster Anweisung einer Schleife fort.

Anhang: JS-Funktionen und Objekte

Objektunabhängige Funktionen

Genauere Beschreibung in SelfHTML (http://de.selfhtml.org/javascript/objekte/unabhaengig.htm).

decodeURI()
URI dekodieren
encodeURI()
URI enkodieren
decodeURIComponent()
URI dekodieren (inkl. , / ? : @ & = + $)
encodeURIComponent()
URI enkodieren (inkl. , / ? : @ & = + $)
eval()
Ausdruck interpretieren
escape()
Steuer-/Sonderzeichen escapen (in Hexwerte codieren)
unescape()
Steuer-/Sonderzeichen unescapen (aus Hexwerten codieren)
isFinite()
auf numerischen Wertebereich prüfen
isNaN()
auf numerischen Wert prüfen (Not a Number)
parseFloat()
Zeichenkette in Kommazahl wandeln
parseInt()
Zeichenkette in Ganzzahl wandeln
Number()
Objekt in Zahl wandeln
String()
Objekt in Zeichenkette wandeln

Funktion als Objekt

Funktion sind innerhalb von JS als Objekte benutzbar. So kann eine Funktion, die ein Objekt zurück gibt (Referenz!) direkt mit den Eigenschaften und Methoden des Objekts aufgerufen werden.

Genauere Beschreibung in SelfHTML (http://de.selfhtml.org/javascript/objekte/function.htm).

arguments
Argumentnamen-Array
arity
Anzahl Argumente
caller
Namen der aufrufenden Funktion

Zeichenketten als Objekt

Auch Zeichenketten werden JS-intern als Objekte verwaltet.

Genauere Beschreibung in SelfHTML (http://de.selfhtml.org/javascript/objekte/string.htm).

HTML-Eigenschaften

anchor()
Verweisanker erzeugen
big()
großen Text erzeugen
blink()
blinkenden Text erzeugen
bold()
fetten Text erzeugen
fixed()
Teletyper-Text erzeugen
fontcolor()
Schriftfarbe erzeugen
fontsize()
Schriftgröße erzeugen
italics()
kursiven Text erzeugen
link()
Verweis erzeugen
small()
kleinen Text erzeugen
strike()
durchgestrichenen Text erzeugen
sub()
tiefgestellten Text erzeugen
sup()
hochgestellten Text erzeugen

Zeichenketteneigenschaften

length
Anzahl der Zeichen
charAt()
Zeichen an einer Position ermitteln
charCodeAt()
Unicode-Zeichennummer an einer Position
concat()
Zeichenketten zusammenfügen
fromCharCode()
Unicode-Zeichen erzeugen
indexOf()
Position eines Zeichens ermitteln
lastIndexOf()
letzte Position eines Zeichens ermitteln
match()
Regulären Ausdruck anwenden
replace()
Regulären Ausdruck anwenden und ersetzen
search()
Suchen mit Regulärem Ausdruck
slice()
Teil aus Zeichenkette extrahieren
split()
Zeichenkette aufsplitten
substr()
Teilzeichenkette ab Position ermitteln
substring()
Teilzeichenkette ermitteln
toLowerCase()
alles klein schreiben
toUpperCase()
alles groß schreiben

Array als Objekt

Auch Arrays sind in JS Objekte (erkennbar am new). Entsprechend gibt es einige Methoden auf Arrays:

Genauere Beschreibung in SelfHTML (http://de.selfhtml.org/javascript/objekte/array.htm).

length
Anzahl der Array-Elemente
concat()
Hängt ein Array an ein anderes an und gibt das Ergebnis zurück
join()
Verwandelt ein Array in eine Zeichenkette mit dem übergeben Trennzeichen
pop()/push()
Entfernt vom Array das letzte Element oder fügt dem Array ein Element an letzter Stelle hinzu
reverse()
Kehrt die Elmentreihenfolge im Array um
(un)shift()
Entfernt vom Array das erste Element oder fügt dem Array ein Element an erster Stelle hinzu
slice()
Extrahiert einen Teil aus dem Array, ab einer bestimmten Stelle
splice()
Fügt einen Teil zu dem Array hinzu, ab einer bestimmten Stelle
sort()
Sortiert die Array-Elemente lexikalisch oder benutzerdefiniert

Vordefinierte Objekte von JS

Genauere Beschreibung in SelfHTML (http://de.selfhtml.org/javascript/objekte/index.htm).

Boolean
Wahr/Falsch-Variablen
Date
Datum und Uhrzeit
Math
Mathematische Funktionen
Number
Eigenschaften numerischer Werte
RegExp
reguläre Ausdrücke

Vordefinierte Objekte des Browsers

Genauere Beschreibung in SelfHTML (http://de.selfhtml.org/javascript/objekte/index.htm).

Objekt navigator

navigator
Browser-Informationen
navigator.mimeTypes
MIME-Typ-Informationen
navigator.plugins
installierte Plugins

Objekt screen

screen
Bildschirm-Informationen

Objekt window

window
Anzeigefenster
window.event
Anwenderereignis (wie Tastendruck)
window.frames
Frame-Fenster
window.history
besuchte Seiten
window.location
URIs

Objekt (window.)document

document
Dokument im Anzeigefenster (DOM)
Sonderfall: document.write(); schreibt direkt ins Dokument
document.getElementsByName()
Zugriff auf DOM über Attribut name=""
document.getElementsByClass()
Zugriff auf DOM über Attribut class=""
document.getElementById()
Zugriff auf DOM über Attribut id=""
document.anchors
Verweisanker im Dokument
document.applets
Java-Applets im Dokument
document.forms
Formulare im Dokument
document.(HTML-Tags)
Alle HTML-Elemente des Dokuments
document.images
Grafikreferenzen im Dokument
document.links
Verweise im Dokument
document.node
Alle Knoten des Elementenbaums
document.forms.elements
Formularelemente eines Formulars
document.forms.elements.options
Optionen einer Auswahlliste

Anhang: JS reservierte Wörter

Reservierte Wörter
Reserviertes WortErläuterung
abstractNoch nicht verwendet
booleanNoch nicht verwendet
breakAls Anweisung: Abbruch in Seite Schleifen
byteNoch nicht verwendet
caseFür Seite Fallunterscheidungen
catchFür Seite Fehlerbehandlung mit try..catch
charNoch nicht verwendet
classNoch nicht verwendet
constDient zur Deklaration von Konstanten (ab JS-Version 1.5)
continueAls Anweisung: Fortsetzung in Seite Schleifen
defaultFür Seite Fallunterscheidungen
deleteOperator: Seite Objekte und Objekteigenschaften löschen
doFür Seite Schleifen mit "do-while"
doubleNoch nicht verwendet
elseSonst-Fall in Seite bedingten Anweisungen mit "if"
exportAls Anweisung: Objekte oder Funktionen für fremde Scripts ausführbar machen
extendsNoch nicht verwendet
falseBoolescher Wert: falsch
finalNoch nicht verwendet
finallyFür Seite Fehlerbehandlung mit try..catch
floatNoch nicht verwendet
forFür Seite Schleifen mit "for"
functionFür Seite Funktionen
gotoNoch nicht verwendet
ifFür Seite bedingte Anweisungen mit "if"
implementsNoch nicht verwendet
inFür Seite spezielle Schleifen mit "for"
instanceofPrüft, ob ein Objekt eine Instanz eines Prototyp-Objektes ist (ab JS-Version 1.4)
intNoch nicht verwendet
longNoch nicht verwendet
nativeNoch nicht verwendet
newDient zum Seite Definieren von Objekten
nullSpezieller Null-Wert z.B. für Eigenschaften, die keinen Wert haben, oder als Rückgabewert einer Funktion
packageNoch nicht verwendet
privateNoch nicht verwendet
protectedNoch nicht verwendet
publicNoch nicht verwendet
returnFür Seite Rückgabewerte in Funktionen
shortNoch nicht verwendet
staticNoch nicht verwendet
superNoch nicht verwendet
switchFür Seite Fallunterscheidungen
synchronizedNoch nicht verwendet
thisFür Bezug auf das Seite aktuelle Objekt
throwAls Anweisung: Nutzerdefinierte Ausnahme (ab JS-Version 1.4)
throwsNoch nicht verwendet
transientNoch nicht verwendet
trueBoolescher Wert: wahr
tryFür Seite Fehlerbehandlung mit try..catch
typeofOperator: liefert den Seite Typ eines Elementes
undefinedDer Wert undefiniert. Eine Variable, die ohne eine Zuweisung deklariert wird (var variable;), erhält diesen Wert (JS 1.3)
varFür Seite Variablendefinitionen
voidOperator: Seite unterdrückt Rückgabewerte
whileFür Seite Schleifen mit "while"
withUm Seite mehrere Anweisungen mit einem Objekt durchzuführen

Anhang: JS Escape-Sequenzen

Bestimmte Zeichen werden in Javascript „escaped“, um sie innerhalb von Zeichenketten verwenden zu können. Dazu gehören natürlich ' “ \ /, aber auch nicht sichtbare Zeichen wie das Zeilenende.

Tabelle: Escapezeichen
ZeichenEscape
'\'
"\"
\\\
/\/
Zeilenvorschub
(linefeed)
\n
Rücklauf
(return)
\r
tab\t
Rückschritt
(backspace)
\b
Seitenvorschub
(feed)
\f

Anhang: JS-Bezeichner

Wenn sie in JS einen eigenen Namen (Bezeichner) vergeben (Variablen, Funktionen, …), müssen sie sich an eigene Regeln halten. Namen …

Anmerkung: Umso besser sie den Namen wählen, um so eher können sie auch nach Jahren noch den Verwendungszweck bestimmen.