Bilder mit HTML einfügen

PDF download PDF herunterladen
unter Mitarbeit von Tyrone Showers

Referenzen

PDF download PDF herunterladen

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 download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/59\/Insert-Images-with-HTML-Step-1-Version-10.jpg\/v4-460px-Insert-Images-with-HTML-Step-1-Version-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/59\/Insert-Images-with-HTML-Step-1-Version-10.jpg\/v4-728px-Insert-Images-with-HTML-Step-1-Version-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Insert-Images-with-HTML-Step-2-Version-8.jpg\/v4-460px-Insert-Images-with-HTML-Step-2-Version-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Insert-Images-with-HTML-Step-2-Version-8.jpg\/v4-728px-Insert-Images-with-HTML-Step-2-Version-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ö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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Insert-Images-with-HTML-Step-3-Version-8.jpg\/v4-460px-Insert-Images-with-HTML-Step-3-Version-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Insert-Images-with-HTML-Step-3-Version-8.jpg\/v4-728px-Insert-Images-with-HTML-Step-3-Version-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Insert-Images-with-HTML-Step-4-Version-9.jpg\/v4-460px-Insert-Images-with-HTML-Step-4-Version-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Insert-Images-with-HTML-Step-4-Version-9.jpg\/v4-728px-Insert-Images-with-HTML-Step-4-Version-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3d\/Insert-Images-with-HTML-Step-5-Version-7.jpg\/v4-460px-Insert-Images-with-HTML-Step-5-Version-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Insert-Images-with-HTML-Step-5-Version-7.jpg\/v4-728px-Insert-Images-with-HTML-Step-5-Version-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/26\/Insert-Images-with-HTML-Step-6-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-6-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/26\/Insert-Images-with-HTML-Step-6-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-6-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] Folge diesem Beispiel und ändere den Text zwischen den Anführungszeichen:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="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=""). [3]
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-7-Version-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Insert-Images-with-HTML-Step-7-Version-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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 download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-8-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Insert-Images-with-HTML-Step-8-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-8-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] Wenn du eine schnelle, praktische Anpassung möchtest, verwende dieses Format:
    • <img src="http://example.com/example.png" alt="zeige dies an" width=200 height=200> (Anzahl der Pixel oder die telefonfreundlicheren "CSS-Pixel" in HTML5.) [5] [6]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/68\/Insert-Images-with-HTML-Step-9-Version-6.jpg\/v4-460px-Insert-Images-with-HTML-Step-9-Version-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/68\/Insert-Images-with-HTML-Step-9-Version-6.jpg\/v4-728px-Insert-Images-with-HTML-Step-9-Version-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/36\/Insert-Images-with-HTML-Step-10-Version-5.jpg\/v4-460px-Insert-Images-with-HTML-Step-10-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/36\/Insert-Images-with-HTML-Step-10-Version-5.jpg\/v4-728px-Insert-Images-with-HTML-Step-10-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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] 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]
Werbeanzeige

Verwandte wikiHows

Kommentare in HTML Code einfügen
Ein Hintergrund Bild in HTML einfügen
HTM Dateien öffnen
Einen E mail Link in HTML erstellen
Eine einfache Webseite mit HTML gestalten
HTML Dateien bearbeiten
Die Farbe einer Schaltfläche in HTML ändern
Text in HTML blinken lassen
Eine Webseite mit einfachem HTML hacken
Ein Dropdown Menü mit HTML und CSS erstellen
Text in HTML zentrieren
Einen Download Knopf auf einer Webseite erstellen
Mit HTML innerhalb von einer Seite verlinken
In HTML eine Linie einfügen
Werbeanzeige

Referenzen

  1. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  2. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  3. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
  4. ↑ http://www.htmlcodetutorial.com/images/_IMG_WIDTH.html
  5. ↑ http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  6. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
  7. ↑ http://www.htmlgoodies.com/primers/html/article.php/3478181
  8. ↑ http://www.webweaver.nu/html-tips/hotlinking.shtml

Über dieses wikiHow

Zusammenfassung X

1. Lade das Bild hoch.
2. Öffne deine HTML-Datei.
3. Tippe <img src=""> ein.
4. Füge die URL des Bildes in die Anführungsstriche ein.

In anderen Sprachen
Diese Seite wurde bisher 26.331 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige