` 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:** ```css 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 Code entsprechend Ihrem [Setup](https://dev.inf.zone/extras/setup/), klicken Sie auf Ihr Terminalfenster und führen Sie `cd` aus. Die Eingabeaufforderung Ihres Terminalfensters sollte ungefähr wie folgt aussehen: ```bash $ ``` Führen Sie als Nächstes folgenden Befehl aus: ```bash 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: ```bash 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: ```bash 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: ```bash cd homepage ``` gefolgt von Enter, um in dieses Verzeichnis zu wechseln (d. h., es zu öffnen). Ihre Eingabeaufforderung sollte jetzt ungefähr so aussehen: ```bash homepage/ $ ``` Führen Sie `ls` alleine aus, und Sie sollten einige Dateien sehen: ```bash 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! | Datei | Inhalt | | ------------ | ------ | | `index.html` | eine leere Startseite („hello, homepage“), die `styles.css` schon einbindet | | `styles.css` | leer, 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): ```html <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](#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: - [HTML](https://www.w3schools.com/html/) - [CSS](https://www.w3schools.com/css/) - [JavaScript](https://www.w3schools.com/js/) ## 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: ```bash 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: ```bash check50 -l inf-zone/exercises/2026/homepage ``` ### HTML-Validierung Kopieren Sie das HTML jeder Seite in das Textfeld des [Markup Validation Service](https://validator.w3.org/#validate_by_input) 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 ``, in CSS als `/* Kommentar hier */`. In HTML sind Kommentare nicht so wichtig wie in C oder Python. ## Abgeben Geben Sie im Ordner `homepage` ab: ```bash 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`](https://dev.inf.zone/faq/uebung-solutions/#inf-installieren). ## 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.

# Homepage Quelle: https://dev.inf.zone/exercises/12/homepage/ ## Aufgabe **Auf einen Blick** - **Was:** Eine eigene kleine Website mit HTML, CSS und JavaScript, zum Beispiel über sich selbst, Ihr Lieblingshobby, eine Aktivität neben dem Studium oder etwas anderes, das Sie interessiert. Thema und Gestaltung wählen Sie frei. - **Dateien:** Ordner `homepage` aus dem Codegerüst (`index.html`, leere `styles.css`), dazu Ihre weiteren Seiten und eine `specification.txt`. - **Mindestens:** 4 verlinkte HTML-Seiten, 10 verschiedene HTML-Tags, 5 verschiedene CSS-Selektoren, 5 verschiedene CSS-Eigenschaften, etwas Interaktives mit JavaScript. - **Prüfen:** mit `check50`, mit dem W3C-Validator und im Browser, auch in der Handyansicht. ### So wird gezählt 1. **HTML-Tags:** Jedes Tag zählt einmal, egal wie oft Sie es verwenden. ``, ``, `` und `` 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:** ```css 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 Code entsprechend Ihrem [Setup](https://dev.inf.zone/extras/setup/), klicken Sie auf Ihr Terminalfenster und führen Sie `cd` aus. Die Eingabeaufforderung Ihres Terminalfensters sollte ungefähr wie folgt aussehen: ```bash $ ``` Führen Sie als Nächstes folgenden Befehl aus: ```bash 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: ```bash 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: ```bash 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: ```bash cd homepage ``` gefolgt von Enter, um in dieses Verzeichnis zu wechseln (d. h., es zu öffnen). Ihre Eingabeaufforderung sollte jetzt ungefähr so aussehen: ```bash homepage/ $ ``` Führen Sie `ls` alleine aus, und Sie sollten einige Dateien sehen: ```bash 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! | Datei | Inhalt | | ------------ | ------ | | `index.html` | eine leere Startseite („hello, homepage“), die `styles.css` schon einbindet | | `styles.css` | leer, 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): ```html <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](#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: - [HTML](https://www.w3schools.com/html/) - [CSS](https://www.w3schools.com/css/) - [JavaScript](https://www.w3schools.com/js/) ## 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: ```bash 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: ```bash check50 -l inf-zone/exercises/2026/homepage ``` ### HTML-Validierung Kopieren Sie das HTML jeder Seite in das Textfeld des [Markup Validation Service](https://validator.w3.org/#validate_by_input) 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 ``, in CSS als `/* Kommentar hier */`. In HTML sind Kommentare nicht so wichtig wie in C oder Python. ## Abgeben Geben Sie im Ordner `homepage` ab: ```bash 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`](https://dev.inf.zone/faq/uebung-solutions/#inf-installieren). ## 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.