Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 04): Texte strukturieren

HTML & CSS für Einsteiger (Teil 04): Texte strukturieren

Eure Webseiten werden sicherlich nicht nur aus Bildern, sondern auch aus Texten bestehen. Und Texte sollten, allein schon der guten Lesbarkeit halber, vernünftig strukturiert werden. Dafür hält HTML zahlreiche Elemente bereit. In diesem Video-Training werden die wichtigsten Strukturierungselemente für Texte vorgestellt. Außerdem erfahrt ihr, wie sich HTML-eigene Zeichen maskieren lassen und wie man Programmlistings ausgeben kann.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


In HTML wird zwischen sechs verschiedenen Überschriftenebenen unterschieden. Definiert werden diese durch die Elemente h1 bis h6.
<h1>Überschriftenebene 1</h1>
<h2>Überschriftenebene 2</h2>
<h3>Überschriftenebene 3</h3>
<h4>Überschriftenebene 4</h4>
<h5>Überschriftenebene 5</h5>
<h6>Überschriftenebene 6</h6>

Dabei repräsentiert h1 die größte, h6 die kleinste Überschrift. Mit HTML5 wurden übrigens weitere Möglichkeiten für Überschriftendefinitionen vorgestellt, die an späterer Stelle gezeigt werden.

Bilder



 
Die verschiedenen Überschriftenebenen helfen euch bei der Strukturierung der Texte. Orientiert euch dabei beispielsweise an Büchern. Dort gibt es den Buchtitel, der vergleichbar mit dem Inhalt des h1-Elements ist. Pro HTML-Seite sollte daher auch nur ein h1-Element eingefügt werden. Der übrige Text wird dann durch die weiteren Ebenen gegliedert. Nach der Hauptüberschrift folgt h2. Unterkapitel von h2 sind dann wiederum durch das h3-Element gekennzeichnet.

Übrigens: Die Größe der Überschriftenebenen wird zunächst einmal von den Browsern festgelet. Ihr selbst könnt diese aber durch den Einsatz von CSS explizit bestimmen. Dazu später mehr.

Die Überschriftenebenen lassen sich denkbar einfach verwenden. Ihr gebt ein h, gefolgt von der gewünschten Ebenenziffer an.
<h1>PSD-Tutorials.de</h1>

Hinter einer auf diese Weise definierten Überschrift werden automatisch ein Zeilenumbruch und ein Abstand zu den nachfolgenden Elementen eingefügt.

Achtet unbedingt darauf, dass die Ziffern im einleitenden und schließenden Tag identisch sind.


 

Absätze definieren

Neben Überschriften bestehen Texte natürlich auch aus Absätzen. Solche Absätze lassen sich in HTML ebenfalls sehr einfach umsetzen. Verwendet wird dafür das p-Element. Ein so gekennzeichneter Absatz besitzt von Hause aus einen gewissen Abstand zu nachfolgenden Elementen. Wie groß dieser Absatz letztendlich ist, könnt ihr wieder per CSS steuern.

Hier ein Beispiel für zwei Absatzdefinitionen:
<p>Das ist ein Absatz</p>
<p>Das ist auch ein Absatz</p>

Ein Blick in den Browser liefert folgendes Bild:

Bilder



In HTML5 ist es übrigens nicht zwingend vorgeschrieben, dass geöffnete Absätze über </p> wieder geschlossen werden. Der Übersichtlichkeit halber würde ich das schließende </p> allerdings tatsächlich verwenden.


 

Manuelle Zeilenumbrüche

Fließtext innerhalb von Absätzen, Listen usw. wird vom Browser automatisch umbrochen, wenn er beispielsweise breiter als das Browserfenster ist. Das ist praktisch, schließlich wird so unnötiges horizontales Scrollen vermieden. Zusätzlich könnt ihr aber Text an jeder beliebigen Stelle umbrechen lassen. Verwendet wird dafür das Element <br />. Beachtet, dass es sich hierbei um ein sogenanntes Standalone-Tag handelt, das also selbst kein schließendes Tag hat, sondern sich quasi selbst schließt.
<p>Yeh, this one's for the workers who toil night and day<br />
By hand and by brain to earn your pay<br />
Who for centuries long past for no more than your bread<br />
Have bled for your countries and counted your dead</p>

Beim Einsatz von <br /> spielt es übrigens keine Rolle, ob es am Ende einer Zeile oder in einer eigenen Zeile steht. Das Ergebnis sieht in beiden Fällen so aus:

Bilder



 
Noch einmal zurück zu den automatischen Zeilenumbrüchen, die von den Browsern eingefügt werden. Problematisch sind diese oftmals, weil man eben nicht kontrollieren kann, wo der Umbruch letztendlich erfolgt. Somit kann es zu unerwünschten Ergebnissen kommen. Ein typisches Beispiel dafür sind Versionsnummern.
iPhone 5

Das sollte normalerweise in einer Zeile stehen. Der Zeilenumbruch sollte hier also nicht zwischen iPhone und der 5 erfolgen.
iPhone
5

So etwas lässt sich durch sogenannte geschützte Leerzeichen verhindern. Ein Beispiel:
Bilder


Durch diese Zeichenfolge wird ein solch geschütztes Leerzeichen definiert. Im Browser selbst wird das als normales Leerzeichen angezeigt:
Bilder


Bilder


 
Damit das wie gewünscht klappt, dürft ihr keine Leerzeichen in den Quelltext einfügen. So etwas hier würde nicht funktionieren:

Bilder



Präformatierter Text

Es kann durchaus Situationen geben, in denen man Text exakt so ausgeben will, wie er im Quelltext angeordnet ist. Ein typisches Beispiel dafür sind Programmlistings, wie sie hier oft auch auf PSD-Tutorials.de zu finden sind.

Bilder



 
Für solche Zwecke erlaubt HTML die Definition präformatierter Textabschnitte. Dabei werden dann Einrückungen vom Browser so berücksichtigt, wie sie im Quellcode stehen. Das folgende Beispiel zeigt, wie so etwas umgesetzt wird:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
   <meta charset="UTF-8" />
</head>
<body>
<h1>"Hallo, Welt!" in PHP</h1>
<pre>
&lt;?php
   echo "Hallo, Welt\n";
?&gt;
</pre>
</body>
</html>

Die Passage, die als präformatierter Text angezeigt werden soll, wird innerhalb des pre-Elements definiert. Fügt dort die Einrückungen usw. exakt so ein, wie sie letztendlich vom Browser angezeigt werden sollen.

Bilder



 
Beim Ansehen des Beispiel-Codes dürften euch die merkwürdigen Zeichen &lt;?php und ?&gt; auffallen. Im Browser werden diese als <?php und ?> angezeigt. Die im Quellcode verwendete Variante nennt sich Maskieren von Zeichen. Nötig wird das, wenn man HTML-eigene Zeichen vom Browser nicht interpretiert haben möchte. Würdet ihr direkt in den Quellcode <?php eingeben, würde der Browser annehmen, dass es sich um einen sich öffnenden PHP-Bereich handelt. Daher maskiert man die Zeichen.

• Ersetze das Zeichen & durch die Zeichenfolge &amp;
• Ersetze das Zeichen < durch die Zeichenfolge &lt;
• Ersetze das Zeichen > durch die Zeichenfolge &gt;
• Ersetze Anführungszeichen durch &quot;

Übrigens eignet sich pre nicht nur für die Darstellung von Programmlistings. Auch tabellarische Daten lassen sich so spielend einfach abbilden. Das folgende Beispiel zeigt eine typische Tabelle, die ausschließlich per Leerzeichen innerhalb eines pre-Elements umgesetzt wurde.
<pre>

 Zielort       Abfahrt     Ankunft     Bahnsteig

 ----------------------------------------------------------------

 Berlin        10:23       14:30       2

 Hamburg       11:09       13:20       13

 München       12:04       15:45       1a

</pre>

 
Das Ergebnis im Browser sieht folgendermaßen aus:

Bilder



Tatsächlich berücksichtigen die Browser also die Leerstellen, die ihr im Quelltext definiert. Die gezeigte Tabellenvariante funktioniert übrigens recht gut. Für kleinere Tabellen finde ich das durchaus auch praktikabel. Sobald der Datenbestand aber umfangreicher wird, solltet ihr auf klassische HTML-Tabellen zurückgreifen. Wie sich diese definieren lassen, erfahrt ihr natürlich ebenfalls in dieser Reihe.


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von pallasathena
  • 04.10.2014 - 12:39

danke, so geht's Schritt für Schritt weiter ...

Portrait von Poligono
  • 04.10.2014 - 11:23

Vielen Dank. Die Funktion <pre> war für mich neu.

Portrait von Caesarion2004
  • 04.10.2014 - 10:55

Vielen Dank für ein weiteres, sehr informatives und verständliches Grundlagentutorial samt Datei.

Portrait von Dineria
  • 04.10.2014 - 10:23

Danke, das <pre> war mir bislang noch gar nicht über den Weg gelaufen... :-)

Portrait von Kundentest
  • 04.10.2014 - 10:12

Herzlichen Dank für das Video.

Portrait von Faria
  • 04.10.2014 - 08:48

Vielen Dank. Ich fand es wieder mal sehr gut und verständlich erklärt und habe etwas dazugelernt.

Portrait von Domingo
  • 04.10.2014 - 07:24

Sehr informativ. Vielen Dank.

Portrait von kernastro
  • 29.09.2014 - 11:22

Ich finde, es sollte schon irgendwo stehen, dass es Informationen sind, die sich an Menschen richten, die noch niemals einen HTML-Code gesehen haben.

Portrait von fzgang
  • 28.09.2014 - 13:22

Die Kapitel 1 - 6 sind gut, wichtige Details werden beschrieben. Allerdings haben die Überschriften-Ebenen, wie behauptet wird, nichts mit der Größe sondern mit der Hierachie zu tun, z.B. als Kapitel- und Absatzüberschrift. Was bei HTML5 zu Überschriften hinzu kommt (Seite 2 unten), wird nicht nachgeliefert.

Aber ab Kapitel 7 wird es wirr.

Die Anzeige der Beispiel-Listings verwirrt, da im ersten kein Listing, sondern nur ein leerer Absatz <p> </p> zu finden ist und im zweiten kommt dann auf einmal PHP ins Spiel, was jeden überfordern dürfte, der davon noch nie etwas gehört hat. Eine Datei mit dem Suffix .htm bzw. .html wird per Server-default nicht als PHP-Datei interpretiert. Insofern stimmt die gegebene Information nicht, dass grundsätzlich maskiert werden müsste. Warum hier ein Thema beginnen, das man nicht erklären kann? Unverständlich sind die Angaben "Ersetze das Zeichen & durch die Zeichenfolge &" auf Seite 9. Keiner wird danach verstehen, was mit Maskierung wirklich gemeint ist und was hier und warum maskiert wurde.

Ein elementarer Unterschied von PRE zu kleinen Tabellen wird nicht erwähnt, warum man PRE nicht nehmen sollte. Tabellen haben eine nachvollziehbare semantische Struktur, während diese PRE fehlt. Das ist nicht mal ansatzweise barrierefrei und für google sicherlich auch wenig nachvollziehbar.

Portrait von Steve007
  • 27.09.2014 - 14:19

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Caesarion2004
  • 27.09.2014 - 14:14

Vielen Dank für ein weiteres gutes Grundlagentutorial.

Portrait von fneurieser
  • 27.09.2014 - 13:34

Danke für dieses Tut. Tut gut wieder mal ein paar Dinge ins Gedächtnis gerufen zu bekommen.

Portrait von pallasathena
  • 27.09.2014 - 13:17

Vielen Dank für diese Auffrischung!

Portrait von BOPsWelt
  • 27.09.2014 - 13:13

Vielen Dank für den 4. Teil des Einsteigertutorials. :-)

Portrait von Kundentest
  • 27.09.2014 - 12:41

Herzlichen Dank für das Tutorial.

x
×
×