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 [2023-10-24 18:49] – [Bewertung] hofgf_informatik:web:cv_project [2025-04-02 06:32] (aktuell) – [Ziele] gra
Zeile 3: Zeile 3:
 ===Ziele=== ===Ziele===
  
-   * Erstellen eine einfache Website mit einem kurzen Lebenslauf zu dir. +   * Eine einfache Website mit einem kurzen Lebenslauf zu dir erstellen. 
-   * Dadurch das bisher gelernte (Grundlagen HTML & CSS) anzuwenden und festigen. +   * Dadurch das bisher Gelernte (Grundlagen HTML & CSS) anwenden und festigen. 
-   * 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 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
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-File 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-File 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 die **Teams-Abgabe** 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.
  
 ===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 Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation...)+      * Gutes Design (professioneller Gesamteindruck, durchgehendes Farb- und Schriftkonzept, einheitliche Abstände...) 
 +      * 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 +        * 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**: Ich rate davon ab, Web-Frameworks oder Website-Building-Tools zu verwenden. Falls du das machen willst, erwarte ich, dass du deren Details verstehst und erklären kannst.+    * **Achtung**: Du musst jede Zeile deiner HTML- und CSS-Datei verstehen und erklären können.
  
 ** Beispiel** ** Beispiel**
Zeile 58: Zeile 62:
 ** Hinweise & Tipps ** ** Hinweise & Tipps **
       * Elemente wie Bilder links oder rechts [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/float_und_clear|positionieren]]       * Elemente wie Bilder links oder rechts [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/float_und_clear|positionieren]]
-      * Verhindern, dass der Inhalt zu breit wird: Gib dem `<body>` eine [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grundstruktur#Maximale_Breite_festlegen|max-width]] von vielleicht `60em` und eine `margin: auto 0;`+      * Verhindern, dass der Inhalt zu breit wird: Gib dem `<body>` eine [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grundstruktur#Maximale_Breite_festlegen|max-width]] von vielleicht `60em` und eine `margin: 0 auto;`
       * Breite von Elementen steuern über [[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/width|width]]       * Breite von Elementen steuern über [[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/width|width]]
  
  • gf_informatik/web/cv_project.1698173380.txt.gz
  • Zuletzt geändert: 2023-10-24 18:49
  • von hof