Erstellen einer Beispielausgabe mit dem HTML-Tag

Einführung

HTML ist die Grundlage jeder Website, und es ist wichtig, die verschiedenen Elemente, die zum Erstellen von Webseiten zur Verfügung stehen, gut zu verstehen. Ein solches Element ist das <samp>-Tag, auf das wir in diesem Labo eingehen werden. Das <samp>-Tag wird verwendet, um eine Beispielausgabe oder die Ausgabe eines Computerprogramms anzuzeigen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML 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.

Erstellen einer grundlegenden HTML-Seite

Erstellen Sie eine neue Datei namens index.html.

In diesem Schritt erstellen wir eine einfache HTML-Seite und legen die Struktur für das <samp>-Tag fest.

<!DOCTYPE html>
<html>
    <head>
        <title>Erstellen einer Beispielausgabe mit dem HTML-Tag</title>
    </head>
    <body>
        <h1>Verwendung des <samp>-Tags</h1>
    </body>
</html>

Im obigen Code haben wir die grundlegende Struktur einer HTML-Seite hinzugefügt. Wir haben auch ein <h1>-Tag hinzugefügt, das den Titel der Seite enthalten wird.

Hinzufügen des `-Elements`

In diesem Schritt fügen wir das <samp>-Tag zur Seite hinzu, um eine Beispielausgabe eines Computerprogramms zu erstellen.

<!DOCTYPE html>
<html>
    <head>
        <title>Erstellen einer Beispielausgabe mit dem HTML-Tag</title>
    </head>
    <body>
        <h1>Verwendung des <samp>-Tags</h1>
        <p>Hier ist ein Beispiel für die Verwendung des <samp>-Tags:</p>
        <samp>Beispieltext</samp>
    </body>
</html>

Im obigen Code haben wir einen Absatztag hinzugefügt, der den Zweck des <samp>-Tags erklärt. Anschließend wird das <samp>-Tag mit dem Beispieltext "Beispieltext" hinzugefügt.

Verwendung von CSS, um das `-Element zu gestalten`

CSS kann verwendet werden, um den Stil des <samp>-Tags zu ändern. In diesem Schritt werden wir einige grundlegende Änderungen am <samp>-Tag vornehmen.

<!DOCTYPE html>
<html>
    <head>
        <title>Erstellen einer Beispielausgabe mit dem HTML-Tag</title>
        <style>
            samp {
                Hintergrundfarbe: #f1f1f1;
                Innenabstand: 1em;
                Radius der Kante: 5px;
            }
        </style>
    </head>
    <body>
        <h1>Verwendung des <samp>-Tags</h1>
        <p>Hier ist ein Beispiel für die Verwendung des <samp>-Tags:</p>
        <samp>Beispieltext</samp>
    </body>
</html>

Im obigen Code haben wir einen Stil-Tag zur Seite hinzugefügt. Innerhalb des Stil-Tags haben wir die Hintergrundfarbe, den Innenabstand und die Eigenschaft für den Radius der Kante für das <samp>-Tag definiert.

Hinzufügen der Codeausgabe

In diesem Schritt zeigen wir, wie das <samp>-Tag verwendet wird, um die Ausgabe von Computer-Code anzuzeigen.

<!doctype html>
<html>
  <head>
    <title>Erstellen einer Beispielausgabe mit dem HTML-Tag</title>
    <style>
      samp {
        Hintergrundfarbe: #f1f1f1;
        Innenabstand: 1em;
        Radius der Kante: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Ausgabe eines Computer-Codes:</h1>
    <samp>
      <code> print("Hello World"); </code>
    </samp>
  </body>
</html>

Im obigen Code haben wir einen Codeblock innerhalb des <samp>-Tags hinzugefügt, um die Ausgabe von Computer-Code anzuzeigen.

Zusammenfassung

In diesem Lab haben wir uns mit dem HTML <samp>-Tag beschäftigt, der verwendet wird, um Beispielausgaben von Computer-Code in Webseiten zu erstellen. Wir haben auch gesehen, wie es mit CSS gestaltet werden kann und wie es mit dem Codeblock verwendet werden kann.

HTML Beispielausgabe