Dieses Wiki zum Thema "Erstellung von HTML-Seiten" wird gepflegt von Rüdiger Borrmann.
Es wird im Unterricht der Medienassistenten-Klassen am OSZ KIM in Berlin eingesetzt.
Teilen Sie erkannte Fehler bitte sofort mit, damit ich für Abhilfe sorgen kann.
Kontakt: R. Borrmann -> b o r r m a n n @ o s z k i m . d e
Handwerkszeug/Grundlagen
Die folgenden Übungen müssen Sie selbstständig bearbeiten. Dieses hier zu übende "Handwerk" ist die Voraussetzung für die erfolgreiche Bewältigung größerer Problemstellungen. Es macht Sinn, die aufeinander aufbauenden Übungen in der vorgegebenen Reihenfolge zu bearbeiten.
Ob eine neue Zeile nach einem Element entsteht oder nicht, das ist abhängig von der Art des Elements (block/inline). Diese Eigenschaft kann über CSS gesetzt werden.
Es gibt nicht nur ein Display, auf dem eine HTML-Seite korrekt angezeigt werden muss - das Smartphone, das Tablet, der Desktop-PC und der Drucker sind die wichtigsten Beispiele.
Aufgabe:
Realisierung der Seiten mit HTML und CSS auf der Grundlage eines zuvor erstellten Homepage-Konzepts.
Die Fertigstellung der ersten Version ist Hausaufgabe und wird im kommenden Unterricht eingesammelt und bewertet.
(oder auch bzw.
"Erstellung und Ergänzung der Bewerbungsseite
um einen tabellarischem Lebenslauf (in HTML)"
Aufgabe:
HTML/CSS-Stundenplan entsprechend Vorgaben
Die Fertigstellung des Stundenplans ist Hausaufgabe und wird im kommenden Unterricht eingesammelt und bewertet.
optional: Aufgabe Online-Shops
Der Praxistest wird in der Bewertung Ihrer Leistung mit dem Faktor drei gewichtet; Grundlagen-Tests haben die Gewichtung eins. Formel:
Ihre Note = (Addition der Noten der einfachen Tests + 3 x Note des Praxistests) / (Anzahl der einfachen Tests+3)
a) Erfüllen Sie (für ein Projekt Ihrer Wahl) die Anforderung, dass es auf jedem Display optimal dargestellt wird (Responsive Design)!
b) Setzen Sie dafür die Neuerungen aus HTML5 ein!
HTML ist heute HTML5! Die wichtigste Erweiterung gegenüber früheren Versionen ist die gute Unterstützung von Smartphones, Tablets usw. (Responsive Design). Darüber hinaus gibt es neue Video- und Audiofunktionen, ortsbezogene Programmierung, lokale Speicherung von Daten über die Möglichkeiten von Cookies hinaus, dynamische Grafiken und Transitions.
a) Platzsparende Verwendung von Grafiken in HTML-Seiten, u.a. Einbindung von SVG-Grafiken
(https://commons.wikimedia.org)
b) Einsatz von Transparenz (opacity)
HTML und CSS erlernen
Was ist CSS?
Anschließend an HTML und CSS wird im Unterricht die Erstellung von dynamischen HTML-Seiten behandelt.
Es wird im Unterricht der Medienassistenten-Klassen am OSZ KIM in Berlin eingesetzt.
Teilen Sie erkannte Fehler bitte sofort mit, damit ich für Abhilfe sorgen kann.
Kontakt: R. Borrmann -> b o r r m a n n @ o s z k i m . d e
Handwerkszeug/Grundlagen
Die folgenden Übungen müssen Sie selbstständig bearbeiten. Dieses hier zu übende "Handwerk" ist die Voraussetzung für die erfolgreiche Bewältigung größerer Problemstellungen. Es macht Sinn, die aufeinander aufbauenden Übungen in der vorgegebenen Reihenfolge zu bearbeiten.Lebenslauf, Kurzprofil
Editoren, Displays, Recht
Überblick bewahren, Fehlervermeidung
(Konzept erstellen für Homepage bzw. Bewerbungsseite)
Homepage-Konzept erstellen
Bereiche, Formen, Farben, ...
(Homepage-Realisierung)
Realisierung der Seiten mit HTML und CSS auf der Grundlage eines zuvor erstellten Homepage-Konzepts.
Die Fertigstellung der ersten Version ist Hausaufgabe und wird im kommenden Unterricht eingesammelt und bewertet.
(oder auch bzw.
"Erstellung und Ergänzung der Bewerbungsseite
um einen tabellarischem Lebenslauf (in HTML)"
HTML/CSS-Stundenplan entsprechend Vorgaben
Die Fertigstellung des Stundenplans ist Hausaufgabe und wird im kommenden Unterricht eingesammelt und bewertet.
optional: Aufgabe Online-Shops
3-Spalten-Layout
(ohne Lösungen):
Ihre Note = (Addition der Noten der einfachen Tests + 3 x Note des Praxistests) / (Anzahl der einfachen Tests+3)
(über das bereits Erlernte hinaus)
b) Setzen Sie dafür die Neuerungen aus HTML5 ein!
Variable Resistor.svg bzw.https://www.mediaevent.de/svg-in-html-seiten/
(https://commons.wikimedia.org)
b) Einsatz von Transparenz (opacity)
FAQ / Tipps und Tricks
Sonstiges
Bewertung
Wie werden Ihre Leistungen bewertet? Das können Sie hier nachlesen: x...