Texte einfügen

An Anfang der Seite steht für gewöhnlich eine Überschrift. Diese werden mit dem Tag <h1> Überschrift </h1> definiert. Die größe der Überschrift geht von sehr groß <h1> bis sehr klein <h6>

Überschrift mit <h1>

Überschrift mit <h2>

Überschrift mit <h3>

Überschrift mit <h4>

Überschrift mit <h5>

Überschrift mit <h6>

Um einen Text weiter zu gliedern, gibt es das Tag <p> Es umfasst einen Textblock und muss nicht geschlossen werden. Es gehört aber zum guten Stil es wieder zu schließen.
Um dies zu demonstrieren bietet sich ein Blindtext an. Einer dieser Blindtexte heißt "Lorem ipsum" Der Text selbst ergibt keinen Sinn, was auch gewollt ist. Schließlich geht es darum das Textbild zu zeigen, nicht aber mit dem Inhalt abzulenken. Hierfür gibt es Lore-ipsum-Generatoren im Internet, wie diesen hier:

Für einen normalen Zeilenumbruch wird der Tag <br> verwendet. dieses Tag wird nicht geschlossen. Für eine Leerzeile im Text gibt es so zwei Möglichkeiten. Entweder die Textblöcke mit <p> und </p> einfassen, oder zwei mal das <br> benutzen. Erstere Variante ist eher zu empfelen, da so die Textblöcke per css besser formatiert werden können.

Eine noch deutlichere Abgrenzung zweier Texte ist eine Trennlinie. Diese wird mit dem Tag <hr> eingefügt. Diese können auch mit css wunderbar gestaltet werden. Ich konnte es mir nicht verkneifen auch diese Linie etwas mit css zu verändern. Ohne css ist es eine einfache dünne Linie

Text formatieren

Textabschnitte können auch formatiert werden. Dafür gibt es das <b> für bold oder den <strong> Tag. Die beiden haben den gleichen optischen Effekt auf den Text. Der Unterschied besteht darin, das der strong-Tag eine semantische Bedeutung hat, der normale b-Tag jedoch hat keine Bedeutung. Was semantische Tags sind, wird in einem eigenen Kapitel beschrieben. Kurz, sie geben Angaben zum Aufbau und Inhalt der Seite.

Zwei weitere Tags um das Schriftbild zu gestalten ist das <i> Tag für italic und das <em> Tag für emphaisized. Auch hier haben beide Tags das gleiche optische Ergebnis:
Dieser Text ist mit italic geschrieben, während dieser Text mit emphaisized geschrieben ist.

Natürlich ist es auch möglich einen Text zu unterstreichen. Dafür gibt es den <u> Tag. Dieses Tag gilt allerdings als überholt und sollte wenn überhaupt nur selten verwendet werden. Sinnvoller ist es den strong-Tag zu benutzen und hinterher per css den Unterstrich zu gestalten.

div und span

Die echte Gestaltung von Web-Seiten geschiet mit css. Damit dies funktioniren kann, werden die Inhalte in "Container" gesteckt. Im Grunde ist es das gleiche wie mit dem einfassen von Texten durch das p-Tag. Container-Tags, ohne eigenen Effekt für die Seite, sind <div> und <span> Mit ihnen können Bilder, Überschriften, jeden belibigen Code zusammen gefasst werden.

<div> ist ein Block-Element, genau wie die Überschriften. Sie nehmen die komplette Breite des Browserfensters ein. Nach einem Blockelement geht es automatich in die nächste Zeile, ohne dem <br>

<span> ist ein Inline-Element. Es kann mitten in einer Zeile vorkommen und erzeugt auch keinen Zeilenumbruch. Hier ein kleines Beispiel. Um es besser zu erkennen wird etwas css benutzt.