Sie sind hier: Startseite -> HTML-Beispielseite -> Phase II: Inhalt -> Überschrift + Text

HTML-Inhalt: Überschrift und Text

HTML-Inhalt: Überschrift und erster Absatz

Natürlich gibt es Webseiten, die aus einem Video oder einer Bildergalerie bestehen, aber die meisten Seiten wollen ihren Leserinnen und Lesern Informationen anbieten und diese bestehen aus Text. Je mehr guter Text angeboten wird, desto mehr freuen sich auch die Suchmaschinen, weil sie dann viel Material zum Sammeln haben und das kann bedeuten, dass die Seite in den Suchergebnissen besser gereiht wird. Nicht ratsam wäre es aber, den gleichen Inhalt auf 20 Unterseiten zu verteilen, weil das eher abgestraft denn gefördert wird.

Als erster Bereich für die zweite Phase dieses HTML-Beispielprojekts soll nun eine Überschrift und ein erster brauchbarer Absatz verwendet werden. Wir wollen uns hier nicht mit großartigen Texterfindungen herumschlagen und daher nützen wir die Webseite loremipsum.de, auf der man beliebig viel Text generieren lassen kann, den man zum Füllen für Beispielseiten verwendet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Mit dem h1-Tag haben wir eine erste Überschrift angelegt und diese wird auch demonstrativ, groß und mächtig angezeigt. Bei HTML gibt es sechs vordefinierte Überschriftsgrößen, die von h1 bis h6 reichen, wobei h1 die größte, h6 die kleinste ist. Neben der Tatsache, dass mit diesen Befehlen Überschriften erzeugt werden können und damit Struktur in Ihre Texte kommen wird, kann man die Überschriften auch für die Suchmaschinen nützen. Ich habe in diese Überschrift bewusst das Schlüsselwort (englisch Keyword) Webdesign geschrieben, denn wir simulieren, dass diese Webseite sich um Webdesign handeln wird.

Die Suchmaschine erkennt, dass hier eine Überschrift steht, erkennt auch, dass es im nachstehenden Absatz um Webdesign handelt und stuft daher diesen Begriff als wichtig ein. Die Chance, bei einer Suche nach Webdesign gefunden zu werden, steigt, aber man sollte mit dieser Technik vorsichtig umgehen und es nicht übertreiben.

Der Überschrift folgen zwei Absätze mit dem p-tag (p für paragraph), in dem der Text gespeichert wurde. Will man verschiedene Absätze einbauen, dann schließt man den tag, wie am Ende des ersten Absatzes zu sehen ist und beginnt einen neuen. Eine andere Möglichkeit für einen Zeilenumbruch ist der br-Tag, wie er im Text verwendet wurde. BR steht für break ergo Umbruch der Zeile und kann innerhalb eines Absatzes zum Einsatz kommen, wenn man beispielsweise nur eine neue Zeile beginnen will.

Das Ergebnis sieht so aus: Beispielseite

Nun haben wir die CSS-Datei, die bisher nur den body-Tag für den gesamten Inhaltsbereich der Webseite beinhaltet hatte, um zwei Definitionen erweitert. Die erste Defintion betrifft den Absatz, die zweite die h1-Überschrift. In CSS werden die HTML-Befehle so geschrieben, wie man sie auch in HTML verwendet.

Daher sind die CSS-Befehle für den Absatz durch p { eingeleitet. Damit weiß der Browser, dass nachfolgendene Befehle beim Absatz anzuwenden sind. Später werden wir mit Klassen arbeiten, denen Absätze zugeordnet sind, aber das ist jetzt des Guten zuviel. Im aktuellen Fall bekam der Absatz den Befehl, dass der Abstand (margin) auf 20 Pixel erhöht wurde. Da nur ein Wert übergeben wurde, gilt das für alle Himmelsrichtungen. Man hätte auch margin: 20px 20px 20px 20px; schreiben können.

In der zweiten Zeile wurde die Höhe der Textlinie erweitert. Als Wert haben wir hier 1.5 em eingetragen, man hätte auch Pixel oder cm wählen können. Wenn man sich das Ergebnis im Browser ansieht, erkennt man, dass der Abstand zwischen den Zeilen innerhalb des Absatzes größer wurde. Bei längeren Texten erreicht man so den schönen Effekt, dass dieser leichter lesbar wird.

Im Browser erkennen Sie weiters, dass durch den margin-Befehl links und rechts vom Bildschirmrand ein Abstand entstanden ist. Löschen Sie den margin-Befehl weg oder ersetzen Sie den Wert 20 durch 0 und rufen die Seite nochmals im Browser auf - das Ergebnis: der Text klebt an den Seitenrändern. Auch beim line-height sollten Sie experimentieren, um die Funktionsweise zu verinnerlichen. Diese beiden Befehle arbeiten simpel, leisten aber sehr gute Dienste.

Danach wurde die Überschrift h1 definiert. Es wurde eine Farbe zugewiesen und außerdem die Schriftgröße (font-size) verändert. Auch hier gilt: lassen Sie die Schriftgröße weg und rufen Sie die Seite nochmals im Browser auf. Danach tragen Sie den Befehl wieder ein und rufen nochmals auf. Der Unterschied ist enorm. H1 ist wichtig für die Suchmaschinenoptimierung, aber HTML sieht eine massive, meistens viel zu große Schrift vor. Mit CSS können Sie die Überschrift anpassen, wie es Ihnen gefällt.

Der margin-Befehl wurde auch hier eingesetzt und er ist einer der wichtigsten Befehle überhaupt, um Abstände festzulegen. Das wird bei späteren div-Containern zur Positionierung der Inhalte wichtig werden.

Ebenfalls interessant:

[aktuelle Seite]

Überschrift + Text

Informationen über das HTML-Konzept von Überschrift und Text, SEO-Tipps und CSS-Formatierung.

Textformatierung

Informationen über die Textformatierung mit HTML und Möglichkeiten, CSS einzusetzen.

Aufzählungslisten

Informationen über die HTML-Aufzählungslisten in der HTML-Beispielseite und die Formatierung durch CSS.

Bild einbauen

Informationen über das Einbauen eines Bildes in die HTML-Beispielseite und die Formatierung mit CSS.

Startseite

Informationen über die Startseite mit echtem Text für das HTML-Beispielprojekt, die Ausgangspunkt für weitere Seiten ist.

Zurück zum Hauptthema

Übersicht Phase II: Inhalt

Startseite HTML-Beispielseite