Kleines HTML für Anfänger
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:
<Element-Name>
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
<Element-Name>
markierte Textpassage</Element-Name>
… oder stehen für sich alleine da:
<Element-Name />
Es ist auch möglich mehrere HTML-Elemente verschachtelt anzuwenden:
<Element-Name1><Element-Name2>
markierte Textpassage</Element-Name2></Element-Name1>
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.
<inline-element>
Etiam</inline-element>
quis erat eu tellus adipiscing consectetuer. Cras leo velit, sollicitudin a, euismod quis, varius nec, nulla.<block-element>
Etiam</block-element>
quis erat eu tellus adipiscing consectetuer. Cras leo velit, sollicitudin a, euismod quis, varius nec, nulla.
Im Folgenden werden die beim Bloggen gebräuchlichsten HTML-Elemente mit Anwendungsbeispielen vorgestellt.
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:
<strong>
ipsum</strong>
dolor sit amet, consectetuer adipiscing elit.So sieht’s im Browser aus:
Kursiv
Lässt Text schräggestellt erscheinen. Verschiedene Anwendungsmöglichkeiten
<em>
…</em>
Typ: Inline-Element, paarweise
Beispieltext mit em-Element:
<em>
ipsum</em>
dolor sit amet, consectetuer adipiscing elit.So sieht’s im Browser aus:
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:
<del>
19,99 €</del>
14,99 €.So sieht’s im Browser aus:
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.
Horizontale Trennlinie
Lässt eine horizontale Trennlinie erscheinen.
<hr />
Typ: Inline-Element, einzeln
Beispieltext ohne HTML:
mit Trennlinie dazwischen:
<hr />
Aenean hendrerit, neque sed posuere pharetra, est ante aliquam ligula, at fermentum libero enim sed libero.So sieht’s im Browser aus:
Aenean hendrerit, neque sed posuere pharetra, est ante aliquam ligula, at fermentum libero enim sed libero.
Ü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:
<h1>
Überschrift</h1>
So sieht’s im Browser aus:
Überschrift
Selfhtml-Infos zu Überschriften
Absätze
Formatiert Absätze.
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
Typ: Block-Element, paarweise
Beispieltext mit p-Element:
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sedut sem et nunc cursus rutrum.</p>
<p>
Curabitur auctor venenatis nibh. Aenean hendrerit, neque sed posuere pharetra, est ante aliquam ligula, at fermentum libero enim sed libero.</p>
So sieht’s im Browser aus:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sedut sem et nunc cursus rutrum.
Curabitur auctor venenatis nibh. Aenean hendrerit, neque sed posuere pharetra, est ante aliquam ligula, at fermentum libero enim sed libero.
Zeilenumbrüche
Lässt den dahinterstehenden Text in einer neuen Zeile erscheinen.
<br />
Typ: Inline-Element, einzeln
Beispieltext mit br-Element:
<br />
Aenean hendrerit, neque sed posuere pharetra, est ante aliquam ligula, at fermentum libero enim sed libero.So sieht’s im Browser aus:
Aenean hendrerit, neque sed posuere pharetra, est ante aliquam ligula, at fermentum libero enim sed libero.
Selfhtml-Infos zu Zeilenumbrüchen
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:
<a href="http://www.adc11.de/">
Alp Uçkans Website</a>
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:
<a href="mailto:email@adc11.de">
email@adc11.de</a>
So sieht’s im Browser aus:
Mehr über die Gestaltung von Hyperlinks finden Sie im Artikel Link-Setzen in Webtexten für Anfänger.
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:
<img src="http://www.adc11.de/files/2015/08/yin_yang.png" width="54" height="54" alt="Yin-Yang-Symbol" />
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
Aufzählungen
Macht Aufzählungslisten mit Punkten.
<ul>
…
<li></li>
…
<li></li>
…
<li></li>
</ul>
Typ: Block-Element, paarweise
Beispieltext mit ul, li-Element:
<ul>
<li>
Dies ist Punkt 1</li>
<li>
Dies ist Punkt 2</li>
<li>
Dies ist Punkt 3</li>
</ul>
So sieht’s im Browser aus:
- Dies ist Punkt 1
- Dies ist Punkt 2
- Dies ist Punkt 3
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:
<ol>
<li>
Dies ist Punkt 1</li>
<li>
Dies ist Punkt 2</li>
<li>
Dies ist Punkt 3</li>
</ol>
So sieht’s im Browser aus:
- Dies ist Punkt 1
- Dies ist Punkt 2
- Dies ist Punkt 3
Selfhtml-Infos zu Aufzählungslisten
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:
<q>
Zeit ist relativ</q>
So sieht’s im Browser aus:
Zeit ist relativ.
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:
Curabitur rhoncus aliquet wisi. Praesent at mi sit amet velit hendrerit pretium. In vel quam. Quisque id libero. Fusce semper tempor est. Morbi bibendum. Sed hendrerit eleifend est. Aenean sollicitudin. Proin at lacus nec ante fermentum tempor.
Donec bibendum ipsum id lectus. Vestibulum malesuada. Nulla libero. Donec quis dui vitae lacus tempus posuere. Curabitur sit amet ligula.
Maecenas lacus justo, lobortis non, placerat nec, dictum quis, nisl. Nulla vel libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
mit blockquote-Element:
<blockquote><p>
Curabitur rhoncus aliquet wisi. Praesent at mi sit amet velit hendrerit pretium. In vel quam. Quisque id libero. Fusce semper tempor est. Morbi bibendum. Sed hendrerit eleifend est. Aenean sollicitudin. Proin at lacus nec ante fermentum tempor.
</p></blockquote>
Donec bibendum ipsum id lectus. Vestibulum malesuada. Nulla libero. Donec quis dui vitae lacus tempus posuere. Curabitur sit amet ligula.
Maecenas lacus justo, lobortis non, placerat nec, dictum quis, nisl. Nulla vel libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
So sieht’s im Browser aus:
Curabitur rhoncus aliquet wisi. Praesent at mi sit amet velit hendrerit pretium. In vel quam. Quisque id libero. Fusce semper tempor est. Morbi bibendum. Sed hendrerit eleifend est. Aenean sollicitudin. Proin at lacus nec ante fermentum tempor.
Donec bibendum ipsum id lectus. Vestibulum malesuada. Nulla libero. Donec quis dui vitae lacus tempus posuere. Curabitur sit amet ligula.
Maecenas lacus justo, lobortis non, placerat nec, dictum quis, nisl. Nulla vel libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
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:
<q cite="http://zitatquelle.adresse.de/">
Zeit ist relativ</q>
blockquote-Element mit cite-Attribut:
<blockquote cite="http://zitatquelle.adresse.de/"><p>
Curabitur rhoncus aliquet wisi. Praesent at mi sit amet velit hendrerit pretium. In vel quam. Quisque id libero. Fusce semper tempor est. Morbi bibendum. Sed hendrerit eleifend est. Aenean sollicitudin. Proin at lacus nec ante fermentum tempor.
</p></blockquote>
Donec bibendum ipsum id lectus. Vestibulum malesuada. Nulla libero. Donec quis dui vitae lacus tempus posuere. Curabitur sit amet ligula.
Maecenas lacus justo, lobortis non, placerat nec, dictum quis, nisl. Nulla vel libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
So sieht’s im Browser aus:
Curabitur rhoncus aliquet wisi. Praesent at mi sit amet velit hendrerit pretium. In vel quam. Quisque id libero. Fusce semper tempor est. Morbi bibendum. Sed hendrerit eleifend est. Aenean sollicitudin. Proin at lacus nec ante fermentum tempor.
Donec bibendum ipsum id lectus. Vestibulum malesuada. Nulla libero. Donec quis dui vitae lacus tempus posuere. Curabitur sit amet ligula.
Maecenas lacus justo, lobortis non, placerat nec, dictum quis, nisl. Nulla vel libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
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:
<blockquote cite="http://zitatquelle.adresse.de/"><p>
Curabitur rhoncus aliquet wisi. Praesent at mi sit amet velit hendrerit pretium. In vel quam. Quisque id libero. Fusce semper tempor est. Morbi bibendum. Sed hendrerit eleifend est. Aenean sollicitudin. Proin at lacus nec ante fermentum tempor.
</p>
<address><a href="http://zitatquelle.adresse.de/">
Name des zitierten Autors, Titel des zitierten Artikels, Datum des zitierten artikels</a></address></blockquote>
Donec bibendum ipsum id lectus. Vestibulum malesuada. Nulla libero. Donec quis dui vitae lacus tempus posuere. Curabitur sit amet ligula.
Maecenas lacus justo, lobortis non, placerat nec, dictum quis, nisl. Nulla vel libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
So sieht’s im Browser aus:
Curabitur rhoncus aliquet wisi. Praesent at mi sit amet velit hendrerit pretium. In vel quam. Quisque id libero. Fusce semper tempor est. Morbi bibendum. Sed hendrerit eleifend est. Aenean sollicitudin. Proin at lacus nec ante fermentum tempor.
Name des zitierten Autors, Titel des zitierten Artikels, Datum des zitierten artikels
Donec bibendum ipsum id lectus. Vestibulum malesuada. Nulla libero. Donec quis dui vitae lacus tempus posuere. Curabitur sit amet ligula.
Maecenas lacus justo, lobortis non, placerat nec, dictum quis, nisl. Nulla vel libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Selfhtml-Infos zu q-Zitaten
Selfhtml-Infos zu Blockquote-Zitaten
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:
<abbr title="HyperText Markup Language">
HTML</abbr>
So sieht’s im Browser aus:
acronym-Element:
<acronym title="North Atlantic Treaty Organisation">
NATO</acronym>
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.