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?

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

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:

  1. Das sollst du nachbauen: Einfache Liste
  2. Das sollst du nachbauen: Verschachtelte Listen
  3. 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:

  1. Das sollst du nachbauen: Einfache Tabelle
  2. 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:

  1. Das sollst du nachbauen: Bilder
  2. 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: Das Grid-Layout

In dieser Aufgabe sollst nichts nachbauen, sondern mit Hilfe von CSS das Layout einer Seite festlegen. Lade dir diese Seite herunter. Anschließend sollst du ausschließlich mit Hilfe von CSS erreichen, dass die Seite jeweils so aussieht wie in diesem PDF in Material 2.

Aufgabe 2.7: 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