Kapitel 02: Die Basis Tags

+Kursablauf:

Allgemeine Bemerkungen:

Validierung: lokal und mittels online Validator. HTML5 und XHTML 1.0 Transitional und Strict zum erklären der Unterschiede. Vorwiegend HTML5 soll unterrichtet werden. Als Beweis der Validierung wird das HTML5 Logo eingefügt. Der Lehrer gibt den Quellcode hierzu vor! Denke immer daran alle Seiten zu validieren!

Die Tools Web Developer und Firebug sollen ständig genutzt werden!
Powerpoint wird zum Einstieg in das Kapitel benutzt (die Tags werden einmal kurz erläutert!)

Folgende Programmierkonzepte können eingeführt werden: Variable, Zuweisung, Zeichenkette (single quotes und double quotes), Verschachtelung

Vorbereitung "Programmieren lernen":

• Syntaxcheck/Debugging: Validieren von HTML Seiten
• Schleifen/Wiederholungen: HTML-Listen

Zu behandelnde Seiten:

S. 25-47

Lesen Hausaufgabe:

S. 25-35, 38-41, 44-47

Autonom erarbeiten in der Schule:

S. 36-37, 42-43

Denke daran die unbekannten Wörter und Ausdrücke aufzuschreiben und nachzuschlagen!

-Aufgaben:

1. Führe alle Hands-on Practices durch. Speichere jedes Practice im Verzeichnis hop des Kapitels ab. Die Dateinamen sind im Textbuch angegeben.
2. Führe alle Hands-on Exercises am Ende des Kapitels durch. Diese werden direkt im Kapitelverzeichnis abgespeichert unter der Konvention: chXXhoeYY.htm . hoe: steht für Hands-on Exercise
3. Erstelle eine HTML-Datei welche die gleiche Ausgabe liefert wie der folgende Screenshot. (siehe Screenshot        )
   
4. Ändere deine vorher erstellten Seiten so um, daß alle Spezialzeichen mit den HTML-ENTITIES dargestellt werden.
5. Erstelle eine HTML-Seite welche den HTML-Code zur Hands-on Practice Seite 29 im Browser anzeigt.
6. Erstelle jeweils eine Vorlage-HTML-Datei (template) für die Standards: HTML5, XHTML 1.0 Transitional und XHTML 1.0 Strict
7. Das Case Study Projekt wird mit einem Syntaxhighlighting-Editor (z.B.: NetBeans, RText, ...) erledigt. Befolge hierzu auch die im Tutorial zu Netbeans angegebenen Hilfestellungen. Dieses Projekt wird im Verzeichnis pacific innerhalb deines Blogs erstellt.
8. Erstelle eine verschachtelte Liste. Die äußere Liste (Module des 2. Semesters) ist eine ungeordnete Liste mit Quadraten und die innere Liste (Kurstage und Kurszeiten des jeweiligen Moduls) ist eine mit römischen Zahlen nummerierte Liste.
9. Als Abschlußübung und Vorbereitung auf den später folgenden Test sollst du den HTML-Code erstellen um die exakt gleiche Ausgabe zu erstellen wie im folgenden Screenshot. Klicke auf das Bild. (siehe Screenshot        )
   
   

   Es folgen einige Hinweise zu dem Screenshot:

   1. Lade dir den Text hier herunter.
   2. Arbeite unbedingt mit der Such-Ersetz-Funktion deines Editors (NetBeans)!
   3. Nicht alle im Inhaltsverzeichnis aufgeführten Titel sind im Text wiederzufinden.
   4. Jedes alleinstehende HTML5, W3C und XHTML ist eine Abkürzung.
   5. Alle Texte zwischen Anführungszeichen sind hervorzuheben ohne die Gänsefüschen zu entfernen.
   6. Denke an die deutschen Umlaute. Beachte die Groß- und Kleinschreibung.
   7. Wozu dient die Source-Format Funktion von NetBeans?
   8. Nur ein einziger HTML5-Validierungsfehler ist erlaubt? Welcher ist aufgetreten?
10. Erstelle in deinem Wurzelverzeichnis des Blogs die Datei rules.html. In dieser Datei schreibst du alle Regeln nieder, welche du beim Erstellen von HTML-Seiten einhalten sollst.
11. Behebe alle Fehler in der Datei ch02ex11.html damit die Datei erfolgreich validiert wird.

-Verständnisfragen:

1. Was unterscheidet Block- von Inline-Elementen? Gib auch jeweils 4 Block- und 4 Inline-Elemente an.
2. Wie lang sollte ein Abschnitt maximal sein in einer HTML-Seite?
3. Welche Aussage kannst du in Bezug auf das align-Attribut machen? Teste dieses Attribut in unterschiedlichen HTML-Standards und versuche die Seite zu validieren.
4. Was unterscheidet Standalone-Elemente von Container-Elementen? Wie nennt man Standalone-Elemente noch? Gib 2 Beispiele.
5. Erkläre den Begriff "semantischen Code"!
6. Gibt es eine bessere Methode zur Trennung von Informationen als einen horizontalen Strich?
7. Erkläre den Ausdruck "properly nested" und gib 2 Beispiele und 2 Gegenbeispiele.
8. Wozu werden div-Elemente benutzt?

-Zusatzaufgaben:

1. Erstelle die Datei ch02tr01.html, welche den Inhalt aus ch02tr01.pdf anzeigt. Kopiere den Text aus der PDF-Datei in die HTML-Datei.
2. Erstelle die Datei ch02tr02.html, welche den Inhalt aus ch02tr02.pdf anzeigt.
3. Erstelle die Seite curriculumGER.html in welcher du deinen Lebenslauf auf Deutsch angibst. Benutze hierzu deine Unterlagen aus dem Modul CREDO (respektive Wikipedia Lebenslauf). Es geht darum die bisher behandelten Tags sinnvoll einzusetzen.
4. Kopiere die Datei answers01.html und ergänze sie mit semantischem HTML.