Dieser Artikel erklärt Blog-Einsteigern die einfachsten HTML-Anweisungen, mit denen sich Blogeinträge formatieren lassen.

• Das Prinzip
• Fettdruck
• Kursiv
• Durchgestrichen
• Unterstrichen
• Horizontale Trennlinie
• Überschriften
• Absätze
• Zeilenumbrüche
• Hyperlinks, Verweise
• Grafiken
• Aufzählungen
• Zitate
• Abkürzungen

Das Prinzip

In der Webseitenbeschreibungssprache HTML verwendet man für die Formatierung sogenannte Tags (engl., ausgesprochen: „tägs“) oder Elemente. Ein HTML-Element wird nach folgendem Muster einfach in einen Text einer Webseite eingesetzt:

Die Größer/Kleiner-Klammern <> sorgen dafür, dass der WWW-Browser ihn als HTML-Anweisung erkennt und nicht das Element selbst, sondern seine Auswirkung auf den Webtext darstellt.

HTML-Elemente umschliessen entweder die Textpassagen, die sie formatieren, dass heisst, es gibt sie paarweise mit einen Anfangs- und einen Abschluss-Element

… oder stehen für sich alleine da:

Es ist auch möglich mehrere HTML-Elemente verschachtelt anzuwenden:

Dabei muss man eine Unterscheidung beachten: Es gibt sogenannte Inline– und Block-Elemente. Block-Elemente können weitere Block- oder Inline-Elemente beinhalten. Inline-Elemente dürfen nur weitere Inline-Elemente beinhalten. Mit Inline-Elementen versehen Textpassagen werden innerhalb des normalen Textflusses dargestellt. Block-Elemente hingegen erzwingen im Browser einen Zeilenumbruch.

Im Folgenden werden die beim Bloggen gebräuchlichsten HTML-Elemente mit Anwendungsbeispielen vorgestellt.

(zum Seitenanfang)

Fettdruck

Lässt Text fettgedruckt erscheinen. Anwendung bei besonderer Betonung eines Wortes / einer Textpassage.

<strong>…</strong>

Typ: Inline-Element, paarweise

Beispieltext ohne HTML:

mit strong-Element:

So sieht’s im Browser aus:

Selfhtml-Infos zu strong

(zum Seitenanfang)

Kursiv

Lässt Text schräggestellt erscheinen. Verschiedene Anwendungsmöglichkeiten

<em>…</em>

Typ: Inline-Element, paarweise

Beispieltext mit em-Element:

So sieht’s im Browser aus:

Selfhtml-Infos zu em

(zum Seitenanfang)

Durchgestrichen

Lässt Text durchgestrichen erscheinen. Wird häufig verwendet, um die Richtigkeit/Gültigkeit einer Aussage aufzuheben, ohne die Info von der Website zu entfernen.

<del>…</del>

Typ: Inline-Element, paarweise

Beispieltext mit durchgestrichen-Element:

So sieht’s im Browser aus:

(zum Seitenanfang)

Unterstrichen

Der Vollständigkeit wegen soll noch erwähnt werden, dass es das <u>…</u>-Element gibt, der Text unterstrichen darstellt. Da es durch den Einsatz dieses Elements aber zur Verwechslungsgefahr mit Hyperlinks kommt (welche von Natur aus unterstrichen sind), wird er kaum eingesetzt.

(zum Seitenanfang)

Horizontale Trennlinie

Lässt eine horizontale Trennlinie erscheinen.

<hr />

Typ: Inline-Element, einzeln

Beispieltext ohne HTML:

mit Trennlinie dazwischen:

So sieht’s im Browser aus:

Selfhtml-Infos zu Trennlinien

(zum Seitenanfang)

Überschriften

Formatiert Überschriften. Es gibt 6 Stufen für Überschriften die mit den Elementen h1, h2, h3, h4, h5, h6 dargestellt werden. Benutzen Sie diese Elemente innerhalb einer WWW-Seite nur in der hierarchigen Reihenfolge und ohne eine Stufe zu überspringen. Das heisst, die oberste Überschrift ist mit h1, Unterkapitel mit h2, deren Unterkapitel mit h3 usw. zu bezeichnen (h1 – h2 – h3 – h4 …). Nicht (h1 – h3 – h4 – h5 …) und auch nicht z.B. (h2 – h3 – h4 – h5 …)

Verwenden Sie kein <strong> für Überschriften und umgekehrt keine h1 bis h6-Überschriften, nur um einen Text hervorzuheben.

<h1>Überschrift</h1>

Typ: Block-Element, paarweise

Beispieltext mit h1-Element:

So sieht’s im Browser aus:

Selfhtml-Infos zu Überschriften

(zum Seitenanfang)

Absätze

Formatiert Absätze.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Typ: Block-Element, paarweise

Beispieltext mit p-Element:

So sieht’s im Browser aus:

Selfhtml-Infos zu Absätzen

(zum Seitenanfang)

Zeilenumbrüche

Lässt den dahinterstehenden Text in einer neuen Zeile erscheinen.

<br />

Typ: Inline-Element, einzeln

Beispieltext mit br-Element:

So sieht’s im Browser aus:

Selfhtml-Infos zu Zeilenumbrüchen

(zum Seitenanfang)

Hyperlinks, Verweise

macht aus einem Wort, Bild oder Textpassage einen Hyperlink. Verwenden Sie bei der URL-Schreibweise immer ein http:// mit kompletter URL-Angabe.

<a href="http://www.website.de/">hyperlink-Titel</a>

Typ: Inline-Element, paarweise

a-Element:

So sieht’s im Browser aus:

Um einen Email-Link zu setzen, schreibt man die Emailadresse in die href-Eigenschaft und stellt ein mailto: davor:

So sieht’s im Browser aus:

Mehr über die Gestaltung von Hyperlinks finden Sie im Artikel Link-Setzen in Webtexten für Anfänger.

(zum Seitenanfang)

Grafiken

Fügt ein Bild ein. Benötigt 4 sogenannte Attribute (Eigenschaften): Die URL (src-Eigenschaft), wo sich die Grafik-Datei befindet, die Breite des Bildes in Pixeln (width-Eigenschaft), die Höhe des Bildes in Pixeln (height-Eigenschaft) und einen alternativen Text (alt-Eigenschaft) den Ausgabegeräte, die keine Bilder darstellen, stattdessen anzeigen können. Alle 4 Eigenschaften müssen angeben sein.

<img src="http://www.adresse.de/wo/sich/das/bild/befindet.jpg" width="Bildbreite" height="Bildhöhe" alt="Bildbeschreibung" />

Typ: Inline-Element, einzeln

img-Element:

So sieht’s im Browser aus:

Die Höhe und breite einer Grafik finden Sie in jedem Grafikprogramm heraus. Wenn Sie kein Grafikprogramm besitzen, können Sie die Grafik erst mal auf den Webserver hochladen, es mit dem img-Element ohne die width- und height-Angaben einbinden, die Seite mit der eingebundenen Grafik im Browser aufrufen und dann mit einem Rechtsklick auf das Bild den Punkt „Eigenschaften“ auswählen. Dort stehen dann die Abmessungen des Bildes in Pixeln (px).

Selfhtml-Infos zu Grafiken einbinden

(zum Seitenanfang)

Aufzählungen

Macht Aufzählungslisten mit Punkten.

<ul>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>

Typ: Block-Element, paarweise

Beispieltext mit ul, li-Element:

So sieht’s im Browser aus:

Es lassen sich auch Aufzählungslisten mit Nummerierung erzeugen, in dem man das ul-Element einfach durch ein ol-Element ersetzt:

Beispieltext mit ol, li-Element:

So sieht’s im Browser aus:

Selfhtml-Infos zu Aufzählungslisten

(zum Seitenanfang)

Zitate

Es gibt 2 HTML-Elemente, mit denen Zitate dargestellt werden können: q als Inline-Element für Kurzzitate innerhalb des normalen Textflusses und blockquote als Block-Element für längere Zitate.

<q>…</q>

Typ: Inline-Element, paarweise

Beispieltext mit q-Element:

So sieht’s im Browser aus:

Wenn ihr Browser keinen Unterschied darstellt, verwenden Sie höchstwahrscheinlich den Microsoft Internet Explorer. Ignorieren Sie im Hinblick auf die Zukunft am besten diesen Browser-Fehler und verwenden Sie trotzdem das q-Element.

Das Blockquote-Element benötig zusätzlich noch ein Element (z.B. das p-Element für Absatz) in welches der zitierte Text eingeschlossen wird

<blockquote><p>…</p></blockquote>

Typ: Inline-Element, paarweise

Beispieltext ohne HTML:

mit blockquote-Element:

So sieht’s im Browser aus:

Das ist die einfachste Formen des Zitierens. Man kann in beiden Elementen auch die Zitatquelle (welches eine WWW-Adresse sein muss) angeben. Verwenden Sie dafür bei beiden das cite-Attribut:

q-Element mit cite-Attribut:

blockquote-Element mit cite-Attribut:

So sieht’s im Browser aus:

WWW-Browser zeigen das cite-Attribut nicht an, da es mehr für Maschinen bestimmt ist. Es ist trotzdem ein guter Stil, die Zitatquellen mit anzugeben.

Damit nicht nur Maschinen die Zitatquellen erkennen, sondern auch ihre Besucher, können Sie folgenden Zitatkennzeichnung verwenden:

blockquote-Element mit cite-Attribut und eine Hyperlink zur Zitatquelle:

So sieht’s im Browser aus:

Selfhtml-Infos zu q-Zitaten
Selfhtml-Infos zu Blockquote-Zitaten

(zum Seitenanfang)

Abkürzungen

Es gibt 2 Elemente, um Abkürzungen zu beschreiben: abbr und acronym. Der feine Unterschied ist: Wenn man eine Abkürzung buchstabierend ausspricht, wie z.B.“EU“ oder „HTML“, dann ist es abbr. Wenn eine Abkürzung wie ein Wort durchgesprochen wird, wie „NATO“ oder „AIDS“, dann ist es acronym.

<abbr title="ausgeschrieben">Abkürzung</abbr>

<acronym title="ausgeschrieben">Abkürzung</acronym>

Typ: Inline-Element, paarweise

abbr-Element:

So sieht’s im Browser aus:

acronym-Element:

So sieht’s im Browser aus:

Wenn Sie den Mauszeiger über die (untergepunktete) Abkürzung halten, erscheint ein kleines Textfenster mit dem ausgeschriebenen Begriff. Wenn Sie keine Unterpunkte sehen, liegt das an ihrem WWW-Browser.