Texte und Bilder in die Website implementieren (HTML)

Bilder und Texte gehören zum Content der gesamten Website.

Erstellt/geändert am 05.05.2024

[Learning HTML] - Teil 3 - Der Content deiner Website besteht aus Texten und Bildern. Hier lernst du, wie man beides in eine Website einbindet und diese für die Suchmaschine optimierst.

Eine gute Website besteht aus guten Texten und passenden Bildern. Mit guten Texten sind thematisch passende und ausreichend ausformulierte Texte, die durch ihre Aussagekraft und Wortwahl den Leser in den Bann ziehen und zum Weiterlesen animieren. Wenn man dazu noch passende Bilder präsentiert, ist der Content deiner Seite schon fast unschlagbar. Doch wie genau bindet man Text und Bilder in den HTML-Quellcode ein und wie optimiert man dies für die Suchmaschine? Wir verraten dir hier, wie du deinen Content nicht nur optisch ansprechend deinen Lesern präsentierst, vielmehr auch für die Suchmaschinen optimierst.

Mehr zum HTML-Grundkurs

Teil 1 HTML Grundkurs für deine eigene Website Teil 2 So baust du deine Website richtig auf (HTML) Teil 3 Texte und Bilder in die Website implementieren (HTML)

Pack mal alles in Container

Der Inhalt einer Website muss irgendwie strukturiert und platziert werden. Dies geschieht durch sogenannte <div>-Container, welche mittels CSS (Cascade Style Sheet) optisch platziert und grafisch aufbereitet wird. Der DIV-Container wird vom englischen Wort division abgeleitet und bedeutet soviel wie „Bereich“ oder „Abteilung“. In diesen Container wird alles hineingepackt, was Content für die Website bedeutet.

Texte

Wenn man Produkte ordentlich erklären möchte und Leser durch spannende und interessante Informationen so lange wie möglich auf der Website halten will, benötigt man perfekte Texte.

<p> Textabsatz

Das p-Tag steht im englischem für paragraph

<p> Beispiel

<p> In diesem Bereich wird der Textcontent stehen. Du kannst den ganzen Text auch in verschiedenen Bereiche aufteilen und jeweils mit einem p-Tag abgrenzen, genau so, wie in diesem Beispiel. </p>

Bilder

Bilder werden auf einer Website mittels dem <img>-Tag eingefügt und können dann direkt oder mit CSS angepasst werden. Auch hierbei sind einige Dinge zu beachten, weil Suchmaschinen die Bilder sonst nicht richtig erkennen und die Seite als fehlerhaft abstufen würden.

[1] alt Hier kommt eine sehr kurze Beschreibung hin, was das Bild zeigt, wie beispielsweise "Eiche im Schweizer Wald". Falls das Bild nicht geladen werden kann, erscheit dieser Text als alternative. Diese Eingabe ist Pflicht.

[2] title Der Titel des Bildes kann ähnlich oder gleich dem alt sein und bietet lediglich etwas mehr Infos für eine Suchmaschine.

[3] width Diese Eingabe kann u.a. sowohl in Pixel als auch in Prozent angegeben werden, wie beispielsweise width="100" (Pixel) oder width="100%" (Prozent). Ein Bild kann auch per CSS angepasst werden.

[4] height Diese Eingabe kann u.a. sowohl in Pixel als auch in Prozent angegeben werden, wie beispielsweise height ="100" (Pixel) oder height ="100%" (Prozent). Ein Bild kann auch per CSS angepasst werden.

Bilder sollten von den Abmaßen her so klein wie möglich und so groß wie nötig gehalten werden. Bedenke die minimalen Abmaße eines Bildes vorher, damit der Server nicht zuviel Daten laden muss. Hast du die perfekte Größe ermittelt und das Bild z.B. mit dem Programm Gimp 2 dahingehend bearbeitet hast, kannst du das Bild noch mit tinypng optimieren.