HTML5 Grundlagen

HTML5 & CSS3 Tutorials

HTML5 Grundlagen

Definition: Was ist HTML5?

HTML ist die Basis aller Webseiten und auch die Basis von Apps. HTML bedeutet ausgeschrieben „Hypertext Markup Language“ und ist keine Programmiersprache. Bei HTML handelt es sich um eine Auszeichnungssprache (engl. Markup language), welche durch Tag’s (engl. gesprochen ˈtæg – dt. Marke / Etikett) Textpassagen auszeichnet und somit dem Browser die benötigten Informationen zur Verfügung stellt, die dieser benötigt um den Text korrekt darzustellen. Man nennt diesen Prozess auch rendern.

Kleines Beispiel für HTML-Text:

<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Textabsatz oder auch Paragraph genannt</p>

Damit die Browserhersteller wissen wie sie ein HTML-Tag von ihrem Browser interpretieren lassen müssen gibt es das W3C (Wold Wide Web Consortium) welches die Standards dafür definiert. Da jedoch aus Sicht der Browserhersteller das W3C zu zögerlich mit der Entwicklung von HTML voranschreitet, haben die Browserhersteller, allen voran Mozilla, Opera und Apple sich zur WHATWG (Web Hypertext Application Technology Working Group) 2004 zusammengeschlossen. Die WHATWG setzt die Standards des W3C nicht außer Kraft sondern reicht seine Ergebnisse zur Zustimmung beim W3C ein. Während die WHATWG HTML5 als einen living standard ansieht, arbeitet das W3C mit Versionsnummern. Momentan wird an HTML5.3 gearbeitet.

Was sind HTML-Elemente?

HTML-Elemente sind die Bausteine aus denen sich eine Webseite zusammensetzt und auch damit strukturiert wird. Fast jedes HTML-Element besteht aus einem öffnenden und einem schließenden Tag. Die folgende Abbildung wirkt auf den ersten Blick vielleicht etwas verwirrend, nimm Dir Zeit und Du wirst sehen, dass HTML-Elemente gar nicht so schwierig aufgebaut sind.

Hier sieht man den detailierten Aufbau eines HTML-Elements mit dem öffnenden und schließenden HTML-Tag

HTML-Elemente definieren den Inhalt, welcher sich zwischen dem „öffnenden“ und dem „schließenden“ Tag befindet. Wie in dem zuvor gezeigten Bild zu erkennen ist, unterscheidet sich das schließende Tag von dem öffnenden Tag durch einen Schrägstrich (engl. Slash) nach der öffnenden spitzen Klammer.
Der Browser stellt bei der Anzeige der Webseite keine HTML-Tag’s dar sondern verwendet diese nur um den Inhalt korrekt darzustellen. Es ist Dir bestimmt schon aufgefallen, dass eine Überschrift im Browser anders dargestellt wird als ein gewöhnlicher Textabsatz. Dafür benötigt der Browser die Informationen die wir ihm, unter anderem, in Form von HTML-Elementen zur Verfügung stellen.

Selbstschließende Tag’s – engl. selfclosing tags

Wie ich bereits durchblicken ließ, trifft der HTML-Element Aufbau mit einem öffnenden und einem schließenden Tag nicht auf alle HTML-Elemente zu. Die Ausnahme bilden die sog. Selbstschließenden Tag’s oder im englischen auch „self closing tags“ genannt. Dabei handelt es sich um HTML-Elemente die keinen Inhalt transportieren, dies bedeutet jedoch nicht, dass diese Elemente keine Informationen besitzen können.

Beispiele für selbstschließende Tag’s:

<br> - dieses Tag erzwingt einen Zeilenumbruch an der gesetzten Stelle
<hr> - dieses Tag erstellt eine horizontale Linie um thematisch unterschiedliche Themen zu trennen
<img> - dieses Tag fügt ein Bild an der gesetzten Stelle ein

An dieser Stelle werden einige von Euch die Stirn runzeln. Bei den ersten beiden HTML-Tag’s wird es jedem klar sein, dass diese keine Information im eigentlichen Sinn beinhalten. Was ist jedoch mit dem IMG-Tag das hat doch eine Information! Nämlich das Bild welches auf der Website angezeigt werden soll.
Wenn Dir dieser Gedanke beim lesen dieses Textes durch den Kopf gegangen ist – bravo, Du hast eine schnelle Auffassungsgabe!
Das Rätsel „warum das IMG-Tag keinen Inhalt besitzt“ lüfte ich sofort im nächsten Abschnitt dieses HTML-Tutorials

HTML-Attribute sind zusätzliche Eigenschaften für HTML-Elemente

HTML-Elemente können mit Attributen (engl. Attributes) erweitert werden, um so zusätzliche Informationen zu einem HTML-Element bereit zu stellen. Attribute können nur im öffnenden Tag eines HTML-Element und in selbstschließenden Tag’s hinterlegt werden. Die Attribute werden in einer Attribut-Name: Attribut-Wert Form angegeben: attributname=“attributwert“
Im nächsten Bild zeige ich Dir einen schematischen Aufbau eines HTML-Elements mit einem Attribut. Dabei handelt es sich um ein echtes Attribut welches einen Tooltip zu einem HTML-Element hinzufügt.

Hier sehen wir den Aufbau von HTML Elementen wenn diese mit Attributen erweitert wurden

Ich möchte Dein Augenmerk auf die Schreibweise von dem Attribut und dem dazugehörigen Attribut-Wert (engl. value) lenken. Nach dem Attribut folgt ein Gleichheitszeichen danach wird der Attribut-Wert in Anführungsstrichen notiert.
In HTML gibt es auch globale Attribute die fast bei jedem HTML-Element angewendet werden können. Ein Beispiel hierfür wäre das lang-Attribut welches die Sprache (engl. language)für den Inhalt eines bestimmten HTML-Elements definiert, im folgenden Beispiel deutsch:

<p lang=“de“>Dieser Textabschnitt/Paragraph ist in deutscher Sprache verfasst</p>

Kleine Notiz am Rande: Der Grund warum man die Sprache für eine Webseite oder gewisse HTML-Elemente definiert ist der, dass Screen Reader die eine Website für sehbehinderte oder blinde Menschen vorlesen, wissen um welche Sprache es sich handelt. Auch Suchmaschinen greifen diese Information ab und verwenden diese um die Webseite besser einordnen zu können.

HTML-Elemente korrekt schachteln

Du weißt nun wie HTML-Elemente aufgebaut sind, wie man diesem zusätzliche Eigenschaften in Form von Attributen hinzufügen kann. Jetzt sehen wir uns die korrekte Schachtelung von HTML-Elementen an. Nehmen wir an, Du hast einen Textabschnitt und in diesem Text soll ein bestimmtes Wort fettgedruckt werden. Um Text fett darzustellen bietet uns HTML5 das <b></b> Element, das HTML-Element für einen Textabschnitt oder auch Paragraph genannt kennen wir schon. Es ist das <p></p> Element. Wie würde das dann aussehen?

<p>Diese Schachtelung ist <b>korrekt</b> da das HTML-Element, welches als letztes geöffnet wurde als erstes wieder geschlossen wurde!</p>

Das oben gezeigte Beispiel repräsentiert eine korrekte Schachtelung von HTML-Elementen.
Im Browser würde in diesem Fall folgendes angezeigt werden:

Diese Schachtelung ist korrekt da das HTML-Element, welches als letztes geöffnet wurde als erstes wieder geschlossen wurde!

Um HTML-Elemente richtig zu Schachteln muss man sich nur eines merken:

Das HTML-Element welches als letztes geöffnet wurde, muss als erstes wieder geschlossen werden!

Eine falsche Schachtelung stellt das folgende Beispiel dar:

<p>Diese Schachtelung ist <b>nicht korrekt</p></b>

Schachtelungen können auch mal etwas komplexer ausfallen wie in dem folgenden Beispiel zu sehen ist:

<p>Diese Schachtelung<u> ist unterstrichen und <b>teilweise fett</b> und</u> auch<i>kursiv dargestellt</i></p>

So würde das im Browser aussehen:

Diese Schachtelung ist unterstrichen und teilweise fett und auch kursiv dargestellt

Hier haben wir weitere HTML-Elemente kennen gelernt:
<p> - Textabschnitt / Paragraph
<b> - fett gedruckt / bold
<u> - unterstrichen / underline
<i> - kursiv / italic

Wie ist der Aufbau eines HTML-Dokuments?

Ein HTML-Dokument ist immer auf die gleiche Art und Weise aufgebaut. Innerhalb des <html> Elements befinden sich zwei weitere Bereiche:

  • <head> - hier werden Zusätzliche Daten zur Webseite angegeben, diese werden jedoch nicht im Browserfenster angezeigt. Dabei handelt es sich unter anderem um den Titel der Webseite, dieser wird im Tab des Browsers angezeigt und auch Suchmaschinen verwenden diesen bei der Anzeige von Suchergebnissen.
  • <body> - im Body-Bereich einer Webseite werden die Daten hinterlegt die im Browserfenster dargestellt werden sollen. Dabei kann es sich um Überschriften, Paragraphen, Bilder, Videos, usw. handeln.

Hier noch ein vereinfachtes Schema eines Webseitenaufbaus:

Schema über den Aufbau eines HTML Dokuments

Der weiß dargestellte Bereich ist jener der tatsächlich auch im Browserfenster angezeigt wird.

Welche Werkzeuge benötigst Du um HTML5 zu schreiben?

Damit Du dieses HTML-Tutorial durcharbeiten kannst, benötigst Du einige kleine Helfer. Allen voran empfehle ich Dir einen HTML-Editor oder auch Code-Editor genannt. Obwohl HTML auch mit einem einfachen Texteditor wie Notepad (für Windows) oder TextEdit (für Mac) geschrieben werden kann, bietet ein HTML-Editor wie etwa Atom, Brackets oder Sublime Text hilfreiche Features damit Du einfacher und bequemer an Dein Ziel kommen kannst. Natürlich benötigst Du auch einen Browser um Dein HTML-Dokument in diesem dann auch betrachten zu können.

Welchen Texteditor soll ich verwenden wenn ich HTML schreiben möchte?

In diesem Tutorial und auch in meinen Videos verwende ich den Texteditor von Atom, wenn es bei Dir auf Deinem Rechner genauso aussehen soll wie zum Beispiel in meinen Videos dann installiere Dir diesen. Mir ist bewusst, dass dieser Texteditor auf Englisch ist, jedoch wirst Du feststellen, dass das dafür benötigte Vokabular recht einfach ist und schnell den Weg in Dein Gedächtnis findet. Die HTML-Elementnamen werden ebenfalls aus dem englischen abgeleitet und nach diesem Tutorial werden Dir schon die ersten englischen Vokabel wie selbstverständlich über die Lippen kommen – vertrau mir!

Hier ein paar geläufige Texteditoren:

Im Grunde ist es egal für welchen Texteditor Du Dich entscheidest, Hauptsache Du fühlst Dich bei der Benutzung wohl. Teste einige Texteditoren um ein Gefühl dafür zu bekommen wenn Du Dir nicht sicher bist für welchen Du Dich entscheiden sollst.

Welchen Browser soll ich verwenden um meine HTML-Dokumente zu betrachten?

In diesem HTML-Tutorial sowie in meinen Videos verwende ich den Google Chrome Browser, hier empfehle ich Dir ebenfalls diesen zu nutzen. Nicht weil dieser besser oder schlechter ist als andere Browser, es hat den Grund, dass es kleine Abweichungen beim Anzeigen eines HTML-Dokuments in verschiedenen Browsern geben kann. Damit Du von diesen Abweichungen nicht irritiert bist und einen Fehler suchst den es nicht gibt, empfehle ich Dir ebenfalls den Google Chrome Browser zu installieren. Generell gilt bei der Entwicklung von Websites, dass man diese auf so vielen unterschiedlichen Browsern wie möglich testet!
Hier eine Auflistung der gängigsten Browser:

Wenn Du auf einen der Browser klickst, kommst Du zur Homepage dieses Browsers.

Zusammenfassung und Hinweise zu den Videos

Nachdem Du nun diesen Teil durchgearbeitet hast, solltest Du Dich für einen Texteditor entschieden haben und bereits zumindest den Google Chrome Browser auf Deinen Computer installiert haben. Zur Installation und Einrichtung des Texteditor Atom habe ich Dir hier noch ein Video von meinem YouTube-Kanal eingefügt. Darin zeige ich Dir wie Du für den Anfang Deinen Texteditor Atom konfigurieren solltest, damit Du den größtmöglichen Lernerfolg erzielen kannst.