Kleines Nachschlagewerk Informatik
Bilder
Worum geht es?
Neben Text sind naturlich die Bilder die wichtigsten Elemente einer Webseite.
Einfügen von Bildern
Für ein Bild braucht man das img-Tag, welches als Argument den Dateinamen des Bildes benötigt. Nach src kommt der Dateiname des Bildes. In diesem Beispiel heißt das Bild bild.jpg.

      Erst kommt etwas Text.
      <img src="bild.jpg">
      Und dann kommt wieder Text.
            
Und so sieht es aus: Drücken

Mit Zeilenumbrüchen ordnet man die Texte und Bilder vertikal.

      Erst kommt etwas Text.<br>
      <img src="bild.jpg"><br>
      Und dann kommt wieder Text.
            
Und so sieht es aus: Drücken
Verfeinerungen
Man kann die Größe eines Bildes verändern. Dazu gibt man einfach die Größe (z.B. die Breite) an.

      Erst kommt etwas Text.<br>
      <img src="bild.jpg" width=100><br>
      Und dann kommt wieder Text.
            
Und so sieht es aus: Drücken

Es ergeht hier der Tipp, damit vorsichtig zu sein. Wenn ein Bild zu groß ist, ist es besser, dies mit einem Grafikprogramm - z.B. GIMP - auf die Wunschgröße herunterzurechnen. Damit spart man auch Ladezeit.

Eine weitere gewünschte Sache ist es, Text um das Bild herum fließen zu lassen. Dabei muss man nur sagen, ob das Bild links oder rechts sein soll.

      <img src="bild.jpg" align=left>
      <img src="bild.jpg" align=right>
      Viel Text. Viel Text.
            
Und so sieht es aus: Drücken

Um zu verhindern, dass der Text zu nahe an das Bild heran kommt, kann man horizontalen und vertikalen Raum geben.

      <img hspace=10px vspace=10px src="bild.jpg" align=left>
      <img src="bild.jpg" align=right>
      Viel Text. Viel Text.
            
Und so sieht es aus: Drücken
Hinweis
Dateipfade sind immer relativ zur Webseite anzugeben, niemals darf ein absoluter Pfad (C:\daten\bild.jpg oder /home/alf/daten/bild.jpg) angegeben werden, denn später liegt die Webseite ja auf einem ganz anderen Rechner.

Liegt das bild in einem Ordner (z.B. daten) eine Ebene tiefer, so schreibt man

      <img src="daten/bild.jpg">
            
Liegt der Ordner, der das Bild enthält, eine Ebene höher, so schreibt man

      <img src="../daten/bild.jpg">
            
Die beiden Punkte bedeuten, eine Ebene nach oben zu gehen. Verzeichnisse trennt man mit /, nicht mit \.