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-22 16:23] – hof | gf_informatik:web:cv_project [2025-11-20 06:33] (aktuell) – [Auftrag] hof | ||
|---|---|---|---|
| Zeile 3: | Zeile 3: | ||
| ===Ziele=== | ===Ziele=== | ||
| - | | + | |
| - | * Dadurch das bisher | + | * Dadurch das bisher |
| - | * Selbständig arbeiten, Anweisungen genau lesen und befolgen können | + | * Selbständig arbeiten, Anweisungen genau lesen und befolgen können. |
| Die Resultate werden innerhalb der KSR aufgeschaltet und können von anderen besichtigt werden (begründete Ausnahmen möglich). | Die Resultate werden innerhalb der KSR aufgeschaltet und können von anderen besichtigt werden (begründete Ausnahmen möglich). | ||
| Zeile 13: | Zeile 13: | ||
| ===Auftrag=== | ===Auftrag=== | ||
| - | 1. Erstelle einen neuen Ordner | + | 1. Erstelle einen neuen Ordner |
| - | 1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in Auftrag | + | 1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in [[gf_informatik: |
| - | 1. Erstelle darin ein File `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 | ||
| - | 1. Foto von dir. | + | 1. Foto oder Illustration |
| 1. Folgende Unterkapitel mit entsprechendem Inhalt: | 1. Folgende Unterkapitel mit entsprechendem Inhalt: | ||
| 1. " | 1. " | ||
| Zeile 27: | Zeile 28: | ||
| 1. Optional: weitere Kapitel | 1. Optional: weitere Kapitel | ||
| 1. Versehe den Inhalt mit den passenden HTML-Elementen: | 1. Versehe den Inhalt mit den passenden HTML-Elementen: | ||
| - | 1. Erstelle nun ein File `style.css` und binde es im HTML-File ein. | + | 1. Formatiere die Seite mit einer eingebundenen CSS-Datei. |
| - | 1. Style nun mithilfe von CSS deine Website ansprechend. 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 Grid-Layouts (unten). Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird. | + | 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 38: | Zeile 40: | ||
| * Verspätete Abgabe kostet einen Notenpunkt Abzug. | * Verspätete Abgabe kostet einen Notenpunkt Abzug. | ||
| * Minimal-Ziel (ca. die Note 4): | * Minimal-Ziel (ca. die Note 4): | ||
| - | * echter Lebenslauf für dich gemäss obigem Auftrag | + | * echter Lebenslauf für dich gemäss obigem Auftrag |
| * Trennung von Inhalt (HTML) und Darstellung (CSS) | * Trennung von Inhalt (HTML) und Darstellung (CSS) | ||
| * HTML: Verwendung von Überschriften, | * HTML: Verwendung von Überschriften, | ||
| * CSS: Ansprechende Formatierung (Farben, Text-Stil) | * CSS: Ansprechende Formatierung (Farben, Text-Stil) | ||
| * Korrekte Syntax (Struktur HTML, Einbindung CSS, Dateiformate...) | * Korrekte Syntax (Struktur HTML, Einbindung CSS, Dateiformate...) | ||
| + | * Hilfreiche VSCode-Erweiterung: | ||
| + | * 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:// |
| - | * attraktive Texte | + | * ev. [[gf_informatik: |
| - | * ev. JavaScript | + | |
| - | * Achtung: | + | |
| ** Beispiel** | ** Beispiel** | ||
| Zeile 58: | Zeile 63: | ||
| ** Hinweise & Tipps ** | ** Hinweise & Tipps ** | ||
| * Elemente wie Bilder links oder rechts [[https:// | * Elemente wie Bilder links oder rechts [[https:// | ||
| - | * Verhindern, dass der Inhalt zu breit wird: Geben Sie dem < | + | * Verhindern, dass der Inhalt zu breit wird: Gib dem `< |
| * Breite von Elementen steuern über [[https:// | * Breite von Elementen steuern über [[https:// | ||
hof