Einsendeaufgabe MMDE10Y

A. Praxisaufgabe
Bei dieser Einsendeaufgabe geht es um die Entwicklung einer kompletten kleinen Website mit Atom und deren anschließende Veröffentlichung auf einem Server mit FileZilla. Eine Vorlage für Ihre Praxislösung zeigt folgende Abbildung:
Die in der Abbildung oben gezeigte Vorlage dient in Bezug auf die Gestaltung (Farben, Typografie) nur als Anregung, d.h., beim Design können Sie Ihrer Fantasie freien Lauf lassen (benutzen Sie bitte Bilder und Texte Ihrer Wahl).
1. Erstellen Sie am besten zunächst mit Atom eine geeignete Vorlagenseite mit einem externen Stylesheet. Dieses sollte bereits alle wichtigen Markup-Varianten (was Sie von diesem Markup in einer bestimmten Seite nicht benötigen, können Sie jederzeit löschen!) und alle relevanten Stile enthalten, die Sie für die Implementierung Ihrer Website benötigen. Testen Sie diese Vorlagenseite sorgfältig, bevor Sie weiterarbeiten.
2. Ihre Website muss folgende fünf Seiten umfassen, die Sie nach erfolgreicher Erstellung einer Vorlagenseite aus dieser mithilfe von Speichern unter erstellen können:
• Startseite (Inhalt beliebig)
• Über mich (hier steht es Ihnen frei, tatsächlich etwas über sich selbst zu schreiben und auch ein eigenes Foto zu verwenden oder mit einem Platzhalterbild und Blindtext zu arbeiten)
• Leistungen (Inhalt beliebig)
• Kontakt (mindestens ein Maillink – und wer möchte, kann natürlich gerne auch ein Kontaktformular erstellen!)
• Impressum (gemäß den Richtlinien des Telemediengesetzes)
3. Die fertige Website laden Sie bitte mit FileZilla auf Ihrem persönlichen Webspace in das Verzeichnis htdocs hoch. Benutzen Sie diese von Ihnen selbst erstellten FTP-Zugangsdaten für die Verbindung mit FileZilla. Achten Sie aber in jedem Fall darauf, dass alle Dateien und die komplette Ordnerstruktur (gegebenenfalls mit allen von Ihnen eingerichteten Unterordnern) auf den Server hochgeladen werden. Sie sollten auf jeden Fall nach dem Upload Ihre Website unter dem entsprechenden URL auf dem Webspace sorgfältig durchklicken. Sie merken dann sofort, wenn ein Pfad falsch gesetzt ist oder ein anderer Fehler auftritt. Schreiben Sie den URL Ihrer hochgeladenen Website in eine Textdatei (s. detaillierte Hinweise am Ende dieser Aufgabenbeschreibung).

• Einheitlich dasselbe flexible Layout mit der Breite 75 % und einer Maximalbreite von 50rem; mittig im body. Der body hat eine Hintergrundfarbe Ihrer Wahl.
• Fünf HTML-Seiten, wie oben beschrieben.
• Horizontale Navigationsleiste auf allen Seiten.
• Auf der Seite Über mich soll das Bild rechts vom Text umflossen werden.

• Daran soll sich ein speziell gestaltetes aside-Element anschließen.

Flexbox-Technologie
Bei der Lösung dieser Praxisaufgabe sollen Sie für die Erstellung der horizontalen Navigationsliste die Flexbox-Technologie anwenden. Damit Sie diese Aufgabe richtig lösen können, befolgen Sie bitte folgende Hinweise:
• Bitte verwenden Sie für die ungeordnete Liste im Element nav den Kombinator nav ul mit diesen Eigenschaften und Werten:
– Diese Liste wird zum Flexcontainer. Sie weisen ihr also die passende Eigenschaft display: flex; im Stylesheet zu.
– Damit die einzelnen Navigationselemente im oben gezeigten Abstand angezeigt werden, müssen Sie beim Flexcontainer noch die CSS-Regel justify-content: space-around; ergänzen.
– alle Außenabstände auf null
– sinnvolle Werte für die Innenabstände (ausprobieren!)
– eine Hintergrundfarbe Ihrer Wahl (passend zum allgemein von Ihnen gewählten Farbklima)
• Bitte verwenden Sie für die Listenelemente – diese werden zu Flex Items – der ungeordneten Liste im Element nav den Kombinator nav ul li mit diesen Eigenschaften und Werten:
– keine Aufzählpunkte
– Für die Listenelemente (die Flex Items) benutzen Sie bitte die CSS-Regel flex: 0 0 auto;
• Bitte verwenden Sie für die Links innerhalb der ungeordneten Liste im Element nav den Kombinator nav ul a mit den passenden Eigenschaften und Werten:
– sinnvolle Werte für die Innenabstände und die Hintergrundfarbe
– gegebenenfalls Spezifikation eines Hover-Effekts.








B. Multiple Choice
Was kann man statt http://localhost/ auch schreiben?
In welchem Verzeichnis müssen die Webseiten bei XAMPP standardmäßig gespeichert werden, damit sie ausgeliefert werden können?
Sie haben im Verzeichnis htdocs in dem Unterordner seiten ein Dokument mit Namen produkte.html angelegt. Wie können Sie es aufrufen?
Wofür steht die Abkürzung XAMPP?
Was ist MySQL?