Seite - 10 - in HTML und CSS

Seminar/Projekt Informationssysteme Unterrichtspakete für AHS Informatikunterricht Gruppe Ebner Andreas Schuch Dieses Material wurde von Andreas Schuch (schuch.andreas@gmail.com) erstellt und steht unter der Creative-Commons-Lizenz Namensnennung 4.0 International. Um eine Kopie dieser Lizenz zu sehen, besuchen Sie http://creativecommons.org/licenses/by/4.0/. Textabschnitt einnimmt. (Zeigt auf Beamer, der HTML-formatiert.html projiziert) Dieser Text ist als Überschrift gekennzeichnet. Dieser Text als Paragraph. Dieser hier als Liste. (Lehrkraft zeigt jeweils zu den entsprechenden Textpassagen.) Mithilfe von CSS kann man dann den Text formatieren: Schriftgröße ändern, Schriftart ändern, Farbe ändern, Textabschnitt unterstreichen, usw. Einige Elemente werden schon automatisch formatiert, wenn man ihnen eine Struktur gibt. Zum Beispiel ist das der Fall bei Überschriften. Hier weißt man einem Text mit <h1> eigentlich nur die Funktion einer Überschrift zu, aber das Aussehen wird gleich mitverändert: Die Schriftgröße wird angepasst und die Überschrift wird fett gedruckt. Das ist eigentlich schon die Aufgabe von CSS!“ 3. Aufgabenstellung für Schüler_innen: 2-er Gruppen, 2-3 Minuten. a. Finde mindestens 3 Vorteile, die eine Trennung von Struktur und Formatierung bei der Webseite-Erstellung mit sich bringt! Nenne Beispiele! (Es ist OK, wenn sich Schüler_innen schwer tun und nur 1 oder 2 Vorteile finden. Es geht vor allem um die Aktivierung kognitiver Denkprozesse)) b. Mögliche Antworten: 1) Quelltext einer Webseite bleibt übersichtlicher und leichter lesbar; 2) konsistentere optische Präsentation der Webseite; 3) nachträgliche Änderungen können viel leichter durchgeführt werden (z.B. wenn das Aussehen der Navigationsoberfläche angepasst wird, reicht es, an einer einzigen Stelle Änderungen vorzunehmen)Projekte sind einfacher zu warten bzw. zu modifizieren Stundenkern 4. Zusammen mit Schüler_innen eine CSS-Datei namens „test.css“ anlegen 5. Schüler_innen sollen HTML-formatiert.html öffnen und die neu angelegte CSS-Datei dort einbinden. 6. Einfache CSS-Befehle auf dem Beamer vorzeigen. Schüler_innen schreiben die Befehle ab und testen sie an ihrer HTML-formatiert.html und/oder test.html. Dieselben CSS- Befehle sollten mehrmals für verschiedene Elemente verwendet werden. a. text-align, text-decoration b. font-weight, font-style, font-family, font-size (%, em, px, pt) c. color, background-color (Farbnamen, #Hexzahlen) d. width, height