Jobst-Hartmut Lüddecke,
Skripte zu HTML, CSS und Javascript

Allgemeiner Teil

Die Skripte in diesem Teil liegen als pdf-Dokumente vor und man benötigt als Applikation oder Plug-in einen Acrobat-Reader der Fa. Adobe

Die Welt der Codes

Etwas über Informationen, deren Transport und Struktur. Vom Dress-Code bis zur Real-Zahl, mit einem kleinen Schwerpunkt beim ASCII Zeichensatz.

HTML und CSS

Die Skripte in diesem Teil liegen als pdf-Dokumente vor und man benötigt als Applikation oder Plug-in einen Acrobat-Reader der Fa. Adobe

Hypertext Markup Language und Cascading Style Sheets. Teil 1

Kurzer, pragmatischer Einstieg in HTML und CSS. Thema sind die Klammerstruktur der Tags, sowie Kopf (head) und Rumpf (body). Weiter geht es zu Überschriften und Textblöcken. Die Sonderzeichen als Steuerzeichen werden kurz eingeführt. Weiter werden die bisher verwendeten Tags in CSS grundlegend definiert.

Listen

Unsorted List, Ordered List, Definition List erst einfach, dann in mehreren Tiefen der Schachtelung, sowohl in HTML, als auch deren Definition im CSS. Dann wird das CSS für bereits eingeführte Tags noch etwas erweitert.

CSS-Klassen am Beispiel von List-Definitionen

Es werden verschiedene CSS Defintionen für den Tag ul vorgestellt und um die Definition für Klassen erweitert. Weiterhin werden kleine Bilder als Aufzählungszeichen vorgestellt.

Adressierung, Ankerpunkte und einfache Navigation

In dieser Lektion geht es um die Adressierung. Diese ist relativ und absolut möglich und sieht unter Windows etwas anders aus, als unter Unix. Dann kommen wir zur Adressierung in html. Diese orientiert sie an der Unix-Syntax und hat noch einige Erweiterungen. Am Ende soll in einer html-Seite sicher ein relativer, als auch ein absoluter Ankerpunkt ( link) gesetzt werden können.

Bilder in HTML-Seiten

In dieser Lektion geht es um das Einbinden von Bildern in html-Seiten. Diese Bilder können -- wie Anker-Punkte -- absolut und relativ adressiert werden. Ferner können diese Bilder noch absolut und relativ skaliert werden. Zum Abschluss kommt noch Fließtext hinzu, den man links oder rechts um das Bild fließen lassen kann. Als Ergänzung zur Lektion über die Anker-Punkte kommen noch mehrere Definitionen im Cascading Style Sheet für die unterschiedlichen Zustände der Ankerpunkte (Links) hinzu.

Tabellen in HTML-Seiten

Tabellen sind ein gern genutztes Element der Gestaltung. Meines Erachtens oft zu viel genutzt und Listen geraten viel zu sehr in Vergessenheit. Für einige Generatoren, wie Frontpage ist es fast die einzige Ausdrucksform. Manchmal ist eine Tabelle aber wirklich das geeignete Mittel und so habe ich eine Tiefenschärfetabelle eines Camera-Objektives als behandeltes Beispiel genommen.

Meta-Kommandos in HTML-Seiten

Jedes verwaltete Dokument muss -- um wiedergefunden zu werden -- nach bestimmten Kriterien eingeordnet werden. Damit geht es einer Web-Seite im Internet nicht anders als einem Buch in einer Bibliothek. Diese Einordnung geschieht in beiden Fällen mit Hilfe einer Klassifikation. Wird eine Web-Seite nicht klassifiziert, werten Suchmaschinen in der Regel nur die ersten 100 Zeichen der Seite aus. Kommt die relevante Information in der Seite erst nach diesen 100 Zeichen, dann findet sie in den Suchmaschinen keine Berücksichtigung mehr. Um dies nun etwas professioneller zu machen gibt es zweit Arten der Klassifikation. Dies sind die in html definierten Meta-Kommandos mit festen Schlüsselbegriffen als Standard und der Dublin Core. Welche dieser Arten nun von welcher Suchmaschine wie ausgewertet werden, ist nicht so ganz klar und so liegt man auf der sicheren Seite einfach beide sinnvoll zu verwenden.

Frames in HTML-Seiten

Die Technik der Frames ist eine sehr zweischneidige Sache, denn sie hat ihre Vorteile, aber auch entscheidende Nachteile. Diese gilt es gegeneinander abzuwägen. Als diese Technik aufkam, sah man eine Zeit lang nur noch Frames (grauenvoll!!!). Mit der Zeit hat sich diese Modeerscheinung wieder gelegt und es gibt durchaus Anwendungen, wo diese Technik sehr viel Sinn machen kann. Gerade wo viele eng zusammengehörende Informationen präsentiert werden sollen, kann eine klickbare Gliederung sehr ergonomisch und hilfreich sein. Dabei kann man dann auch auf eine Indexierung jeder einzelnen Seite durch Suchmaschinen verzichten. Es reicht wenn der ganze Informationsblock durch Suchmaschinen gefunden wird. In dieser Lektion werden Ihnen wesentliche Teile so einer Präsentation serviert und ich denke Ihr Kenntnisstand sollte jetzt soweit sein, dass Sie die wesentlichen Punkte mit ein paar Hinweisen erkennen können.

Frames 2

In der letzten Lektion haben wir ein einfaches Frame-Layout mit 2 Spalten behandelt. Natürlich kann man dies noch beliebig komplex gestalten. Um dies beliebig mischen zu können, kann man innerhalb von framesets anstelle von frames weitere framesets mit eigenen frames definieren.

Nachtrag zu Frames: In HTML5 werden sie nicht mehr benötigt und die Seitenaufteilung -- wie auf dieser Seite -- lässt sich viel besser, klarer und einfacher mit html und css erreichen.

Formulare und Javascript

Die Skripte in diesem Teil liegen überwiegend als pdf-Dokumente vor. Reste als als Postscript-Dokumente, dafür benötigt man als Applikation einen Postscript-Reader wie z.B. Ghostscript mit Ghostview.

Web-Baukasten

Exemplarische Positionierung weiterer Web-Bausteine, wie Server Side Includes (SSI), Common Gateway Interface (CGI), Java, PHP und Javascript mit einer kurzen Erläuterung bezogen auf einen HTTP-Server und einen HTML-Browser. Ergänzt wird diese Lektion durch Erklärungen, was sind MIME-Types, Applikationen und Plug-ins.

Input - Output in Javascript

Diese Lektion bringt einen schnellen Einstieg in die Programmierung mit Javascript. Die einzelnen Teile sind auf die wesentlichsten Bestandteile bewusst beschränkt um gleich ein kleines Erfolgserlebnis zu ermöglichen. Es gibt also ein kleines hello world Skript, mit einem Kochrezept. Dann einen kleinen Exkurs in Sachen Variablen und Operatoren und schliesslich ein paar Alert- und Prompt-Boxen als einfache Möglichkeit der Ein- und Ausgabe.

Schleifen in Javascript

In dieser Lektion geht es um Schleifen (engl. loop). Diese Schleifen sind in jeder Programmiersprache das beste Werkzeug für Wiederholungen. Diese Wiederholungen finden entweder für eine bestimmte Anzahl von Durchläufen statt, oder solange eine Bedingung erfüllt ist. Dabei gibt es noch die Variationen, dass die Bedingung vor oder nach dem Schleifendurchlauf geprüft wird.

Die Entscheidung, oder die Geschichte von if und switch

Nach den Schleifen als Grundstruktur für Wiederholungen, kommt nun in die Grundstruktur der Fallunterscheidung. Ohne diese Grundstrukturen kann man keine sinnvollen Programme schreiben und sie müssen unbedingt vollständig verstanden sein und angewandt werden können. Hier bitte keinen Mut zur Lücke, sondern ggf. unbedingt nacharbeiten! Zur Beruhigung der Nerven gibt es noch mögliche Lösungen der Schleifen-Aufgaben. Dabei führen aber viele Wege nach Rom und es gibt nicht die einzig richtige Lösung, sondern es geht auch immer etwas anders.

Arrays

Die Ansprüche steigen, die Seitenzahlen steigen und die Veranstaltung wird immer weniger bärig (Börsen-Deutsch, bedeutet soviel, wie der Bär,, der auf der faulen Haut liegt.), dafür wird es immer mehr bullisch (Das Gegenteil von bärig, nach dem Bullen der durchgeht bis zur Stampede. Damit ist der Bulle auch ein Glückssymbol an der Börse, denn nur wenn sich etwas bewegt wird auch Geld verdient). Im übertragenen Sinne, sollen Sie sich bewegen um möglichst viele, später nutzbringende Fertigkeiten zu erwerben. Sie sollen etwas lernen, die Schleifen und die Fallunterscheidungen gelten jetzt als kapiert und nun kommen wir zu komplexeren Variablen -- arrays -- und machen den Einstieg in die formale Prüfung von Eingaben. Dies wird uns in Zukunft immer intensiver beschäftigen und in eine Prüfung eines Formulars münden. Parallel dazu gibt es Hausaufgaben als Sparringspartner, die relevante Teilaufgaben illustrieren.

Input - Output in Javascript 2 und die ersten Formulare

In dieser Lektion verdichten sich noch weiter die bisher gelernten Datentypen und Grundstrukturen. Wer immer noch nicht Schleifen und Fallunterscheidungen auf der Mandoline spielen kann, hat entweder einen sehr starken Bedarf an Nach- und Aufarbeitung, oder sollte sich gut überlegen, ob er wirklich die Klausur mitschreiben möchte! Auch die verschiedenen Arten von Variablen und Arrays müssen jetzt intus sein, sonst klappt es nicht mit den Formularen. Der Schwerpunkt dieser Lektion wird die Besprechung eines einfachen Formulars mit einigen Angaben einer Kreditkarte sein. Diese Angaben sind nicht vollständig, aber charakteristisch. Auf die Idee bin ich gekommen, weil ich bei vielen Internet-Shops nicht mit meiner Amex-Karte bezahlen konnte, weil der Programmierer offensichtlich nicht nachgedacht hat und unterschiedliche Arten von Kartennummern nicht in seinem Formular berücksichtigt hat. Weiterhin steckt beim Feld für den Kontoinhaber eine Möglichkeit drin, auf zulässige Zeichen in diesem Feld zu prüfen. Nicht mit drin sind die Prüfsummen und das Ablaufdatum der Karte. Dies können wir später noch mit weiteren Typen von Eingabefeldern ausbauen.

Formulare 2

In dieser Lektion wird das Beispiel-Formular der Kreditkarten-Eingabe aus der letzten Lektion um ein Ablauf-Datum der Kredit-Karte erweitert. Dieses Datum wird über 2 select Felder als Pull-Down Menue abgefragt und als 2. Schmankerl mit dem System-Datum verglichen um zu entscheiden, ob die Karte noch gültig, oder bereits abgelaufen ist.

Formulare 3

Diese Lektion bringt nicht viel neues -- das Instrumentarium haben Sie in den letzten beiden Lektionen gelernt --, bietet dafür aber einiges an Übung. Setzen Sie sich damit auseinander, wie genau man das jeweilige Eingabefeld prüfen kann und setzen Sie dies so weit wie möglich um.

Formulare 4

Diese Lektion erweitert das Formular für eine Adresse aus der letzten Lektion um ein select, einen radio-button und um eine check-box.

Formulare 5

Hier wird eine einfache, mögliche Lösung für die Aufgaben der letzten beiden Lektion präsentiert. Bei dieser Lösungsmöglichkeit wurde bewusst auf Tricks und reguläre Ausdrücke verzichtet und nur Dinge verwendet, die in den vorangegangenen Skripten bereits vorgestellt und besprochen wurden.