Das Bild einfügen Optionale Anpassungen
. 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.  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. Ö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. 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> 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. 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"> 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. 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=""). 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. 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. 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.)  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. 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"> 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>
Lade das Bild hoch Öffne deine HTML-Datei. Beginne mit dem img Tag. Finde die URL deines Bilds. Setze die URL in ein src Attribut. Füge ein alt Attribut hinzu. Speichere deine Änderungen. Ändere die Größe des Bilds. Füge einen Tooltip ein. Mache einen Link daraus.
https://www.wikihow.com/Insert-Images-with-HTML https://www.wikihow.com/Insert-Images-with-HTML
Inserting the Image Optional Adjustments