HTML: Inhalt erstellen

HTML (HyperText Markup Language) ist der Code, der verwendet wird, um eine Webseite und ihren Inhalt zu strukturieren. Dieser Artikel bietet ein grundlegendes Verständnis von HTML und seiner Funktionalität und zeigt Ihnen, wie Sie den grundlegenden Inhalt für Ihre erste Website erstellen können.

Voraussetzungen:	Grundlegende Vertrautheit mit Ihrem Betriebssystem, der grundlegenden Software, die Sie zum Erstellen einer Website verwenden werden, und Dateisystemen.
Lernziele:	Der Zweck und die Funktion von HTML. Die grundlegenden Teile der HTML-Syntax — öffnende und schließende Tags, Elemente, Attribute, Kopf, Körper. Häufige HTML-Elemente einschließlich Absätze, Überschriften, Bilder, Listen und Links.

Was ist also HTML?

HTML ist eine Markup-Sprache, die aus einer Reihe von Elementen besteht, die verwendet werden, um Textinhalte einzuschließen und so deren Struktur zu definieren und ein bestimmtes Verhalten zu erzeugen.

Schauen wir uns ein Beispiel an — der folgende Inhalt wird auf einer Webseite auf derselben Zeile angezeigt, da er in keiner Weise strukturiert ist:

Instructions for life:
Eat
Sleep
Repeat

Wenn wir diesen Inhalt mit den folgenden HTML-Elementen umschließen, können wir diese einzelne Zeile in einen Absatz (<p>) und drei Aufzählungspunkte (<li>) umwandeln:

html

<p>Instructions for life:</p>

<ul>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Repeat</li>
</ul>

Dieses HTML wird in einem Webbrowser wie folgt angezeigt:

Neben der Strukturierung von Text hat HTML viele andere Anwendungen - Texte oder Bilder mit anderen Webseiten verlinken, Bilder oder Videos einbetten, Datentabellen erstellen und so weiter.

Erstellen Ihres ersten HTML-Dokuments

Schauen wir uns an, wie einzelne Elemente kombiniert werden, um eine HTML-Seite zu erstellen. In diesem Abschnitt erstellen Sie eine grundlegende HTML-Datei und sehen sich an, woraus sie besteht.

Erstellen Sie in Ihrem web-projects-Ordner einen weiteren neuen Ordner namens first-website.
Erstellen Sie in first-website eine neue Datei namens index.html und fügen Sie den folgenden Code genau so ein, wie er hier gezeigt wird:

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>

Hier haben wir Folgendes:

<!doctype html>: Der doctype ist ein erforderliches Vorwort. In den Anfängen von HTML (etwa 1991/92) sollten Doktypen als Links zu einem Satz von Regeln dienen, denen die HTML-Seite folgen musste, um als gutes HTML zu gelten, was automatische Fehlerüberprüfung und andere nützliche Dinge bedeuten konnte. Heutzutage machen sie jedoch nicht viel und sind im Wesentlichen nur erforderlich, um sicherzustellen, dass Ihr Dokument korrekt funktioniert. Das müssen Sie für den Moment wissen.
<html></html>: Das <html>-Element umschließt den gesamten Inhalt der gesamten Seite und wird manchmal als Stammelement bezeichnet. Es enthält auch das lang Attribut, das die Hauptsprache des Dokuments festlegt.
<head></head>: Das <head>-Element dient als Container für alle Dinge, die Sie auf der HTML-Seite einfügen möchten, die nicht der Inhalt sind, den Sie den Besuchern Ihrer Seite zeigen. Dazu gehören Dinge wie Schlüsselwörter und eine Seitenbeschreibung, die in den Suchergebnissen erscheinen soll, CSS, um den Inhalt zu stylen, Zeichensatzdeklarationen und mehr.
<meta charset="utf-8">: Dieses Element legt den Zeichensatz fest, den Ihr Dokument verwenden soll, auf UTF-8, das die meisten Zeichen der überwiegenden Mehrheit der geschriebenen Sprachen umfasst. Im Wesentlichen kann es jetzt jeden Textinhalt, den Sie darauf legen könnten, verarbeiten. Es gibt keinen Grund, dies nicht festzulegen, und es kann helfen, später einige Probleme zu vermeiden.
<meta name="viewport" content="width=device-width">: Dieses Viewport-Element stellt sicher, dass die Seite in der Breite des Browser-Viewports gerendert wird, wodurch verhindert wird, dass mobile Browser Seiten breiter anzeigen als der Viewport ist und sie dann verkleinern.
<title></title>: Das <title>-Element legt den Titel Ihrer Seite fest, der im Browser-Tab erscheint, in dem die Seite geladen wird. Es wird auch verwendet, um die Seite zu beschreiben, wenn Sie sie als Lesezeichen/Favorit markieren.
<body></body>: Das <body>-Element enthält alle Inhalte, die Sie Webbenutzern zeigen möchten, wenn sie Ihre Seite besuchen, sei es Text, Bilder, Videos, Spiele, abspielbare Audiospuren oder was auch immer sonst noch. Im Moment enthält es nur ein einzelnes <img>-Element, aber wir werden später mehr Inhalt hinzufügen.

Hinweis: Die meisten HTML-Elemente bestehen aus einem öffnenden Tag (zum Beispiel <body>), gefolgt vom Inhalt des Elements, gefolgt von einem schließenden Tag (zum Beispiel </body>). Einige HTML-Elemente haben auch Attribute, die zusätzliche Einstellungen oder Informationen über das Element enthalten – siehe zum Beispiel charset, name und src in unserem Codebeispiel.

Einbetten von Bildern

Richten wir unsere Aufmerksamkeit auf das <img>-Element:

html

<img src="" alt="My test image" />

Dies bettet ein Bild in unsere Seite an der Stelle ein, an der es erscheint. Es tut dies über das src (Quell-)Attribut, welches den Pfad zu der Bilddatei enthält, die wir einbetten möchten.

Wir haben auch ein alt (alternatives) Attribut hinzugefügt. Im alt-Attribut spezifizieren Sie beschreibenden Text für Benutzer, die das Bild nicht sehen können, möglicherweise aus den folgenden Gründen:

Sie sind sehbehindert. Benutzer mit erheblichen Sehbehinderungen verwenden oft Werkzeuge, sogenannte Screen-Reader, um ihnen den Alt-Text vorzulesen.
Es ist etwas schief gelaufen, was dazu führt, dass das Bild nicht angezeigt wird. Wenn das src-Attribut keinen gültigen Pfad zu einem Bild enthält, wird stattdessen der Alt-Text angezeigt:

Der Alt-Text, den Sie schreiben, sollte dem Leser genügend Informationen liefern, um eine gute Vorstellung davon zu haben, was das Bild darstellt. In diesem Beispiel ist unser aktueller Text „Mein Testbild“ nicht gut, da er keine beschreibenden Informationen über das Bild vermittelt. Eine viel bessere Alternative für unser Firefox-Logo wäre „Das Firefox-Logo: ein brennender Fuchs, der die Erde umgibt“.

Hinweis: Elemente wie <img> haben keinen Inhalt oder Schließ-Tag und werden daher leere (oder void) Elemente genannt. Sie werden manchmal mit einem Schrägstrich am Ende ihres einzelnen Tags geschrieben (<img />), aber dies ist optional.

Lassen Sie uns nun Ihr Bild anzeigen.

Erstellen Sie im Ordner first-website einen neuen Ordner namens images und legen Sie das Bild, das Sie im vorherigen Beispiel ausgewählt haben, in diesen Ordner.
Geben Sie im Wert des src-Attributs des <img>-Tags den Pfad zu Ihrem Bild ein. Es befindet sich in einem Ordner namens images, der sich im selben Verzeichnis wie Ihre index.html-Datei befindet, daher wird der Pfad images/ plus der Name Ihres Bildes sein. Angenommen, Ihr Bild hieße firefox-icon.png, würde Ihr src-Attribut folgendermaßen aussehen: src="images/firefox-icon.png".
Ersetzen Sie den Wert des alt-Attributs — Mein Testbild — durch einen Text, der Ihr Bild besser beschreibt.
Öffnen Sie Ihre index.html-Datei in einem Webbrowser. Sie sollten Ihr Bild angezeigt sehen. Wenn nicht, überprüfen Sie Ihr <img>-Element mit unserem Code; stellen Sie sicher, dass keine der Syntax ausgelassen wurde, wie zum Beispiel die Anführungszeichen. Stellen Sie sicher, dass der Bilddateiname korrekt ist.

Wenn das Bild wirklich groß ist und daher nicht auf den Bildschirm passt, machen Sie sich keine Sorgen. Wir werden dieses Problem im nächsten Artikel beheben.

Hinweis: Erfahren Sie mehr über die Verwendung eines alt-Attributs für Bilder in verschiedenen Situationen in unserem zugänglichen Multimedia-Tutorial und Ein alt Entscheidungsbaum.

Text auszeichnen

Dieser Abschnitt behandelt einige wesentliche HTML-Elemente, die Sie zum Auszeichnen von Text verwenden werden.

Hinweis: Scrimbas Die Grundlagen von semantischem HTML ^{MDN Lernpartner} ist eine interaktive Lektion, die eine nützliche Beschreibung von HTML bietet, mit besonderem Schwerpunkt darauf, warum der semantische Aspekt wichtig ist.

Überschriften

Überschriftselemente ermöglichen es Ihnen, bestimmte Teile Ihres Inhalts als Überschriften oder Unterüberschriften zu kennzeichnen. In der gleichen Weise, wie ein Buch den Haupttitel, die Kapiteltitel und die Untertitel hat, kann es auch ein HTML-Dokument. HTML enthält 6 Überschriftenebenen, <h1>–<h6>, obwohl Sie in der Regel nur 3 bis 4 davon verwenden:

html

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Hinweis: Alles in HTML zwischen  ist ein HTML-Kommentar. Der Browser ignoriert Kommentare, wenn er den Code rendert. Anders ausgedrückt, sie sind auf der Seite nicht sichtbar - nur im Code. HTML-Kommentare sind eine Möglichkeit, Anmerkungen zu Ihrem Code oder Ihrer Logik hinzuzufügen, die für andere nützlich sein könnten, die am gleichen Code arbeiten, oder für Sie, wenn Sie nach 6 Monaten zurückkehren und sich nicht mehr erinnern, was Sie gemacht haben.

Fügen Sie Ihrem HTML-Dokument Ihren Seitentitel direkt über Ihrem <img>-Element hinzu, eingeschlossen in <h1> ... </h1>-Tags. Speichern Sie die Datei und betrachten Sie sie in einem Browser, um den Effekt zu sehen.

Absätze

Absatz-<p>-Elemente sind für das enthalten von Textabsätzen gedacht; Sie werden diese häufig verwenden, wenn Sie reguläre Textinhalte markieren:

html

<p>This is a single paragraph</p>

Fügen Sie Ihre Beispieltexte aus dem vorherigen Artikel in ein oder mehrere Absätze direkt unter Ihrem <img>-Element ein. Speichern Sie es und sehen Sie sich Ihre Seite in einem Browser an.

Listen

Ein großer Teil des Webinhalts besteht aus Listen, und HTML hat spezielle Elemente dafür. Das Markieren von Listen besteht immer aus mindestens zwei Elementen. Die gebräuchlichsten Listenarten sind geordnete und ungeordnete Listen:

Ungeordnete Listen sind für Listen, bei denen die Reihenfolge der Elemente keine Rolle spielt, wie zum Beispiel eine Einkaufsliste. Diese sind in einem <ul>-Element eingehüllt.
Geordnete Listen sind für Listen, bei denen die Reihenfolge der Elemente eine Rolle spielt, wie zum Beispiel eine Liste von Kochanweisungen in einem Rezept. Diese sind in einem <ol>-Element eingehüllt.

Jedes Element innerhalb der Listen wird in einem <li> (Listenelement) eingeschlossen.

Wenn wir zum Beispiel einen Teil des folgenden Absatzfragments in eine Liste umwandeln wollten:

html

<p>
  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together…
</p>

Könnten wir das Markup wie folgt ändern:

html

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together…</p>

Versuchen Sie, Ihrer Beispielseite eine geordnete oder ungeordnete Liste hinzuzufügen und betrachten Sie das Ergebnis in einem Browser.

Links erstellen

Links sind sehr wichtig — sie sind das, was das Web zum Web macht! Um einen Link hinzuzufügen, verwenden wir ein <a>-Element, wobei "a" für "anchor" (Anker) steht. Um Text innerhalb Ihres Absatzes in einen Link zu verwandeln, folgen Sie diesen Schritten:

Wählen Sie einen Text. Wir wählten den Text "Mozilla Manifesto".
Umschließen Sie den Text mit einem <a>-Element, wie unten gezeigt:
html
```
<a>Mozilla Manifesto</a>
```
Geben Sie dem <a>-Element ein href-Attribut, wie unten gezeigt:
html
```
<a href="">Mozilla Manifesto</a>
```
Füllen Sie den Wert dieses Attributs mit der Webadresse aus, auf die der Link verweisen soll:
html
```
<a href="https://www.mozilla.org/en-US/about/manifesto/">
  Mozilla Manifesto
</a>
```

Wenn Sie den https:// oder http://-Teil, das sogenannte Protokoll, am Anfang der Webadresse auslassen, könnten Sie unerwartete Ergebnisse bekommen. Nachdem Sie einen Link erstellt haben, klicken Sie darauf, um sicherzustellen, dass er Sie dorthin sendet, wo Sie hinwollten.

Hinweis: href mag am Anfang wie eine ziemlich obskure Wahl für einen Attributnamen erscheinen. Es steht für hypertext reference.

Fügen Sie Ihrer Seite jetzt einen Link hinzu, falls Sie dies noch nicht getan haben.

Schlussfolgerung

Wenn Sie alle Anweisungen in diesem Artikel befolgt haben, sollten Sie mit einer Seite enden, die wie die unten gezeigte aussieht (Sie können sie auch hier ansehen):

Ein Screenshot einer Webseite mit einem Firefox-Logo, einer Überschrift mit der Aufschrift „Mozilla ist cool“ und zwei Absätzen mit Platzhaltertext

Wenn Sie nicht weiterkommen, können Sie Ihre Arbeit jederzeit mit unserem fertigen Beispielcode auf GitHub vergleichen.

Wir haben hier nur an der Oberfläche von HTML gekratzt. Sie werden später in unserem Strukturieren von Inhalten mit HTML-Kernmodul im Laufe des Kurses noch viel mehr lernen.

Siehe auch

Learn HTML and CSS, Scrimba ^{MDN Lernpartner}: Scrimbas Learn HTML and CSS Kurs bringt Ihnen HTML und CSS durch das Erstellen und Bereitstellen von fünf großartigen Projekten bei, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von erfahrenen Lehrern gelehrt werden.