Wordpress für Profis

Den ersten Artikel verfassen: Einen Artikel mit dem HTML-Editor verfassen

∅ 4.8 / 9 Bewertungen

Einen Artikel mit dem HTML-Editor verfassen

Um einen Artikel mit dem HTML-Editor zu verfassen, wechseln Sie einfach mit einem Klick auf den Reiter "HTML" in den HTML- bzw. Code-Editor. Auch hier geben Sie Ihren Text und die Überschrift in die entsprechenden Felder bzw. Textboxen ein.

67811_html-editor-png

Artikel im HTML-Editor verfassen

Text formatieren

Text in der Textbox kann mit HTML-Tags ausgezeichnet werden. Folgende Möglichkeiten stehen Ihnen dabei über die Quicktagleiste zur Verfügung:

67812_html-tags-png

HTML-Tags

  • Der entsprechende Abschnitt wird als sehr wichtig hervorgehoben bzw. visuell als fett formatiert.

  • Der entsprechende Abschnitt wird als wichtig hervorgehoben bzw. als kursiv formatiert.

  • Hiermit fügt man einen Link ein.

  • Hiermit wird ein Abschnitt als Zitat ausgezeichnet.

  • Überholten bzw. alten Inhalt kennzeichnen.

  • Neuen bzw. aktuellen Inhalt kennzeichnen (Gegenstück zu del).

  • Hiermit kann man ein Bild einfügen.

  • Eine Aufzählungsliste einleiten.

  • Eine nummerierte Liste einleiten.

  • Einen Listenpunkt innerhalb einer Aufzählungs- oder einer nummerierten Liste einfügen.

  • Ein Code-Beispiel kennzeichnen.

  • Der "weiterlesen..."-Link. Trennt den Text in eine Einleitung (engl. Teaser) und den Rest.

  • Standardmäßig wird www.answers.com geöffnet, um nach einem Wort zu suchen.

  • Tags schließen = Alle offenen Tags schließen.

Generell gilt, dass Sie zwei Möglichkeiten haben, die Tags einzufügen.

Entweder Sie klicken den gewünschten Tag an, z. B. b, es erscheint der öffnende Tag <strong>, schreiben dann Ihren Text und schließen den Tag mit einem erneuten Klick auf das b oder auf den Button "Tags schließen" (Nr. 14). Es erscheint nun der schließende Tag </strong>.

67814_tag-nutzen1-png

HTML-Tag während des Schreibens einfügen.

Die andere Möglichkeit besteht darin, einen Textabschnitt oder ein Wort zu markieren und dann den gewünschten Button anzuklicken, z. B. b. Der öffnende und der schließende Tag werden dann automatisch vor und hinter dem markierten Bereich eingefügt.

67815_tag-nutzen2-png

HTML-Tag nach dem Schreiben einfügen

Beide Varianten führen zu folgendem Ergebnis:

Dieser Text soll <strong>wichtig</strong> sein.

Unsere Empfehlung: Schreiben Sie zuerst den Text auf, lesen Sie ihn Korrektur und fügen Sie dann die benötigten Formatierungen hinzu. Diese Vorgehensweise ist übersichtlicher und wenn Sie im Browser eventuell eine Rechtschreibprüfung einsetzen, dann stolpert diese nicht über die für sie unbekannten (X)HTML-Tags.

Damit Sie die Quicktags auch im praktischen Einsatz sehen, folgt hier ein Beispieltext:

67810_beispieltext-png

Beispieltext ohne Auszeichnung

Zugegeben, der Text ist nicht sonderlich geistreich, aber als Beispiel reicht er allemal aus. Klicken Sie auf Vorschau (im Modul "Publizieren" rechts neben dem Texteingabefeld) und sehen Sie sich das Ergebnis im Frontend an:

67809_beispieltext-frontend-png

Der unformatierte Beispieltext

Nun geht es darum, den entsprechenden Textabschnitten Auszeichnungen zuzuweisen:

67807_beispieltext-ausgezeichnet-png

Beispieltext mit Auszeichnung

Anschließend klicken Sie auf Vorschau und sehen sich das Ergebnis an:

67808_beispieltext-frontend-ausgezeichnet-png

Der ausgezeichnete Beispieltext im Frontend

Das Einfügen des Links aus dem Beispieltext konnten Sie (noch) nicht nachvollziehen? Dann nur keine Pause machen und direkt mal weiter mit dem nächsten Thema.

Links einfügen

Möchten Sie ein Wort oder einen Abschnitt Ihres Textes verlinken, so markieren Sie das Wort bzw. den Bereich und klicken dann auf den Button "link" (Nr. 3 in der Leiste). Daraufhin öffnet sich ein Fenster, in das Sie die URL, also die Zieladresse der Verlinkung, eintragen müssen.

67813_link-einfuegen-html-png

Link einfügen

Bestätigen Sie Ihre Angabe im Anschluss mit "OK". Im Textfeld können Sie dann die eingefügte Verlinkung sehen:

67816_verlinkung-png

Verlinkter Text

Zeilenumbrüche und Absätze

Im HTML-Editor von WordPress müssen Sie die Zeilenumbrüche und Absätze nicht extra mit den passenden HTML-Tags (<br /> und <p>...</p>) auszeichnen. WordPress erkennt automatisch, wenn Sie innerhalb eines Textabschnitts 1x bzw. 2x auf die Enter-Taste drücken und generiert dann im Frontend automatisch einen Zeilenumbruch bzw. Absatz.

Für viele Redakteure, die aus dem Printbereich kommen, ist der folgende Hinweis wichtig. Sie sollten nach Möglichkeit auf den Einsatz des Zeilenumbruchs verzichten und stattdessen Absätze nutzen. Warum? Je nachdem mit welchem Browser der Besucher kommt und je nachdem, wie dieser eingestellt ist, sind die Längen der Zeilen unterschiedlich und so kommt es häufig vor, dass ein Zeilenumbruch (1x Enter) visuell nicht erkennbar ist.

Zur vermehrten Bildung von Zeilenumbrüchen kann es unter anderem kommen, wenn Sie Texte aus anderen Anwendungen in den HTML-Editor reinkopieren.

Darüber hinaus sollten Sie im Web eh etwas großzügiger schreiben, als Sie dies bei einem Buch oder Zeitungsartikel machen würden. Die Möglichkeiten, die Sie als Redakteur dabei haben, sind zum Beispiel kleinere oder besser gesagt kürzere Absätze und mehr Bilder. An dem Webdesigner liegt es, die verschiedenen Abstände zwischen den Absätzen und Zeile großzügiger anzulegen.

Dies ist im Web notwendig, weil die meisten Websites am PC-Monitor gelesen werden und das Auge des Betrachters mehr Orientierungspunkte benötigt, als dies bei einer Zeitschrift notwendig ist. Neueste Untersuchungen bestätigen, dass das Lesen eines Buches und auch das Lesen an den neuen E-Book-Readern viel effektiver ist als das Lesen an einem PC-Monitor.

Aufgabe:

1. Was bedeutet die Angabe "more" auf dem Button Nr. 12 der Quicktagleiste im HTML-Editor?

2. Erstellen Sie einen Artikel im HTML-Editor (auch wenn Sie sich dort nicht so sicher fühlen) und verlinken Sie einen Abschnitt.