WWW Einstieg

 Let the sun shine in ...         hier scheint eine Sonne       sternenwind.ch

Wie entstehen und funktionieren Internetseiten


Inhalt dieser Datei:
  1. Hier gibt es Grundlagen zum Verständnis der Browser -- Server Kommunikation
    Das Verständnis über die genauen Abläufe hilft später beim Erstellen von Code
  2. Verschiedene Computersprachen für verschiedene Projekte
  3. HTML Hilfsmittel und Editorentipps sind hier zusammengestellt
  4. Hier erfolgt der Einstieg in das Erstellen von HTML Seiten. Eine kleine HTML-Übung hilft hierbei hoffentlich
  5. Grundelemente beim Programmieren und Flussdiagramme
  6. Web-Formulare sind wichtige Elemente zur Regelung der Ein- und Ausgabe
  7. Im weiteren Verlauf wird gezeigt, wie JavaScript in die HTML Seiten eingebettet wird,
    und wie ein erster einfacher JavaScript Code aussieht.
  8. Viel Freude am Experimentieren und Gestalten.


Zu 1 :Browser --- Server Kommunikation



Der Benutzer tippt die gewünschte Datei in die URL Zeile. Der Browser sendet diese Anfrage zum Server.
Der Server schickt dem Browser die gewünschte Datei.
Durch einen Link sendet der Browser eine neue Anfrage an den Server, usw...

Zum Anfang



Zu 2 :Verschiedene Computer-Sprachen:

Sprache Möglichkeiten Bemerkungen
Turbo Pascal Sehr geeignete (äletere) Sprache um Programmieren zu lernen. (Einfacher Syntax, klare Fehlermeldungen, Procedural aufgebaut )
Programmiererfahrung ist beim Lernen neuer Sprachen sehr hilfreich : ( aber nicht unbedingt nötig)
Es braucht einen extra TP Compiler. Nicht im Internet anwendbar.
HTML Html ist eine reine Formatierungssprache.
Man kann "lediglich" Texte, Bilder, Musik, Videos, ... darstellen.
d. h. man kann damit nicht funktional programmieren.

JavaScript Man kann mit JavaScript auf die HTML Elemente zugreifen und sie verändern.
Funktionelle Abläufe sind möglich, z.B.:
  • Formulare auswerten, in denen der Benutzer Eingaben machen kann.
  • Algorithmen und Berechnungen aufgrund von Eingaben des Benutzers
  • Auf HTML Elemente (z.B. Graphiken) zugreifen
  • ...
 Es ist z. B. schlecht möglich graphische Programme umzusetzen.
php Serverseitige Programmiersprache, untypisiert. Gut für sicherheitsrelevante Anwendungen, da der Code auf dem Server läuft und nicht auf dem Client. Gut für Datenbankenanbindung mit MySql. Untypisierte Sprache. Vorteil: weniger komplizierter Aufbau. Nachteil: Evtl. unklarere Variablen.
Java Komplette Programmiersprache, die Plattformunabhängig ist. (d.h. es ist egal welches Betriebssystem benutzt wird) Langsame Sprache im Vergleich zu C++ oder zur Maschinensprache (compilierten Sprachen)
viele weitere Programmiersprachen C, C++, C-Sharp, TigerJython Komplette Programmiersprachen je nach Anwendungszweck und Plattform einsetzbar

Zum Anfang






Zu 3 :HILFSMITTEL


Hilfsmittel Beschreibung
Self HTML von Stefan Münz und vielen anderen
und w3Schools
In den HTML Dokumentationen
findet man den Aufbau, die Syntax, die Beispiele, einfach alles.
AUFGABE 3a: Erstelle einen Ordner auf deinem PC mit Namen "Programmieren".
Darin drei Unterordner mit Namen:
"Editoren".
"Doku".
"HTML-Projekte"
Ein sehr gutes Nachschlagewerk ist auch w3 schools

Die aktuellste Dokumentation von SelfHTML https://wiki.selfhtml.org/wiki/Startseite kann man auch als offline Nachschlagewerk in dem eigenen PC Ordner speichern.
(HTML)
Text - Editor		 Im Prinzip kann man jeden Texteditor verwenden.
Es gibt mehr oder weniger "komfortable" Editoren
Man unterscheidet WYSYWYG-Editoren (What You See Is What You Get): Hier kann der Benutzer Menues benutzen, ohne HTML Code zu kennen.
Und andere Editoren : Hier muss der Code zum grossen Teil selbst geschrieben werden

Je nach Zielsetzug ist der Editor zu wählen :

  • Wer also 'nur' ein paar Seiten erstellen will, kann dies schnell und bequem mit WYSYWYG Editoren machen.
  • Wer später funktional programmieren will, sollte lieber von Anfang an den Code lernen und Abläufe verstehen.
    Es braucht dann zwar mehr Wissen um die Syntax, aber man versteht besser, was eigentlich abläuft
    Dieses Verständnis wird dann hilfreich, wenn man anfängt funktionale Teile zu programmieren. (Formulare, Sripts, functions)

Mein Editor Tipp zum Einstieg: Notepad++ (Freeware) von http://notepad-plus-plus.org/
In einer schlanken Version ist notepad++ portable auch vom Memory-Stick ausführbar. Download z.b. bei chip.de
Oder scriptly (Freeware) von www.webocton.com
In einer schmaleren Version ist scriptly auch nur vom Memorystick ausführbar.

AUFGABE 3b: Den Editor notepad++ ausführbar vom Memory-Stick (oder Scriptly) downloaden und in den Editor Ordner speichern.
Lege die drei Ordner (Editoren, Doku, Html-Projekte) auch auf einem Memorystick an.
Optional: Im Ordner "Editoren" kann auch die notepad++ (scriptly) Version gespeichert sein, die ab dem Stick läuft.
Somit könnte man in der Schule vom Stick aus an einem SchulPC programmieren.

Zum Anfang







Zu 4 : HTML Seiten erstellen:


Mit jedem Texteditor kann man HTML Seiten erstellen.
Der Browser zeigt diese Dateien dann an.

Jede HTML Seite ist so aufgebaut :

Aufbau Kommentar
Datei1.htm
Die Dateiendung 'html' oder 'htm' zeigt dem Browser, dass er diese Datei anzeigen soll.
Die sogennannten 'TAGS' enthalten die Informationen wie die Inhalte gezeigt werden.

Jede HTML Datei beginnt mit dem Anfangs-TAG <HTML> und endet mit dem End-TAG </HTML>
Ausnahmen sind sogenannte leere Tags, die nur ein Tag Zeichen haben. Z.B. das Break Tag <br>
für den Zeilenumbruch.
Oder das Horizontal Row Tag: <hr>
Oder das Image-Tag.


Jede HTML Datei enthält den Kopfteil <HEAD> , in dem z.B. die Metaangaben für die Suchmaschinen stehen, und den Körper <BODY>, in dem die eigentlichen Inhalte stehen. Nur der Body wird vom Browser angezeigt.


Beispiele für TAGS Kommentar
Details in der Dokumentation

Absatztag : <p> ... </p>
Zentrieren : <center> ... </center>
Bereich (Division) : <div> ... </div>
Bereich (Division) : <div align="left"> ... </div>
Tabelle : <table> ... </table>
Jeders Element welches in der Datei vorkommt (Text oder Bild oder Datei) wird in der Regel von den sogenannten 'TAGS' umschlossen.
Horizontale Linie: <hr>

BREAK : <br> erzeugt Zeilenumbruch

Bilder einfügen :
<img src="Pfad zur Bilddatei">
Beachte: Es gibt diese Elemente, die nur ein TAG benötigen
Link :
<a href="datei2.htm">weiter zu Datei2.htm</a>		 Diese LINKS machen das Internet aus


Dateiname : beispiel_1.htm
AUFGABE 4a:
Skizziere auf ein Blatt, wie die links dargestellte Seite im Browser angezeigt wird.

Frage 1: Welcher Text ist sichtbar, welcher Text ist unsichtbar ?


Frage 2 : Auf welche Zeichen muss man klicken, wenn man den Link benutzen will ?


AUFGABE 4b: Der folgende Link zeigt diese Beispielseite an.
Klicke dort rechts und "Quellcode ansehen". Erkenne und repetiere noch einmal den HTML Code.



AUFGABE 4c: Formatierungsabmachungen:
Einheitliche Kleinschreibung: Alle Verzeichnisse und Dateinamen und Bildernamen werden klein geschrieben.
Quellcode formatieren: Zusammengehörige TAGs sind bis auf gleiche Ebene eingerückt.
Variablennamen sind aussagekräftig.
Kommetare: An entscheidender Stelle (z.B. Variablendeklaration, Ablauflogik, ...) werden kurze Kommentare gegeben.

AUFGABE 4d: Startdatei erstellen

Erstelle im Verzeichnis HTML-Projekte einen Unterordner mit Namen projekt1. Erstelle nun (mit einem Editor: z.B. Notepad++ ) Deine Startdatei, die index.htm heissen muss. Speichere sie in Deinen Ordner projekt1. Diese Datei wird später die Startdatei Deiner weiteren Projekte.
Gestalten der index.htm Datei:
Es könnte ein Begrüssungstext sein, eine Tabelle mit Daten, oder Bildern, oder einfach ein Text mit Links.

Von dieser index.htm Datei aus sollst Du nun ein erstes Projekt verlinken. Erstelle mit dem Editor notpad++ drei weitere Dateien: Nenne sie datei1.htm, datei2.htm, datei3.htm. Verlinke diese 3 Dateien miteinander. Verlinke nun auch die index.htm Datei mit diesen 3 Dateien.
Gib den drei Dateien ein einheitliches Aussehen, probiere viele Elemente aus, nutze ein Bild, verändere Farben, Schriftgrössen, nutze Tabellen.
Zusatz: Wenn alles funktioniert lies etwas über css style sheets nach und setze diese ein.

Aufgabe 4e:

Nun geht es um einen relativen Link mit der ../ Notation:
Schneide Deine index.htm Datei auf Deinem MemoryStick aus dem projet1 Verzeichnis aus und verschiebe sie einen Ordner höher ins Verzeichnis "HTML-Projekte". Starte die index.htm Datei und teste die Links. Sie werden nicht mehr funktionieren. Passe diese inks nun an, so dass dein Projekt1 wieder funktioniert.
Falls die Links nicht funktionieren, lies noch einmal in der Doku nach, wie relative Links funktionieren.


Erst, wenn Deine Startdatei mit dem Projekt1 funktioniert gehe zu der nächsten Aufgabe "upload auf den Server".


Upload auf den Server

Um Dateien auf einen Server zu laden, braucht man ein Programm, welches diese Übertragung macht. Wir nehmen hierzu das Freeware Programm "Filezilla".
Wenn der Server online ist und diese Dateien korrekt verlinkt sind, dann sind diese Dateien ab jetzt online mit Hilfe eines Browsers (z.B. Firefox, IExplorer, . . . ) öffentlich verfügbar.

AUFGABE 4f: Lade Dir FileZilla portable auf Deinen Memory Stick. Installiere Filezilla portable nun auf dem Stick. Falls du willst kannst du Filezialla (PC Version) auch zu Hause auf dem PC installieren.
Starte FileZilla auf dem Stick. Gehe im FileZilla auf das Menue --> Datei --> Servermanager. Dort kannst Du eine Verbindung zum Server Deiner Schule herstellen. Logindaten erhältst Du von Deiner Dich unterstützenden Lehrperson.

Auf dem Server siehst Du ein Verzeichnis "Jahrgang_xy_FM3". Klicke dort hinein. Du findest dann ein Verzeichnis mit Deinem Namen. Lade mit FileZilla Deine index.htm Datei und das projekt1 in Deinen Ordner hoch. Man nennt dies einen upload, denn vom Client wird auf den Server "hochgeladen".

AUFGABE 4g:
Lege im Ordner "HTML-Projekte" einen Ordner mit Namen JS_projekt_1 auf deinem Stick (bzw. Rechner) an.
In diesem JS_projekt_1 Ordner soll nun eine Datei entstehen, die Java Script kann.
Erstelle eine datei mit Namen "js1-form.htm"
Schreibe in einen Table folgenden Code in die Datei:
<form name="beispiel_1" action="egal.htm" id="beispiel_1"> Frage : Wie oft werden Hände geschüttelt, wenn sich <input type="text" name="n" value="10" size="3" > Personen untereinander begrüssen <br > Antwort : <input type="text" name="a" value="" size="4" > <input type="submit" value="prüfen" onclick="ausgabe(); return false" > <input type="text" name="output" value="stimmt / falsch" readonly="readonly" size="20" > <br > </form>

Formatiere diesen Text übersichtlich mit Einrückungen.
Es sollten nebst dem text 3 Input-Felder und ein Button sichtbar sein.

AUFGABE 4h:

Optional: Erstelle ein Projekt zu einem Thema Deiner Wahl.


Zum Anfang




Zu 5: Grundelemente beim Programmieren



Nachdem wir mit HTML eine Formatierungssprache kennengelernt haben, betrachten wir nun eine erste Sprache, mit der man funktional programmieren kann.
Mit Java Script kann man einzelne Elemente von HTML ansteuern und sie verändern.
Man kann z.B: Text oder Zahlen aus solchen Feldern herauslesen, mit diesen Daten etwas rechnen und ein Ergebnis wieder in ein anderes Formularfeld hineinschreiben. Um solche Abläufe zu programmieren nutzt man die vorgegebenen Grundelemente der Computersprache.


Die Wesentlichen Elemente beim Programmieren sind:
  • Auslesen aus einem inputfield:Bsp: a = document.namexy.value;
  • Einschreiben in ein inputfield: Bsp: document.namexy.value ="hallo welt";
  • Anweisungen, Zuweisungen, Formeln Bsp: z = z+1
  • Bedingungen prüfen Bsp: if z > 7 { ..... }
  • Schleifen zum Wiederholen von Vorgängen Bsp: for(i=1; i<10; i=i+1) { ... }
KISS-Prinzip: Keep it short and simple oder Keep it simple and smart: Die einfachere Lösung ist die bessere
Man kann Datenwerte in einzelnen Variablen oder in arrays oder Datenbanken erfassen.
Man kann Funktionen erstellen, die einen Ablauf in einem Teilcode zusammenfassen. Mit der Übung erweitert sich nach und nach das Befehlsrepertoir.

Ein Flussdiagramm, welches diese Grundelemente anordnet, gibt den grundsätzlichen Ablauf des Programms wieder.

Aufgabe 5a: Bearbeite die Aufgaben zu Flussdiagrammen

Zusatz 5b: Bearbeite (evtl. später) mit Flussdiagrammen und Algorithmen die Aufgaben zu Schwarze Loecher.pdf




Zu 6 :Web-Formulare


Formulare sind wichtige Elemente, mit denen die Ein- und Ausgabe von Daten bewerkstelligt werden kann.
Ein Eingabefeld nimmt Werte entgegen. Ein Ausgabefeld gibt für den Benutzer Daten aus.
Dazwischen werden intern Berechnungen ausgeführt.
Den Ablauf dieser Berechungen stellt man z.B. in einem Flussdiagramm dar.


Hier kommt ein kleines Beispielformular mit 3 Feldern :
Frage : Wie oft werden Hände geschüttelt, wenn sich Personen untereinander begrüssen ?
Antwort :


AUFGABE 6a: Verändere die Anzahl der Personen und rechne erneut aus :)
Kannst du eine Formel für n Personen herleiten? Probiere es.



Der Prinzipielle Aufbau eines Formulars am obigen Beispiel :

Jedes Formular hat einen Namen um es anzusteuern.

Im Formular - Anfangstag wird unter action="..." definiert, wohin das Formular geschickt werden soll. Hier muss der Dateiname der auswertenden Datei stehen.

Es folgen 3 Text-Inputfelder und das Inputfeld vom Typ SUBMIT.
Die Funktion von Submit ist es, das Formular an die im Formularanfangstag definierte Actionadresse abzuschicken.
Sieh Dir die Zeilen ca. 520 - 540 dieser Seite im Quelltext an.
Du siehst dort den Befehl onclick="ausgabe(); return false;" Dies bedeutet: Suche die javascript Funktion ausgabe() und führe sie aus. Komme dann zurück zu dieser Stelle, ohne die Datei anzusteuern, die in der Form Action-Adresse steht.
( Weitere Details in der Dokumentation: siehe action Adresse und onclick)

Zu 7:Einbettung von JavaScript in den HTML Code :

Aufbau Kommentar
Der JavaScript Code kann im Prinzip an jeder Stelle der HTML - Datei eingefügt werden. Es ist üblich, ihn im HEAD zu platziern. Bei längeren Dateien, kann man ihn auch gerade an den Stellen plazieren, wo die zugehörigen Formularelemente sind.


Zum Anfang








Zu 7:Ein JavaScript Code :

Aufbau Kommentar
Zuerst werden die Werte aus dem Formular den Variablen var n = ... und var a = ... zugewiesen.

Dann werden mit diesen Variablen Berechnungen angestellt : ( vgl. for - Schleife )

Das Ergebnis der Berechnungen wird verglichen (if Abfrage )

und letztendlich wird eine Ausgabe ('das stimmt' oder 'das ist falsch') ins Formular zurückgegeben.




AUFGABE 7a:
Erstelle ein weiteres Projekt mit Namen projekt3-pyth.
  • Erstelle mit dem Editor eine Datei Namens 'phythagoras.htm' in der Du ein Formular entwirfst.
    Das Formular hat zwei Eingabefelder für die Katheten a und b
    Ein drittes Feld wird benötigt, in welchem die Länge der Hypothenuse ausgegeben wird.
    Ein Button < input type="button" onclick="rechnung()" value="rechnung" > ruft die JavaScript Funktion rechnung() auf.

    In der JavaScript Funktion rechnung() (die im HEAD der Datei phythagoras.htm eingebettet wird) sollst du die Berechnungen anstellen und die Ausgabe in das Ausgabefeld schreiben.

  • Erstelle die Date pythagoras2.htm, so dass man auch eine Kathete und die Hypothenuse eingeben kann.
    Die zweite Kathete wird berechnet.

  • Erstelle die Date pythagoras3.htm, die prüft, ob ein Dreieck rechtwinklig ist.


Viel Erfolg :)





Zum Anfang



AUFGABE 7b: Erstelle eine HTML Seite mit 2 Formularfeldern. Ein Eingabefeld und ein Ausgabefeld.
Der Benutzer soll eine Zahl eingeben könne, das Programm prüft, ob die Zahl eine Primzahl ist.
Nutze deine Ideen aus den Flussdiagramm - Übungen.

Zusatz 1: Es sollen alle Teiler dieser Zahl ausgegeben werden, falls sie keine Primzahl ist.
Zusatz 2: Es soll eine Zeit gestoppt werden, wie lange der Algorithmus braucht, um zu prüfen, ob eine Zahl prim ist.
Zusatz 3: Könntest Du den genialen "Sieb des Eratostenes" zum Finden von Primzahlen mit JavaScript veranschaulichen?

AUFGABE 7c:
Setze auch einige andere Ideen aus den Flussdiagrammübungen um:
  • Schritt für Schritt
  • Quersumme berechnen
  • weitere eigene Ideen


    • AUFGABE 7d: Erstelle eine Eigene Webseite, in der du alle Deine erstelleten JavaScript-Seiten mit den fnuktionierenden Programmen darstellst.
    Es soll eine Linkleiste geben, die auf die einzelnen Seiten verlinkt.
    Jede Seite soll dem Benutzer eine kurze Erklärung geben, was die Anwendung macht.

    AUFGABE 9:
    Studiere den HTML Canvas Befehl in der Dokumentation w3schools.
    Damit kann man zeichnen.
    < canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"> Hier entsteht eine Zeichenfläche </canvas>
    Erstelle mit Hilfe von JavaScript verschiedene Zeichnungen in diesem Canvas Element. Z.B. erstelle Treppen. Nutze den Befehl ctx.beginnPath();


    AUFGABE 10:
    Spiele das Spiel Mastermind oder Drachenfänger auf www.sternenwind.ch
    Löse eine Logelei.
    Denke Dir ein eigenes Spiel aus, welches Du mit JavaScript umsetzen kannst.

    Zum Anfang