HTML und CSS Übersicht

Oft gebrauchte Tag Kombinationen:

<h1>

Das h1-Tag wird für Hauptüberschriften verwendet und sollte auf einer Seite immer nur 1x vorkommen. Wird immer durch ein tag geöffnet und dann durch ein abschließendes Tag geschlossen

Code im Backend Verwendung:
<h1> Meine neue Überschrift </h1>

<h2>

Das h2-Tag wird für Zwischenüberschriften verwendet und kann auf einer Seite mehrmals vorkommen. Wird immer durch ein tag geöffnet und dann durch ein abschließendes Tag geschlossen. Sollte immer nach einem h1-tag kommen.

Code im Backend Verwendung:
<h2> Meine neue Zwischenüberschrift </h2>

<h3>

Das h3-Tag kann für Abschnittüberschriften verwendet werden und kann auf einer Seite mehrmals vorkommen. Wird immer durch ein tag geöffnet und dann durch ein abschließendes Tag geschlossen.

Code im Backend Verwendung:
<h3> Meine neue Abschnittüberschrift </h3>

<p>

Das p-Tag wird für Fließtexte verwendet und sollte Inhaltstexte beeinhalten. Wird immer durch ein p tag geöffnet und dann durch ein abschließendes Tag geschlossen

Code im Backend Verwendung:
<p> ...Inhaltstext Fließtext </p>

<img>

Das img-Element ist dazu gedacht Grafiken im Dokument anzuzeigen. Img ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag. Es wird mit verschiedenen Attributen und einem abschließen Schrägstrich aufgebaut. Die Attribute sind:

alt="" -> Der Alternativtext für das Bild, falls dieses nicht geladen werden kann (+Google). Immer setzen.
title="" -> Der Text, der bei einem Mouseover für den Kunden erscheint. Immer setzen wenn sinnvoll.
src="" -> Hier wird der Pfad zum Bild abgelegt. Entweder Klarlink, oder die Magento Variabel

Code im Backend Verwendung:
<img alt="Alternativtext" title="Hallo Kunde" src="https://mein-pfad-zum-bild.de/bildname.jpg" />

<a>

Das a-Element erzeugt einen Link um einen Text oder einem Bild. Das a-tag wird immer durch ein öffnendes und ein schließendes tag erzeugt.

href="" -> Die Zielurl des Links. Entweder Klarlink oder mit einer Magento Variabel besetzen.
title="" -> Der Text, der bei einem Mouseover für den Kunden erscheint. Immer setzen wenn sinnvoll.

Code im Backend Verwendung:
<a href="https://mein-link.de" title="Hallo Kunde">Hier klicken</a>

<span>

Das span-Tag wird dazu verwendet, um einen bestimmten Bereich eines Textes gesondert formatieren zu können. Beispielsweise kann man in einem Fließtext so einen Abschnitt färben (eine der vielen Möglichkeiten), um eine wichtige Information hervorzuheben. Wichtig: Ohne Style oder Klasse wird keine Hervorhebung aufgerufen. Weitere Infos hierzu im Style und Class Bereich

Code im Backend Verwendung:
Ich bin ein Fließtext und <span> ich bin nochmals extra </span> markiert

<br/>

Das br-Element erzeugt einen einfachen Zeilenumbruch. Es ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag. Es kann auch mehrmals hintereinander benutzt werden, um beispielsweise einen größeren Abstand zu erzeugen.

Code im Backend Verwendung:
Hier ist ein Text,<br/>der nach dem Komma einen Zeilenumbruch hat

<strong>

Das strong-Element transformiert den eingeschlossenen Text zur Fettschrift

Code im Backend Verwendung:
Hier ist ein Text und <strong>dieser Teil wird fett dargestellt</strong>, hier aber nicht mehr...

<i>

Das i-Element transformiert den eingeschlossenen Text zur Kursivschrift

Code im Backend Verwendung:
Hier ist ein Text und <i>dieser Teil wird kursiv dargestellt</i>, hier aber nicht mehr...

<div>

Das div-Element ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einzuschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können.

Code im Backend Verwendung:
<div> ....Hier kommen andere Tags oder Fließtext rein.... </div>





Marketizator Test
Hier Klicken für Ihr Geschenk
Entdecken Sie Ihre Gratis-Geschenke bei Parfümerie Pieper online!