x

HTML Grundkurs: Bilder einfügen

In diesem Beitrag zeigen wir dir, wie du Bilder in deine Webseiten einfügst.

Play Video

Ein eigenes Bild einfügen

Um Bilder per HTML in eine Webseite einzubauen, verwendet man das Img-Tag. „Img“ ist dabei die Abkürzung von „Image“, was auf Deutsch so viel wie Bild heißt.

Das Img-Tag muss nicht geschlossen werden. Es ist ein sogenannter Standalone-Tag.

<img>


Ich werde dir jetzt zeigen, wie du eigene Bilder zu deiner Webseite hinzufügen kannst. Anschließend zeige ich dir dann noch, wie du Bilder aus dem Internet in deine Webseite einbauen kannst.

Als erstes benötigst du natürlich ein Bild, das am besten im Dateiformat JPG oder PNG abgespeichert ist. Ich habe mir hierfür ein Foto herausgesucht, das ich vor ein paar Monaten in Zypern geschossen habe.

Nun erstellen wir in unserem HTML Grundkurs Ordner einen neuen Ordner in dem später alle Bilder hineinkommen. Ich nenne diesen Ordner daher einfach „bilder“. Kopiere alle deine Bilder auch in Zukunft in diesen Ordner hinein.

Öffne jetzt deine index.html Datei und tippe genau wie ich das Image-Tag ein.

<img>


Innerhalb des Img-Tag verwenden wir das Attribut „src“, um ein Bild mit unserem Img-Tag zu verbinden.

Src ist dabei die Abkürzung von dem englischen Word „source“, das auf Deutsch Quelle bedeutet. In dieses Attribut tragen wir den Pfad zu unserer Bilddatei ein. Wichtig ist hier, nicht die Endung des Dateityps zu vergessen.

<img src="./bilder/katze_beim_markt.jpg">

Ein Bild aus dem Internet einfügen

Jetzt zeige ich dir noch, wie du ein Bild aus dem Internet in deine Webseite einbauen kannst. Ich gehe hierzu auf unsere HTML Grundkurs Seite, mache einen Rechtsklick auf ein Bild und klicke dann auf „Bild in neuen Tab öffnen“. Anschließend kopiere ich mir die URL, die zu diesem Bild führt.

Du kannst hierfür natürlich jedes andere Bild aus dem Internet verwenden.

Öffne jetzt wieder deine index.html Datei und tippe einen neuen Images-Tag hinein. In das Source-Attribut musst du jetzt nur noch die soeben kopierte URL eintragen.

<img src="https://www.sifa-digital.de/wp-content/uploads/2017/01/html_grundkurs_video_03_aufbau_einer_html-datei.jpg">


Um unsere index.html Datei zu testen, speichere die Datei ab und öffne sie in deinem Browser. Sollte jetzt dein Browser beide Bilder wiedergeben, dann hast du alles richtig gemacht.

Das ALT-Attribut

Zum Schluss möchte ich dir noch einen kleinen Tipp geben.

Füge deinen Bildern immer ein ALT-Attribut hinzu. Im ALT-Attribut sollte sich eine kurze Beschreibung aus wenigen Worten zu deinen Bildern befinden.

Dieses Attribut hilft Webcrawler dabei, deine Bilder richtig zuzuordnen und sorgt dafür, dass auch die Bilder deiner Webseite von einem Computer vorgelesen werden können. Diese Funktion ist für Menschen, die schlecht sehen oder blind sind sehr wichtig.

<img src="./bilder/katze_beim_markt.jpg" alt="Foto von einer Katze"> <br><br> <img src="https://www.sifa-digital.de/wp-content/uploads/2017/01/html_grundkurs_video_03_aufbau_einer_html-datei.jpg" alt="Thumbnail HTML Grundkurs Video 03">

Die index.html Datei:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs."> <meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital"> <title>Index - HTML Grundkurs</title> </head> <body> <header></header> <div> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6> <p>Das ist der erste Textabschnitt</p> <p>Das ist der zweite Textabschnitt</p> b-Tag: <b>Test</b> <br> strong-Tag: <strong>Test</strong> <br><br> i-Tag: <i>Test</i> <br> em-Tag: <em>Test</em> <br><br> u-Tag: <u>Test</u> <br> s-Tag: <s>Test</s> <br><br> <img src="./bilder/katze_beim_markt.jpg" alt="Foto von einer Katze"> <br><br> <img src="https://www.sifa-digital.de/wp-content/uploads/2017/01/html_grundkurs_video_03_aufbau_einer_html-datei.jpg" alt="Thumbnail HTML Grundkurs Video 03"> </div> <footer></footer> </body> </html>

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: