Im dritten Teil unseres Artikelworkshops “HTML und CSS erlernen”, erklären wir Ihnen heute wie Sie Texte richtig formatieren. Unser Workshop ist genau das richtige für Einsteiger, welche ihre eigene Website von Grund an selbst erstellen möchten, oder auch für Fortgeschrittene, welche unseren Workshop als Nachschlagewerk nutzen möchten.
In der vorletzten Woche startete dieser Workshop auf Private-Words.com. Hier lernen Sie, wie Sie in einfachen Schritten Websites selbst erstellen können. Heute zeigen wir Ihnen, wie Sie Texte richtig formatieren.
Wie im ersten Teil dieses Workshops bereits erwähnt, brauchen Texte keine eigenen Tags. Sie können einfach in den Quelltext geschrieben werden. Jedoch werden sie dann als Block-Text ohne Zeilenumbrüche dargestellt.
Hier ein Beispiel:
<!Doctype html> <html> <head> </head> <body> Hier ist der Text den wir gleich formatieren. Wir lernen so spielend leicht HTML und können unsere Texte formatieren. </body> </html>
Wenn wir diesen Quelltext so von einem Editor ausgeben lassen, sehen wir, dass der Text nebeneinander geschrieben ist. Um dies zu ändern, benötigen wir die folgenden Textformatierungsbefehle:
- Möchte man einen Zeilenumbruch hinzufügen, so benötigt man den „br“-Tag
- Wenn man jedoch einen Absatz benötigt, nimmt man den „p“-Tag
- Möchte man eine freie Fläche erzeugen, sollte man auf den sogenannten „non breakting space“ ( ) zurückgreifen, da Tabulatoren in der Ausgabe ignoriert werden
- Möchte man Überschriften hinzufügen, kann man diese in „h“-Tags schreiben
Es gibt 6 verschiedene „h“-Tags die aufwärts nummeriert werden, wie z.B.:
<h1> Das ist die größtmögliche Überschrift</h1> <h6> Das ist die kleinstmögliche Überschrift</h6>
Möchte man Trennlinien hinzufügen, kann man das durch einen „hr“-Tag machen. Diesen kann man getrost wie folgt schreiben. <hr />
Hier noch einige Weitere Befehle die man nutzen kann um seine Texte zu formatieren:
| Fettschrift | <b>…</b> | Ist ein physischer Tag für bold (wird nicht empfohlen) |
| <strong>…</strong> | Logischer Tag für Fettschrift | |
| Kursivschrift | <i>…</i> | Physischer Tag für italic |
| <em>…</em> | Logischer Tag für betont | |
| Tags zur Textauszeichnung | <abbr> | Textbereich als Abkürzung |
| <code> | Bedeutung: Quelltext | |
| <address> | Kennzeichnet Text als Adresse | |
| <del> | Kennzeichnung gelöschter teile | |
| <q> | Kurzes Zitat | |
| <s> | Text ist falsch und wird durchgestrichen | |
| <sup>…</sup> | Hochgestellter Text | |
| <sub>…</sub> | Tiefgestellter Text |
Das war alles ziemlich „trocken“, darum habe ich hier mal einen Quelltext, in dem man die wichtigsten Befehle einmal in der Praxis sieht:
<html>
<head>
<title>Text Formatierung</title>
</head>
<body>
<h1>Überschrift</h1>
<h3>Teilüberschrift 1</h3>
<hr>
<i>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
</i>
<hr />
<h3>Teilüberschrift 2</h3>
<hr />
<b>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean
</b>
<hr />
<h3>Teilüberschrift 3</h3>
<hr />
<s>
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor
</s>
<hr />
</body>
</html>
Alle Teile des Workshops jetzt kostenlos abrufen:
- Grundstruktur einer HTML-Datei
- Tabellen und Listen
- Textformatierung
- Links, Videos & Bilder
- Formulare
- Die erste CSS-Datei
Artikelbild: Sebastian Fuss / pixelio.de
