HTML

Webseiten werden in der Sprache HTML (Hypertext Markup Language) gespeichert und von Browsern (z.B. Chrome, Safari, Edge, Firefox) dargestellt.

1. Struktur eines HTML-Dokuments

Damit der Browser ein HTML-Dokument erkennt und richtig darstellt, muss es mindestens diese Bestandteile haben:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Seitentitel</title>
  </head>
  <body>
 
Hallo Welt! 
 
  </body>
</html>

Eine HTML-Seite besteht aus Elementen, das sind Objekte, die bspw. Texte, Bilder, Rahmen usw. darstellen. Jedes Element wird durch ein HTML-Tag beschrieben, das aus einem start tag (bspw. <h1>), einem end tag (bspw. </h1>) und ggf. Text dazwischen bestehen kann, z.B. beschreibt dieses Tag ein Überschriften-Element:

<h1>Das ist eine Überschrift</h1>

Der Head-Teil des HTML-Dokuments beschreibt die Metadaten der HTML-Seite, beispielsweise den Titel, der in der Fensterleiste erscheint (<title></title>) oder den Zeichensatz, mit dem die HTML-Datei codiert ist (<meta charset='utf-8'>).
Im Body-Teil des HTML-Dokuments stehen die Elemente, die auf der HTML-Seite sichtbar sind.

1. Überschriften

Überschriften kannst Du mit den Tags <h1> (Überschrift 1. Ordnung → sehr groß) bis <h4> (Überschrift 4. Ordnung) setzen, beispielsweise so:

Beispiel

<h1>Das ist eine große Überschrift!</h1>
<h2>Das ist eine etwas kleinere Überschrift.</h2>

wird so dargestellt:

Das ist eine große Überschrift!

Das ist eine etwas kleinere Überschrift.

2. Absätze

Der Browser wertet Zeilenumbrüche in der HTML-Datei nicht aus. Möchtest du zwei Absätze mit einem Zeilenumbruch dazwischen schreiben, so musst du den Text der Absätze jeweils in ein < div >-Element verpacken. < div >-Elemente beinhalten den ganzen rechteckigen Bereich, der den Absatz enthält, und lassen sich mit Rahmen, Hintergrundfarbe usw. versehen. Mehr dazu weiter unten.

Beispiel:

<div>
Das ist ein Beispielsatz. 
Und dieser Text kommt unmittelbar dahinter.
</div>
<div>
Das ist ein zweiter Beispielsatz. 
Und dieser Text kommt unmittelbar dahinter.
</div>

wird so dargestellt:

Das ist ein Beispielsatz. Und dieser Text kommt unmittelbar dahinter.

Das ist ein zweiter Beispielsatz. Und dieser Text kommt unmittelbar dahinter.