HTML Grundlagen bei der CMS Nutzung Von Wordpress bis Shopware

Grundlagen der HTML-Pflege in einem CMS

Wenn du eine Webseite über ein Content-Management-System (CMS) wie WordPress, Joomla oder Typo3 pflegst, brauchst du kein HTML-Profi zu sein. Es reicht, einige Basis-Befehle und Regeln zu kennen, um Texte ansprechend zu gestalten, Bilder einzufügen und Links zu setzen.

Hier sind die wichtigsten Grundlagen für dich zusammengefasst:

1. Dateinamen und Sonderzeichen

Wenn du Bilder, Dokumente oder andere Dateien in dein CMS hochlädst, achte darauf, dass die Dateinamen keine Sonderzeichen, Umlaute oder Leerzeichen enthalten. Verwende stattdessen:

• Kleinbuchstaben (a-z)
• Bindestriche (-) statt Leerzeichen
• Keine Umlaute (statt ä, ü oder ö schreibe ae, ue, oe)

Beispiel:
Richtig: mein-bild.jpg
Falsch: Mein Bild 2023.jpg

Diese Regeln helfen, technische Probleme zu vermeiden und sicherzustellen, dass die Dateien auf allen Geräten und Browsern korrekt angezeigt werden.

2. Bilder einfügen: Größe und Dateiformat

Bilder sind oft ein Highlight deiner Inhalte, aber sie können die Ladezeit der Seite verlangsamen, wenn sie zu groß sind. Beachte daher:

• Dateiformat: Verwende JPG oder PNG für Bilder.
  • JPG eignet sich für Fotos.
  • PNG ist gut für Bilder mit transparentem Hintergrund.
• Größe: Die Bilder sollten nicht größer als 300 KB sein, da große Dateien die Seite langsamer machen.
• Abmessungen: Nutze eine maximale Breite von 1200 px für größere Bilder und 300 px für kleinere Bilder, wie Icons.

Viele CMS haben eine Funktion, mit der du Bilder beim Hochladen verkleinern oder zuschneiden kannst.

3. Grundlegende HTML-Befehle

In den meisten CMS kannst du einfache HTML-Befehle verwenden, um deinen Text zu gestalten. Hier sind die wichtigsten:

Text fett und kursiv machen

• Fett: <b>Text</b> oder <strong>Text</strong>
• Kursiv: <i>Text</i> oder <em>Text</em>

Beispiel:

<p>Dies ist ein <b>fetter</b> und <i>kursiver</i> Text.</p>

Listen erstellen

Es gibt zwei Arten von Listen:

1. Geordnete Listen (nummeriert): <ol>
2. Ungeordnete Listen (Punkte): <ul>

Beispiel:

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
</ul>

<ol>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
</ol>

Links einfügen

Mit Links kannst du auf andere Seiten verweisen. Verwende dazu den <a>-Tag mit dem href-Attribut.

Beispiel:

<a href="https://example.com">Besuche Example.com</a>

• Achte darauf, dass Links immer das https:// oder http:// enthalten, damit sie korrekt funktionieren.
• Nutze das Attribut target="_blank" um Links in einem neuen Tab zu öffnen:

  <a href="https://example.com" target="_blank">Besuche Example.com</a>

4. Tipps zur Textformatierung im CMS

• Überschriften verwenden: Gliedere deine Texte mit Überschriften (<h1>, <h2>, <h3> usw.). Nutze nur eine <h1>-Überschrift pro Seite und unterteile dann weiter mit <h2> und <h3>.
• Absätze: Trenne verschiedene Gedanken in Absätzen (<p>). Das sorgt für mehr Übersichtlichkeit.

5. Wichtige Hinweise zur Inhaltspflege

• Links regelmäßig prüfen: Vergewissere dich, dass alle Links aktuell sind und funktionieren.
• SEO beachten: Füge relevante Keywords ein, aber ohne zu übertreiben. Verwende sie natürlich im Text.
• Alternative Texte für Bilder: Füge immer eine Beschreibung (alt-Text) für Bilder hinzu. Das hilft der Barrierefreiheit und der Suchmaschinenoptimierung.

Beispiel:

<img src="mein-bild.jpg" alt="Beschreibung des Bildes">

Zusammenfassung

Diese Grundlagen helfen dir, Inhalte in deinem CMS zu pflegen, ohne viel technisches Wissen zu benötigen. Denke daran, Dateinamen sauber zu halten, Bilder klein zu halten und grundlegende HTML-Befehle zu nutzen, um deinen Text zu formatieren. Mit diesen Tipps gelingt dir eine professionelle und benutzerfreundliche Content-Pflege.

Das reicht aus, um deine Webseite mit einem CMS erfolgreich zu pflegen und ansprechend zu gestalten!