Seite - 9 - 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/. CSS 1 Stundenbild-ID HTML/3 Dauer 100 Min. Thema CSS Grundkonzepte 1 Unterrichtsziele • Schüler_innen erstellen eine vierte HTML-Datei (zusätzlich zu index.html, ich.html, haustier.html), z.B. „hobby.html“ oder „freunde.html“ oder „familie.html“… • Schüler_innen haben eine CSS-Datei namens „test.css“ angelegt • Schüler_innen haben alle folgenden CSS-Befehle mindestens einmal getestet (HTML-formatiert.html und/oder test.html): text-align, text- decoration, font-weight, font-style, font-family, font-size (%, em, px, pt), color, background-color (Farbnamen, #Hexzahlen), border-width, border-style, border-collapse, width und height (%, em, px) • Schüler_innen haben die neuen Elemente <div> und <span> sowie das Attribut „class“ jeweils mindestens einmal sinnvoll in ihre Webseite eingebaut • Alle Schüler_innen haben beim Quiz (siehe Ertragssicherung) mindestens 75% richtig ausgefüllt Hilfsmittel Tafel, Beamer, PC, Internet, USB-Stick, HTML-Editor Einleitung/Wiederholung 1. Schüler_innen erstellen eine vierte HTML-Datei (zusätzlich zu index.html, ich.html, haustier.html), z.B. „hobby.html“ oder „freunde.html“ oder „familie.html“ etc. mit folgender Angabe: Erstelle eine neue HTML-Datei und suche dir ein Thema aus (z.B. freunde.html, hobby.html, heimatort.html, familie.html, etc.). Verwende die folgenden Elemente auf der neu erstellten Webseite: Überschrift, mindestens 2 Paragraphen mit je mind. 2 Sätzen, Hyperlink, Tabelle mit mind.4 Zeilen und 3 Spalten, Liste, mind. 2 Bilder 2. CSS einführen. Unterschied zwischen HTML und CSS hervorheben, z.B. „HTML und CSS arbeiten zusammen, erfüllen jedoch ganz andere Aufgaben. HTML konzentriert sich auf die Struktur einer Webseite, also welche Funktion ein