Zum Inhalt springen
Vorschau auf das nächste Semester, noch nicht veröffentlicht.
Zur aktuellen Seite

Homepage

Aufgabe

So wird gezählt

  1. HTML-Tags: Jedes Tag zählt einmal, egal wie oft Sie es verwenden. <html>, <head>, <body> und <title> zählen nicht mit.
  2. CSS-Selektoren: Jeder Selektor zählt einmal, auch wenn er mehrfach vorkommt, zum Beispiel ein Tag-Selektor (p), ein Klassen-Selektor (.example) oder ein ID-Selektor (#example).
  3. CSS-Eigenschaften: Jede Eigenschaft zählt einmal, auch wenn sie in mehreren Regeln vorkommt, zum Beispiel font-size oder margin.

Beispiel:

body {
    font-family: sans-serif;
    margin: 0;
}

.karte {
    padding: 1rem;
}

#titel {
    font-size: 2rem;
    margin: 1rem;
}

Das sind 3 Selektoren (body, .karte, #titel) und 4 Eigenschaften (font-family, margin, padding, font-size), denn margin zählt nur einmal. Für die Aufgabe fehlen also noch je 2 Selektoren und 1 Eigenschaft.

Aufgabenmaterial

Aufgabenmaterial herunterladen

Öffnen Sie VS CodeVisual Studio Code, der kostenlose Code-Editor von Microsoft, in dem Sie im Kurs programmieren. Glossar → entsprechend Ihrem Setup, klicken Sie auf Ihr Terminalfenster und führen Sie cd aus. Die EingabeaufforderungDas Zeichen am Anfang der Zeile im Terminal, etwa $ oder me/ $. Es zeigt, dass das Terminal auf Ihren nächsten Befehl wartet. Steht davor ein Ordnername wie me/, befinden Sie sich gerade in diesem Ordner. Glossar → Ihres Terminalfensters sollte ungefähr wie folgt aussehen:

$

Führen Sie als Nächstes folgenden Befehl aus:

wget https://dev.inf.zone/download/exercises/12/homepage.zip

um eine ZIP-Datei namens homepage.zip in den aktuellen Ordner herunterzuladen.

Führen Sie dann aus:

unzip homepage.zip

um einen Ordner namens homepage zu erstellen. Die ZIP-Datei wird nun nicht mehr benötigt. Daher können Sie ausführen:

rm homepage.zip

und mit „y“ gefolgt von Enter auf die Aufforderung antworten, um die heruntergeladene ZIP-Datei zu löschen.

Geben Sie nun ein:

cd homepage

gefolgt von Enter, um in dieses Verzeichnis zu wechseln (d. h., es zu öffnen). Ihre Eingabeaufforderung sollte jetzt ungefähr so aussehen:

homepage/ $

Führen Sie ls alleine aus, und Sie sollten einige Dateien sehen:

index.html  styles.css

Falls Sie auf Probleme stoßen, wiederholen Sie die gleichen Schritte und prüfen Sie, wo ein Fehler passiert sein könnte!

DateiInhalt
index.htmleine leere Startseite („hello, homepage“), die styles.css schon einbindet
styles.cssleer, für Ihre eigenen Regeln

Spezifikation

Ihre Website im Ordner homepage erfüllt diese Anforderungen:

  1. Seiten: mindestens vier verschiedene .html-Seiten, darunter index.html als Startseite. Von jeder Seite gelangt man über einen oder mehrere Links zu jeder anderen Seite.
  2. HTML: mindestens zehn verschiedene HTML-Tags zusätzlich zu <html>, <head>, <body> und <title>.
  3. CSS: eine eigene Stylesheet-Datei styles.css mit mindestens fünf verschiedenen CSS-Selektoren und mindestens fünf verschiedenen CSS-Eigenschaften. Jede Seite bindet sie im <head> ein (in index.html steht die Zeile schon):
    <link href="styles.css" rel="stylesheet">
  4. JavaScript: mindestens ein Feature, das Ihre Website interaktiver macht, zum Beispiel Warnmeldungen, Effekte in wiederkehrenden Intervallen oder interaktive Buttons, Dropdowns oder Formulare. Seien Sie kreativ!
  5. Darstellung: Die Website sieht auf Handys ebenso gut aus wie auf Laptops und Desktops.
  6. specification.txt: eine Textdatei im Ordner homepage mit
    • den 10 HTML-Tags, die Sie verwendet haben,
    • den 5 CSS-Eigenschaften, die Sie verwendet haben,
    • einem Satz dazu, wofür Sie JavaScript eingesetzt haben.

Achten Sie außerdem darauf,

  • dass Ihr HTML gültig ist (siehe HTML-Validierung),
  • dass sich die Website intuitiv und einfach bedienen lässt,
  • dass Ihr CSS in einer eigenen Datei steht (oder mehreren),
  • dass Sie Wiederholungen vermeiden, indem Sie Eigenschaften von übergeordneten Tags auf die inneren „kaskadieren“ lassen.

Hilfestellung

Tutorials zu HTML, CSS und JavaScript

Ausführliche Anleitungen zu den drei Sprachen finden Sie hier:

Testen

Prüfen Sie selbst, ob Ihre Website alle Anforderungen der Spezifikation erfüllt. check50 (unten unter „Korrektheit“) prüft nur einen Teil davon.

Im Browser ansehen

Starten Sie im Ordner homepage einen Webserver:

http-server

Klicken Sie mit gedrückter Befehlstaste (Mac) bzw. Strg-Taste (PC) auf die erste Adresse, die http-server ausgibt. Ihre Website öffnet sich in einem neuen Tab; laden Sie den Tab neu, um Ihre letzten Änderungen zu sehen.

Wie die Seite auf einem Handy aussieht, zeigen die Entwicklerwerkzeuge von Google Chrome: Klicken Sie auf das telefonförmige Symbol links neben dem Tab „Elements“, oder drücken Sie bei geöffneten Entwicklerwerkzeugen Strg+Umschalt+M (PC) bzw. Cmd+Umschalt+M (Mac).

Korrektheit

Führen Sie in Ihrem Terminal den folgenden Befehl aus, um die Korrektheit Ihrer Arbeit zu überprüfen:

check50 -l inf-zone/exercises/2026/homepage

HTML-Validierung

Kopieren Sie das HTML jeder Seite in das Textfeld des Markup Validation Service und beseitigen Sie alle Fehler und Warnungen, die er meldet.

Style

style50 unterstützt keine HTML-Dateien. Rücken Sie Ihre HTML-Tags deshalb selbst sauber ein. Kommentare schreiben Sie in HTML als <!-- Kommentar hier -->, in CSS als /* Kommentar hier */. In HTML sind Kommentare nicht so wichtig wie in C oder Python.

Abgeben

Geben Sie im Ordner homepage ab:

inf upload homepage

Danach sehen Sie, welche Tests Ihr Programm besteht und ob die Übung für die Bonuspunkte zählt. Wie Sie inf installieren und sich anmelden, steht unter Abgeben mit inf.

Zum Weiterlesen: HTML, CSS und JavaScript

Für die Lösung der Aufgabe nicht nötig.

Fast alle Seiten, die wir im Internet besuchen, beruhen auf drei Sprachen, die jeweils einen anderen Zweck erfüllen:

  1. HTML (Hypertext Markup Language) beschreibt den Inhalt einer Website,
  2. CSS (Cascading Style Sheets) bestimmt ihr Aussehen,
  3. JavaScript macht sie interaktiv und dynamisch.

Diese Seite als Markdown: ansehen herunterladen

Trivia