HTML - Tanzenberg

HTML – CSS – Photoshop – einfache JavaScripts
1. Navigation und Administration
Erstellen Sie nach unten angeführtem Beispiel ein einfaches aber farblich möglich
konsistentes Homepage-Projekt mit 3 Menüpunkten und den dazugehörigen Seiten. Um eine
leichtere Administration der Links bei späterer Aktualisierung der Inhalte zu gewährleisten ist
entweder die Frames-Technik oder die Methode des PHP-Include zu verwenden.
Setzen Sie Metaangaben zu Schlüsselwörtern und Bewschreibung der Site für die Startseite
und achten Sie darauf, dass eine Indizierung der Unterseiten verhindert wird.
Seite 1
Seite 2
Seite 3
SEITE 1
Hier kommt die Information zu Seite eins hin
Diskutieren Sie die jeweiligen Vor- und Nachteile der beiden Lösungen.
2. Bilder – Bild und Text, Thumbnails und Web-Galerie, Imagemaps
Erstellen Sie eine Webgalerie nach unten angeführtem Beispiel – Auf einer Thumbnailseite
sollen drei kleine Vorschaubilder mit zugehöriger Textinformation zu sehen sein, nach deren
Anklicken eine größere Variante des jeweiligen Bildes in einem eigenen Browserfenster
gestartet werden soll. Das Fenster sollte außer dem Bild keine Menüpunkte oder Smbole
zeigen und mittels Javascript auch so positioniert werden, dass es bei jeder Auflösung
horizontal und vertikal genau in der Mitte des Bildschirms angezeigt wird.
WEB-GALERIE
Hierhin kommt die Information zu Thumb
Nummer 1.
3. Erstellen Sie ein HTML-Formular nach unten angeführtem Beispiel und
setzen Sie die angeführten Layout- und Designinstruktionen mittels CSS
um.
Hintergrundfarbe: #996633
Hintergrundbild, nur horizontal gekachelt: back.png
Schriftart: Verdana
Überschriften absolut positioniert und versetzt übereinander geschachtelt
Schriftgröße für Überschriften 30px
Formularfelder: Hintergrundfarbe schwarz, Textfarbe #996633, Schriftgröße 16px
Formularfelder und Beschriftung innerhalb einer Tabelle, vom Layout her ansprechend
aneinander ausgerichtet
Bildlaufleisten im Formular farblich an die Hintergrundfarbe angepasst
4. Erstellen Sie eine Seite nach unten angeführtem Beispiel und realisieren Sie
eine zweite Option für Sehbehinderte, indem Sie über Anwahl eines Links
das Erscheinungsbild der Seite vom Kontrast und der Lesbarkeit her für
diese Zielgruppe optimieren.
Die optimierte Version darf keine zweite HTML-Seite sein, sondern unter Verwendung des
DOM und JavaScript NUR dieselbe Seite durch Ausführung einer geeigneten JavascriptFunktion verändern.
Die optimierte Version sollte folgende Features haben:



Hintergrundfarbe: schwarz
Überschrift: Hintergrundfarbe weiß, Schriftart Verdana, Schriftfarbe schwarz,
Schriftgröße 40px, Schriftgewicht fett.
Absatz: Ausrichtung linksbündig, Schriftart Verdana, Schriftfarbe #FFFF33,
Schriftgröße 18px
5. Formularerstellung und Forumlarcheck
Erstellen Sie ein HTML-Formular nach unten angeführten Anweisungen und überprüfen Sie
das korrekte Ausfüllen des Formulars vor Datenversand mittels JavaScript.
Das Formular soll eine Online-Anfrage an eine Firma darstellen. Es sind insgesamt 3
Textfelder (Name, Adresse, Email) und ein mehrzeiliges Textfeld für eine Anfrage zu
realisieren. Die JavaScript-Überprüfung sollte eine Fehlermeldung ausgeben, wenn ein
Textfeld leer gelassen wird bzw. wenn keine korrekte Email-Adresse ( inklusive @-Zeichen)
eingeben wird.
Wird das gesamte Formular korrekt ausgefüllt soll der Datenversand mittels Email an die
Adresse [email protected] erfolgen. Stellen Sie sicher, dass unerwünschte
Sonderzeichen in der resultierenden Email entfernt werden.
6. Formularerstellung und Datenversand mittels serverseitiger
Programmierung
Erstellen Sie ein HTML-Formular nach unten angeführten Anweisungen und realisieren Sie
die Übermittlung der eingegebenen Daten mittels PHP.
In einem Formular sind drei Eingabefelder für den Namen, die Email-Adresse und die
Anfrage eines Besuchers zu realisieren. Die eingegebenen Daten sind an ein PHP-Script zu
senden, das den Versand der Daten an "[email protected]" mit dem Betreff
"Matura" so durchführen soll, dass folgendes Email generiert wird:
Name: eingegebener Name
Email: eigegebene Email
Anfrage: eingegebene Anfrage
Stellen sie auch sicher, dass die ankommende Email den übermittelten Namen und die
Email-Adresse als From- und Reply-To-Einträge aufweist.
7. JavaScript – Datumsausgabe und Laufschrift
Erstellen Sie eine HTML-Seite, auf welcher mittels JavaScript das aktuelle Datum
ausgegeben und eine Laufschrift in einem mittels CSS an das Design der Seite angepassten
Textfeld realisiert wird. Die Laufschrift sollte nach vollständigem Durchlauf mit einer
zeitlichen Verzögerung von 2 Sekunden erneut starten.
8. JavaScript – Schleifen und Verzweigungen
Erstellen Sie eine HTML-Seite, auf welcher mittels Javascript ein Zahlenraten-Spiel realisiert
sein soll. Bedingungen gelten für das Spiel:





Zahleneingabe von 0 bis 100
Überprüfung der Eingabe auf eventuellen Lehrstring und Zahl
Ausgabe des Hinweises "Geratene Zahl zu groß" oder "Geratene Zahl zu klein" mit
Zählung der bereits begangenen Fehler
Abfrage, ob ein neues Spiel gestartet werden soll
Möglichkeit des Abbruchs
9. Frameset und Drop-Down-Menü
Erstellen Sie ein einfaches Frameset mit unten angeführtem Design und realisieren Sie ein
Drow-Down-Feld mittels Javascript, das das Laden von zumindest 2 Seiten in den unteren
Frame durchführt. Es ist dabei darauf zu achten, dass der erste Menüpunkt des SelectFeldes eine Überschrift darstellen soll und die Anwahl dieses Punktes oder der Trennlinie
keine Aktion starten soll.
10. HTML-Forumular und PHP-MySQL-Passwortabfrage
Realisieren Sie eine Login-Seite, auf welcher ein Besucher ein Passwort eingeben muss.
Das eingegebene Passwort wird an ein PHP-Script geschickt, welches das eingegebene
Passwort mit dem Passwort aus einer Datenbanktabelle vergleicht. Stimmen die Passwörter
überein, soll der User die Meldung "Passwort korrekt – Willkommen" erhalten, gibt es keine
Übereinstimmung, soll die Meldung "Passwort inkorrekt – versuchen Sie es noch einmal"
ausgegeben werden.
11. Erstellen Sie eine einfache PHP-Seite, auf welcher ein Besucherzähler zu
realisieren ist.
Der Besucherstand ist aus einer Datenbanktabelle, welche vorher zu erstellen ist,
auszulesen, der Wert um 1 zu erhöhen, auf der Seite als "Visits: ..." auszugeben und der
neue Zählerstand in die Tabelle zurückzuschreiben.
12. Erstellen Sie eine einfache PHP-Seite, auf welcher ein Besucherzähler zu
realisieren ist.
Der Besucherstand ist aus einer Textdatei, welche vorher zu erstellen ist, auszulesen, der
Wert um 1 zu erhöhen, auf der Seite als "Visits: ..." auszugeben und der neue Zählerstand in
die Textdatei zurückzuschreiben.
13. Einfügen und Auslesen von Datensätzen
Erstellen Sie ein HTML-Formular, in welchem ein Besucher seinen Namen und einen
Kommentar eingeben kann. Die eingefüllten Daten sind an ein PHP-Scriptzu senden,
welches die Daten als neuen Datensatz in eine zu erstellende Datenbanktabelle einfügt.
Anschließend werden alle Datensätze, absteigend sortiert, in unten angeführtem Design
ausgegeben:
Name
Eingegebener Kommentar .....
14. PHP – Sessions: Variablenübergabe
Erstellen Sie ein HTML-Formular, auf welchem ein Besucher über ein Textfeld die
Stückanzahl einer Produktbestellung eingeben kann. Der Wert wird an ein PHP-Script
geschickt, in welchem eine Session gestartet und der übermittelte Wert als Variable in die
Session integriert wird. Der Wert wird auf der Seite wie folgt ausgegeben (Bestellte
Stückanzahl: eingegebener Wert). Über einen WEITER-Link wird dieser Wert mittels
Sessionvariable an ein zweites Script geschickt, welches den Preis für die Bestellung
errechnet. Pro Stück wird ein Preis von € 20 verrechnet. Abschließend soll dann auf der
Seite folgende Anzeige erscheinen:
Bestellte Stück: eingegebener Wert
Preis: eingegebener Wert a €20 = errechneter Preis
15. Bild – Upload
Erstellen Sie ein HTML-Formular und ein PHP-Script, über welches ein Besucher ein Bild
hochladen kann. Das Skript soll zuerst überprüfen, ob die ausgewählte Datei eine Bilddatei
ist. Sollte das der Fall sein, wird das Bild auf den Server hochgeladen, in ein festzulegendes
Verzeichnis kopiert und wie folgt angezeigt:
Hochgeladenes Bild:
16. FLASH – TWEENING
Erstellen Sie eine einfache Flash-Slideshow mit drei Bildern. Die Slideshow soll folgenden
Features aufweisen:



Bilder sollen als kleine Vorschauthumbs sichtbar sein. Bei Anklicken eines solchen
Thumbs soll eine Vergrößerung in einen Zielcontainer geladen werden. Die
vergrößerte Version soll aber kein einfaches Bild sondern ein Movieclip sein, der ein
Tweening aufweist.
Die Überschrift "SLIDESHOW" soll während des gesamten Movies von
"SLIDESHOW" in "MATURA 2005" und wieder zurück formgetweent werden.
zwischen Zielcontainer und Thumbs soll ein kleines Quadrat einen Bewegungstween
entlang eines Pfades durchführen, sodass der Anzeigebereich der Vergrößerung
symbolisch von den Vorschaubildern abgegrenzt wird.
17. FLASH – Einfache Movie-Steuerung
Erstellen Sie einen Flash-Film, in welchem eine einfache Sound- bzw. Videosteuerung
realisiert werden soll.
Binden Sie dazu die Datei "sound.wav" oder "video.avi" in Ihr Projekt ein und realisieren Sie
über drei Buttons die Optionen "Stop", "Play" und "Rewind" mittels ActionScript. Zudem sollte
in einem Tweening (ein sich füllender Balken) erkennbar sein, wieviel des Sounds/Videos
bereits abgespielt wurde.
Veröffentlichen Sie den Film als Flash und HTML.
18. FLASH – Dynamisches Textfeld und Scroll-Buttons
Erstellen Sie ein leeres, Textfeld. Realisieren Sie anschließend eine Textdatei, deren Inhalt
nach Anklicken eines Buttons dynamisch in das Textfeld geladen werden kann. Die Textdatei
soll mehr Text beinhalten als im Textfeld angezeigt werden kann. Damit der gesamte Text
einsehbar ist, sind zwei Buttons zu realisieren, die den Text nach unten und oben scrollen
lassen.
19. FLASH – Preloader
Realisieren Sie einen Preloader für das Laden eines SWFs in einen Zielcontainer. Der
Preloader soll folgendes anzeigen:
xxx Kb von insgesamt yyy Kb geladen
Erst wenn die Datei vollständig vorausgeladen ist, soll sie im Zielcontainer abgespielt
werden.
20. Autorensystem – Mediator
Erstellen Sie ein EXE-Projekt mit einer Bildergalerie. Inkludieren Sie 3 Vorschaubilder,
deren Anklicken zur Einblendung einer Vergrößerung des jeweiligen Bildes führt. Gleichzeitig
muss sichergestellt werden, dass ein eventuell angezeigtes Bild vorher ausgeblendet wird.
Sowohl das Ausblenden als auch das Einblenden soll mit unterschiedlichen Effekten
erfolgen. Auf die Vorschaubilder sollen unterschiedliche Alphapfade angewendet werden,
um ihnen ein unterschiedliches Design zu geben.
Weiters soll während des Projektes ein Sound abgespielt werden, der über Buttonklick auch
gestoppt werden kann. Das Projekt soll auch noch das Abspielen eines Videos über einen
Button inkludieren.