Im ersten Halbjahr der E-Phase befassen wir uns primär mit dem Internet: Was ist das? Wie funktioniert es? Wie kann ich eine eigene Website erstellen?
Nützliche Links
Notepad++: Ein sehr guter Text-Editor für Windows.
Glitch.com: Online-Editor zum Erstellen und Hosten eigener Webseiten.
Wie das Internet funktioniert: Informationsbroschüre der Digitalen Gesellschaft.
Wie funktioniert das Internet?: Sendung mit der Maus.
Übungsaufgaben
Die Übungsaufgaben zeigen dir jeweils eine Webseite, die du dann selbst nachbauen sollst.
Teil 1: HTML
Im ersten Teil verwenden wir ausschließlich HTML („HyperText Markup Language“) ohne CSS. Dadurch sehen unsere Webseiten leider nicht so gut aus. Geduld: Später wird alles besser (und schöner!).
Aufgabe 1.1: Strukturierung von Text
Zunächst verwenden wir Tags wie em, strong, h1, h2 und p, um einen Text ähnlich wie in einem Textverarbeitungsprogramm zu strukturieren.
Das sollst du nachbauen: Überblick über die Einführungsphase
Aufgabe 1.2: Hyperlinks
Das wichtigste Merkmal von Webseiten ist, dass sie mit anderen Webseiten verknüpft sind über sog. (Hyper-)Links. Neuer Tag: a
Das sollst du nachbauen: Überblick über die E-Phase mit Links
Du kannst gerne mit deinem Ergebnis aus Aufgabe 1 starten.
Aufgabe 1.3: Listen und Aufzählungen
Listen dienen dazu, mehrere Unterpunkte geordnet oder ungeordnet darzustellen. Neue Tags: ol, ul, li
Es gibt 3 Teilaufgaben:
- Das sollst du nachbauen: Einfache Liste
- Das sollst du nachbauen: Verschachtelte Listen
- Das sollst du nachbauen: Mehrfach verschachtelte Listen
Aufgabe 1.4: Tabellen
Mit Tabellen kann man Informationen systematisch darstellen. Neue Tags: table, tr, th, td
Es gibt 2 Teilaufgaben:
- Das sollst du nachbauen: Einfache Tabelle
- Das sollst du nachbauen: Tabelle mit TH-Elementen
Aufgabe 1.5: Bilder, Sounds und Videos
Keine Webseite ohne Bilder. Neue Tags: img, video, audio
Es gibt 2 Teilaufgaben:
- Das sollst du nachbauen: Bilder
- Das sollst du nachbauen: Audio und Video
Teil 2: CSS
CSS („Cascading Style Sheets“) dient dazu, den Inhalt von Webseiten zu stylen. Mit CSS können Farben, Schriftarten und sogar das ganze Layout der Seite angepasst werden und noch vieles mehr!
Aufgabe 2.1: Schriftart, Farben, Ausrichtung
Wir nehmen uns den Text aus dem ersten Teil und machen ihn schöner. Neue CSS-Eigenschaften: font-family, background-color, color, border, text-align
Das sollst du nachbauen: Übersicht über die E-Phase – gestylt
Aufgabe 2.2: Aufzählungen und Verschachtelungen
Ändern von Aufzählungszeichen in Listen und verschachtelte Selektoren. Neue CSS-Eigenschaften: list-style-type
Das sollst du nachbauen: Aufzählungszeichen, Verschachtelung
Aufgabe 2.3: Tabellen formatieren
Wir verpassen unseren Tabellen Rahmen und machen sie insgesamt ansehnlicher. Neue CSS-Eigenscaften: margin, border-collapse
Das sollst du nachbauen: Tabellen formatieren
Aufgabe 2.4: Fließende Objekte
Ein „fließendes Objekt“ wird aus dem normalen Textfluss entfernt und steht beispielsweise neben dem Text oder wird von diesem umflossen. Neue CSS-Eigenschaften: float
Das sollst du nachbauen: Fließende Objekte
Aufgabe 2.5: CSS-Klassen
Indem wir HTML-Elemente einer Klasse zuordnen können wir genau steuern, welche Elemente wir auf welche Art stylen wollen. Neues Attribut: class
Das sollst du nachbauen: CSS-Klassen
Aufgabe 2.6: Eine komplette Website
In dieser abschließenden Aufgabe sollst du eine komplette Website aus mehreren, miteinander verlinkten Webseiten erstellen.
Das sollst du nachbauen: Jenseits von Monopoly
