LU00.A01 - Assessment: Blog für einen Kunden erstellen

Voraussetzungen

Laden Sie hier die Vorlage für die Aufgabe herunter.

Ausgangslage

Ein Kunde gibt Ihnen einen statischen, webbasierten Auftritt in Auftrag. Mit dem neuen Webauftritt möchte er Artikel/Tipps zur Kleintierhaltung über dem Internet-Kanal veröffentlichen. Sie schlagen dem Kunden die bewährte Verzeichnisstruktur-01 (zur Zeit nur mit drei Themen-Gruppen) aus Ihrem Lehrbetrieb vor. Der reine Inhalt zu den Artikeln liefert Ihnen der Kunden. Diese Inhalte müssen ein wenig gestyled werden. Die Details dazu folgen in der Aufgabenstellung. 

/
index.html
themen/
    gesundheit/
        article_01.html
        article_02.html
    nahrung/
    kaefige/
bilder/
    logo.jpg
    tierarzt.jpg
    impfung.jpg
basis/
    sitemap.html

Aufgaben

  1. Erstellen Sie die Verzeichnisstruktur-01. Kopieren Sie die vorgegebenen Dateien (Bilder, HTML-Dateien) in die entsprechenden Verzeichnisse gemäss der Verzeichnisstruktur-01. (5 Punkte)
  2. Ersetzen Sie im index.html überall ?? mit den entsprechenden HTML-Elementen. (5 Punkte)
  3. Ersetzen Sie im sitemap.html überall ?? mit den entsprechenden HTML-Elementen. (5 Punkte)
  4. Ersetzen Sie überall ?? mit den entsprechenden HTML-Elementen im article_01.html ein. (5 Punkte)
  5. Ersetzen Sie überall ?? mit den entsprechenden HTML-Elementen im article_02.html ein. (5 Punkte)
  6. Passen Sie in allen Webseiten die Links (Verweise) und die Pfade zu den Bildern an, wo ein ?? als Platzhalter steht. Die Grundlage für die korrekten Verzeichnisse ist Verzeichnisstruktur-01. Verwenden Sie ausschliesslich relative Verweise! (8 Punkte)
  7. Sämtliche Bilder weisen einen alternativen, sinnvollen Text. In der Wahl sind Sie frei. (2 Punkte)
  8. Auf allen Seiten müssen die Umlaute korrekt angezeigt werden. Fügen Sie das fehlende HTML-Elementen ein. (2 Punkte)
  9. Stylen Sie so getreu wie in den abgebildeten Vorgaben. Für alle Seite gelten die nachfolgenden Angaben (10 Punkte)
    • Schrift-Familie Arial im <body>
    • Hintergrund-Farbe LightGrey für <nav> und <footer>
    • Farbe red für Links ausserhalb des Webauftritts
    • die kleine Fontgrösse ist 10px. Teilweise sind Texte in Fett- und Kursiv-Schrift gesetzt.
    • Links im Umbau (Seitemap) erhalten die Hintergrund-Farbe yellow
    • Farben green resp. blue für <h3>-Elemente in den Artikeln.

Vorgaben HTML-Elemente

Alle Texte sind mit HTML-Element umschlossen. Der HTML-Code muss valid sein. Für den Webauftritt zur ersetzende HTML-Elemente: aside, nav, article, header, footer, ul, li, ol, strong, meta, i, figure, figcaption inklusive den entsprechenden Attributen des jeweiligen HTML-Elements.

Vorgaben Styling

Daniel Garavaldi