Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
| Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung | ||
| gf_informatik:web:cv_project [2023-10-31 15:59] – [Ziele] gra | gf_informatik:web:cv_project [2025-04-02 06:32] (aktuell) – [Ziele] gra | ||
|---|---|---|---|
| Zeile 16: | Zeile 16: | ||
| 1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in [[gf_informatik: | 1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in [[gf_informatik: | ||
| 1. Erstelle darin eine Datei `index.html`. Gebe diesem die Grundstruktur, | 1. Erstelle darin eine Datei `index.html`. Gebe diesem die Grundstruktur, | ||
| + | 1. Optional: Überlege erst, wie du deine Webseite mit folgendem Inhalt gestalten willst und erstelle ein Skizze auf Papier. Vorteil: Du weisst jetzt schon, welche html-Elemente für deine Darstellung sinnvoll sind. | ||
| 1. Verfasse nun den **Inhalt** der Website. Die Website muss enthalten: | 1. Verfasse nun den **Inhalt** der Website. Die Website muss enthalten: | ||
| 1. Dein Name als Hauptüberschrift | 1. Dein Name als Hauptüberschrift | ||
| Zeile 28: | Zeile 29: | ||
| 1. Versehe den Inhalt mit den passenden HTML-Elementen: | 1. Versehe den Inhalt mit den passenden HTML-Elementen: | ||
| 1. Formatiere die Seite mit einer eingebundenen CSS-Datei. | 1. Formatiere die Seite mit einer eingebundenen CSS-Datei. | ||
| - | 1. Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende `id` und `class`, um einzelne resp. ausgewählte Elemente zu stylen. | + | 1. Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende `class` oder `id`, um einzelne resp. ausgewählte Elemente zu stylen. |
| 1. *Optional:* Informiere dich über [[gf_informatik: | 1. *Optional:* Informiere dich über [[gf_informatik: | ||
| 1. **Abgabe:** | 1. **Abgabe:** | ||
| - | 1. Erstelle ein ZIP-File mit *allen* für die Website benötigten Dateien: `index.html`, | + | 1. Erstelle ein ZIP-Archiv |
| - | 1. Benenne das ZIP-File nach dem Muster " | + | 1. Benenne das ZIP-Archiv |
| + | 1. Wenn du das ZIP-Archiv an einem anderen Ort entpackst, sollte die Webseite nach dem Öffnen korrekt dargestellt werden. Achtung: es ist normal, dass die Webseite nicht korrekt dargestellt wird, wenn `index.html` direkt aus dem Archiv geöffnet wird - dann kann die CSS-Datei nicht gefunden werden. | ||
| ===Bewertung=== | ===Bewertung=== | ||
| Zeile 45: | Zeile 47: | ||
| * Korrekte Abgabe mit Zip-Archiv. | * Korrekte Abgabe mit Zip-Archiv. | ||
| * Wer mehr möchte als das Minimum, bietet: | * Wer mehr möchte als das Minimum, bietet: | ||
| - | * Aufwendigere | + | * Gutes Design (professioneller Gesamteindruck, |
| + | * Aufwändige | ||
| * Ansprechendes Layout mit CSS | * Ansprechendes Layout mit CSS | ||
| + | * [[https:// | ||
| * z.B. mit [[gf_informatik: | * z.B. mit [[gf_informatik: | ||
| - | * Layout passt sich an Fenstergrösse an | + | * Layout passt sich an Fenstergrösse an (ausprobieren!) |
| - | * Sieht auch auf einem Mobiltelefon gut aus (simulieren mit dem Entwicklungsmodus) | + | * Sieht auch auf einem Mobiltelefon gut aus (simulieren mit dem Entwicklungsmodus, [[https:// |
| * ev. [[gf_informatik: | * ev. [[gf_informatik: | ||
| - | * **Achtung**: | + | * **Achtung**: |
| ** Beispiel** | ** Beispiel** | ||
gra