Meisterhaftigkeit im Umgang mit HTML formatiertem Text

Einführung

Im HTML wird das <pre>-Tag verwendet, um formatierten Text anzuzeigen. Es wird auf der Webseite genau so dargestellt, wie es in einer HTML-Datei vorhanden ist. Der Leerraum, der innerhalb dieses Tags verwendet wird, wird so angezeigt, wie er geschrieben ist. Der Text, der zwischen den <pre>-Tags geschrieben wird, wird in einer festen Schriftbreite angezeigt. Es wird empfohlen, das <pre>-Tag im Falle einer ungewöhnlichen Formatierung oder wenn Sie einen Computercode schreiben möchten, zu verwenden.

In diesem Lab werden Sie lernen, wie das <pre>-Tag verwendet wird, um formatierten Text in einer Webseite anzuzeigen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70817{{"HTML formatierten Text"}} html/head_elems -.-> lab-70817{{"HTML formatierten Text"}} html/text_head -.-> lab-70817{{"HTML formatierten Text"}} html/text_dir -.-> lab-70817{{"HTML formatierten Text"}} html/doc_flow -.-> lab-70817{{"HTML formatierten Text"}} html/inter_elems -.-> lab-70817{{"HTML formatierten Text"}} html/custom_attr -.-> lab-70817{{"HTML formatierten Text"}} end

Erstellen der HTML-Datei

Erstellen Sie eine Datei index.html in einem beliebigen Texteditor und fügen Sie den folgenden grundlegenden HTML-Code hinzu.

<!doctype html>
<html>
  <head>
    <title>Using the HTML Pre Tag</title>
  </head>
  <body>
    <h1>Using the HTML Pre Tag</h1>
  </body>
</html>

Hinzufügen von Inhalten zur Webseite

Fügen Sie den folgenden Code zwischen die <body>-Tags hinzu, um einen formatierten Textblock mit dem <pre>-Tag zu erstellen.

<pre>
This text
will be
displayed
in a
fixed-width font
</pre>

Verwenden des cols-Attributs

Fügen Sie den folgenden Code zwischen die <pre>-Tags hinzu, um die bevorzugte Anzahl von Zeichen festzulegen, die eine Zeile im formatierten Textblock haben sollte, indem Sie das cols-Attribut verwenden.

<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>

Verwenden des width-Attributs

<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>

Verwenden des wrap-Attributs

Fügen Sie den folgenden Code zwischen die <pre>-Tags hinzu, um anzuzeigen, dass der Text mithilfe des wrap-Attributs umgebrochen werden soll, um zur nächsten Zeile zu springen.

<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>

Hinzufügen von Computer-Code zur Webseite

Fügen Sie den folgenden Code zwischen die <pre>-Tags hinzu, um einen Computer-Codeausschnitt im formatierten Textblock anzuzeigen.

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Using the HTML Pre Tag&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Using the HTML Pre Tag&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

Gestalten des formatierten Textblocks

Fügen Sie den folgenden CSS-Code zwischen die <head>-Tags hinzu, um den formatierten Textblock zu gestalten.

<style>
  pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Speichern Sie die Änderungen an der index.html-Datei und öffnen Sie sie in einem Webbrowser, um die Ergebnisse anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch, Sie haben das Labor erfolgreich abgeschlossen und gelernt, wie Sie das <pre>-Tag verwenden, um formatierten Text in einer Webseite anzuzeigen. Sie haben gelernt, wie Sie die bevorzugte Anzahl von Zeichen festlegen, die eine Zeile im formatierten Textblock haben sollte, indem Sie die Attribute cols und width verwenden, und wie Sie anzeigen, dass der Text umgebrochen werden soll, um zur nächsten Zeile zu springen, indem Sie das wrap-Attribut verwenden. Sie haben auch gelernt, wie Sie einen Computer-Codeausschnitt zum formatierten Textblock hinzufügen und wie Sie den formatierten Textblock mit CSS gestalten.