Das Schreiben mit HTML in WordPress ist weder kompliziert noch erfordert es einen Abschluss in Fremdsprachen oder Webentwicklung. Wir reden nicht davon, dass du jedes Mal eine neue Webseite erstellen musst, wenn du etwas veröffentlichst. Wir reden nur über das HTML, das in den Inhalt des Beitrags einfließt.

Dieser Leitfaden ist eine Einführung in die 10 häufigsten HTML-Tags. HTML ist eine sehr einfache Auszeichnungssprache. Obwohl es in HTML5 fast 100 Tags gibt, benutzt du in 99 % der Fälle nur eine Handvoll davon. Ich werde dir 10 HTML-Tags beibringen, die du benötigst, um fast alle Inhalte und alles andere, was dir beim Erstellen einer Webseite einfällt, auszuzeichnen.

Die 10 HTML-Tags in der folgenden Liste sind für die Formatierung von Inhalten gedacht. Wenn du den letzten Lehrgang gelesen hast, weißt du bereits, wie man Überschriften- und Absatz-Tags verwendet. Deshalb werde ich dir jetzt die restlichen 8 HTML-Tags beibringen, die du benötigst. Keine Sorge, auch wenn es so aussieht, als müsstest du eine Menge neuer Tags lernen, sind sie leicht zu merken und funktionieren alle auf die gleiche Weise. Hier sind die 10 HTML-Tags, die ich dir beibringen werde:

<h1> – <h6> Überschrift
<p> Absatz
<i> oder <em> Kursiv / Hervorhebung
<b> oder <strong> Fett / Stark
<a> Anker
<ul> & <li> Ungeordnete Liste & Listenelement
<blockquote> Blockquote
<hr> Horizontale Regel
<img> Bild
<div> Unterteilung

Fette & kursive Wörter erstellen

Beginnen wir mit etwas sehr Alltäglichem. Das Erstellen von fetten und kursiven Wörtern. Öffne das Beispieldokument aus dem ersten Tutorium – example1.doc in deinem bevorzugten Textverarbeitungsprogramm (Microsoft Word oder ein anderes). Mach ein paar Wörter in deinen Absätzen fett und ein paar kursiv. Du weißt bereits, wie man das macht. Dein Dokument sollte in etwa wie das folgende Beispiel aussehen:

Wie du siehst, habe ich 3 fette Wörter und 2 kursive Wörter in unserem Dokument erstellt. Die HTML-Tags für fett und kursiv sind sehr einfach zu merken. Verwende den <b></b> (oder: <strong></strong>) Tag für fett, und den <i></i> (oder: <em></em>) Tag für kursiv. Im nächsten Schritt fügst du unsere HTML-Tags um die fetten und kursiven Wörter herum in das Dokument ein. Dein Dokument sollte wie das folgende Beispiel aussehen:

Öffne die Datei webpage.html aus dem letzten Lehrgang in deinem bevorzugten Texteditor (Notepad für Windows & TextEdit, wenn du einen Mac verwendest). Kopiere den gesamten Inhalt deines Dokuments example1.doc und ersetze ihn in deiner Datei webpage.html. Speichere diese Datei und öffne sie in deinem Webbrowser, indem du sie doppelt anklickst. Sie sollte ungefähr so aussehen wie das folgende Beispiel:

Inzwischen solltest du mit der Verwendung deines Texteditors ziemlich vertraut sein. Von nun an werden wir alle Beispiele direkt im Texteditor bearbeiten, anstatt den Inhalt aus deinem Textverarbeitungsprogramm hin und her zu kopieren und einzufügen.

Links erstellen

Links sind einer der wichtigsten Bestandteile einer Webseite. Wahrscheinlich hast du beim Surfen im Internet schon Tausende von Links gesehen. Links sind einfacher zu erstellen, als du denkst. Wir können Links (Hyperlinks oder „Anker“) erstellen, indem wir den HTML <a></a> Tag verwenden. Fügen wir eine Zeile in unsere Datei webpage.html ein, wie Zeile #9 im folgenden Beispiel:

<h1>Meine erste Webseite</h1>
<h2>Überschriften sind ein großer Spaß</h2>
<p>Dies ist mein erster <strong>Absatz</strong> auf meiner neuen <em>Webseite</em>. Das wird großartig werden. Ich bin so aufgeregt, dass ich mich kaum zurückhalten kann <b>. Liebst du Absätze nicht auch? Ich finde sie sehr nützlich. </p>
<h2>Webseiten sind auch aufregend</h2>
<p>Ja, das stimmt - Webseiten können eine Menge Spaß machen. Zu lernen, wie man Webseiten erstellt, ist einfach und <b>unterhaltsam</b>. Das ist mein zweiter <em>Absatz</em>. Ich hoffe, er gefällt dir.</p>
<a>Link zu Google</a>

Sobald du den HTML-Link zu deiner webpage.html Datei hinzugefügt hast, speichere deine Datei.

Um die Änderungen, die du gerade an deiner Webseite vorgenommen hast, zu sehen, kannst du auf die Schaltfläche „Aktualisieren“ in deinem Webbrowser klicken. Oder du drückst CONTROL + R (Windows) oder CMND + R (Mac). Dadurch wird die Ansicht deiner Webseite im Browser „aktualisiert“ und du kannst die neuen Änderungen sehen. Das wirst du oft tun, wenn du Änderungen an deiner Webseite vornimmst.

Obwohl wir <a></a>-Tags um die Worte „Link zu Google“ herum eingefügt haben, haben wir unserem Link nicht wirklich gesagt, wohin er gehen soll. Der Link in unserem Beispiel wird also nichts bewirken. Keine Sorge, wir können das beheben, indem wir unserem <a></a>-Tag ein paar weitere Informationen hinzufügen. Mit Hilfe von Attributen können wir HTML-Tags anpassen und sie mit mehr Informationen versehen. Damit unser Link zu Google funktioniert, müssen wir ein Attribut mit der Adresse der Webseite hinzufügen, zu der unser Link führen soll. Schau dir das folgende Beispiel an:

<a href="http://www.google.com">Link zu Google</a>

Füge das Attribut zu deinem Tag in deiner Datei webpage.html hinzu, wie im Beispiel oben. Speichere deine Datei und aktualisiere deinen Webbrowser. Du solltest einen Link zu Google am unteren Ende der Seite sehen. Klicke ihn einfach an! Glückwunsch, du weißt jetzt, wie man Links erstellt! Du kannst jedes Wort auf deiner Webseite in „Anker“-Tags einpacken und einen Link erstellen. Du kannst Links zu jeder Webseite im Internet erstellen. Du kannst so viele Links einfügen, wie du willst. Experimentiere und habe Spaß. Du bist auf dem besten Weg, ein Experte im Umgang mit HTML zu werden.

Listen erstellen

Wir werden lernen, wie man eine Liste erstellt. Wir werden eine Aufzählungsliste erstellen. Du kennst wahrscheinlich Aufzählungslisten wie das folgende Beispiel:

• Äpfel
• Bananen
• Birnen
• Orangen
• Weintrauben

Gib in die Datei webpage.html eine Liste von Früchten wie im obigen Beispiel ein. Als Nächstes werden wir unsere reine Textliste in eine echte HTML-Liste verwandeln. Der HTML <li>-Tag dient dazu, „Listenelemente“ zu erstellen. Wir werden jeden Eintrag in unserer Liste mit <li></li>-Tags umgeben. Im nächsten Schritt umgeben wir unsere Liste mit dem HTML <ul></ul>-Tag. Das Tag „Ungeordnete Liste“ fasst alle unsere Listenelemente in einer einzigen Liste zusammen. Befolge das folgende Beispiel:

<ul>
<li>Äpfel</li>
<li>Bananen</li>
<li>Birnen</li>
<li>Orangen</li>
<li>Graphen</li>
</ul>

Speichere deine Datei webpage.html und aktualisiere deinen Webbrowser. Du solltest jetzt etwas wie das folgende Bild sehen:

Blockquotes erstellen

Das HTML-Tag <blockquote></blockquote> ist ganz einfach. Er dient dazu, Zitate auf der Seite zu erstellen – mehr nicht. Warum ist das wichtig? Es eignet sich hervorragend für Artikel, in denen du jemanden oder einen Text zitieren musst, oder für Kundenstimmen oder einfach nur für Zitate im Allgemeinen. Du weißt bereits, wie du Inhalte mit HTML-Tags einpacken kannst, und diese Tags sind nicht anders. Sieh dir das Beispiel an:

„Ein Designer weiß, dass er Vollkommenheit erreicht hat, nicht wenn es nichts mehr hinzuzufügen gibt, sondern wenn es nichts mehr wegzunehmen gibt.“

<blockquote>“Ein Designer weiß, dass er die Perfektion nicht erreicht hat, wenn es nichts mehr hinzuzufügen gibt, sondern wenn es nichts mehr wegzunehmen gibt.“ – Saint Exupery</blockquote>
Erstelle ein Blockquote in deiner webpage.html Datei und speichere es. Aktualisiere deinen Webbrowser – das war’s! Du hast soeben das HTML-Blockquote-Tag gemeistert.

Horizontale Regeln erstellen

Mit dem HTML-Tag <hr /> für horizontale Regeln kannst du eine Unterbrechung in deinem Webseiteninhalt erzeugen und eine Linie quer über die Seite ziehen. Im Gegensatz zu den anderen Tags, die du gelernt hast, hat der horizontale Tag kein öffnendes und schließendes Tag und umschließt den Inhalt nicht. Du hast vielleicht bemerkt, dass dieses Tag einen / Schrägstrich vor der schließenden eckigen Klammer hat. Das nennt man einen selbstschließenden Tag. Schau dir das folgende Beispiel an:

<hr />
Horizontale Regeln sind eine vielversprechende Möglichkeit, eine Webseite zu unterteilen. Füge ein <hr />-Tag in deine webpage.html-Datei ein, speichere sie und aktualisiere deinen Webbrowser, um das Ergebnis zu sehen.

Bilder korrekt verwenden & einbetten

Die meisten Webseiten im Internet haben irgendeine Art von Bildinhalt auf der Seite. Bilder in HTML sind einfach zu verwenden. Genau wie der <hr />-Tag ist der HTML-Bilder-Tag selbstschließend und benötigt keinen schließenden Tag. Schau dir das folgende Beispiel an:

<img />
Genau wie der <a></a>-Tag (zum Erstellen von Links) braucht der HTML <img />-Tag ein Attribut, das ihm sagt, welches Bild auf deiner Webseite angezeigt werden soll. Schau dir das folgende Beispiel an:

<img src=“meinBild.jpg“ />
src=“meinBild.jpg“ Dieser Teil des Bild-Tags – das Attribut – sagt, dass dieses Bild-Tag die Quelle (src) meinBild.jpg hat. Jetzt brauchen wir also ein JPEG-Bild mit dem Namen myimage.jpg. Du kannst ein Bild mit diesem Namen erstellen, oder du findest ein myimage.jpg Bild in den Beispieldateien für diesen Lehrgang.

Lege die Datei myimage.jpg in demselben Ordner/Verzeichnis auf deinem Computer ab wie deine webpage.html-Datei. Füge den HTML <img /> Tag in deine Webseite ein, wie im Beispiel oben. Speichere sie, aktualisiere deinen Webbrowser und sieh dir das Ergebnis an. Du solltest so etwas wie das folgende Beispiel sehen:

Herzlichen Glückwunsch! Du hast gerade gelernt, wie du Bilder in deine Webseite einfügen kannst. Du kannst eine Menge mit Bildern machen, z. B. Text um sie herum platzieren, ihre Größe ändern, ihnen Rahmen hinzufügen usw. Keine Sorge, ich werde dir in einem späteren Tutorial zeigen, wie du das alles machen kannst. Im Moment müssen wir nur lernen, wie wir ein Bild in unsere Webseite einfügen – und das hast du gelernt. Gut gemacht!

Du musst nur noch einen weiteren Tag lernen und schon kennst du alle wichtigen HTML-Tags. Du bist auf dem besten Weg, ein HTML-Experte zu werden…

HTML-Divisions

Diesen letzten HTML-Tag habe ich mir aus gutem Grund bis zum Schluss aufgehoben. Dieser Tag ist den anderen HTML-Tags, die du gerade gelernt hast, sehr ähnlich. In vielerlei Hinsicht ist er wie ein <p></p>Absatz-Tag. Der Unterschied zum HTML-Tag <div></div> besteht darin, dass er nicht für eine bestimmte Art von Inhalt gedacht ist. Dieses Tag dient dazu, eine Struktur in deine Webseite zu bringen. Du kannst es dir wie einen Container oder einen Baustein vorstellen. Schau dir den Beispielcode unten an:

<div>Dies ist ein DIV-Container</div>
Füge ein HTML <div></div>-Tag wie das obige Beispiel in deine Webseite ein, speichere es und aktualisiere deinen Browser.

DIV ist die Kurzform für „Division“ und genau dafür ist dieses Tag da. Es dient dazu, den Inhalt deiner Webseite in Container zu unterteilen. Du hast wahrscheinlich schon viele Webseiten mit „Boxen“ auf dem Bildschirm gesehen. Das ist eine sehr verbreitete Form des Webdesigns. Genau dafür ist das <div></div>-Tag da – um Abschnitte oder Blöcke von Inhalten zu erstellen. Sie sind die Bausteine des Webs.

Du kannst jede Art von Inhalt in einem <div></div>-Tag unterbringen, sogar andere HTML-Tags! Schau dir das folgende Beispiel an:

<div>
<h2>Ein Titel</h2>
<a href="http://www.google.com">Ein Link</a>
<p>Ein Beispieltext</p>
</div>

Das obige Beispiel soll nur verdeutlichen, dass ich alles in ein HTML <div></div>-Tag einfügen kann. Mach dir keine Sorgen, wenn das Beispiel kompliziert aussieht. Du wirst lernen, wie du sie benutzen kannst. Ich wollte dir nur ein Beispiel für gemischte Inhalte zeigen.

Ich werde dir zeigen, wie du mit diesen Tags dein Webseitendesign aufbaust und wie du deine Webseiten positionierst und strukturierst. Aber erst einmal wollte ich dir nur dieses einfache, aber so wichtige HTML-Tag vorstellen. Dieser Tag wird dein bester Freund werden – glaub mir 😉

Mein kurzes Fazit

In diesem Tutorium habe ich dir die 10 HTML-Tags vorgestellt, die du in 99% der Fälle beim Erstellen von Webseiten verwenden wirst. Experimentiere mit diesen neuen Tags auf deiner Webseite – ordne sie an und kombiniere sie auf unterschiedliche Weise. Diese Tags werden dir den Weg ebnen, wenn du lernst, wie du Webseiten wie ein Profi erstellen und gestalten kannst. Herzlichen Glückwunsch!