Bilder werden nicht direkt in das HTML-Dokument eingebettet, sonder auf sie verwiesen.
Hierfür wird das Image-Tag <img > verwendet.
Das Attribute src legt die URL zum Bild fest.
Diese URL ist die gleiche wie bei einem Link.
Der html5-Standart erfordert für jedes Bild ein alt-Attribut, welches eine textuelle Beschreibung des
Bildes beinhaltet.
Über die Attribte width und height kann die Breite und/oder Höhe des Bildes angepasst werden.
Es ist allerdings besser das Bild in passender Größe zu speichern, da es sonst entweder mehr Datenübertragung
erfordert als nötig oder
wenn es großgezogen wird evtl. pixelig wirkt.
Es gibt viele unterschiedliche Arten Bilddaten in Dateien abzulegen. Nicht jedes Dateiformat eignet sich für
alle Bilder. Daher hier ein ganz kurzer Überblick:
.jpeg/.jpg eigenen sich für Fotos von Personen und Landschaften
eignet sich nicht für Graphiken mit Strichzeichnungen
unterstützt keine Transparenz
.png eigenen sich für Fotos und Graphiken mit Strichzeichnungen, da es verlustfrei ist, kann
dadurch aber größere Dateien ergeben als jpg
unterstützt Transparenz und durchscheinen
.gif Eignet sich für einfache Bilder, da es maximal 256 verschiedene Farben hat, es unterstützt
aber Transparenz
Rechtliches
Ein Foto ist nach deutschem Recht immer ein Werk, welches eine ausreichende Schöpfungshöhe hat um als Kunstwerk
zu gelten.
Damit hat der Fotograf das Urheberrecht an seinem Bild und darf selbst über die Verwendung des Bildes
entscheiden.
Man braucht daher unbedingt die Einwilligung, bevor man das Bild im Internet verwendet.
Es gibt freie Bilder unter unterschiedlichen Lizenzmodellen.
Hier muss man sich genau informieren, denn manche Lizenzen freier Bilder fordern die Nennung des Fotografen,
oder eine Quellenangabe.
Manche Bilder sind nur für gewisse Nutzungen frei. Auch bei Screenshots muss man zwingend die Rechte der
Softwarehersteller lesen, die meist im Internet zu finden sind.
Denn auch die Oberfläche eines Programms oder Spiels ist urheberrechtlich geschützt. Eine Abbildung eines
Programms ist daher nicht einfach frei, sondern bedarf einer Freigabe des Rechteinhabers.
Aufgaben
Beispielbilder
Diese Bilder können heruntergeladen und verwendet werden:
Laden sie sich eins der obigen Bilder herunter und speichern sie es als "bild.png" im selben
Verzeichnis wie ihre html-Datei.
Binden Sie das Bild jetzt mit einem img-Tag ein.
<imgsrc="bild.png"alt="ein
Bild">
Ändern Sie den Bildnamen im img-Tag um einen Buchstaben.
Jetzt existiert die Bild-Datei nicht auf die verwiesen wird - was zeigt der Browser an.
Der Browser zeigt ein Icon (kleines Bild) an um anzuzeigen, dass hier eine Bild-URL nicht gefunden
wurde.
So sieht es aus:
Erweitern Sie ihre html-Datei um ein weiteres Bild, dass sie über die URL einbinden.
Als URL können Sie "http://www.holzers-familie.de/schule/html/img/cool.png"
verwenden.
Finden Sie ein Bild im Internet und binden Sie es über die URL in ihre Seite ein. Vorsicht: auch bei Wikipedia-Graphiken muss man sich das Urheberrecht genau ansehen. Veröffentlichen Sie keine Seite im Internet bevor Sie nicht die Rechte der Bilder geklärt haben.
Auch bei einer Referenz über die URL machen Sie sich das Bild zu eigen.
Ein Bild kann auch in eine Tabelle eingebunden werden. Das eignet sich z.B. um Text neben ein Bild zu
stellen.
Verwenden Sie eine Tabelle mit 2 Spalten, in der linken steht Text in der rechten ein Bild und darunter eine
Bildunterschrift.
Die erste Spalte hat also nur eine Zeile (rowspan), die zweite zwei.
Es könnte so aussehen:
Wenn ich abends auf der Terasse meiner Villa sitze genieße ich diesen Ausblick.
Ich bin mit dieser Website so reich geworden, dass ich mir das alles leisten kann.
Ja ich besitze eine Website und ein gefaktes Bild und ich schäme mich nicht dafür.
Es ist ein schönes Leben.
Blick von meiner Terasse
Ein Bild kann auch in einem Link verwendet werden. D.h. wenn man auf das Bild klickt, wird man zu einer
anderen Seite geleitet.
Fügen Sie in ihren Seiten Links zu sinnvollen Zielen ein.
Hier ist das Bild ein Link der zu einem Ziel führt, dass man nicht erwarten würde (ja, so formuliert man Click-Bait):
Wenn ich abends auf der Terasse meiner Villa sitze genieße ich diesen Ausblick.
Ich bin mit dieser Website so reich geworden, dass ich mir das alles leisten kann.
Ja ich besitze eine Website und ein gefaktes Bild und ich schäme mich nicht dafür.
Es ist ein schönes Leben.
Blick von meiner Terasse
Sie sind jetzt groß! Nehmen Sie sich ein Wirtschaftsthema und gestalten Sie eine Seite dazu. Es sollten
Überschriften
Texte
Text-Herforhebungen
Tabellen
Links
Bilder
enthalten sein.
Diese Seite können wir in Zukunft verwenden um sie mit CSS zu verschönern.
