Eine existierende Webseite verändern

Text ändern

Laden Sie die Dateien beispiel_01.html und beispiel_01.css herunter. Sie werden danach auf den Pool-Rechnern automatisch im Verzeichnis "Dateien" stehen:

Download beispiel_01.html

Download beispiel_01.css


  1. Öffnen Sie den Editor (Visual Studio Code). Sie müssten auf der linken Seite die beiden Dateien sehen.
    Dateien in VS
  2. Öffnen Sie die Datei beispiel_01.html mit einem Browser ("Open in Default Browser" im Kontextmenü).
    Dateien im Browser öffnen

  3. Öffnen Sie nun die Datei beispiel_01.html im Editor und ändern Sie den Text der Überschrift.
  4. Öffnen Sie die Datei erneut mit dem Browser (bzw. aktualisieren Sie die Ansicht im Browser) und überprüfen Ihre Änderungen.
Hintergrundfarbe ändern
  1. Öffnen Sie nun die Datei beispiel_01.css im Editor und ändern Sie die Hintergrundfarbe der Seite.
  2. Öffnen Sie die Datei beispiel_01.html erneut mit dem Browser (bzw. aktualisieren Sie die Ansicht im Browser) und überprüfen Ihren Änderungen.
Emojis ändern
  1. Öffnen Sie die Datei beispiel_01.html im Editor und wechseln die Emojis aus. Hinweis: Emojis können folgendermaßen getippt werden:
    • Unter Windows: Win + . (Windows-Taste + Punkt), dann öffnet sich der Emoji-Picker.
    • Unter macOS: Ctrl + Cmd + Leertaste, dann öffnet sich der Emoji-Picker.
  2. Öffnen Sie die Datei beispiel_01.html erneut mit dem Browser (bzw. aktualisieren Sie die Ansicht im Browser) und überprüfen Ihren Änderungen.
CSS-Effekte ändern

Kopieren Sie die Dateien beispiel_02.html und beispiel_02.css in Ihr eigenes Verzeichnis:

Download beispiel_02.html

Download beispiel_02.css

  1. Öffnen Sie die Datei beispiel_02.html mit einem Browser ("Open in Default Browser" im Kontextmenü) und betrachten Sie zwei Elemente auf der Seite:
    1. Die Überschrift: Welcher Effekt wurde hier umgesetzt?
    2. Der Button: Fahren Sie mit der Maus über den Button. Wie verändert sich sein Aussehen?
  2. Öffnen Sie nun die Datei beispiel_02.css im Editor und versuchen herauszufinden, an welchen Stellen die obigen Effekte hinterlegt sind.
  3. Versuchen Sie, die CSS-Inhalte so anzupassen, dass
    1. die Überschrift über einen größeren Bereich, z.B. 20px schwebt,
    2. der Button noch größer wird, z.B. doppelt so groß, wenn man mit der Baus über ihn fährt,
    3. der Button noch stärker gedreht wird, z.B. um 20 Grad.
  4. Öffnen Sie die Datei erneut mit dem Browser (bzw. aktualisieren Sie die Ansicht im Browser) und überprüfen Ihren Änderungen.