HTML – Formatierung

Textformatierung

<p>Dies ist <b>fetter Text</b> mit dem b-Tag.</p>
<p>Dies ist <strong>fetter Text</strong> mit dem strong-Tag.</p>

<p>Dies ist <i>kursiver Text</i> mit dem i-Tag.</p>
<p>Dies ist <em>kursiver Text</em> mit dem em-Tag.</p>

<p>Dies ist <u>unterstrichener Text</u> mit dem u-Tag.</p>

<p>Dies ist <s>durchgestrichener Text</s> mit dem s-Tag.</p>
<p>Dies ist <del>durchgestrichener Text</del> mit dem del-Tag.</p>

<p>Dies ist <sub>tiefgestellter Text</sub> mit dem sub-Tag.</p>
<p>Dies ist <sup>hochgestellter Text</sup> mit dem sup-Tag.</p>

<p>Dies ist <mark>hervorgehobener Text</mark> mit dem mark-Tag.</p>

<p>Dies ist <small>kleiner Text</small> mit dem small-Tag.</p>

Textausrichtung

In HTML können Sie Text mithilfe des align-Attributs ausrichten. Dieses Attribut kann verschiedenen Tags hinzugefügt werden, wie <p>, <h1> bis <h6>, <div> und anderen. Das align-Attribut akzeptiert drei Werte: "left", "center" und "right".

Um Text linksbündig auszurichten, verwenden Sie align="left". Dies ist die Standard-Ausrichtung für die meisten Elemente.

<p align="left">Dieser Text ist linksbündig ausgerichtet.</p>

Um Text zu zentrieren, verwenden Sie align="center". Dies zeigt den Text in der Mitte des umschließenden Elements an.

<h2 align="center">Diese Überschrift ist zentriert ausgerichtet.</h2>

Um Text rechtsbündig auszurichten, verwenden Sie align="right". Dies zeigt den Text auf der rechten Seite des umschließenden Elements an.

<div align="right">Dieser Text ist rechtsbündig ausgerichtet.</div>

Es ist wichtig zu beachten, dass das align-Attribut zwar in HTML5 noch unterstützt wird, es aber empfohlen wird, CSS für Textausrichtung und andere Stilzwecke zu verwenden. CSS bietet mehr Flexibilität und Kontrolle über das Layout und das Erscheinungsbild Ihrer Webseite.

Schriftformatierung

<p>Dies ist <font size="1">Größe 1</font> Text.</p>
<p>Dies ist <font size="3">Größe 3</font> Text.</p>
<p>Dies ist <font size="7">Größe 7</font> Text.</p>

<p style="font-size: 12px;">Dieser Text hat eine Schriftgröße von 12 Pixeln.</p>
<p style="font-size: 1.2em;">Dieser Text hat eine Schriftgröße von 1,2em.</p>

<p>Dies ist <font color="red">roter</font> Text.</p>
<p>Dies ist <font color="#0000FF">blauer</font> Text.</p>
<p>Dies ist <font color="rgb(0, 128, 0)">grüner</font> Text.</p>

<p style="color: red;">Dieser Text ist rot.</p>
<p style="color: #0000FF;">Dieser Text ist blau.</p>
<p style="color: rgb(0, 128, 0);">Dieser Text ist grün.</p>

<p>Dies ist <font face="Arial">Arial</font> Text.</p>
<p>Dies ist <font face="Verdana">Verdana</font> Text.</p>
<p>Dies ist <font face="Courier New">Courier New</font> Text.</p>

<p style="font-family: Arial;">Dieser Text verwendet Arial-Schrift.</p>
<p style="font-family: Verdana;">Dieser Text verwendet Verdana-Schrift.</p>
<p style="font-family: 'Courier New';">Dieser Text verwendet Courier New-Schrift.</p>

Vorformatierter Text

In HTML können Sie vorformatierten Text mit dem <pre>-Tag anzeigen. Das <pre>-Tag behält Leerzeichen, Zeilenumbrüche und andere Formatierungen innerhalb seines Inhalts bei. Dies ist nützlich, wenn Sie Text genau so anzeigen möchten, wie er geschrieben wurde, z.B. bei Code-Snippets, ASCII-Kunst oder Gedichten.

<pre>
  Dies ist ein Beispiel
    für vorformatierten Text.
  Er behält     Leerzeichen,
         Zeilenumbrüche
    und andere Formatierungen bei.
</pre>

In diesem Beispiel wird der Text innerhalb des <pre>-Tags mit seiner ursprünglichen Formatierung angezeigt, einschließlich mehrerer Leerzeichen und Zeilenumbrüche.

Standardmäßig wird Text innerhalb des <pre>-Tags in einer Monospace-Schriftart dargestellt, was ihm ein ähnliches Aussehen wie Code oder Klartext verleiht. Der Text hat auch eine feste Breite, was bedeutet, dass er sich nicht an die Größe des Browserfensters anpasst.

Es ist wichtig zu beachten, dass das <pre>-Tag die Formatierung beibehält, sodass HTML-Tags innerhalb seines Inhalts als reiner Text angezeigt werden und nicht als HTML interpretiert werden. Wenn Sie HTML-Tags innerhalb von vorformatiertem Text einschließen möchten, müssen Sie HTML-Entities verwenden, um die Sonderzeichen darzustellen, wie z.B. < für < und > für >.

<pre>
  &lt;p&gt;Dies ist ein Beispiel für vorformatierten Text mit HTML-Entities.&lt;/p&gt;
</pre>

In diesem Beispiel werden die HTML-Tags <p> und </p> als reiner Text angezeigt, indem ihre entsprechenden HTML-Entities verwendet werden.

Die Verwendung des <pre>-Tags ist eine einfache Möglichkeit, vorformatierten Text anzuzeigen und dabei seine ursprüngliche Formatierung beizubehalten. Es ist ein nützliches Werkzeug zur Darstellung von Code-Snippets, ASCII-Kunst oder anderen Inhalten, die auf spezifischen Leerzeichen und Zeilenumbrüchen basieren.

Code-Formatierung

In HTML können Sie Code mithilfe des <code>-Tags für Inline-Code und einer Kombination aus <pre> und <code>-Tags für Codeblöcke formatieren.

Um Inline-Code anzuzeigen, umschließen Sie den Code-Ausschnitt mit dem <code>-Tag. Dieser Tag wird verwendet, um einen Teil des Computercodes innerhalb eines Satzes oder Absatzes darzustellen.

In diesem Beispiel wird der <p>-Tag mit <code>-Tags umschlossen, um ihn als Inline-Code anzuzeigen. Beachten Sie, dass die Zeichen < und > durch ihre HTML-Entitäten (< und >) ersetzt werden, damit sie nicht als HTML gelesen werden.

Für Codeblöcke oder mehrere Codezeilen verwenden Sie den <pre>-Tag zusammen mit dem <code>-Tag. Der <pre>-Tag behält die Formatierung bei, während der <code>-Tag im Inneren anzeigt, dass der Inhalt Code ist.

<pre><code>
  function greet(name) {
    console.log("Hello, " + name + "!");
  }

  greet("John");
</code></pre>

Die Verwendung des <code>-Tags für Inline-Code und der Kombination von <pre> und <code>-Tags für Codeblöcke hilft, Code von normalem Text zu trennen und macht Ihr HTML-Dokument leichter lesbar. Es ermöglicht Ihnen auch, den Code bei Bedarf mit CSS anders zu gestalten.

Bei der Darstellung von Code in HTML ist es wichtig, HTML-Entitäten für Sonderzeichen wie <, > und & zu verwenden, damit diese nicht als HTML gelesen werden. Sie können auch eine Bibliothek oder einen Syntax-Highlighter in Betracht ziehen, um Ihre Codeblöcke automatisch zu formatieren und zu gestalten und so eine bessere Darstellung zu erzielen.

Blockquotes

In HTML können Sie Blockzitate mit dem <blockquote>-Tag erstellen. Blockzitate werden verwendet, um anzuzeigen, dass der enthaltene Text ein längeres Zitat aus einer anderen Quelle ist. Browser stellen Blockzitate normalerweise mit eingerückten Rändern auf beiden Seiten dar, um sie vom umgebenden Inhalt abzuheben.

<blockquote>
  "The only way to do great work is to love what you do." - Steve Jobs
</blockquote>

Im obigen Beispiel wird der zitierte Text in den <blockquote>-Tag eingeschlossen, was ihn mit eingerückten Rändern darstellt.

Sie können auch die Quelle des Zitats mit dem cite-Attribut innerhalb des <blockquote>-Tags angeben. Das cite-Attribut sollte eine URL enthalten, die auf die Quelle des Zitats verweist.

<blockquote cite="https://www.example.com/quotes">
  "Innovation distinguishes between a leader and a follower." - Steve Jobs
</blockquote>

Um Blockzitate weiter zu gestalten, können Sie CSS verwenden. Einige gängige Styling-Optionen umfassen das Ändern des Schriftstils, der Größe oder der Farbe, das Anpassen der Einrückung oder das Hinzufügen einer Hintergrundfarbe oder eines Rands.

<style>
  blockquote {
    font-style: italic;
    font-size: 1.2em;
    color: #333;
    margin-left: 30px;
    padding: 10px;
    border-left: 5px solid #ccc;
    background-color: #f9f9f9;
  }
</style>

<blockquote>
  "Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs
</blockquote>

Die Verwendung von Blockzitaten mit richtiger Formatierung und Gestaltung kann Ihnen helfen, Zitate in Ihren HTML-Dokumenten klar und ansprechend zu präsentieren. Sie bieten eine Möglichkeit, längere Zitate zu kennzeichnen und können an das Design Ihrer Website angepasst werden.