Übung 2: Bilder und Verlinkung

  1. Erstelle den Ordner "Lektion 2" unter dem Pfad P:\Informatik\Block 3 - Webprogrammierung\Lektion 2\
  2. Im Ordner "Lektion 2": Erstelle die Dateien bigdata.html, visitenkarte.html und geschichte.html.
  3. Du wirst diese Dateien in den verschiedenen Aufgaben brauchen. Welche zu verwenden ist, steht in Klammern neben dem Aufgabentitel.

Aufgabe 1: Visual Studio Code

  1. Öffne Visual Studio Code
  2. "Open Folder" –> Gehe ins Verzeichnis P:\Informatik\Block 3 - HTML und CSS\Lektion 2\ hinein.

    Links wird die Verzeichnisstruktur angezeigt:
  3. Öffne die erste html-Datei.
  4. Lass dir die html-Datei im Browser anzeigen per Klick auf Run > Run Without Debugging   (wähle Chrome aus). Tastenkombination: Ctrl + F5
  5. Der Debug-Modus sollte per Klick auf das rote Rechteck wieder beendet werden.

Aufgabe 2 (bigdata.html)

  1. Erstelle eine HTML-Datei bigdata.html, in der du die Grundstruktur einfügst.
  2. Erstelle eine Überschrift "Big Data" und füge zwei Bilder ein:
  3. Bild 1: Das Bild auf der Seite https://oinf.ch/wp-content/uploads/BigData5V.png
    (verlinke direkt auf diese Bilddatei)
  4. Bild 2: Die Datei l2-bigdata.jpg, die du herunterlädst und im denselben Ordner speicherst, in dem sich deine HTML-Datei befindet.
  5. Die Bilder sind beide 300 Pixel hoch und stehen nebeneinander.
  6. Zuunterst steht ein Absatz mit den beiden Quellen OINF.ch und https://www.smart-digits.com/2013/07/big-data-was-ist-wirklich-sinnvoll-fur-medienhauser/
  7. Setze je einen Hyperlink, der die beiden Quellen in einem neuen Tab öffnet.

Aufgabe 3 (visitenkarte.html)

Gestalte deine eigene Visitenkarte bestehend aus:

Aufgabe 4 (geschichte.html)

Suche im Internet nach einer Persönlichkeit, die die Informatik geprägt hat, (abgesehen von Tim Berners-Lee) und erstelle eine kurze Portraitseite zu dieser Person mit folgendem Inhalt: