03 Bilder

Einstieg in das Thema

Worum geht es?

Natürlich haben Webseiten auch Bilder. Bei einem LibreOffice- oder Word-Dokument sind diese eingebettet. Man hat am Ende nur eine Datei. Du schreibst deine Webseite aber mit einem Texteditor und dein Dokument ist eine reine Textdatei. Diese wissen weder etwas von Überschriften, Fettdruck, noch von Bildern. Es muss also einen anderen Weg geben, Bilder in die Webseite zu bekommen als bei einer klassischen Textverarbeitung.

Was ist das Ziel?

Am Ende kannst du

  • Bilder einfügen,
  • die Größe und die Position anpassen

und hast

  • dein Wissen über Dateiformate und
  • das Dateisystem etwas vertieft.

Erarbeitung

Theorie

Aufgaben

Bild Trabant

Zuerst sollst du alles nachvollziehen. Du findest oben ein Bild "ab03_chatgpt_trabant.png".

Aufgabe 1
Kopiere das Bild in dein Arbeitsverzeichnis und baue es in die Webseite an beliebiger Position ein. Beschreibe, wie du das Einbauen realisiert hast.
Aufgabe 2
Gibt es ein </img>?
Aufgabe 3
Stelle das Bild etwas kleiner (z.B. Breite 400) dar. Wie hast du das erreicht?

Datei mit Fehlern. Weiterhin bekommst du eine HTML-Datei mit Fehlern.

Aufgabe 4
Kopiere diese wieder in dein Verzeichnis.
Aufgabe 5
Korrigiere die Fehler und beschreibe kurz, was die Fehler waren. Wenn alles richtig ist, erscheint das Bild dreimal.

Vertiefung

Aufgabe 6
Verschiebe die Bilder in ein Unterverzeichnis "bilder" und passe den Pfad in der HTML-Datei an. Wie lautet nun dein img-Tag?
Aufgabe 7
Wie kann man ein Bild an den rechten Rand verschieben?
Aufgabe 8
Versteht irgendjemand die geographische Einordnung des Trabant-Bildes?

Und jetzt noch etwas Gemeinsames

Bilder, die man sich lädt oder von der Kamera/dem Smartphone zieht, sind oft sehr groß. Für Webseiten reichen meist Bilder geringerer Auflösung, das spart auch Datenvolumen.

Gemeinsam rechnen wir ein Bild runter und vergleichen den Speicherplatz.

Komplexe Aufgabe ohne KI

Erstelle eine Datei, die sich drei Bilder (gern auch das gleiche Bild dreimal) von verschiedenen Plätzen holt: einmal vom gleichen, einmal von einem "parallelen Verzeichnis" und einmal von einem Unterordner. Diese drei Bilder sollen unterschiedlich groß dargestellt werden.

Lasse dein Resultat von Nachbarn oder der KI prüfen. Was waren deine beiden größten Fehler?

Zusammenfassung

Was muss man wissen/können?

Du weißt

  • wie man ein Bild in eine HTML-Datei einbindet, kannst also ein Beispiel angeben und die Bestandteile erläutern,
  • wo das Bild im Dateisystem liegen muss,
  • wie man Platz und Größe ändert, dies also z.B. als Anweisungsfolge für GIMP aufscheiben können,
  • was ein Dateiformat ist und welche Formate bei Bildern gängig sind. Hier kannst du mindestens zwei Beispiele angeben.

Du kannst

  • ein Bild suchen und passend abspeichern,
  • Bilder auch in einem Bilderverzeichnis speichern,
  • die Größe justieren,
  • prüfen, ob ein Bild zu viel Speicherplatz braucht,
  • das Bild herunterrechnen und
  • das Bild auch an den linken oder rechten Rand verschieben.

Und natürlich kannst du herausbekommen, warum ein Bild nicht dargestellt wird.

Wie geht es weiter?

Das Wesentliche von HTML ist die Verlinkung einzelner Seiten. Schauen wir uns einmal an, wie das funktioniert.

Zurück
Weiter