HTML: Erstellen der Inhalte

HTML ist eine Markup-Sprache, die die Struktur Ihrer Inhalte definiert. HTML besteht aus einer Reihe von Elementen, die Sie verwenden, um verschiedene Teile des Inhalts zu umschließen oder zu umwickeln, damit sie auf eine bestimmte Weise erscheinen oder sich auf eine bestimmte Weise verhalten. Die umschließenden Tags können ein Wort oder Bild zu einem Hyperlink machen, Worte kursiv darstellen, die Schriftgröße vergrößern oder verkleinern usw. Zum Beispiel, sehen Sie sich die folgende Textzeile an:

My cat is very grumpy

Wenn wir möchten, dass die Zeile für sich allein steht, könnten wir angeben, dass es sich um einen Absatz handelt, indem wir sie in Absatz-Tags einschließen:

<p>My cat is very grumpy</p>

Lassen Sie uns dieses Absatz-Element etwas genauer betrachten.

Die Hauptbestandteile unseres Elements sind wie folgt:

1. Das öffnende Tag: Dies besteht aus dem Namen des Elements (in diesem Fall p), eingeschlossen in öffnenden und schließenden spitzen Klammern. Dies gibt an, wo das Element beginnt oder wirksam wird — in diesem Fall, wo der Absatz beginnt.
2. Das schließende Tag: Dies ist dasselbe wie das öffnende Tag, außer dass es einen Schrägstrich vor dem Elementnamen enthält. Dies gibt an, wo das Element endet — in diesem Fall, wo der Absatz endet. Das Hinzufügen eines schließenden Tags zu vergessen, ist einer der häufigsten Anfängerfehler und kann zu seltsamen Ergebnissen führen.
3. Der Inhalt: Dies ist der Inhalt des Elements, der in diesem Fall nur Text ist.
4. Das Element: Das öffnende Tag, das schließende Tag und der Inhalt zusammen bilden das Element.

Elemente können auch Attribute haben, die wie folgt aussehen:

Attribute enthalten zusätzliche Informationen über das Element, die Sie nicht im tatsächlichen Inhalt erscheinen lassen möchten. Hier ist class der Attribut-name und editor-note der Attribut-wert. Das class-Attribut ermöglicht es Ihnen, dem Element eine nicht eindeutige Kennung zu geben, die verwendet werden kann, um es (und alle anderen Elemente mit demselben class-Wert) mit Stilinformationen und anderen Dingen anzusprechen. Einige Attribute haben keinen Wert, wie beispielsweise required.

Attribute, die einen Wert setzen, haben immer:

1. Ein Leerzeichen zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, falls das Element schon eins oder mehrere Attribute hat).
2. Den Attributnamen gefolgt von einem Gleichheitszeichen.
3. Den Attributwert, eingeschlossen in öffnende und schließende Anführungszeichen.

Sie können auch Elemente innerhalb anderer Elemente platzieren — das nennt man Verschachtelung. Wenn wir sagen wollten, dass unsere Katze sehr griesgrämig ist, könnten wir das Wort "sehr" in einem <strong>-Element umwickeln, was bedeutet, dass das Wort stark betont werden soll:

<p>My cat is <strong>very</strong> grumpy.</p>

Sie müssen jedoch sicherstellen, dass Ihre Elemente richtig verschachtelt sind. Im obigen Beispiel haben wir zuerst das <p>-Element geöffnet, dann das <strong>-Element; daher müssen wir das <strong>-Element zuerst schließen, dann das <p>-Element. Das Folgende ist falsch:

<p>My cat is <strong>very grumpy.</p></strong>

Die Elemente müssen korrekt geöffnet und geschlossen werden, damit sie eindeutig innerhalb oder außerhalb voneinander sind. Wenn sie sich wie oben gezeigt überlappen, wird Ihr Webbrowser versuchen, die beste Vermutung darüber zu machen, was Sie sagen wollten, was zu unerwarteten Ergebnissen führen kann. Also, machen Sie es nicht!

Einige Elemente haben keinen Inhalt und werden leere Elemente genannt. Nehmen wir das <img>-Element, das wir bereits auf unserer HTML-Seite haben:

<img src="images/firefox-icon.png" alt="My test image" />

Dies enthält zwei Attribute, aber es gibt kein schließendes </img>-Tag und keinen inneren Inhalt. Das liegt daran, dass ein Bildelement keine Inhalte umhüllt, um sie zu beeinflussen. Sein Zweck ist es, ein Bild an der Stelle, an der es erscheint, in der HTML-Seite einzubetten.

Damit haben wir die Grundlagen einzelner HTML-Elemente abgeschlossen, aber sie sind nicht sehr nützlich für sich allein. Jetzt schauen wir uns an, wie einzelne Elemente kombiniert werden, um eine vollständige HTML-Seite zu formen. Lassen Sie uns eine grundlegende HTML-Datei erstellen und schauen, woraus sie besteht:

1. Erstellen Sie innerhalb Ihres web-projects-Ordners einen weiteren neuen Ordner namens first-website.
2. Erstellen Sie innerhalb von first-website eine neue Datei namens index.html, und fügen Sie den folgenden Code exakt so ein, wie er angezeigt wird:

<!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 eine erforderliche Präambel. In grauer Vorzeit, als HTML noch jung war (um 1991/92), sollten Doctypes als Links zu einer Reihe von Regeln fungieren, denen die HTML-Seite folgen musste, um als gutes HTML betrachtet zu werden, was eine automatische Fehlerprüfung und andere nützliche Dinge bedeuten könnte. Heutzutage tun sie jedoch nicht viel und sind im Wesentlichen nur erforderlich, um sicherzustellen, dass Ihr Dokument sich korrekt verhält. Das ist alles, was Sie für jetzt wissen müssen.
• <html></html> — das <html>-Element. Dieses Element umschließt alle Inhalte auf der gesamten Seite und wird manchmal als Wurzelelement bezeichnet. Es enthält auch das lang-Attribut, das die Hauptsprache des Dokuments einstellt.
• <head></head> — das <head>-Element. Dieses Element wirkt als ein Container für all die Dinge, die Sie auf der HTML-Seite einfügen möchten, die nicht der Inhalt sind, den Sie Ihren Seitenbesuchern zeigen. Dies umfasst Dinge wie Schlüsselwörter und eine Seitenbeschreibung, die Sie in Suchergebnissen anzeigen möchten, CSS um unseren Inhalt zu stilisieren, Zeichensatzdeklarationen und mehr.
• <meta charset="utf-8"> — Dieses Element setzt den Zeichensatz, den Ihr Dokument verwenden sollte, auf UTF-8, das die meisten Zeichen der überwiegenden Mehrheit geschriebener Sprachen einschließt. Im Wesentlichen kann es jetzt jeden Textinhalt verarbeiten, den Sie darauf setzen könnten. Es gibt keinen Grund, dies nicht einzustellen, 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 bei der Breite des Viewports gerendert wird und verhindert, dass mobile Browser Seiten breiter als der Viewport rendern und dann schrumpfen.
• <title></title> — das <title>-Element. Dies setzt den Titel Ihrer Seite, welcher der Titel ist, der im Browsertab geladen wird. Es wird auch verwendet, um die Seite zu beschreiben, wenn Sie sie als Lesezeichen/Favorit speichern.
• <body></body> — das <body>-Element. Dies enthält alle Inhalte, die Sie Webnutzern zeigen möchten, wenn sie Ihre Seite besuchen, sei es Text, Bilder, Videos, Spiele, abspielbare Audiotracks oder irgendetwas anderes.

Wenden wir uns dem <img>-Element zu:

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

Dieses bettet ein Bild in unsere Seite an der Stelle ein, an der es erscheint. Es tut dies über das src (source)-Attribut, das den Pfad zu unserer Bilddatei enthält.

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

1. Sie sind sehbehindert. Benutzer mit erheblichen Sehbehinderungen verwenden häufig Werkzeuge namens Screen Reader, um ihnen den alt-Text vorzulesen.
2. Irgendetwas ist 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:

Die Schlüsselwörter für alt-Text sind "beschreibender Text". Der von Ihnen geschriebene alt-Text sollte dem Leser genügend Informationen liefern, um eine gute Vorstellung davon zu bekommen, was das Bild vermittelt. In diesem Beispiel ist unser aktueller Text "Mein Testbild" gar nicht gut. Eine viel bessere Alternative für unser Firefox-Logo wäre "Das Firefox-Logo: ein brennender Fuchs, der die Erde umgibt."

Lassen Sie jetzt Ihr Bild anzeigen.

1. Erstellen Sie innerhalb des Ordners 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 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. Zum Beispiel, wenn Ihr Bild firefox-icon.png heißt, 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 gegen unseren obigen Code; stellen Sie sicher, dass keine Syntax, wie die Anführungszeichen, fehlt. Stellen Sie sicher, dass der Bilddateiname korrekt ist.

Dieser Abschnitt wird einige wesentliche HTML-Elemente behandeln, die Sie zum Markieren von Text verwenden werden.

Überschriftselemente ermöglichen es Ihnen, anzugeben, dass bestimmte Teile Ihres Inhalts Überschriften oder Unterüberschriften sind. So wie ein Buch den Haupttitel, Kapitelüberschriften und Untertitel hat, kann ein HTML-Dokument auch. HTML enthält 6 Überschriftsebenen, <h1> - <h6>, obwohl Sie üblicherweise nur 3 bis 4 davon verwenden werden:

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

Versuchen Sie nun, einen passenden Haupttitel zu Ihrer HTML-Seite direkt über Ihrem <img>-Element hinzuzufügen. Speichern Sie die Datei und sehen Sie sich den Effekt in einem Browser an.

Wie oben erklärt, sind <p>-Elemente dazu da, Textabsätze zu enthalten; Sie werden diese häufig verwenden, wenn Sie normalen Textinhalt markieren:

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

Fügen Sie Ihren Beispieltext aus dem vorherigen Artikel in einem oder mehreren Absätzen direkt unter Ihrem <img>-Element hinzu. Speichern Sie es und schauen Sie sich Ihre Seite in einem Browser an.

Ein großer Teil der Webinhalte sind Listen und HTML hat spezielle Elemente dafür. Um Listen zu markieren, sind immer mindestens 2 Elemente erforderlich. Die häufigsten Listentypen sind geordnete und ungeordnete Listen:

1. Ungeordnete Listen sind für Listen, bei denen die Reihenfolge der Elemente nicht wichtig ist, wie z.B. eine Einkaufsliste. Diese sind in ein <ul>-Element eingeschlossen.
2. Geordnete Listen sind für Listen, bei denen die Reihenfolge der Elemente wichtig ist, wie z.B. eine Liste von Kochanweisungen in einem Rezept. Diese sind in ein <ol>-Element eingeschlossen.

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

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

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

Könnten wir das Markup zu diesem ändern

<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 sehen Sie sich das Ergebnis in einem Browser an.

Links sind sehr wichtig — sie machen das Web zu einem Netz! Um einen Link hinzuzufügen, müssen wir ein bestimmtes Element verwenden — <a> — "a" ist die Abkürzung für "anchor". Um Text innerhalb Ihres Absatzes in einen Link zu verwandeln, führen Sie die folgenden Schritte aus:

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

2. Wickeln Sie den Text in ein <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:// weglassen, genannt das Protokoll, am Anfang der Webadresse. Nachdem Sie einen Link erstellt haben, klicken Sie darauf, um sicherzustellen, dass er Sie dorthin sendet, wo Sie hinwollten.

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

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):

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

Hier haben wir wirklich nur an der Oberfläche von HTML gekratzt. Sie werden viel mehr in unserem Strukturieren von Inhalten mit HTML Kernmodul lernen.

• Zurück
• Übersicht: Ihre erste Website
• Weiter