1. Lernen Webentwicklung
  2. Einstiegsmodule
  3. Ihre erste Website
  4. Erstellen des Inhalts

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTML: Erstellen des Inhalts

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

Voraussetzungen: Grundlegende Vertrautheit mit Ihrem Computerbetriebssystem, der grundlegenden Software, die Sie zur Erstellung einer Website verwenden, und Dateisystemen.
Lernergebnisse:
  • Der Zweck und die Funktion von HTML.
  • Die grundlegenden Teile der HTML-Syntax — öffnende und schließende Tags, Elemente, Attribute, Kopf, Körper.
  • Gewöhnliche HTML-Elemente einschließlich Abschnitten, Überschriften, Bildern, Listen und Links.

Was ist HTML?

HTML ist eine Markup-Sprache, die aus einer Reihe von Elementen besteht, die verwendet werden, um Textinhalte zu umschließen (oder einzuschließen), um deren Struktur zu definieren und sie dazu zu bringen, sich auf eine bestimmte Weise zu verhalten.

Schauen wir uns ein Beispiel an — der folgende Inhalt wird alle in einer Zeile angezeigt, wenn er auf einer Webseite dargestellt wird, 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 folgendermaßen dargestellt:

Abgesehen von der Strukturierung von Text hat HTML viele andere Verwendungen — dazu gehören das Verknüpfen von Text oder Bildern mit anderen Webseiten, das Einbetten von Bildern oder Videos, das Erstellen von Datentabellen und so weiter.

Hinweis: Scrimbas HTML-Tags MDN Lernpartner ist eine interaktive Lektion, die Basiswissen von HTML, einschließlich Überschriften, vermittelt.

Erstellen Ihres ersten HTML-Dokuments

Sehen wir uns an, wie einzelne Elemente kombiniert werden, um eine HTML-Seite zu bilden. In diesem Abschnitt erstellen Sie eine grundlegende HTML-Datei und werfen einen Blick darauf, woraus sie besteht.

  1. Erstellen Sie in Ihrem web-projects Ordner einen neuen Ordner mit dem Namen first-website.
  2. Erstellen Sie in first-website eine neue Datei mit dem Namen index.html und fügen Sie den folgenden Code genau so ein, wie er angezeigt 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 Präambel. In den frühen Tagen, als HTML noch jung war (ungefähr 1991/92), waren Doctypes dafür gedacht, als Links zu einem Satz Regeln zu fungieren, denen die HTML-Seite folgen musste, um als gutes HTML betrachtet zu werden, was automatische Fehlerprüfungen und andere nützliche Dinge bedeuten konnte. Heutzutage leisten sie nicht mehr viel und sind im Wesentlichen nur erforderlich, um sicherzustellen, dass Ihr Dokument korrekt funktioniert. Mehr müssen Sie dazu vorerst nicht wissen.
  • <html></html>: Das <html>-Element umschließt den gesamten Inhalt der Seite und wird manchmal als Wurzelelement 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 Keywords und eine Seitenbeschreibung, die in Suchergebnissen erscheinen soll, CSS, um den Inhalt zu gestalten, Zeichensatzdeklarationen und mehr.
  • <meta charset="utf-8">: Dieses Element legt den Zeichensatz fest, den Ihr Dokument verwenden soll, UTF-8, der die meisten Zeichen der überwiegenden Mehrheit der geschriebenen Sprachen umfasst. Im Wesentlichen kann es jetzt jeden Textinhalt verarbeiten, den Sie möglicherweise darauf setzen. Es gibt keinen Grund, dies nicht zu setzen, und es kann helfen, einige Probleme später 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, um zu verhindern, dass mobile Browser Seiten breiter als das Viewport rendern und sie dann verkleinern.
  • <title></title>: Das <title>-Element legt den Titel Ihrer Seite fest, der der Titel ist, der in der Registerkarte des Browsers erscheint, in dem die Seite geladen wird. Es wird auch verwendet, um die Seite zu beschreiben, wenn Sie sie mit einem Lesezeichen versehen/favorisieren.
  • <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 Audiotracks oder was auch immer sonst. Im Moment enthält es nur ein einziges <img> Element, aber wir werden später mehr Inhalt hinzufügen.

Hinweis: Die meisten HTML-Elemente bestehen aus einem Öffnungstag (zum Beispiel, <body>), gefolgt vom Inhalt des Elements, gefolgt von einem Schließ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 Position ein, an der es erscheint. Dies geschieht über das src (Quelle)-Attribut, das den Pfad zur einzubettenden Bilddatei enthält.

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

  1. Sie sind sehbehindert. Benutzer mit erheblichen Sehbehinderungen verwenden oft Werkzeuge namens Screenreader, um ihnen den Alt-Text vorzulesen.

  2. Etwas ist schiefgegangen, wodurch das Bild nicht angezeigt wird. Wenn das src Attribut keinen gültigen Pfad zu einem Bild enthält, wird stattdessen der Alt-Text angezeigt:

    Das Wort: mein Testbild

Der von Ihnen geschriebene Alt-Text sollte dem Leser genügend Informationen liefern, um eine gute Vorstellung davon zu haben, was das Bild vermittelt. In diesem Beispiel ist unser aktueller Text "Mein Testbild" nicht gut, weil 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 als leere (oder void) Elemente bezeichnet. Sie werden manchmal mit einem Schrägstrich am Ende ihres einzigen Tags geschrieben (<img />), aber das ist optional.

Lassen Sie uns jetzt Ihr Bild anzeigen.

  1. 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.
  2. Geben Sie im Wert des src Attributs des <img> Tags den Pfad zu Ihrem Bild an. Es befindet sich in einem Ordner namens images, der sich im selben Verzeichnis wie Ihre index.html Datei befindet, daher lautet der Pfad images/ plus der Name Ihres Bildes. Wenn Ihr Bild zum Beispiel firefox-icon.png hieße, würde Ihr src Attribut so aussehen: src="images/firefox-icon.png".
  3. Ersetzen Sie den Wert des alt Attributs — Mein Testbild — durch einen Text, der Ihr Bild besser beschreibt.
  4. Ö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 Syntax fehlt, wie 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 darüber 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 Entscheidungsbaum für Alt-Text.

Kennzeichnung von Text

Dieser Abschnitt behandelt einige wesentliche HTML-Elemente, die Sie zur Kennzeichnung 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 davon wichtig ist.

Überschriften

Überschriftselemente ermöglichen es Ihnen, anzugeben, dass bestimmte Teile Ihres Inhalts Überschriften — oder Unterüberschriften — sind. In gleicher Weise, wie ein Buch den Haupttitel, Kapitelüberschriften und Untertitel hat, kann ein HTML-Dokument auch. HTML enthält 6 Überschriftsebenen, <h1>–<h6>, obwohl Sie häufig nur 3 bis 4 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 <!-- und --> ist ein HTML-Kommentar. Der Browser ignoriert Kommentare, während er den Code rendert. Mit anderen Worten, sie sind auf der Seite nicht sichtbar — nur im Code. HTML-Kommentare sind eine Möglichkeit für Sie, Notizen zu Ihrem Code oder Ihrer Logik hinzuzufügen, die nützlich für andere sein könnten, die an demselben Code arbeiten, oder für Sie selbst, wenn Sie nach 6 Monaten zurückkommen und sich nicht erinnern können, was Sie gemacht haben.

Fügen Sie den Titel Ihrer Seite zu der HTML-Seite direkt über Ihrem <img> Element hinzu, umschlossen von <h1> ... </h1> Tags. Speichern Sie die Datei und betrachten Sie sie in einem Browser, um den Effekt zu sehen.

Absätze

Absatz-<p>-Elemente dienen dazu, Absätze von Text zu enthalten; sie werden diese häufig verwenden, wenn Sie regulären Textinhalt markieren:

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

Fügen Sie Ihren Beispieltext aus dem vorherigen Artikel in ein oder mehrere Absätze hinzu, die direkt unter Ihrem <img>-Element platziert werden. Speichern Sie es und betrachten Sie Ihre Seite in einem Browser.

Listen

Ein Großteil der Webinhalte sind Listen, und HTML verfügt über spezielle Elemente dafür. Die Markierung von Listen besteht immer aus mindestens 2 Elementen. Die gebräuchlichsten Listentypen sind geordnete und ungeordnete Listen:

  1. Ungeordnete Listen sind für Listen gedacht, bei denen die Reihenfolge der Elemente nicht wichtig ist, wie z.B. eine Einkaufsliste. Diese sind in einem <ul>-Element umschlossen.
  2. Geordnete Listen sind für Listen gedacht, bei denen die Reihenfolge der Elemente wichtig ist, wie z.B. eine Anleitung zum Kochrezept. Diese sind in einem <ol>-Element umschlossen.

Jedes Element innerhalb der Listen wird in einem <li> (Listenelement)-Element eingefügt.

Wenn wir zum Beispiel einen Teil des folgenden Absaztfragments 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, eine geordnete oder ungeordnete Liste zu Ihrer Beispielseite hinzuzufügen und betrachten Sie das Ergebnis in einem Browser.

Links sind sehr wichtig — sie sind das, was das Web zu einem Netz macht! Um einen Link hinzuzufügen, müssen wir ein <a>-Element verwenden, wobei "a" für "Anker" steht. Um Text innerhalb Ihres Absatzes in einen Link zu verwandeln, befolgen Sie diese Schritte:

  1. Wählen Sie einen Text aus. Wir haben den Text "Mozilla-Manifest" gewählt.

  2. Umschließen Sie den Text in einem <a>-Element, wie unten gezeigt:

    html
    <a>Mozilla Manifesto</a>

  3. Geben Sie dem <a>-Element ein href-Attribut, wie unten gezeigt:

    html
    <a href="">Mozilla Manifesto</a>

  4. 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>

Sie könnten unerwartete Ergebnisse erhalten, wenn Sie den Teil https:// oder http://, genannt Protokoll, zu Beginn der Webadresse weglassen. Nachdem Sie einen Link erstellt haben, klicken Sie darauf, um sicherzustellen, dass er das tut, was Sie erwarten.

Hinweis: href mag auf den ersten Blick wie eine ziemlich obskure Wahl für einen Attributnamen erscheinen. Es steht für hypertext reference.

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

Fazit

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

Ein Screenshot einer Webseite, der ein Firefox-Logo, eine Überschrift, die sagt: Mozilla ist cool, und zwei Absätze von Beispieltext zeigt

Wenn Sie feststecken, können Sie Ihre Arbeit jederzeit mit unserem vollständigen Beispielcode auf GitHub vergleichen.

Hier haben wir nur an der Oberfläche von HTML gekratzt. Sie werden sich genauer mit HTML in unserem Inhalte mit HTML strukturieren Basismodul später im Kurs befassen.

Siehe auch

Lernen Sie HTML und CSS, Scrimba MDN Lernpartner

Scrimba's Lernen Sie HTML und CSS Kurs lehrt Ihnen HTML und CSS durch den Aufbau und den Einsatz von fünf großartigen Projekten, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von kenntnisreichen Lehrern unterrichtet werden.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden