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:
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ück</title> </head> <body> Mein erstes Stü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
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.
Der Clou: |
|
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.
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.
<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)
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! |
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 .
Seinen Namen hat es daher, weil es einen Zeilenumbruch
verhindert. Verbindest du also zwei Wörter mit dem , 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ür neue Sportgeräte spendete der Elternbeirat mehr als 1.200 €!
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
<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> | |
<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.
<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: