HTML-Grundlagen

« zurück weiter »

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. Das Web für Einsteiger liefert genug Informationen um dich mit HTML bekannt zu machen.

Was ist HTML jetzt wirklich?

HTML ist nicht wirklich eine Programmiersprache; es ist nur dazu gedacht, deine Webseite zu strukturieren. Es besteht aus einer Reihe von Elementen, welche du um verschiedene Teile von deinem Inhalt herum platzieren kannst, um diesen eine spezielle Aufgabe zuzuweisen. Als Beispiel nehmen wir folgenden Inhalt:

My cat is very grumpy

(=Meine Katze ist sehr mürrisch)

Wenn wir es in einen Absatz tun wollen, können wir es mit <p> wie folgt machen:

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

Aufbau eines HTML-Elements

Schauen wir den Aufbau ein wenig genauer an.

(Content=Inhalt, Element=HTML-Element)

Die Hauptteile unseres Elements sind:

Die Öffnungsklammer: Diese besteht aus dem Namen des Elements (in diesem Fall ein p), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies startet dort, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.
Der Inhalt: Hier steht das, was danach wirklich angezeigt wird.
Die Schliessungsklammer: Sie sieht genauso aus wie die Öffnungklammer bis auf den zusätzlichen Schrägstrich (slash). Diese kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.
Das Element: Die Öffnungsklammer, der Inhalt und die Schliessungsklammer ergeben zusammen das Element.

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

Diese Attribute enthalten Extrainformationen ü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.

Ein Attribut sollte immer haben:

Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).
Den Attributnamen, gefolgt von Gleichheitszeichen
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> verpacken.

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

Folgendes Beispiel ist nicht möglich, 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 draufsetzt. Die einzelnen Elemente dürfen sich also nicht überlappen, sie dürfen sich aber überdecken.

Leere Elemente

Gewisse Elemente haben keinen Inhalt, diese werden leere Elemente genannt. Beispielsweise das <img> Element, welches wir schon gemacht haben.

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

Dies beinhaltet zwei Attribute, aber es beinhaltet keinen </img> Befehl und keinen Inhalt, welcher dann tatsächlich angezeigt wird. Es ist nur ein Befehl für den Browser, er solle ein Bild anzeigen.

Aufbau eines HTML-Dokumentes

Die Abstände beim Beginn der Linien dienen nur der Übersicht, sie haben sonst keinen Zweck. Jetzt wollen wir schauen, wie individuelle Elemente kombiniert sind, so dass am Ende eine vollständig HTML-Seite entsteht. Schauen wir den Code wieder an, welchen wir vorher in index.html eingefügt 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, dass alles richtig funktioniert.
<html></html> — das <html> Element. Dieses Element umhüllt den ganzen Inhalt.
<head></head> — das <head> Element. In dieses Element ist alles eingeschlossen, was nicht auf der Seite angezeigt wird. Dies enthält Informationen wie Passwörter, eine Seitenbeschreibung, welche bei Suchresultaten 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 den Charakter deines Dokuments auf utf-8, was die Charakter von fast allen menschlichen Sprachen beinhaltet. Es gibt keinen Grund, dies nicht einzustellen.
<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:

Sehbehinderte. Diese haben häufig Programme, welche ihnen den alternativen Text vorlesen.
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.

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

Links are very important — they are what makes the Web A WEB. To implement a link, we need to use a simple link — <a> — the a being short for "anchor". To make some text inside your paragraph into a link, follow along with these steps:

Choose some text. We chose the text "Mozilla Manifesto".
Wrap the text in an <a> element, like so:
```
<a>Mozilla Manifesto</a>
```
Give the <a> element an href attribute, like so:
```
<a href="">Mozilla Manifesto</a>
```
Fill in the value of this attribute with the web address that you want the link to link to:
```
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
```

You might get unexpected results if you omit the https:// or https:// part, called the protocol, at the beginning of the web address. So after making a link, click it to make sure it is going where you wanted it to.

href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.

Add a link to your page now, if you haven't already done so.

Conclusion

If you have followed all the instructions in this article, you should end up with a page that looks like this (you can also view it here):

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

If you get stuck, you can always compare your work with our finished example code on Github.

Here, we have only really scratched the surface of HTML. To find out more, go to our HTML Learning page.