MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

 

HTML (Hypertext Markup Language) ist der Code, welcher benötigt wird, um den Webinhalt zu strukturieren und ihm eine Bedeutung und einen Zweck zu geben. Zum Beispiel könnte dein Inhalt Absätze und Grafiken, aber auch Bilder und Tabellen enthalten. Wie der Titel dieses Artikels verspricht, soll dir hier ein grundsätzliches Verständnis vermittelt werden, wie HTML eingesetzt wird.

Was ist HTML jetzt wirklich?

HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; es ist dazu gedacht, deine Webseite zu strukturieren. Es besteht aus einer Reihe von Elementen, Tags genannt, welche du um verschiedene Teile von deinem Inhalt herum platzieren kannst, um diesen eine spezielle Aufgabe zuzuweisen, zum Beispiel kannst du damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:

My cat is very grumpy

(=Meine Katze ist sehr mürrisch)

Wenn wir möchten das der Satz in einem eigenen Absatz steht, können wir mit <p> spezifizieren, das es sich um einen Absatz handelt: 

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

Aufbau eines HTML-Elements

Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.

(Content=Inhalt, Element=HTML-Element)

Die Hauptteile unseres Elements sind:

  1. Das öffnende Tag: Diese besteht aus dem Namen des Elements (in diesem Fall ein p für paragraph (engl.:Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.
  2. Der Inhalt: Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.
  3. Das schließende Tag: Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.
  4. Das Element: Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.

Elemente können auch Attribute enthalten, dass sieht dann so aus:

Diese Attribute enthalten Zusatzinformationen über das Element, welche du nicht im eigentlichen Inhalt anzeigen willst. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.

In unserem Beispiel ist der Name des Attributes class und editor-note ist der diesem Attribut zugeordnete Wert.

Ein Attribut sollte immer haben:

  1. Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).
  2. Den Attributnamen, gefolgt von Gleichheitszeichen
  3. Anführungs- und Schlusszeichen um den Wert. (bsp. "editor-note")

Verschachtelte Elemente

Du kannst einzelne Elemente ineinander verschachteln. Wenn wir also besonders betonen wollen, dass unsere Katze sehr mürrisch ist, können wir dieses einzelne Wort in einem <strong> Element verpacken.

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

Folgendes Beispiel ist nicht richtig, da die Elemente nicht ineinander verschachtelt sind, sondern ineinander verkettet. Das letzte Element, welches geöffnet wird, muss auch zuerst geschlossen werden.

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

Dies funktioniert wie mit Schachteln: Wenn die kleine Schachtel in der grossen ist, kann man auch nicht zuerst den grossen Deckel schliessen, bevor man den kleinen Deckel draufsetzt. Die einzelnen Elemente dürfen sich also nicht überlappen, sie dürfen nur ineinander stehen.

Leere Elemente

Gewisse Elemente haben keinen Inhalt, diese werden leere Elemente genannt. Beispielsweise das <img> Element, welches wir schon in unserer HTML-Datei haben:

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

Dies beinhaltet zwei Attribute, aber es gibt kein schließendes </img> Tag und keinen Inhalt in dem Element. Das <img> Tag braucht keinen Inhalt um einen Effekt zu haben. Es bindet ein Bild an der entsprechenden Stelle in der HTML Seite ein.

Aufbau eines HTML-Dokumentes

Jetzt weißt du wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um eine HTML Seite aufzubauen. Schauen wir den Code wieder an, welchen wir vorher in index.html eingefügt haben (den wir im Artikel "Dateien nutzen" genutzt haben):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

Hier haben wir:

  • <!DOCTYPE html> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.
  • <html></html> — das <html> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet
  • <head></head> — das <head> Element. In dieses Element ist alles eingeschlossen, was nicht auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.
  • <body></body> — das <body> Element. Dies beinhaltet alles, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.
  • <meta charset="utf-8"> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf utf-8, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.
  • <title></title> — Dies setzt den Titel deiner Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.

Bilder

Schauen wir jetzt unser Bild-Element nochmals an:

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

Wie wir vorher gesagt haben, ist ein Bild an der Stelle unserer Seite eingebettet, wo es erscheint. Es tut dies mit dem src (=source=Quelle) Attribut, welches den Pfad unseres Bildes beinhaltet.

Aber wir haben auch einen alt (alternative) Befehl, welcher einen Text anzeigt, wenn das Bild nicht angezeitg werden kann. Dies ist nützlich für:

  1. Sehbehinderte. Diese haben häufig Programme, welche ihnen den alternativen Text vorlesen.
  2. Wenn es einen Fehler hat im Code, was bedeutet, dass das Bild nicht angezeigt werden kann. Verändere beispielsweise den Code bei src und speichere ihn ab. Öffne das Dokument dann mit dem Browser. Jetzt sollte statt dem Bild folgende Meldung angezeigt werden:

Dieser alternative Satz sollte dem Leser eine Informationen geben, damit er sich vorstellen kann, was auf dem Bild angezeigt ist. Dieser Beispielsatz ist also nicht so gut. Viel besser wäre die Beschreibung "Das Firefox-Logo: Ein brennender Fuchs, welcher die Erde umkreist."

Versuche jetzt, einen besseren Text für dein Bild zu schreiben.

Hinweis: Finde mehr über Zugänglichkeit unter MDN's Accessibility landing page heraus.

Textdarstellung

Diese Lektion enthält ein paar Grundlagen vom HTML, welche man benötigt, um Text darzustellen.

Titel

Titelelemente erlauben dir, dem Browser mitzuteilen, dass dies Titel oder Untertitel sind.

Mit Überschriftelementen können sie bestimmte Teile des Inhaltes als Überschrift deklarieren. Wie ein Buch einen Hauptitel und Kapitelüberschriften haben kann, können HTML Dokumente eine Haupt"überschrift" und weitere Überschriften haben.

HTML besitzt 6 Überschrifttypen, wobei meist nur 3-4 gebraucht werden:  <h1><h6>

 

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

Probieren sie nun einen geeigneten Titel in ihre HTML-Seite einzufügen, direkt über dem <img> Element.

Absätze

Wie oben erklärt benutzt man <p> Elemente um Absätze zu erstellen ; Sie werden diese oft benutzen, um Texte zu strukturieren.

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

Ergänzen sie ihren Beispieltext (Sie sollten ihn sich seit Wie sollte ihre Website aussehen? überlegt haben) in einem oder mehreren Absätzen direkt unter ihrem <img> (Bildelement).

Listen

Viel Webseiten enthalten Listen , deshalb hält HTML dafür Elemente bereit. Die Kennzeichnung von Listen besteht immer aus zwei Elementen. Man unterscheidet geordnete und ungeordnete Listen.

  1. Ungeordnete LIsten sind für Listen, bei denen die Reihenfolge der Gegenstände keine Rolle spielt, wie eine Einkaufsliste. Diese werden eingehüllt von einem  <ul> Element.
  2. Geordnete Listen werden verwendet, wenn die Reihenfolge der Bestandteile wichtig ist, wie bei einem Rezept. Diese werden eingehüllt von einem <ol> Element.

Jeder Gegenstand der Liste wird einzeln in ein <li> (list item) Element gepackt.

Wenn wir zum Beispiel die einzelnen Teile dieses Absatzes in eine geeignete Liste verwandeln wollen:

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

Könnten wir das so machen:

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

Probieren sie eine geordnete oder ungeordnete Liste in ihre Beispielseite einzufügen.

Links sind sehr wichtig — sie sind, was das Internet EIN NETZ macht. Um einen Link zu implementieren, müssen wir ein einfaches Element — <a> — verwenden. Das a ist die Kurzform für "Anker" (engl."anchor"). Um einigen Text innerhalb des Absatzes in einen Link zu verwandeln, führe die folgenden Schritte durch:

  1. Suche Dir einen Text aus. Wir benutzen in unserem Beispiel "Mozilla Manifesto".
  2. Bette den Text in ein <a>-Element ein:
    <a>Mozilla Manifesto</a>
  3. Gib dem <a>-Element ein href-Attribut:
    <a href="">Mozilla Manifesto</a>
  4. Fülle für den Wert des Attributs die Internetadresse ein, auf die Du verlinken willst:
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Es kann sein, dass Du komische Ergebnisse bekommst, wenn Du https:// oder http:// , genannt protokoll, vergisst. Überprüfe deshalb immer nachdem Du den Link gesetzt hast, ob er wie gewünscht funktioniert.

href mag sich etwas komisch für einen Attributnamen anhören. Wenn Du Probleme hast, Dich an den Namen zu erinnern, merke Dir, dass es die Kurzform von Hypertext Referenz (engl. hypertext reference) ist.

Füge jetzt einen Link zu Deiner Seite hinzu, falls Du es noch nicht getan hast.

Ergebnis

Wenn Du allen Anweisungen in diesem Artikel gefolgt bis, solltest Du als Ergebnis eine Seite erhalten, die so wie diese aussieht (Du kannst sie auch hier anschauen):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Wenn Du nicht mehr weiterkommst, kannst Du deine Seite immer mit dem fertigem Code auf Github vergleichen.

Hier haben wir nur an der Oberfläche von HTML gekratzt. Um mehr über HTML zu lernen, gehe zu der HTML Lernseite.

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: Shidigital, sbruder, Bissmarc, AndreasL, dobra, janjo, maybe
 Zuletzt aktualisiert von: Shidigital,