los (1K)2. HTML: Text auszeichnen

Mit Überschriften, Absätzen, Listen und physischen Marken Text gestalten

In diesem Kapitel lernst du, wie man mit HTML-Marken Text durch Absätze, Listen und Überschriften gliedert, und durch die Verwendung von schräggestellter, fetter oder unterstrichener Schrift schmückt und übersichtlicher macht.
Wie man mit unterschiedlichen Schriftgrößen und Farben Text noch flexibler gestalten kann zeigt dir:
7. HTML: CSS verwenden. Doch hier erst einmal die HTML-Grundlagen:

Vorbereitung | Überschriften benutzen | Text gliedern | Text schmücken
Wir brauchen: Computerraum

Wiederholung

Im letzten Kapitel haben wir den Grundaufbau einer HTML-Seite kennengelernt, wie man sie abspeichert, mit dem Browser öffnet und welche Regeln es beim Benennen zu beachten gilt.

Unsere kleine, erste selbstgeschriebene Datei sah so aus:

<html>
<head>
<title>Mein erstes St&uuml;ck</title>
</head>
<body>
Mein erstes St&uuml;ck
</body>
</html>

Du erinnerst dich: In den Marken zwischen <body> und </body> steht der Text, der nachher im Browser auf der Seite angezeigt wird.
Der Titel dagegen steht im Kopfbereich im title-Tag

 

Vorbereitung

Um zu zeigen, was die Sprache HTML so kann, werden wir unsere erste Datei noch ein bisschen weiter mit dem Editor bearbeiten:

Erstelle dazu eine Kopie von los_01.htm auf dem Schreibtisch. Um die Wirkung unserer Befehle auf das Aussehen unserer Datei im Browser nach jeder Änderung im Quelltext überprüfen zu können, öffnen wir los_01.htm mit zwei Programmen gleichzeitig: dem Browser und dem Editor.

zwei_fenster (18K)
So ähnlich sollte dein Bildschirm am Schluss aussehen
  1. Um die Datei mit dem Browser zu öffen, musst du nur auf die Datei doppelklicken. (Sie sollte sich auf dem Schreibtisch befinden)
  2. Das Öffnen der Datei mit dem Editor ist komplizierter, entweder:
    1. Datei aktivieren (einmal klicken), dann rechter Mausklick auf Datei bei gedrückter "Hochstell"-Taste und im sich nun öffnenden "öffnen mit..."-Dialog Programm Editor wählen, oder...
    2. per "Drag&Drop" Datei auf Programmsymbol Editor auf Schreibtisch ziehen. (Dazu vorher eine Verknüpfung mit dem Programm Editor auf dem Schreibtisch erstellen. Tip: Öffne Startmenü/Programme/Zubehör/Editor. Editor-symbol auf Desktop ziehen.
  3. Jetzt beide Fenster an den Bildschirm anpassen und nebeneinander anordnen (siehe Screenshot).
    Das geht manuell mit der Maus oder bequemer mit rechtem Mausklick auf die Windows-Taskbar und Befehl Nebeneinander:
  4. Wir löschen jetzt den alten Text. Dann importieren wir etwas Text zur Bearbeitung in unsere geöffnete Quelltext-Datei im Editor-Fenster.
  5. Dazu öffnen wir die Text-Datei los_02.txt, alles auswählen (Strg A), kopieren (Strg C) und dann im Editorfenster unserer Datei los_01.htm zwischen den Marken <body> und </body> mit dem einfügen-Befehl (Strg V) platzieren.
Der Clou:
  • Nach jeder Änderung am Quelltext im Editor-Fenster die Datei neu abspeichern
  • Dann zum Browserfenster wechseln, und den refresh-Button des Browsers drücken(IE: "aktualisieren")
    Wahlweise F5-Taste (IE) oder rechter Mausklick ins Browserfenster und "Aktualisieren" wählen
  • Der Browser zeigt nun treu die letzte Änderung an - In diesem Fall den neuen, unformatierten Text
Nach diesem Schema funktionieren auch die professionellen HTML-Programme mit integrierter Browservorschau. So etwas haben wir uns eben sozusagen selbst gebastelt. Später werden wir solch ein "richtiges" Programm kennenlernen und auch damit arbeiten: Siehe 2. Werkzeuge: HTML-Kit

Nach dem Speichern und Aktualisieren sollte unser Fenster jetzt so aussehen wie der screenshot oben.

 

Wir definieren Überschriften

Du bist wahrscheinlich ein bisschen erstaunt, wie unser Text im Browserfenster nun aussieht.
Wir sind auf eine Besonderheit der HTML gestoßen:
Und zwar fallen alle Zeilenschalter und Tabulatoren "unter den Tisch", sie werden nicht beachtet. Ebenso ist es bei der Verwendung von mehr als einem Leerzeichen hintereinander: nur das Erste wird beachtet, alle weiteren gelten als nicht geschrieben.

Grund: In der HTML sind Zeilenschalter, Tabulatoren und Leerzeichen dafür reserviert um den Quelltext übersichtlich und überschaubar zu gestalten. Um die Browser-Textausgabe zu strukturieren gibt es besondere Marken.

Um etwas Ordnung in das Chaos zu bringen, werden wir nun den Text etwas in Form bringen, indem wir normalen Text zu Überschriften formatieren.

Übersicht: Alle Überschriftsmarken
<HTML-Marke> Auswirkung im Layout der Seite
Anmerkung: Die Tabelle gibt die Auswirkung der h1, h2 ...h6 Marken im Los! Layout wieder
<h1>Überschrift 1.Ordnung</h1>

Überschrift 1.Ordnung

<h2>Überschrift 2.Ordnung</h2>

Überschrift 2.Ordnung

<h3>Überschrift 3.Ordnung</h3>

Überschrift 3.Ordnung

<h4>Überschrift 4.Ordnung</h4>

Überschrift 4.Ordnung

<h5>Überschrift 5.Ordnung</h5>
Überschrift 5.Ordnung
<h6>Überschrift 6.Ordnung</h6>
Überschrift 6.Ordnung

Mit den Marken h1, h2, h3, h4, h5, h6 formatierst du Text zu Kapitelüberschriften. Überschriften sind nicht nur einfach sehr großer und fetter Text, sondern sogenannte kontextspezifische Textauszeichnungen.
Mit Überschriftsmarken sagst du also dem Leser deiner Seite auch: das ist Text, der etwas Wichtiges über den Inhalt dieser Seiten aussagt.
Die robots der Suchmaschinen lesen diese Überschriften bevorzugt aus, und ermitteln aus ihnen die inhaltliche Bedeutung deiner Seiten für deren Einordnung in die Verzeichnisse der Suchmaschinen. Überschriften liefern auch die passenden Schlüsselwörter zu den Schlüsselwörtern der Suchanfragen der Suchmaschinenbenutzer.

Du solltest die Überschriftsmarken immer verwenden, sobald es inhaltlich geboten erscheint - wenn dadurch schlagwortartig auf den Inhalt des nachfolgenden Textes verwiesen wird. (Nur sehr großen und fetten Text ohne inhaltlich herausragende Bedeutung kann man auch anders erzeugen - wie, das lernen wir später)

Also - Überschriften mit Köpfchen verwenden!

Das ist nicht nur eine nette Geste gegen den Leser, sonder langfristig - über die Einträge der Suchmaschinen - auch der richtige Weg, um genau deine Zielgruppe auf deine Seite zu bringen!

Anmerkung: Die Überschriftsmarken zählen zu den sogenannten Blockelementen, d.h. sie erzeugen automatisch einen Zeilenvorschub zu Beginn und Ende!
 

So kannst du Text gliedern

In der HTML sind Zeilenschalter, Tabulatoren und Leerzeichen dafür reserviert um den Quelltext übersichtlich und überschaubar zu gestalten. Um die Browser-Textausgabe zu strukturieren gibt es besondere Marken, und zwar:

Die Marke <br> bewirkt einen einfachen Zeilenvorsschub (eine neue Zeile). Hinweis: eine der wenigen Marken ohne End-tag!

Die Marke <p></p> formatiert eingeschlossenen Text zum Absatz. Die Marke p ist ein Blockelement und erzeugt wie auch h1, h2,... h6 zu Beginn und Ende Zeilenvorschübe und einen größeren Abstand zum umgebenden Text.

Willst du mehr als ein Leerzeichen hintereinander erzwingen, so benutzt du das geschützte Leerzeichen. Man schreibt es &nbsp;.
Seinen Namen hat es daher, weil es einen Zeilenumbruch verhindert. Verbindest du also zwei Wörter mit dem &nbsp; , so erfolgt am Ende der Zeile kein normaler Umbruch. Die beiden Worte bleiben immer wie aneinander geschweisst. Sinnvoll ist die Verwendung z.B. bei Zahlenangaben mit Währungssymbol.
Beispiel: Der Satz: "Für neue Sportgeräte spendete der Elternbeirat mehr als 1.200 €!" lautet dann in HTML:

F&uuml;r neue Sportger&auml;te spendete der
Elternbeirat mehr als 1.200&nbsp;&euro;!

Das geschützte Leerzeichen verhindert, dass sich das Eurozeichen in die nächste Zeile verabschiedet, falls die Zahlenangabe mal über das Ende der Zeile hinausrutscht. Und das Eurozeichen haben wir jetzt nebenbei auch schon gelernt!

Die Marke <hr> erzeugt eine horizontale Linie quer zum Text. Sie hat, ebenso wie <br> kein End-tag!

Wie man Text mit einer ungeordneten Liste übersichtlicher gestaltet demonstrieren wir an einem Beispiel aus unserem importieren Text los_02.txt, dort findet sich folgende Textpassage mit einer kurzen Aufzählung:

Dazu gehören zum Schulaltag neben gemeinschaftsbildenden Vorhaben
einzelner Klassen wie z.B.
Schullandheimaufenthalte,
Korrespondenz mit Partnerklassen,
Kunstausstellungen im Schulhaus,
Lese- und Filmnächte im Klassenzimmer u.ä.
alle neuen Formen des handlungsorientierten Unterrichts

Wir formatieren die vier genannten Punkte mit Hilfe einer ungeordneten Liste: Die Marke lautet <ul></ul>. Jeder Listenunterpunkt erhält die Marke <li></li>. Die HTML-Auszeichnung sieht dann aus wie unten in dem gelben Kasten:

Die Auswirkung im Browser zeigt Beispiel 3

Dazu gehören zum Schulaltag neben gemeinschaftsbildenden Vorhaben
einzelner Klassen wie z.B.
<ul>
<li>Schullandheimaufenthalte,</li>
<li>Korrespondenz mit Partnerklassen,</li>
<li>Kunstausstellungen im Schulhaus,</li>
<li>Lese- und Filmnächte im Klassenzimmer u.ä.</li>
</ul>
alle neuen Formen des handlungsorientierten Unterrichts

Genau nach demselben Muster funktionert auch die geordnete Liste: verwende einfach statt <ul></ul> die Marke <ol></ol>. Du erhältst dann wie durch ein Wunder eine nummerierte Aufzählung, ohne selbst Zahlen eintippen zu müssen!

Die Auswirkung im Browser zeigt Beispiel 4

Dazu gehören zum Schulaltag neben gemeinschaftsbildenden Vorhaben
einzelner Klassen wie z.B.
<ol>
<li>Schullandheimaufenthalte,</li>
<li>Korrespondenz mit Partnerklassen,</li>
<li>Kunstausstellungen im Schulhaus,</li>
<li>Lese- und Filmnächte im Klassenzimmer u.ä.</li>
</ol>
alle neuen Formen des handlungsorientierten Unterrichts
 

So kannst du Text schmücken - Einige inline-Elemente

Übersicht: Physische Textmarken
<HTML-Marke> Auswirkung im Layout der Seite
Anmerkung: Die Tabelle gibt die Auswirkung der Marken im Los! Layout wieder
<b>fetter Text</b> fetter Text
<i>kursiver Text</i> kursiver Text
<big>großer Text</big> großer Text
<small>kleiner Text</small> kleiner Text
<u>unterstrichener Text</u> unterstrichener Text
<s>durchgestrichener Text</s> durchgestrichener Text
<sub>tiefgestellter Text</sub> tiefgestellter Text
<sup>hochgestellter Text</sup> hochgestellter Text
<tt>Schreibmaschinen Text</tt> Schreibmaschinen Text

In der HTML gibt es zahlreiche Marken, um einzelne Textelemente besonders hervorzuheben. Du benutzt sie, wenn du Zitate vom übrigen Text abheben, oder z.B. Schlagwörter durch besonders fette, kursive (=schräggestellte) oder große und kleine Schrift betonen möchtest. Oder auch durch Unterstreichen, oder gar Durchstreichen! Man nennt diese Marken zur Hervorhebungen auch physische oder absolute Marken, im Unterschied zu den kontextbezogenen Marken.

Achtung:
Die Marken u für unterstrichenen und s für durchgestrichenen Text sollen in Zukunft aus dem HTML-Standard verschwinden und sollten deshalb eigentlich nicht mehr verwendet werden. Mit der Sprache CSS und dem style-Attribut lassen sich Schriftarten, Schriftstile und vieles mehr noch sehr viel besser einstellen.

Bei Verwendung der kontextbezogenen Marken überlässt du dem Browser die besondere Darstellung des so ausgezeichneten Textes.

Übersicht: Kontextbezogene Textmarken
<HTML-Marke> Auswirkung im Layout der Seite
Anmerkung: Die Tabelle gibt die Auswirkung der Marken im Los! Layout wieder
<em>betonter Text</em> betonter Text
<strong>stark betonter Text</strong> stark betonter Text
<cite>Namenszitat Text</cite> Namenszitat Text
<q>fließender Zitat Text</q> fließender Zitat Text
<blockquote>Block Zitat Text</blockquote>
Block Zitat Text

Wichtige Stellen im fließenden Text, die also keine Kapitelüberschriften hergeben, betonst du mit der Marke <em>. Zur noch stärkeren Betonung kannst du <strong> verwenden. Für Zitate kannst du zwischen drei Formaten wählen. Die Marke <cite> für kurze Zitate von z.B. Buch- oder Musik- oder Filmtiteln und Eigen- oder Markennamen. Die Marke <q> nimmst du für längere Zitate im fließenden Text, wenn also durch das Zitat kein neuer Absatz erzeugt werden soll. Längere Zitate, die du vom eigentlichen Text absetzen möchtest, fasst du mit der blockquote-Marke, <blockquote>, ein. Wie du in der Tafel sehen kannst wird durch blockquote eine automatische Einrückung des Textes, wie bei einer Liste, vorgenommen. Blockquote ist zudem, wie der Name schon sagt, ein absatzerzeugendes Blockelement.








Weiter geht's:


Erste Schritte | Bilder einfügen | Hyperlinks einfügen | Tabellen erstellen | Frames verwenden | CSS verwenden | JavaScript | nach oben