HTML und CSS erlernen

Was ist HTML?

Was ist CSS?

Anschließend an HTML und CSS wird im Unterricht die Erstellung von dynamischen HTML-Seiten behandelt.
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.
-Nr.-
-Information-
Übungen
-Lösungen-
-Test-
-Kommentar-
1
Wie entstand das Internet?
Übungen

Test
Einführung

optional: Einführung in Open Office
Bewerbungsunterlagen:
Lebenslauf, Kurzprofil


Die Arbeitsergebnisse (Daten und Dokumente) können ggf. später in einer Bewerbungs-Homepage verwendet werden.
2
Allgemeine Voraussetzungen,
Editoren, Displays, Recht
Übungen

Test
Arbeitsumgebung


Aufbau einer HTML-Seite


3
HTML - Hypertext Markup Language
Übungen
Lösungen
Test
Die ersten HTML-Tags
4
Programmier-Richtlinien
Übungen

Test
Arbeitstechnik,
Überblick bewahren, Fehlervermeidung
5
Fehlersuche



Tools, Werkzeugunterstützung bei der Fehlersuche
6
Konzept / Anforderungen an Webseiten
Übungen
(Konzept erstellen für Homepage bzw. Bewerbungsseite)


Aufgabe:
Homepage-Konzept erstellen


Gestaltung der HTML-Seite


7a
CSS - Cascading Style Sheets
Übungen
Lösungen
Test
Formatierungen von Seiten:
Bereiche, Formen, Farben, ...
7b
Positionierung von Elementen




7c

Eigene Fonts




7d

Externe CSS-Dateien
Übungen
Lösungen

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.
7e

Media Types



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.
8
Homepage
Übungen
(Homepage-Realisierung)


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.
9
Tabellen


OPTIONAL:
Übungen


Aufgabe:
HTML/CSS-Stundenplan entsprechend Vorgaben
Die Fertigstellung des Stundenplans ist Hausaufgabe und wird im kommenden Unterricht eingesammelt und bewertet.
optional: Aufgabe Online-Shops
10
Bildinhalte (Fotos, Grafik, JPEG, GIF, PNG, SVG)



a) Platzsparende Verwendung von Grafiken in HTML-Seiten, u.a. Einbindung von SVG-Grafiken
(https://commons.wikimedia.org)
b) Einsatz von Transparenz (opacity)
11
weitere Übungen zur Festigung und Vertiefung des Erlernten
Erstellung und Ergänzung der Bewerbungsseite
um einen tabellarischem Lebenslauf (in HTML)

Test (3 Spalten-Layout)
Weitere Übungsvorschläge:
12

Praxistest
Praxistest-Beispiele
(ohne Lösungen):
---

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)
13
Seitenanalyse




14
CE-HTML

SONSTIGES:





Werkzeuge
FAQ / Tipps und Tricks
Sonstiges




Bewertung

Wie werden Ihre Leistungen bewertet? Das können Sie hier nachlesen: