2.3. Anzeigen von Text
Wenn Du Text auf Deiner Webseite anzeigen möchtest, kannst Du ihn einfach eintippen, da eine HTML-Datei sowieso immer nur aus Text besteht.
Das folgende Beispiel gibt den Text "Hier findest Du Deine Lieblingsbriefmarken" aus:
1. <html>
2. <head>
3. </head>
4. <body>
5. Hier findest Du
6. Deine Lieblingsbriefmarken.
7. </body>
8. </html>
Du kannst beliebig viel Text zwischen
<body> und
<body> einfügen.
Beachte bitte, dass es bei Zeilenumbrüchen in HTML eine Besonderheit gibt: die Zeilenumbrüche werden
nicht angezeigt. Aller Text wird als Fließtext angezeigt und vom Browser automatisch am Bildschirmrand umgebrochen. Das sieht auf dem Bildschirm dann so aus:
Hier findest Du Deine Lieblingsbriefmarken.
Zum Erzwingen eines Zeilenumbruchs gibt es das Tag
<br/>. Um Deinen Text zweizeilig auszugeben, musst Du das
<br/>-Tag wie im folgenden Beispiel angeben:
1. <html>
2. <head>
3. </head>
4. <body>
5. Dies ist Zeile 1.<br/>
6. Und das hier ist Zeile 2.
7. </body>
8. </html>
Auf Deiner Webseite sieht das dann so aus:
Dies ist Zeile 1.
Und das hier ist Zeile 2.
Nachfolgend beschreibe ich kurz weitere Text-Möglichkeiten:
Absätze
<p>...</p> Paragraf - bildet einen Absatz
Überschriften
<h1>...</h1> Überschrift, die Zahl gibt den Rang an (1 am wichtigsten).
Es gibt <h1>, <h2>, <h3>, <h4>, <h5> und <h6>.
Hervorhebungen im Text
<b>...</b> fett hervorgehoben (physikalisch) (HTML: stilistisch hervorgehoben)
<strong>...</strong> fett hervorgehoben (logisch) (HTML: Text ist wichtig)
<i>...</i> kursiv (schräg gestellt)
<em>...</em> Betonen von Text (oft kursiv dargestellt)
<sup>...</sup> hochgestellter Text
<sub>...</sub> tiefgestellter Text
<u>...</u> durchgestrichener Tex, veraltet, jetzt mit CSS gestalten
Trennlinie
<hr/> Trennlinie ziehen
Aufzählungen und Listen
Unsortierte Auflistung
<ul> Start einer Aufzählung
<li>...</li> Aufzählungspunkt
<li>...</li> nächster Aufzählungspunkt
</ul> Ende einer Aufzählung
Nummerierte Auflistung
<ol> im Gegensatz zu <ul> Aufzählungen mit Nummerierung
<li>...</li> Aufzählungspunkt
<li>...</li> nächster Aufzählungspunkt
</ol> Ende einer Aufzählung
Definitionsliste (z.B. für Glossare)
<dl>
<dt>Winter</dt>
<dd>ist kalt</dd>
<dt>Sommer</dt>
<dd>ist warm</dd>
</dl>
Oder etwas übersichtlicher im Quellcode:
<dl>
<dt>Winter</dt><dd>ist kalt</dd>
<dt>Sommer</dt><dd>ist warm</dd>
</dl>
logische Textauszeichnungen
<address>...</address> um eine Adresse zu kennzeichnen
<code>...</code> Quellcode darstellen
<samp>...</samp> Beispiel darstellen
<kbd>...</kbd> Tastatureingabe darstellen
<var>...</var> Variable darstellen
<pre>...</pre> präformatierter Textabschnitt
Definitionen, Abkürzungen und Zitate
<dfn>...</dfn> Definition
<abbr>...</abbr> Abkürzung
<q>...</q> Zitat
<cite>...</cite> Quelle oder Autor v. Zitat
<blockquote>...</blockquote> Zitat (Block-Element)
Änderungsmarkierungen
<el>...</del> Inhalt ist veraltet und nicht mehr gültig
<ins>...</ins> Inhalt ist auf einer Seite neu dazugekommen
physische Textauszeichnungen
<small>...</small> Text wird kleiner dargestellt
Abschnitt für CSS-Definitionen
<style>...</style> CSS-Definitionsbereich in HTML-Datei (siehe
Kapitel CSS)
Bereiche festlegen ohne vordefinierte logische Struktur
<div>...</div> Bereich festlegen (Blockelement)
<span>...</span> einen Formatierungsbereich festlegen (Inline-Element)
Klasse/ID einfügen für Verknüpfung mit CSS und JavaScript
Die Attribute class und id können bei jedem HTML-Befehl genutzt werden. Sehr oft werden diese gerne bei <div> und <span> genutzt. Die eigentliche Stärke von Klassen und IDs kommt erst durch CSS zum Vorschein.
<span class="klassenname"> Notwendig, damit man über CSS das Design für den gewählten Bereich beeinflussen kann!
<span id="idname"> genauso wie class, aber der ID-Name darf pro HTML-Einzelseite nur einmal vorkommen. Die ID's können überigens auch für
JavaScript genutzt werden.
Wenn Du Fragen hast, nutze einfach mein
Kontaktformular.