Bilder mit HTML einfügen

Bilder in deine Webseite oder in deine Profile in sozialen Netzwerken einzufügen ist eine tolle Möglichkeit, deine Seite aufzupeppen. Der HTML-Code zum Einfügen von Bildern ist einfach und für einen HTML-Einsteiger oft eine der ersten Lektionen.

Teil 1

Teil 1 von 2:

Das Bild einfügen

PDF herunterladen

1
Lade das Bild hoch. Es gibt viele kostenlose Hosting-Services wie Picasa Web Alben, Imgur, Flickr oder Photobucket. Lies dir aufmerksam die Bedingungen durch. Manche Services verringern die Bildqualität oder nehmen dein Bild heraus, wenn zu viele Leute es aufrufen (da dies deren Bandbreite verbraucht).
- Bei manchen Blog-Hostern kannst du über die Admin-Tools des Blogs Bilder hochladen.
- Wenn du einen kostenpflichtigen Web-Host nutzt, lade das Bild mit FTP auf deine eigene Seite hoch. Die Erstellung eines "Bilder"-Verzeichnisses wird empfohlen, um deine Bilder organisiert zu halten.^{[1]XForschungsquelle}
- Wenn du ein Bild auf einer anderen Webseite verwenden möchtest, bitte den Ersteller um seine Erlaubnis. Wenn er sie dir gewährt, dann lade das Bild herunter und lade es dann auf eine Bild-Hosting-Seite hoch.
2
Öffne deine HTML-Datei. Öffne das HTML-Dokument der Webseite, in der das Bild angezeigt werden soll.
- Wenn du ein Bild in ein Forum einfügen möchtest, kannst du direkt in den Post tippen. Viele Foren verwenden anstelle von HTML ein individuelles System. Bitte andere im Forum um Hilfe, wenn dies nicht funktioniert.
3
Beginne mit dem img Tag. Finde die Stelle im HTML body, wo du dein Bild einfügen möchtest. Schreibe den Tag <img> hierhin. Dies ist ein leerer Tag, was bedeutet, dass er alleinsteht, ohne schließenden Tag. Alles, was du zum Anzeigen deines Bilds brauchst, kommt zwischen die zwei spitzen Klammern.
- <img>
4
Finde die URL deines Bilds. Gehe auf die Webseite, auf der das Bild gehostet ist. Mache einen Rechtsklick auf das Bild (auf einem Mac CTRL+Klick) und wähle "Bildadresse kopieren". Du kannst auch auf "Bild anzeigen" klicken, um das Bild allein auf einer Seite zu sehen, und dann die URL in der Adressleiste kopieren.
- Wenn du das Bild in ein Bilderverzeichnis deiner eigenen Webseite hochgeladen hast, verlinke es mit /images/dateiname. Wenn dies nicht funktioniert, befindet sich das Bilderverzeichnis vermutlich in einem anderen Ordner. Verschiebe es ins Stammverzeichnis.
5
Setze die URL in ein src Attribut. Wie du vielleicht bereits weißt, kommen HTML-Attribute zum Bearbeiten in einen Tag. Das src Attribut ist die Abkürzung von "source" und gibt dem Browser an, wo er nach dem Bild suchen soll. Schreibe src=" " und füge die Bild-URL zwischen den Anführungszeichen ein. Hier ist ein Beispiel:
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
6
Füge ein alt Attribut hinzu. Technisch gesehen hat dein Code bereits alles, was nötig ist, damit das Bild angezeigt werden kann, aber am besten fügst du auch noch ein alt Attribut ein. Dies gibt dem Browser an, welcher Text angezeigt werden soll, wenn das Bild nicht geladen werden kann. Wichtiger ist, dass es den Suchmaschinen hilft herauszufinden, worum es in deinem Bild geht, und es lässt Screen Reader das Bild Besuchern mit einer Sehbehinderung beschreiben.^{[2]XForschungsquelle} Folge diesem Beispiel und ändere den Text zwischen den Anführungszeichen:
- <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="How.com.vn Deutsch: my dog eating a tangerine">
- Wenn das Bild für den Inhalt der Seite nicht wichtig ist, füge das alt Attribut ohne Text ein (alt="How.com.vn Deutsch: ").^{[3]XForschungsquelle}
Gehe auf die Seite, die du gerade bearbeitet hast, oder lade die Seite neu, wenn du sie bereits offen hast. Du solltest jetzt dein Bild sehen. Wenn es die falsche Größe hat oder du aus einem anderen Grund nicht zufrieden damit bist, mache mit dem nächsten Abschnitt weiter.
Werbeanzeige

Teil 2

Teil 2 von 2:

Optionale Anpassungen

PDF herunterladen

1
Ändere die Größe des Bilds. Passe die Größe am besten mit einer kostenlosen Bearbeitungssoftware an und lade dann die neue Version hoch. Wenn du in HTML Angaben für die Breite width und Höhe height machst, erkennt der Browser, ob er das Bild verkleinern oder vergrößern muss, was bei den verschiedenen Browsern zu ungleichmäßigen Ergebnissen und (selten) zu Anzeigenfehlern führt.^{[4]XForschungsquelle} Wenn du eine schnelle, praktische Anpassung möchtest, verwende dieses Format:
- <img src="http://example.com/example.png" alt="How.com.vn Deutsch: zeige dies an" width=200 height=200> (Anzahl der Pixel oder die telefonfreundlicheren "CSS-Pixel" in HTML5.)^{[5]XForschungsquelle}^{[6]XForschungsquelle}
- oder <img src="http://example.com/example.png" width=100% height=10%> (Prozentzahl der Abmessungen auf der Webseite oder Prozentzahl eines HTML-Elements mit dem Bild.)
- Wenn du nur ein Attribut eingibst (width oder height), sollte der Browser das Verhältnis von Breite zu Höhe beibehalten.
2
Füge einen Tooltip ein. Mit dem Attribut title kannst du einen zusätzlichen Kommentar oder Informationen über das Bild einfügen. Du kannst hier z. B. den Künstler nennen. In den meisten Fällen wird dieser Text angezeigt, wenn der Besucher mit der Maus über das Bild fährt.
- <img src="http://example.com/example.png" title="Foto von J. Godfrey">
3
Mache einen Link daraus. Füge hierfür den image Tag im <a></a> Hyperlink-Tag ein. Hier ist ein Beispiel:
- <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
Werbeanzeige

Tipps

Behalte für den Fall der Fälle ein Backup des Bilds auf deinem Computer.
GIF-Bilder funktionieren für Logos oder Cartoons gut, wohingegen JPEG-Bilder gut für komplexe Bilder wie Fotos funktionieren.
Stelle sicher, dass die URL das Dateiformat des Bilds (also .jpg, .gif etc.) enthält.
In den meisten Fällen solltest du dich an Bilder mit den Dateiformaten .gif, .jpeg, .jpg oder .png halten.^{[7]XForschungsquelle} Es ist unwahrscheinlich, dass andere Formate in allen Browsern korrekt angezeigt werden.

Werbeanzeige

Warnungen

Füge nicht die URL der Webseite einer anderen Person ein. Dies beansprucht Bandbreite auf der Seite der anderen Person, ohne Besucher auf ihre Seite zu bringen. Abgesehen davon, dass es nicht der Netiquette entspricht, verschwindet das Bild, wenn die verlinkte Seite down ist. Wenn der Web-Host sieht, was du tust, kann er sogar das Bild ändern, das auf deiner Seite angezeigt wird.^{[8]XForschungsquelle}

Werbeanzeige