HTML Blockquote-Tag: Verbessern von Webseitenzitationen

Einführung

In HTML verwenden wir das <blockquote>-Tag, um Zitate auf einer Webseite mit dem Namen des Autors oder der Quelle anzuzeigen. Das Tag wird als block-level-Element verwendet und wird als separate Absatz angezeigt. In diesem Lab lernst du, wie du einen Blockzitat mit dem HTML <blockquote>-Tag erstellst.

Hinweis: Du kannst im index.html programmieren und lernen, wie du HTML in Visual Studio Code schreibst. Klicke bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend kannst du die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Füge die HTML-Struktur hinzu

Erstelle eine HTML-Datei namens index.html und öffne sie in einem Code-Editor.

Füge die HTML-Struktur wie folgt hinzu:

<!doctype html>
<html>
  <head>
    <title>HTML Blockquote Tag</title>
  </head>
  <body>
    <h1>HTML Blockquote Tag</h1>

    <!-- Füge das Blockzitat hinzu -->
  </body>
</html>

Füge das Blockquote-Tag hinzu

Füge das Blockquote-Tag zu deinem HTML-Code hinzu, indem du die folgende Syntax verwendest:

<blockquote>
  Dein Zitat kommt hier...
  <cite>- Autorennamen</cite>
</blockquote>

Hinweis: Das cite-Tag wird innerhalb des blockquote-Tags hinzugefügt, um den Namen des Autors oder die Quelle des Zitats anzugeben.

Füge CSS-Stil hinzu

Füge CSS-Stil zum Blockquote-Tag hinzu, indem du den folgenden Codeausschnitt verwendest:

<style>
  blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    color: #555;
    padding: 5px 20px;
    border-left: 5px solid #ccc;
  }
</style>

Hinweis: Dieser Code setzt einige grundlegende Stile für das Blockquote-Tag. Die border-left-Eigenschaft fügt einen linken Rand zum Blockquote-Tag hinzu.

Füge den Zitattext hinzu, den du auf der Webseite anzeigen möchtest, und ersetze dabei Your quote comes here....

Speichere die HTML-Datei und öffne sie in einem Webbrowser, um das Blockquote auf der Webseite anzuzeigen.

Zusammenfassung

In diesem Lab hast du gelernt, wie du das <blockquote>-Tag verwendest, um ein Zitat in einem separaten Block auf einer Webseite anzuzeigen. Du hast auch über die Attribute gelernt, die mit dem Tag verwendet werden können, und wie du es mit CSS stylen kannst. Mit dem Blockquote-Tag kannst du Zitate auf deiner Webseite leicht anzeigen!

HTML-Zitiertestblock

Einführung

Direkt aus dem Tutorial heraus programmieren.

Füge die HTML-Struktur hinzu

Füge das Blockquote-Tag hinzu

Einfach starten, ohne Installation.

Füge CSS-Stil hinzu

Zusammenfassung