HTML Grundkurs: Bilder einfügen
In diesem Beitrag zeigen wir dir, wie du Bilder in deine Webseiten einfügst.
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.
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.
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.
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.
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.
