HTML-Textformatierung: Webinhalte strukturieren

Einführung

Willkommen zum Lab für HTML-Textformatierung! In dieser praktischen Sitzung lernen Sie, wie Sie Text auf einer Webseite mit grundlegenden HTML-Tags strukturieren und formatieren. Richtig formatierter Text ist entscheidend für die Erstellung von lesbaren, zugänglichen und gut organisierten Webinhalten.

Sie arbeiten mit einer einzigen HTML-Datei, index.html, und lernen die folgenden Tags kennen:

<h1>: Für Hauptüberschriften.
<p>: Für Absätze.
<strong>: Um Text stark hervorzuheben, typischerweise fett dargestellt.
<em>: Um Text zu betonen, typischerweise kursiv dargestellt.
<br>: Um einen Zeilenumbruch einzufügen.

Während des Labs können Sie Ihre Änderungen live sehen, indem Sie die Datei speichern und sie im Tab "Web 8080" in Ihrem Arbeitsbereich anzeigen.

h1-Überschriften-Tag für den Haupttitel hinzufügen

In diesem Schritt fügen Sie Ihrer Webseite einen Haupttitel hinzu. In HTML werden Überschriften mit den Tags <h1> bis <h6> definiert. <h1> definiert die wichtigste Überschrift und wird typischerweise für den Haupttitel einer Seite verwendet.

Öffnen Sie zuerst die Datei index.html im Verzeichnis ~/project über den Dateiexplorer auf der linken Seite der WebIDE.

Fügen Sie nun einen <h1>-Tag innerhalb des <body>-Abschnitts Ihrer index.html-Datei hinzu. Ersetzen Sie den Kommentar  durch die folgende Codezeile:

<h1>Welcome to My Web Page</h1>

Ihr <body>-Abschnitt sollte nun wie folgt aussehen:

<body>
  <h1>Welcome to My Web Page</h1>
</body>

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei (Strg+S oder Cmd+S). Um das Ergebnis zu sehen, klicken Sie auf den Tab "Web 8080" oben in der Benutzeroberfläche. Sie sollten Ihre Überschrift auf der Seite sehen.

p-Tag für den Absatztext einfügen

In diesem Schritt fügen Sie unter Ihrer Überschrift einen Textabsatz hinzu. Das <p>-Tag wird verwendet, um einen Absatz in HTML zu definieren. Browser fügen automatisch etwas Leerraum (einen Rand) vor und nach einem Absatz hinzu.

Fügen Sie in der Datei index.html nach Ihrem <h1>-Tag eine neue Zeile ein und fügen Sie das folgende <p>-Tag ein:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some important information.
</p>

Ihr <body>-Abschnitt sollte nun sowohl die Überschrift als auch den neuen Absatz enthalten:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some important information.
  </p>
</body>

Speichern Sie die Datei index.html und aktualisieren Sie den Tab "Web 8080", um den neu hinzugefügten Absatz unter der Überschrift angezeigt zu sehen.

strong-Tag für fetten Text verwenden

In diesem Schritt lernen Sie, wie Sie Text fett darstellen können. Das <strong>-Tag wird verwendet, um anzuzeigen, dass der Text eine starke Bedeutung, Ernsthaftigkeit oder Dringlichkeit hat. Browser stellen den Inhalt innerhalb eines <strong>-Tags typischerweise fett dar.

Ändern wir den Absatz, den Sie im vorherigen Schritt hinzugefügt haben, um den Ausdruck "important information" hervorzuheben. Umschließen Sie diesen Ausdruck mit <strong> und </strong> Tags.

Ändern Sie das <p>-Tag in Ihrer index.html-Datei wie folgt:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some <strong>important information</strong>.
</p>

Der vollständige <body> Ihrer Datei sollte nun wie folgt aussehen:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
</body>

Speichern Sie die Datei und überprüfen Sie den Tab "Web 8080". Sie werden feststellen, dass der Text "important information" nun fett gedruckt ist.

em-Tag für kursiven Text anwenden

In diesem Schritt lernen Sie, wie Sie Text hervorheben, der typischerweise kursiv dargestellt wird. Das <em>-Tag (kurz für "emphasis") wird für diesen Zweck verwendet. Es zeigt an, dass der umschlossene Text betont oder hervorgehoben werden soll.

Fügen wir einen neuen Absatz hinzu, der hervorgehobenen Text enthält. Fügen Sie den folgenden Code unter Ihrem vorhandenen Absatz in index.html ein:

<p>
  You can also use other tags to format text. For example, the em tag is used
  for <em>emphasized</em> text.
</p>

Ihr <body>-Abschnitt sollte nun wie folgt aussehen:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. For example, the em tag is used
    for <em>emphasized</em> text.
  </p>
</body>

Speichern Sie die Datei und rufen Sie den Tab "Web 8080" auf. Sie sehen einen neuen Absatz, und das Wort "emphasized" wird kursiv dargestellt.

br-Tag für Zeilenumbrüche einfügen

In diesem Schritt lernen Sie, wie Sie einen Zeilenumbruch innerhalb eines Textblocks erzwingen können. Das <br>-Tag fügt einen einzelnen Zeilenumbruch ein. Es ist ein leeres Tag, was bedeutet, dass es keinen schließenden Tag hat.

Fügen wir einen Zeilenumbruch in der Mitte des zweiten Absatzes ein, den Sie erstellt haben. Dies ist nützlich, wenn Sie eine neue Zeile beginnen möchten, ohne einen neuen Absatz zu beginnen.

Ändern Sie das zweite <p>-Tag in Ihrer index.html-Datei, um ein <br>-Tag einzufügen:

<p>
  You can also use other tags to format text. <br />For example, the em tag is
  used for <em>emphasized</em> text.
</p>

Ihr endgültiger <body>-Inhalt sollte wie folgt aussehen:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. <br />For example, the em tag is
    used for <em>emphasized</em> text.
  </p>
</body>

Speichern Sie die Datei und aktualisieren Sie den Tab "Web 8080". Sie werden sehen, dass der zweite Absatz nun in zwei Zeilen aufgeteilt ist.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben die Grundlagen der HTML-Textformatierung erfolgreich erlernt.

In diesem Lab haben Sie Folgendes geübt:

<h1> zum Erstellen einer Hauptüberschrift.
<p> zur Strukturierung von Inhalten in Absätze.
<strong> zur Hervorhebung von Text mit starker Bedeutung (fett).
<em> zur Betonung von Text (kursiv).
<br> zum Einfügen von Zeilenumbrüchen.

Diese Tags sind die wesentlichen Bausteine für die Erstellung gut strukturierter und lesbarer Inhalte auf jeder Webseite. Üben Sie weiter und erkunden Sie andere HTML-Tags, um Ihre Webentwicklungsfähigkeiten zu verbessern.