x

HTML Grundkurs: Aufbau einer HTML-Datei

In diesem Video zeigen wir dir, wie du eine HTML-Datei erstellst. Dabei zeigen wir dir den grundlegenden Aufbau eines HTML-Dokuments.

Play Video

Wie erstelle ich eine HTML-Datei?

Da noch nicht alle von euch spezielle Programme für die Bearbeitung von HTML-Dateien besitzen, starten wir heute mit dem Editor von Windows. Unter Mac oder Linux sollte es ein ähnliches Programm geben.

Um den Editor zu öffnen, musst du in der Windows Suche einfach Editor eingeben. Den ersten Schritt den es jetzt zu machen gibt, ist ein HTML Dokument zu erstellen.

Klicke dazu im Editor auf „Datei“ und dann auf „Speichern unter“. Nun kannst du entscheiden, wo du deine HTML-Datei speichern möchtest. Erstelle am besten genauso wie ich einen HTML Grundkurs Ordner auf deiner Festplatte und speichere dort alle Dateien ab, die wir im Laufe des HTML Grundkurs erstellen werden.

So nun öffnest du diesen Ordner, stellst bei Dateityp „Alle Dateien“ ein und die Codierung auf UTF-8. Der Dateiname ist prinzipiell egal. Da wir aber im Laufe des HTML Grundkurs noch weitere Dateien erstellen werden, solltest du den Dateien denselben Namen wie ich geben, um nicht durcheinander zu kommen.

Nenne die Datei daher „index“ und ganz wichtig, füge ihr die Endung „.html“ an. So nun hast du deine erste HTML Datei erstellt.

Der Aufbau eines HTML-Dokumentes

Kommen wir jetzt zum Aufbau eines HTML Dokumentes.

Der Inhalt eines HTML Dokuments startet mit dem HTML-Tag und endet mit dem schließenden HTML-Tag.

<html></html>

 

Innerhalb des HTML-Tag befindet sich der Head (Kopf) und der Body (Körper) eines HTML-Dokumentes.

Der Head befindet sich vor dem Body und startet mit dem öffnenden Head-Tag und endet mit einem schließenden Tag.

Der Body besitzt ebenfalls ein öffnendes und ein schließendes Tag.

<html><head></head><body></body></html>

 

Um nun etwas Ordnung in dein HTML-Dokument zu bekommen, baue Absätze zwischen den Tags ein.

Im HTML ist es prinzipiell egal, ob man seinen kompletten Code in einer Zeile oder in mehreren Zeilen schreibt.

<html> <head> </head> <body> </body> </html>

 

Um dein HTML Dokument nun zu testen, schreiben „test“ zwischen die Body Tags und speichere dein Dokument ab.

<html> <head> </head> <body> test </body> </html>

 

Öffne nun über den Explorer deinen HTML Grundkurs Ordner und mache einen Doppelklick auf die index.html Datei. Sollte in deinem Browser nun ganz links oben „test“ stehen, hast du alle richtig gemacht.

Tipps und Tricks

Nun möchte ich dir noch ein paar Tipps geben, die du von Anfang an beachten solltest. Gehe dazu wieder zurück in den Editor.

Um deinem Browser klar zu machen, dass du HTML 5.1 verwendest, schreibe den folgenden Tag immer vor deinen HTML-Tag.

<!DOCTYPE html>

 

Zusätzlich kannst du dem HTML-Tag das Attribut „lang=“de““ hinzufügen. „lang“ ist dabei die Abkürzung von Language, was auf deutsch Sprache bedeutet. Durch dieses Attribut erkennen später zum Beispiel die Suchmaschinen, dass es sich um eine deutschsprachige Webseite handelt.

<!DOCTYPE html> <html lang="de"> <head> </head> <body> test </body> </html>

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: