Meisterhaftigkeit bei HTML Zeilenumbrüchen

Einführung

In diesem Lab lernst du, wie du das HTML <br>-Tag verwendest, um Zeilenumbrüche auf einer Webseite zu erzeugen.

Hinweis: Du kannst im index.html programmieren und lernen, wie du HTML in Visual Studio Code schreibst. Klicke in der unteren rechten Ecke auf 'Go Live', 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.

Erstelle eine HTML-Datei

Erstelle eine neue Datei mit dem Namen index.html und füge die grundlegende HTML-Struktur hinzu.

<!doctype html>
<html>
  <head>
    <title>Zeilenumbrüche mit HTML</title>
  </head>
  <body></body>
</html>

Füge Text zur Webseite hinzu

Füge einigen Text zum Körper deines HTML-Dokuments hinzu.

<body>
  <h1>Willkommen auf meiner Webseite!</h1>
  <p>
    Dies ist ein Text auf meiner Webseite. Ich möchte hier einen Zeilenumbruch
    einfügen:
  </p>
  <p>Aber wie mache ich das?</p>
</body>

Verwende das
-Tag für Zeilenumbrüche

Um einen Zeilenumbruch zwischen den beiden Textabsätzen hinzuzufügen, füge das <br>-Tag nach dem ersten Absatztag hinzu.

<body>
  <h1>Willkommen auf meiner Webseite!</h1>
  <p>
    Dies ist ein Text auf meiner Webseite. Ich möchte hier einen Zeilenumbruch
    einfügen:
  </p>
  <br />
  <p>Aber wie mache ich das?</p>
</body>

Anpassen des Zeilenumbruchabstands mit CSS-Margin

Um den Abstand anzupassen, den ein Zeilenumbruch erzeugt, kannst du CSS-Margin verwenden. Füge den folgenden CSS-Code zu deiner HTML-Datei hinzu, um 30 Pixel Abstand über und unter jedem Zeilenumbruch zu erzeugen.

<head>
  <title>Zeilenumbrüche mit HTML</title>
  <style>
    br {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

Speichere deine index.html-Datei und öffne sie in einem Webbrowser, um den von dir erzeugten Zeilenumbruch zu sehen.

Zusammenfassung

Das HTML <br>-Tag ist eine einfache Möglichkeit, Zeilenumbrüche auf deiner Webseite zu erzeugen. Verwende es, um Abstand zwischen Absätzen hinzuzufügen oder überall dort, wo du einen Zeilenumbruch benötigst. Mit CSS-Margin ist es einfach, den von einem Zeilenumbruch erzeugten Abstand anzupassen.

HTML Zeilenumbruch