image1

image1

Inhalt

1      EINLEITUNG

2      HTML-EINFÜHRUNG

2.1           Seitenaufbau

2.2           Befehlsaufbau

2.3           Umlaute und Sonderzeichen

2.4           Kommentare

2.5           Textformatierung

2.5.1       Zeilenumbrüche

2.5.2       Überschriften

2.5.3       Aufzählungen

2.5.4       Schriftgestaltung

2.5.5       Formatierung

2.6           Hyperlinks

2.7           Laufschriften

2.8           Grafiken und Bilder

2.9           Tabellen

2.10          Formulare

2.11          Beispiele für Formulare mit Ausgabe über Javascript

3      EINSTIEG IN DIE JAVASCRIPT PROGRAMMIERUNG

3.1           Javascript Grundlagen

3.1.1       Die if-Anweisung

3.1.2       Schleifen

3.1.3       Funktionen

3.1.4       Namen und Variablennamen

3.1.5       Kommentare und arithmetische Operationen

3.1.6       Zeichenketten

3.1.7       Arrays

3.2           Beispiele für die Anwendung von Javascript

3.3           Grafiken auf dem Hintergrund verschieben

3.4           Würfelspiel mit Einsatz

3.5           Ein einfaches Weltraum-Browsergame

1   Einleitung

In diesem Buch werden Grundlagen in HTML und Javascript vermittelt, mit denen man seine ersten dynamischen Webseiten erstellen kann. Danach werden zwei einfache Browsergames auf Javascript-Basis vorgestellt. Eines dieser Browsergames kann man sich unter der Adresse http://www.galaxieswar.de ansehen. Falls man die Programme zu den Browsergames nicht selbst eingeben möchte, können diese unter der Adresse http://js-Beispiele.galaxieswar.de heruntergeladen werden. Hier findet man auch weitere Beispielprogramme.

HTML dient zur Formatierung einer Webseite. Hiermit kann ein Text formatiert, Bilder, Tabelle oder auch Hyperlinks eingefügt werden. Außerdem kann man mit HTML ein Formular erstellen, für die Eingabe von Daten (z.B. Name, Adresse,…). Für die Eingabe der beschriebenen HTML Kommandos können beliebige HTML Editoren verwenden. Diese kann man auch als Freeware im Internet herunterladen, wobei es auch kommerzielle Editoren wie Frontpage oder Dreamweaver gibt. Wir können aber für die Eingabe der HTML und Javascript Kommandos auch einfach einen Editor, wie z.B. den Windows Editor, verwenden.

HTML liefert zunächst statische Seiten, während mit Javascript die Seiten dynamisch gestaltet werden können. Das Javascript-Programm läuft dann im Browser der Person ab, die sich die Seite ansieht und kann einfach in die HTML-Seite eingebunden werden. Es wird damit keine weitere Software benötigt. Dynamisch heißt hier, dass sich die Seite verändern kann, falls der Benutzer (der Einfachheit halber habe ich hier die männliche Form verwendet, meine aber beide Geschlechter) auf einen Button klickt oder die Maus über ein Bild oder einen Link bewegt.

Im Gegensatz zu Javascript, was beim Anwender abläuft und somit clientseitig ist, gibt es auch Sprachen die serverseitig laufen, wie PHP. PHP kann beispielsweise zum Austausch von Daten zwischen Client und Server verwendet werden.

Bemerkungen:

Auf der Seite www.selfhtml.org kann man sich auch über HTML und Javascript informieren.

Achtung: Ich kann keine Verantwortung für die Inhalte unter angegebene Links übernehmen und distanziere mich auch von Inhalten angegebener Links und Links auf angegebenen Seiten!

2   HTML-Einführung

Die Hypertext Markup Language (HTML) ist ein Dokumentenformat bzw. eine Kennzeichnungssprache (nicht mit einer Programmiersprache zu verwechseln) für Webseiten. HTML wird für die optische Gestaltung einer Internetseite verwendet. Mit ihr wird der Seitenaufbau wie z.B. die Zeilenumbrüche, die Überschriften usw. festgelegt. HTML-Dokumente bestehen zum größten Teil aus Texten und Anweisungen, die zur Textformatierung benötigt werden. Solche Anweisungen werden TAGs genannt, wobei die Groß- und Kleinschreibung in dem hier verwendeten HTML-Programm keine Rolle spielt (im Gegensatz zu Javascript (!)). HTML-Seiten können mit jedem beliebigen Text-Editor bearbeitet werden (die keine speziellen Steuerzeichen einfügt, wie z.B. Word).

In den TAGs können, wie wir später sehen werden, Optionen eingebaut werden mit <TAG Option1 Option2 …> und es können auch sogenannte Eventhandler eingefügt werden. Mit Eventhandlern können bei bestimmten Aktionen des Benutzers (bei einem Mausklick oder falls die Maus über einem Bild bewegt wird) eine Javascript-Funktion oder Anweisung ausgeführt werden.

Im HTML-Quellcode gesetzte Leerzeichen, Einrückungen und Zeilenumbrüche werden vom Webbrowser als solche ignoriert. Mit dem TAG <PRE>…</PRE> jedoch, kann man einen präformatierten Text einfügen. Der Text wird dann später so ausgegeben, wie man ihn eingegeben hat, d.h. mit Zeilenumbrüchen und Leerzeichen.

Um den Text mit Überschriften, verschiedenen Schriftarten, oder auch einfachen Textformatierungen, wie Kursiv- bzw. Fettschrift zu verschönern, gibt es viele verschiedene TAGS. Mit Verschachtelungen von HTML-Befehlen ist es möglich verschiedene Befehle miteinander zu kombinieren, z.B. Fett- und Kursivschrift.

 2.1 Seitenaufbau

Eine gewöhnliche HTML – Datei besteht mindestens aus zwei Komponenten: