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-11-04 07:20] – [Bewertung] hofgf_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: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:**
Zeile 52: Zeile 53:
         * 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.1730704858.txt.gz
  • Zuletzt geändert: 2024-11-04 07:20
  • von hof