HTML: Bilder einfügen

Also gut… Du kannst jetzt zwar Text und Überschriften in deinem Browser anzeigen (wenn nicht: Schau hier). Aber ohne Bilder ist es an der ein oder anderen Stelle langweilig. Und außerdem: Ein Bild sagt mehr als 1000 Worte.

Dafür gibt’s doch bestimmt auch einen Tag, oder?

Richtig! <img src=“Dateiname.jpg“ />

Auf Wunsch kann auch noch die Breite sowie Höhe (uvm.) des Bildes festgelegt werden, aber als Basis funktioniert dieser Tag so. Des Weiteren können auch andere Bilddateitypen verwendet werden.

<br />
&lt;html&gt;<br />
    &lt;head&gt;<br />
        &lt;title&gt; Bild !!! &lt;/title&gt;<br />
    &lt;/head&gt;<br />
    &lt;body&gt;<br />
        &lt;h1&gt; Ein Bild Urlaubsbild... &lt;/h1&gt;<br />
        &lt;img src=&quot;amsterdam2016.JPG&quot; width=&quot;300&quot; height=&quot;200&quot; /&gt;<br />
    &lt;/body&gt;<br />
&lt;/html&gt;<br />

Ansehen

Erklärung: Der img-Tag bindet Bilder ein. Dabei steht img für image (engl. für Bild). Dieser Tag kennt, und das ist neu, im Gegensatz zu dem p-Tag und den Überschriften, Attribute. Diese sind src, width & height (es gibt noch mehr ;-)):

  • src: ein absoluter oder relativer Pfad zum Bild (im Beispiel oben ist es ein relativer, da nur der Dateiname angegeben ist. Dies bedeutet wiederum, dass Bild und HTML-Datei in dem  selben Order liegen.
  • width: Die Breite des Bildes (in Pixeln)
  • height: Die Höhe des Bildes (in Pixeln)

Für den Anfang sollte das erst einmal reichen 🙂 Wer Lust hat kann ja das bereits gelernte (Texte und Überschriften) in eine Datei bringen und so verbinden. Übung macht den Meister.

 

<Tim Poerschke />

Was denkst du über diesen Post?
  • Gut (0)
  • Hilfreich (1)
  • Nicht gut (0)
  • Lustig 😀 (0)

von | Kategorie: Programmierung
Schlagwörter: // //

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

26 − 24 =