Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Allgemeine Information zum Kurs und zur Lehr-/Lern-Methodik

Während des Kurses werden die Kapitel des Buches abgearbeitet. Bei jedem Kapitel ist eine Zeitangabe der benutzten Unterrichtsstunden. Die Kursunterlagen sind teilweise während der Stunden, aber auch als Hausaufgabe zu lesen.

Referenz-Buch: Basics of Web Design, HTML5 & CSS3, Terry Felke-Morris, ISBN-13: 978-0-13-700338-9.

Es muss mit dem Buch gearbeitet werden. Dies bedeutet, daß du im Buch Notizen nehmen sollst und wichtiges markierst!

Namenskonvention für Verzeichnisse und Dateien (UNBEDINGT EINHALTEN!):

Beispiele: index.html, chapter01.html, ch02ex13.html, ...

HTSTA: Kompetenzen - Indikatoren - Standards

Evaluierungs-Rahmen
Kompetenz:Indikator:Standard:
1. * Einen Webauftritt planen. (SA)
  1. Funktionsbeschreibung ist aufgestellt und die notwendigen Mittel und der Zeitaufwand sind abgeschätzt.
  2. Prototyp/Modell ist in Absprache mit dem Auftraggeber entworfen.
  3. Logische Struktur des Webauftritts ist in Absprache mit dem Auftraggeber entworfen.
  4. Verzeichnisstruktur des Webauftritts ist entworfen.
  5. Eine dem Auftrag angepasste Entwicklungsumgebung ist anhand der aktuell relevanten Entwicklungswerkzeuge ausgewählt.
  1. Der Prototyp entspricht im Wesentlichen den Vorgaben.
  2. Die Struktur (logische und physische) ist umsetzbar und entspricht den Absprachen.
  3. Die Standardinhalte (Kontakt, Impressum, Home, ...) sind vorhanden.
2. * Einen Webauftritt fachgerecht erstellen und warten. (SA)
  1. Der Quellcode des Webauftritts ist nach den aktuellen Standards eingebunden.
  2. Das Design der Webseiten wird erstellt.
  3. Inhalt des Webauftritts entspricht der geplanten logischen Struktur.
  4. Dateien sind nach der geplanten Verzeichnisstruktur abgespeichert.
  5. Inhalt und Quellcode sind nach Vorgaben aktualisiert.
  6. Die Copyright- und Datenschutz-Problematik wird berücksichtigt.
  1. Respektiert die aktuellen Normen.
  2. Webauftritt ist übersichtlich gestaltet und nach den Vorgaben erstellt.
  3. Quellcode der Seiten ist semantisch korrekt.
  4. Formatierungen sind fachgerecht erstellt.
  5. Copyright und Datenschutz sind respektiert.
3. * Einen Webauftritt fachgerecht in Betrieb nehmen. (SA)
  1. Webauftritt ist hochgeladen und erreichbar.
  2. Verzeichnisstruktur ist auf dem Server erstellt.
  1. Webauftritt ist über ein Netzwerk zugänglich.
4. Die Qualität der Arbeit einschätzen und verbessern. (SE)
  1. Erkennt selbstständig Fehler und Mängel in Design und Realisierung.
  2. Stimmt regelmäßig die einzelnen Entwicklungsschritte mit dem Auftraggeber ab.
  3. Reagiert positiv auf Anregungen und bezieht diese in der Wartung mit ein.
  1. Erkannte Fehler und Mängel sind behoben.
  2. Anregungen sind korrekt umgesetzt.

Vorbereitungsaufgabe

  1. Eine deiner Aufgaben besteht darin, ab diesem Moment eine komplette Website im Verzeichnis myBlog<MySchoolLogin> anzulegen in welcher du dir Notizen zum Kurs erstellen mußt. Diese Aufgabe erstreckt sich über den kompletten Kurs. Du wirst den Inhalt hierzu wärend des Kurses und als Hausaufgabe erstellen. Lege hierzu folgende Dateien an:

    links.html
    Diese Datei enthält nützliche Links sowie eine kurze Erklärung zu diesem Verweis. Benutze eine Definitionsliste sobald diese bekannt ist.
    HTML_quickref.html
    Diese Seite enthält alle im Buch/Kurs gesehenen HTML-Tags. Auch wenn die Tabellen erst später im Kurs erklärt werden, kann man jetzt schon mit Tabellen arbeiten. Hierzu erhälst du vom Lehrer eine Einführung (hier der Quellcode: Tabelle). Die Informationen werden in einer Tabelle ausgegeben. Die Tabelle wird folgende Kolonnen enthalten: Tag; Name (englisch); Notizen/Bemerkungen. (siehe Screenshot        )
    HTML Quick Reference
    CSS_quickref.html
    Diese Seite enthält die wichtigsten im Buch/Kurs gesehenen CSS-Tags. Die Informationen werden in einer Tabelle mit den Titelkolonnen: Eigenschaft; Erklärung ausgegeben. Eine zusätzliche Definitionsliste erklärt die behandelten CSS-Selektoren.
    toolbox.html
    Diese Datei enthält Erklärungen und Screenshots zu Problemen auf welche ihr während der Aufgaben gestoßen seid.
    vocabulary.html
    Die dir unbekannten englischen Wörter mußt du in einer HTML-Tabelle notieren. Weiterhin mußt du die deutsche und französische Übersetzung nachschlagen. Bei Ausdrücken wird auch eine Erklärung angegeben. Ein Vokabelverwaltungstool mit Vokabeltrainer wird noch folgen.
  2. Erstelle in deinem myBlog Verzeichnis für jedes Kapitel ein Verzeichnis. Namenskonvention: chapterXX . XX stellt die Kapitelnummer dar. Beispiele: chapter01, chapter11, ...

  3. In den jeweiligen Verzeichnissen mußt du die Antworten zu den Fragen, sowie die Verweise zu den Lösungsdateien erstellen. Demnach wird für jedes Kapitel eine Datei answersXX.html erstellt welche die Antworten zu den Aufgaben und zu den Verständnisfragen enthält (Der Lehrer zeigt dir eine solche Datei). Für jede Aufgabe wird eine HTML-Datei mit Namen chXXexYY.html erstellt (XX: Kapitelnummer, YY Aufgabennummer). Achte auf eine saubere und übersichtliche Datei- und Verzeichnis-Struktur. Zuerst werden die answersXX.html Seiten nur einfache Texte enthalten, welche die Antworten zu den Fragen enthalten. Mit steigendem Wissen und Können werden diese Seiten immer besser formatiert und mit semantischem Code versehen. Sobald die Verweise behandelt wurden, müssen in den answersXX.html Dateien Verweise für jedes Hands-On Practice und jede Aufgabe erstellt werden. Die Hands-On Practices werden in jedem Kapitel im Verzeichnis hop erstellt. Die Dateinamen sind im Text angegeben.
  4. Starte die Commandshell unter Windows (cmd.exe) und gib die folgenden Befehle der Reihe nach ein:

    1. Ändere die Farben der Konsole:> color F0
    2. Wechsle in dein Laufwerk:> H:
    3. Wechsle in das Verzeichnis HTSTA. In diesem ist dein Blog enthalten:> cd HTSTA
    4. Zeige den Verzeichnis- und Datei-Baum an:> tree /F
    5. Erstelle einen Screenshot des Resultates des letzten Befehls (tree /F), kopiere diesen in eine Textdatei und gib deinen Namen und Vornamen an. Diese Datei mußt du ausdrucken und dem Lehrer aushändigen.