zukunst. maria best

Wer heute mit WordPress startet, um seine Website aufzubauen, hat meistens keine Vorerfahrung mit der Erstellung von Webseiten in “good old” HTML. Also so, wie man das “früher” mal gemacht hat, als man den Code noch von Hand zu Fuß geschrieben hat. Das ist auch nicht notwendig, da man in WordPress selbst nicht zwingend herum “programmieren” muss. (Es handelt sich dabei nicht wirklich um Programmieren, wie Puristen jetzt anmerken werden, aber das ist für uns erstmal unerheblich).

Aber: Es hilft, wenn Sie ein paar Grundkenntnisse zu HTML & Co. erwerben, denn Sie stoßen in WordPress immer wieder auf Begriffe, die sicher rätselhaft erscheinen, die sich damit aber ganz leicht erklären lassen. Deshalb hier ein paar Basisinfos. Wer HTML kann oder kennt, braucht das natürlich nicht zu lesen.

HTML steht einfach für “HyperText Markup Language” und ist eine Auszeichnungssprache (also keine Programmiersprache), mit der das Layout von Internetseiten beschrieben wird, auch heute noch. Via HTML kann man festlegen, wie groß eine Schrift ist, wo ein Bild zu sehen ist, wohin ein Link geht usw. Eben alles, was so eine typische Webseite ausmacht. Das macht man in HTML mit festgelegten Begriffen, und genau diese Begriffe tauchen auch immer mal wieder in WordPress auf, vor allem wenn Sie im Customizer ihr Theme anpassen.

Da steht dann zum Beispiel “Heading” oder “Body” oder “Paragraph” oder “List Item” – und Sie fragen sich, was man Ihnen damit sagen will…
Das alles sind Begriffe, die aus der HTML-Sprache kommen, denn auch das Erscheinungsbild von WordPress-Webseiten wird mithilfe von HTML erzeugt, nur kriegen wir davon nichts mit. HTML-“Befehle” sind spezielle, natürlich am Englischen orientierte Wortkürzel (man wollte ja nicht ewig lange an so einer Website rumschreiben), sogenannte “Tags”, die immer in spitzen Klammern stehen, also: <tag>. Es gibt eine ganze Menge von Tags, man kann sie alle im Internet nachschauen und wenn man sogar eine Handvoll davon auswendig kann, ist das nicht verkehrt. Tag ist englisch, wird also “Tähg” ausgesprochen und heißt einfach nur Markierung / Etikett – oder eben Auszeichnung.

Einige Beispiele dazu:
“Heading” meint eine Überschrift, der HTML-Tag ist <h>, wobei der Buchstabe h immer mit einer Zahl kombiniert wird, um die Größe anzugeben. <h1> ist die größte Überschrift, <h6> die kleinste. Vielleicht ist Ihnen das schon mal bei dem Block “Überschrift” im Gutenberg-Editor aufgefallen.
Übrigens nicht zu verwechseln mit dem “Header” einer WordPress-Site, denn damit ist der Kopfbereich am oberen Rand gemeint, in dem der Seitentitel, Untertitel, ggf. auch ein Logo oder ein schickes Header-Bild/Video zu sehen ist.
“Body” steht für den kompletten “Körper” der Internetseite, den Grundaufbau, das was die Besucher*innen sehen. Im HTML-Slang ist dies der <body>-Tag.
Ein “Paragraph” ist einfach ein Text-Absatz, in HTML ein schlichtes <p>.
“List Items” sind Listenelemente oder einzelne Listenpunkte einer Liste, in HTML <li>. Es gibt geordnete <ol> und ungeordnete <ul> Listen.
Im Gutenberg-Editor von WordPress können Sie theoretisch auch direkt in HTML Ihre Blöcke beschreiben und formatieren (dazu mal das Symbol mit den drei Punkten am oberen Rand des Blocks anklicken, in dem Sie gerade aktiv sind, dann erscheint als Menümöglichkeit “Edit as HTML”). Das ist jedoch nur sinnvoll, wenn Sie sich ein wenig mit HTML auskennen, sonst heißt es: “Denn sie wissen nicht was sie tun…”.

Ein anderes Kürzel ist Ihnen wahrscheinlich auch schon aufgefallen, “CSS”. Es erscheint unter anderem im Customizer und als erweiterte Option in der rechten Seitenleiste des Gutenberg-Editors, wenn Sie in einem Block aktiv sind. CSS steht für “Cascading Style Sheets” (etwa: aufeinander abgestufte Stilvorlagen) und lässt sich vergleichen mit Formatvorlagen in Word. CSS ist ein mächtiges Werkzeug, mit dem man das Aussehen seiner Webseite beeinflussen kann. Leider gilt auch hier: Man muss sich damit etwas beschäftigen, um gezielt eigene sinnvolle Einstellungen treffen zu können. Mit CSS kann man das Aussehen einzelner HTML-Elemente (z.B. Paragraph, List, Heading etc.) bestimmen. Wenn Sie Ihr Theme also individuell abwandeln wollen, können Sie dies mit CSS machen.

Eine Übersicht der wichtigsten “Befehle” für HTML finden Sie übrigens bei Heise.de.
Und für alle, die tiefer einsteigen wollen, hier noch die Qualitätsadresse zu HTML, CSS überhaupt, und das seit 1995(!): Selfhtml.org

Webseite

“Ihre Homepage mit WordPress 5 und dem neuen Gutenberg-Editor”

“Die 5-Seiten-Homepage mit WordPress 5 – Ich will kein Blog – Ich will eine Website!”

Etwas HTML für WordPress Beginner