Bilder in HTML einbinden
Heute erkläre ich Ihnen, wie man in HTML Bilder einfügen kann.
Dazu verwenden wir das image-Tag img.
Beispielcode:
<html>
<body>
<img src="bildname.jpg">
</body>
</html>
Sie können dem Bild selbstverständlich die gewünschte Größe mitgeben. Um ein Bild mit der Größe 200px x 200px anzuzeigen schreiben wir folgenden Code:
Beispielcode:
<html>
<body>
<img src="bildname.jpg" width="200" height="200">
</body>
</html>
Um Bilder von einer anderen URL anzuzeigen benötigen Sie den kompletten URL-Pfad mit http://:
Beispielcode:
<html>
<body>
<img src="http://www.beispieldomain.de/bildname.jpg" width="200" height="200">
</body>
</html>
Sehr wichtig für validen Code, die Suchmaschinen und Screenreader (für blinde Menschen) ist das alt-Tag. Der Inhalt des alt-Tags wird angezeigt, sobald der Browser keine Bilderanzeige hat. Dies ist der Fall bei Screenreadern und teilweise bei geschäftlich genutzten Rechnern, deren IT-Abteilung die Anzeige von Bildern abgeschaltet hat. Das gibt es tatsächlich.
Beispielcode:
<html>
<body>
<img src="http://www.beispieldomain.de/bildname.jpg" width="200" height="200" alt="Dies ist der Text, der das Bild am besten beschreibt, Hier bringe ich auch noch ein paar Suchbegriffe ein.">
</body>
</html>
Nun optimieren wir das Bild nochmals und fügen das title Tag ein. Der Inhalt dieses Tags wird angezeigt, wenn man mit der Maus über das Bild fährt:
Beispielcode:
<html>
<body>
<img src="http://www.beispieldomain.de/bildname.jpg" width="200" height="200" alt="Dies ist der Text, der das Bild am besten beschreibt, Hier bringe ich auch noch ein paar Suchbegriffe ein."
title="und in den Titel packe ich auch nochmal die wichtigsten Begriffe kurz und knapp rein">
</body>
</html>
Wenn Sie nun noch beachten, daß die Bilder richtig benannt werden, dann können Sie sich in Zukunft über viele neue Besucher der Google-Bildersuche freuen.
Ein Bild, das beispielsweise eine Rose zeigt, sollte nicht DCN456312.jpg heißen.
Das wäre völliger Quatsch. Sie wissen nicht, was sich hinter dem Dateinamen verbirgt… woher soll es die Suchmaschine wissen?
Nennen Sie die Datei rote_rose.jpg.
Viel Spaß beim Einbinden von Bildern in Ihre HTML-Seiten.
Related posts:
- Links in HTML erstellen Wie erstellt man einen Link in HTML? Wie verlinkt man...
- CSS Tutorial – CSS in eine HTML einbinden Viele Wege führen nach Rom. Um CSS in eine Seite...
- HTML – Texte Suchmaschinenoptimiert formatieren Texte suchmaschinenoptimiert formatieren Heute möchte ich Ihnen zeigen, wie man...
- HTML Imagemap – wie geht’s? Mit einer Imagemap kann man Teile eines Bildes mit unterschiedlichen...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
[...] in HTML-Seiten kann für Suchmaschinen optimiert werden. Die Seite Tutorialwelt.de hat einen interessanten Artikel zum Thema veröffentlicht. Zu beachten sind beispielsweise die Auswahl eines richtigen Dateinamens sowie die Verwendung des [...]
Like or Dislike:
0 
0