Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
gf_informatik:web:cv_project [2024-10-30 06:06] – [Bewertung] hofgf_informatik:web:cv_project [2025-11-20 06:33] (aktuell) – [Auftrag] hof
Zeile 16: Zeile 16:
    1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in [[gf_informatik:web:uebungen#auftrag1|Auftrag 1]]).    1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in [[gf_informatik:web:uebungen#auftrag1|Auftrag 1]]).
    1. Erstelle darin eine Datei `index.html`. Gebe diesem die Grundstruktur, die jede HTML-Datei benötigt.    1. Erstelle darin eine Datei `index.html`. Gebe diesem die Grundstruktur, die jede HTML-Datei benötigt.
 +   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 von dir.
       1. Folgende Unterkapitel mit entsprechendem Inhalt:       1. Folgende Unterkapitel mit entsprechendem Inhalt:
          1. "Steckbrief" als Liste (Wichtigste Daten wie Geburtsdatum, Wohnort, ...)          1. "Steckbrief" als Liste (Wichtigste Daten wie Geburtsdatum, Wohnort, ...)
Zeile 28: Zeile 29:
     1. Versehe den Inhalt mit den passenden HTML-Elementen: Überschriften, Listen, Abschnitte, ... Versuche, alle bisher gesehenen HTML-Elemente zu verwenden.     1. Versehe den Inhalt mit den passenden HTML-Elementen: Überschriften, Listen, Abschnitte, ... Versuche, alle bisher gesehenen HTML-Elemente zu verwenden.
     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:web:gridlayout]]. Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird.     1. *Optional:* Informiere dich über [[gf_informatik:web:gridlayout]]. Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird.
     1. **Abgabe:**     1. **Abgabe:**
        1. Erstelle ein ZIP-Archiv mit *allen* für die Website benötigten Dateien: `index.html`, `style.css`, alle Bilder, ... (Brauchst du Hilfe dazu? [[https://www.youtube.com/watch?v=Kw9gB4iqUAQ|Zip-Tutorial für Windows]], [[https://www.youtube.com/watch?v=SUlI3-3mkU0|Zip-Tutorial Mac]])        1. Erstelle ein ZIP-Archiv mit *allen* für die Website benötigten Dateien: `index.html`, `style.css`, alle Bilder, ... (Brauchst du Hilfe dazu? [[https://www.youtube.com/watch?v=Kw9gB4iqUAQ|Zip-Tutorial für Windows]], [[https://www.youtube.com/watch?v=SUlI3-3mkU0|Zip-Tutorial Mac]])
-       1. Benenne das ZIP-Archiv nach dem Muster "klasse\_vorname\_nachname.zip", z.B. "2mgz\_dagobert\_duck.zip" und gebe es über die **Teams-Abgabe** ab.+       1. Benenne das ZIP-Archiv nach dem Muster "klasse\_vorname\_nachname.zip", z.B. `2mgz_dagobert_duck.zip` und gebe es über **Teams** oder **Email** ab.
        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.        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.
  
Zeile 44: Zeile 45:
       * 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: [[https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint|HTML Hint]]
       * 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:
Zeile 49: Zeile 51:
       * Aufwändige Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation, Transitions...)       * Aufwändige Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation, Transitions...)
       * Ansprechendes Layout mit CSS       * Ansprechendes Layout mit CSS
 +        * [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|SelfHTML CSS Tutorials]]
         * z.B. mit [[gf_informatik:web:gridlayout]]         * z.B. mit [[gf_informatik:web:gridlayout]]
         * Layout passt sich an Fenstergrösse an (ausprobieren!)         * 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://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Viewportangabe|Viewportangabe]] verwenden)
       * ev. [[gf_informatik:web:js]]       * ev. [[gf_informatik:web:js]]
     * **Achtung**: Du musst jede Zeile deiner HTML- und CSS-Datei verstehen und erklären können.     * **Achtung**: Du musst jede Zeile deiner HTML- und CSS-Datei verstehen und erklären können.
  • gf_informatik/web/cv_project.1730268406.txt.gz
  • Zuletzt geändert: 2024-10-30 06:06
  • von hof