Startseite | HTML-Unterlagen

Sehr geehrte Besucher!
Liebe Kolleginnen und Kollegen!

Auf dieser Seite bzw. in diesem Abschnitt können Sie Übungsdateien zum Thema HTML downloaden.
Die Lösungen sind nach bestem Wissen und Gewissen erstellt worden, erheben jedoch nicht den Anspruch, perfekt zu sein – besser geht es immer. Die Frage ist nur, ob die perfekte Lösung auch die verständlichste Lösung darstellt.

HTML | Beispiele

Erzeugen Sie ein HTML-Dokument, das eine Liste beinhaltet, wo (beliebige) Fragen und Antworten in einer geeigneten Form dargestellt werden. Der Inhalt und die Anzahl an Fragen und Antworten bleibt Ihnen überlassen.

>>Download des Beispiels

Erstellen Sie folgende Liste:
  • Home
  • Über uns
  • Dienstleistungen
    • Web
      • CMS
      • Usability
      • Animation
    • Print
  • Referenzen
    • Web
      • Statisch
      • Dynamisch
    • Print
      • Drucksorten
      • Kampagnen
    • Kontakt
    • Impressum
>>Download des Beispiels
Erstellen Sie folgende Liste:

>>Download des Beispiels

Erstellen Sie eine Tabelle aus 6 Zeilen und 4 Zellen pro Zeile und verbinden Sie die Zellen wie unten dargestellt:

>>Download des Beispiels

Erstellen Sie eine Tabelle aus 6 Zeilen und 6 Zellen pro Zeile und verbinden Sie die Zellen wie unten dargestellt:

>>Download des Beispiels

Erstellen Sie ein Tabelle mit drei Spalten und zwei Zeilen mit folgendem Inhalt:

>>Download des Beispiels

Erstellen Sie ein Dokument, in welchem sich fünf Bilder nebeneinander in der Größe 200x200 Px befinden. Geben Sie den Bildern einen entsprechenden alternativen Text.

>>Download des Beispiels

Erstellen Sie ein Dokument, in welchem sich fünf Bilder nebeneinander in der Größe 200x200 Px befinden. Geben Sie den Bildern einen entsprechenden alternativen Text sowie eine passende Bildunterschrift.

>>Download des Beispiels

Erstellen Sie ein Dokument, in welchem vier Videos dargestellt werden. Das erste der vier Videos soll keine Abspielkonsole erhalten (die restlichen drei schon), das dritte Video soll automatisch gestartet werden.

>>Download des Beispiels

Erstellen Sie ein Dokument, in welchem drei Audio-Dateien eingebettet wird, wobei die zweite Audio-Datei keine Abspielkonsole erhalten soll.

>>Download des Beispiels
Erstellen Sie ein Registrierungsformular mit folgenden Informationen: Emailadresse (Pflicht) Passwort (Pflicht) Passwort wiederholen (Pflicht) Persönliche Daten (freiwillig): Vorname Nachname Geburtsdatum Gliedern Sie (ohne CSS) das Formular derart, dass es für den User übersichtlich und klar erkennbar ist.

>>Download des Beispiels
Erstellen Sie ein Formular, in welchem der User Informationsmaterial zu einer geplanten Reise anfordern kann. Folgende Daten sollen durch den User eingegeben werden:
  • Vor- und Nachname
  • Telefonnummer
  • Emailadresse
  • gewünschte Destination (Mehrfachauswahl möglich):
    • Asien
    • Europa
    • Amerika
    • Afrika
    • Australien
  • gewünschter Zeitraum (nur eine Auswahl möglich >> Radiobuttons):
    • innerhalb der nächsten drei Monate
    • noch in diesem Jahr
    • erst im nächsten Jahr
  • Nachricht an das Reisebüro (mehrzeilig)
  • Möglichkeit des Newsletter-Abos (>> Checkbox)
Gliedern Sie das Formular entsprechend Ihrer Vorstellung und einer gewissen Sinnhaftigkeit. Achten Sie auf korrekte Semantik und eine entsprechende Beschriftung der Formularelemente.

>>Download des Beispiels
Schreiben Sie Ihren Lebenslauf in Form einer HTML-Tabelle (Schule, Ausbildung, Praxis), und zwar die aktuellsten Daten zuerst.

>>Download des Beispiels
Erstellen Sie ein HTML-Dokument mit folgendem Inhalt: Ihr Name in der Überschrift 1. Eine Beschreibung zu Ihrer Person. Eine Liste an Hobbies (Liste sollte Haupt- und Unterlisten beinhalten); darüber sollte sich in der Überschrift 2 der Text"Hobbies" befinden. Als weitere Überschrift 2 ("Bücher") soll eine Liste Ihrer Lieblingsbücher kommen. Darunter ein Absatz, der Ihr Lieblingsbuch etwas genauer beschreibt.

>>Download des Beispiels

CSS-Unterlagen

Unterlagen für CSS

In diesem Abschnitt können Sie Übungsdateien zum Thema CSS downloaden.
Die Lösungen sind nach bestem Wissen und Gewissen erstellt worden, erheben jedoch nicht den Anspruch, perfekt zu sein – besser geht es immer. Die Frage ist nur, ob die perfekte Lösung auch die verständlichste Lösung darstellt.

CSS | Beispiele und Lösungen

Weisen Sie dem eine Höhe von 100 % zu und bauen Sie danach vier Container mit der Höhe von jeweils 25 % und einem Rahmen der Stärke 1 Pixel (Farbe und Typ nach Ihrem Geschmack) zu. Beachten Sie, dass im Browser keine Scrollleiste sichtbar sein soll. Färben Sie die Container zur besseren Sichtbarkeit in unterschiedlichen Farben ein. Tipp: html, body { height:100%; }   Erweiterung: weisen Sie allen Containern bis auf den untersten Container einen Untenabstand von 5px zu. Die Container sollen aber immer noch 100% der Fläche einnehmen. Passen Sie die entsprechenden Eigenschaften an. Sollten Sie zu keiner Lösung kommen, so überlegen Sie sich, warum das sein könnte.
Erstellen Sie vier Container mit der Höhe 25% und der Breite 25% (bedenken Sie hierzu, dass Sie dem body eine Höhe von 100% zuweisen). Richten Sie die Container prozentuell so aus, dass der erste Container links abschließt und der letzte Container rechts abschließt. Die beiden anderen Container sollen dazwischen aufgeteilt werden. Färben Sie die vier Container in entsprechenden Farben ein und geben Sie ihnen einen Rahmen von 3px (Typ und Farbe nach Ihrem Geschmack).
Erstellen Sie vier Container mit der Höhe 25% und der Breite 25% (bedenken Sie hierzu, dass Sie dem body eine Höhe von 100% zuweisen). Richten Sie die Container prozentuell so aus, dass der erste Container links abschließt und der letzte Container rechts abschließt. Die beiden anderen Container sollen dazwischen aufgeteilt werden. Färben Sie die vier Container in entsprechenden Farben ein und geben Sie ihnen einen Rahmen von 3px (Typ und Farbe nach Ihrem Geschmack).
Erstellen Sie vier Container mit der Höhe 25% und der Breite 25% (bedenken Sie hierzu, dass Sie dem body eine Höhe von 100% zuweisen). Richten Sie die Container so aus, dass diese von rechts oben nach links unten am Bildschirm dargestellt werden. Die Farbgebung der Container obliegt Ihnen.
Erstellen Sie vier Container (bedenken Sie hierzu, dass Sie dem body eine Höhe von 100% zuweisen). Richten Sie die Container so aus, dass der erste Container im linken Eck (Breite 100%, Höhe 40%) und der letzte ganz rechts (Breite 40%, Höhe 10%) platziert ist. Die beiden Container dazwischen richten Sie entsprechend aus. Die Farbgebung der Container obliegt Ihnen. Erweiterung 1: gestalten Sie die Platzierung der Boxen so, dass sie sich um 2% der Bildschirmhöhe überlappen. Erweiterung 2: gestalten Sie die Platzierung der Boxen so, dass sie sich um 10% der jeweiligen Containergröße überlappen.
Erstellen Sie ein HTML-Dokument und weisen Sie dem gesamten Dokument folgende Eigenschaften zu: Die verwendete Schriftart soll Verdana sein; sollte diese beim User nicht existieren, so soll auf Arial zurückgegriffen werden; sollte diese auch nicht existieren, dann soll die Standard-Nichtserifenschrift verwendet werden. Die Schriftgröße soll exakt der Schriftgröße entsprechen, die der User für seinen Browser (respektive sein Betriebssystem) gewählt hat. Die Zeilenhöhe soll dem 1.5-fachen der Schriftgröße entsprechen.
Erstellen Sie zunächst ein HTML-Dokument und weisen Sie dem gesamten Dokument folgende Eigenschaften zu: Die verwendete Schriftart soll Verdana sein; sollte diese beim User nicht existieren, so soll auf Arial zurückgegriffen werden; sollte diese auch nicht existieren, dann soll die Standard-Nichtserifenschrift verwendet werden. Die Schriftgröße soll exakt der Schriftgröße entsprechen, die der User für seinen Browser (respektive sein Betriebssystem) gewählt hat. Die Zeilenhöhe soll dem 1.5-fachen der Schriftgröße entsprechen. Geben Sie des Weiteren Formatierungen für die sechs Überschriften an:
  • h1: 200% der voreingestellten Schriftgröße, nicht fett (normal), nur Großbuchstaben (TIPP: text-transform), 1 Pixel dicke Linie darunter
  • h2: 150%, nicht fett, nur Großbuchstaben
  • h3: 120%, nicht fett, nur Großbuchstaben
  • h4: 100%, fett
  • h5: 90%, fett
  • h6: 80%, fett
  • Download Beispiel
  • Download Lösung
Wählen Sie eine beliebige Schrift und stellen Sie diese in verschiedenen Größenabstufungen dar. Achten Sie darauf, dass sämtliche (Klein- wie Groß-) Buchstaben sowie alle Ziffern der Schrift dargestellt werden: Schriftgrößen: 300%, 250%, 200%, 150%, 100%, 90%, 80% Wählen Sie danach ein paar (für die Schriftart charakteristische) Buchstaben aus und stellen Sie diese wie folgt dar: Schriftgröße 500% Textschatten: x-Versatz 2-10px, y-Versatz 2-10px, Weichzeichnung 0px | 5px | 10px, mittleres Grau Stellen Sie die Variationen nebeneinander dar.
Stellen Sie alle Standardschriftarten (Arial, Verdana, Helvetica, Georgia, Times New Roman, Courier New) untereinander und in verschiedenen Größenabstufungen dar, sodass man die Schriften untereinander vergleichen kann. Achten Sie darauf, dass sämtliche (Klein- wie Groß-) Buchstaben sowie alle Ziffern der Schrift dargestellt werden: Schriftgrößen: 300%, 250%, 200%, 150%, 100%, 90%, 80%
Verwenden Sie diese Datei und formatieren Sie alle Paragrafen-Kinder der Elemente mit der Klasse "a" derart, dass diese Kinder in blauer Schrift geschrieben werden.
Verwenden Sie diese Beispieldatei und formatieren Sie alle direkten Paragrafen-Kinder der Elemente mit der Klasse "a" derart, dass diese Kinder in blauer Schrift geschrieben werden.
Erstellen Sie drei voneinander unabhängige Listen mit jeweils je sieben Listenpunkten. Formatieren Sie die erste Liste so, dass jeder zweite Listenpunkt grau hinterlegt wird. Formatieren Sie alle Listen so, dass jeder erste Listenpunkt in blauer und jeder zweite Listenpunkt in roter Farbe geschrieben wird.
Erzeugen Sie aus verschachtelten Containern ein Schachbrett mit 8x8 Feldern, die jeweils eine Größe von 80x80 Pixel haben (beschriften Sie die Felder mit "Feld 1-1", "Feld 1-2" usw.) laut u. a. Screenshot. Fügen Sie dem body einen grauen Hintergrund hinzu, lassen Sie ihn auf die gesamte Höhe des Browserfensters erstrecken und stellen Sie sicher, dass die Felder des Schachbrettes entweder weiß oder schwarz sind.
Erzeugen Sie eine aufklappbare Navigation aus dem HTML-Code der Datei. Sobald der User über einen Navigationspunkt drüberfährt, soll sich - sofern vorhanden - die entsprechende Unternavigation rechs davon aufklappen. Die Formatierung der Navigation ist Ihnen überlassen.
Erzeugen Sie eine aufklappbare Navigation aus dem HTML-Code der Datei. Sobald der User über einen Navigationspunkt drüberfährt, soll sich - sofern vorhanden - die entsprechende Unternavigation daruntern aufklappen; alle weiteren Ebenen der Navigation sollen sich rechts davon aufklappen. Die Formatierung der Navigation ist Ihnen überlassen.
Bauen Sie die Website von Google nach (wie im Screenshot dargestellt). Beachten Sie, dass die Aufteilung der Seite unabhängig von der Bildschirmgröße gleich bleiben soll.
Erstellen Sie ein Registrierungsformular mit folgenden Informationen:
  1. Emailadresse (Pflicht)
  2. Passwort (Pflicht)
  3. Passwort wiederholen (Pflicht)
  4. Persönliche Daten (freiwillig):
    1. Vorname
    2. Nachname
    3. Geburtsdatum
Gliedern Sie mithilfe von CSS das Formular derart, dass es für den User übersichtlich und klar erkennbar ist. Orientieren Sie sich an Ihnen bekannten Formulardarstellungen.
Erstellen Sie ein beliebiges HTML-Dokument mit beliebigem Inhalt und zeigen Sie alle darin befindlichen Elemente mit einer Hintergrundfarbe Ihrer Wahl an. Entfernen Sie alsdann alle Innen- und Außenabstände sowie Rahmen von den Elementen, sofern diese vorhanden sind. Entfernen Sie auch eventuell vorkommende Innen- und Außenabstände des body.
Erstellen Sie ein Dokument, in welchem 216 quadratische Container in der Größe 100x100 Px nebeneinander dargestellt werden. Stellen Sie innerhalb der Container alle möglichen Farben der Web-Palette dar und geben Sie als Text in den Containern den HEX-, RGB- und HSL-Code der jeweiligen Farbe an. Hinweis: Dieses Dokument kann in weiterer Folge als Farbauswahlseite für Sie dienen.
Erstellen Sie fünf Container der Größe 300x200px und stellen Sie darin ein Hintergrundbild Ihrer Wahl wie folgt dar: 1. Das Hintergrundbild soll eine Größe von 200x200 Px aufweisen
2. ... 90%x90%...
3. Das Hintergrundbild soll den gesamten Container abdecken
4. Das Hintergrundbild soll sich vollständig innerhalb des Containers befinden
5. Das Hintergrundbild soll eine Größe von 50%x50% aufweisen
Erstellen Sie zunächst fünf Container der Größe 300x200px, geben Sie den Containern eine Hintergrundfarbe Ihrer Wahl und stellen Sie darin ein Hintergrundbild (nicht wiederholend!) Ihrer Wahl wie folgt dar: 1. Das Hintergrundbild soll eine Größe von 200x200 Px aufweisen
2. ... 90%x90%...
3. Das Hintergrundbild soll den gesamten Container abdecken
4. Das Hintergrundbild soll sich vollständig innerhalb des Containers befinden
5. Das Hintergrundbild soll eine Größe von 50%x50% aufweisen
Befüllen Sie danach die Container mit Inhalt (Text) und weisen Sie allen Containern einen Innenabstand von 2em und einen Rahmen der Stärke 10 Px zu, wobei der Rahmen eine halbtransparente schwarze Farbe aufweisen soll. Stellen Sie nun die unterschiedlichen Möglichkeiten von background-origin und background-clip dar.

JavaScript-Unterlagen (Teil 1)

Möglicherweise bist du künstlerisch tätig und möchtest dich und deine Arbeiten hier vorstellen. Oder hast du vielleicht ein Business mit einer Mission, die es zu beschreiben gilt?

JavaScript-Unterlagen (Teil 2)

Unterlagen für JavaScript, jQuery, … (Teil 2)

In diesem Abschnitt können Sie Übungsdateien zum Thema JavaScript, jQuery etc. downloaden.
Die Lösungen sind nach bestem Wissen und Gewissen erstellt worden, erheben jedoch nicht den Anspruch, perfekt zu sein – besser geht es immer. Die Frage ist nur, ob die perfekte Lösung auch die verständlichste Lösung darstellt.

Kontakt

Das ist eine Seite mit einigen klassischen Kontakt-Informationen, wie Adresse und Telefonnummer.

Mail: thomas.schoeftner@ph-linz.at
Tel.: +43(0)732 / 77 26 66 – 4652