HTML: Was genau ist das und wie wird eine HTML-Datei erstellt?

HTML (HyperText Markup Language) ist eine unabhängige Dokumentbeschreibungssprache, in der der Aufbau von Internetseiten beschrieben wird.

HTML kann wie auch JavaScript, PHP und CSS auch in einem ganz normalen Editor erstellt werden. HTML enthält nicht nur den zu übertragenden Text, sondern auch zusätzliche HTML-Kommandos (Tags), die die Formatierung und den Aufbau von Bildern, Links (Querverweise auf andere Dokumente), Formular und Ähnliches festlegen.

Die Interpretation des HTML-Dokuments ist durch einen sogenannten Browser (Internet Explorer, Google Chrome, Firefox usw.) möglich, der den HTML-Code interpretiert und auf dem Bildschirm darstellt.

Inhaltsverzeichnis

Wie wird HTML definiert?
- Der Head-Bereich:
- Der Body-Bereich:
Wie erstelle ich ein HTML-Dokument?
Wie erzeuge ich die Endung .html oder .htm?
Welche Engine für die Erstellung von HTML-Dokumenten nutzen?

Wie wird HTML definiert?

Ein HTML-Dokument wird durch sogenannte Tags definiert. Hierbei unterscheidet man 3 unterschiedliche Arten von Tags:

Tags zur Textformatierung
Tags zur Strukturierung der Webseite
Spezielle Tags für Bilder, Formulare usw.

Der grundlegende Aufbau eines HTML Dokuments sieht wie folgt aus:

<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>
Was ist HTML?
</body>
</html>

<html>

<head>

<title>HTML Tutorial</title>

</head>

<body>

Was ist HTML?

</body>

</html>

Das HTML-Dokument wird durch den <HTML>-Tag eingeleitet und durch den </HTML>-Tag wieder beendet. Zwischen den beiden Tags liegen der sogenannte Head- und der Body-Bereich.

Der Head-Bereich:

Im Head eines HTML-Dokuments werden die „Einstellungen“ für das Dokument vorgenommen. Hierunter fallen z. B. die Einbindung von JavaScrip- und CSS-Dateien sowie die Festlegung des Titels der Webseite, der Im Browser-Tab und in den Suchergebnissen in den Suchmaschinen als Headline angezeigt wird.

Der Body-Bereich:

Der HTML-Code, der im Body definiert wird, ist der eigentliche Code, der später für den Internetuser auf dem Bildschirm zu sehen ist. Hier werden Text, Bilder und Videos definiert und vom Browser interpretiert ausgegeben.

Im Body-Bereich wird auch die grundlegende Struktur einer Webseite fest definiert, die später mit CSS ins Detail gestylt werden kann.

Wie erstelle ich ein HTML-Dokument?

Bei der Erstellung einer HTML-Datei ist es wichtig, dass auf das Dateiformat geachtet wird, damit der Browser auch weiß, dass hier ein HTML-Dokument verlinkt werden soll.

Das gängige Format wird wohl .html sein, obgleich der Browser auch eine Datei mit der Endung .htm als HTML-Dokument identifizieren würde.

Wie erzeuge ich die Endung .html oder .htm?

Hier gibt es zwei Möglichkeiten:

Du legst eine Textdatei an, öffnest diese und speicherst sie mit dem entsprechenden Format ab. Hierfür musst du beim Speichern den Button unter dem Dateinamen auf „Alle Dateien“ stellen und hinter den Dateinamen .html oder .htm schreiben.
Die etwas umständlichere, aber auch dauerhaft bessere Lösung ist es, das Dateiformat jeder Datei anzeigen zu lassen. Dies ist zwar einmalig genauso aufwendig wie die erste Möglichkeit, aber erspart einem später umständliche Wege.

→ Dateiformat anzeigen und ändern

Welche Engine für die Erstellung von HTML-Dokumenten nutzen?

Wie oben bereits erwähnt, lässt sich HTML und auch jeder andere Programmcode in einen Texteditor, Word oder ähnlichen Textbearbeitungsprogrammen schreiben.

Es ist jedoch auf Dauer sinnvoll, sich eine Engine (Entwicklungsumgebung) zu suchen, die für die Erstellung von HTML, CSS und anderen Programmcodes konzipiert ist, da diese Umgebungen ein sogenanntes Syntax Highlighting bieten, welches einem den Überblick über den Programmcode enorm erleichtert. Beispiele für mögliche Entwicklungsumgebungen sind:

Notepad++ (kostenlos)
Adobe Dreamweaver (kostenpflichtig)
Phase 5 (kostenlos)
Visual Studio (kostenpflichtig)
NVU (kostenlos)

Ich persönlich nutze Notepad++, welches leicht verständlich ist und keine unnötigen Extras bietet. Für die etwas gehobeneren Ansprüche würde ich Visual Studio empfehlen. Adobe Dreamweaver ist zwar auch ein guter Editor, aber für den normalen Entwickler zu mächtig.

Außerdem bietet Adobe eine Vorschau an. Dies ist zwar eine gute Idee, aber an der Umsetzung sollte noch gefeilt werden, da diese „Vorschau“ schlimmer reagiert als der IE7 😉

Falls du noch mehr Interesse am Thema HTML hast, kannst du dir das weiterführende Tutorial auf der nächsten Seite ansehen: „Wie wird HTML definiert?„.

Bewerte diesen Artikel

32 Bewertung(en), durchschnittlich: 5,00 von 5