HTML – Tutorial, Tipps & Tricks

HTML ist die bekannteste Sprache des Web und bildet zugleich das Grundgerüst einer jeden Website. HTML ist relativ einfach zu erlernen.

Was ist HTML?

HTML heißt ausgeschrieben Hypertext Markup Language, oder zu deutsch Hypertext Auszeichnungssprache. Es handelt sich dabei um eine Beischreibungssprache für Webdokumente. HTML definiert ganz allgemein gesehen die Struktur eines Dokuments. Es beschreibt so z.B. an welcher Stelle ein Bild zu finden sein soll, wo Text ist und wie eine Tabelle strukturiert ist.

Was kann HTML?

HTML ist eine sehr statische Sprache - also keine echte Programmiersprache. Man spricht hier auch nicht von "programmieren" sondern von "notieren". Wie eingangs erwähnt ist es eine reine Struktursprache - dynamische Elemente wie bewegte Texte, Ausklappmenüs oder fliegende Bilder gibt es nur mit HTML nicht. Für derartige Dinge sind andere Sprachen wie z.B. JavaScript von Nöten.

Was braucht man für HTML?

Für HTML braucht es nicht viel. Als erstes wird ein Browser benötigt. Der Browser liest das Dokument ein, wertet es aus und zeigt es schließlich gemäß der vorhandenen Definitionen an.
Für das Schreiben einer HTML-Datei ist ebenso nicht wirklich viel notwendig. Da es sich bei HTML-Dateien um reine ASCII-Dateien handelt (also Dateien in denen die Buchstaben wie in einer normalen txt-Datei abgebildet werden), reicht hierfür prinzipiell ein einfacher Texteditor wie Notepad++. Wer sich intensiver mit HTML beschäftigt kann aber auch auf einen der zahlreichen speziell für HTML kreierten Editoren zurückgreifen. Sie bieten meist eine große Anzahl von Features, die das Erstellen der Dateien erleichtern und verschnellern.

Entstehung

Die Sprache HTML ist in etwa so alt wie das WWW. WWW wie auch HTML wurden 1990 von Tim Berners-Lee am Genfer CERN-Institut im Rahmen der Vernetzung von Computern erstellt. Das WWW und mit diesem auch HTML wurden aber erst mit aufkommen der ersten grafischen Browser populär. Diese Browser konnten - im Gegensatz zu früheren Browsern - den Inhalt einer Seite schon recht schön formatiert anzeigen und besaßen darüber hinaus die Möglichkeit Bilder oder andere grafische Elemente wie Buttons oder Textfelder anzuzeigen.

Mit dem Lauf der Zeit wurde HTML dann nach und nach weiter entwickelt und - meist durch den Antrieb der Browserhersteller - durch neue Techniken erweitert. Nach der ersten, damals noch wenig offiziellen, Version von HTML (1.0) folgte 1995 die zweite Version der Sprache (HTML 2.0) in der aber nur wenige Erneuerungen zu finden waren.

Wiederum 2 Jahre später wurde 1997 nach langer Diskussion HTML 3.2 herausgegeben. Die Version 3.0 wurde einfach "übersprungen", da die einzelnen Parteien die an der Entwicklung teil hatten zu große Differenzen verband. So war die ursprüngliche HTML 3.0 Version weit von der damals aktuellen Browser-Realität entfernt und man überarbeitete schließlich den Entwurf erneut.

1998 wurde dann die für lange Zeit letzte HTML-Version 4 veröffentlicht. Darin wurde weniger auf neue Features hingearbeitet als mehr auf die Grundaufgaben von HTML. Dinge die in 3.2 eingeführt wurden, wurden wieder entfernt (bzw. als deprecated bezeichnet, was bedeutet, dass es dieses Feature zwar noch gibt, es aber nicht verwendet werden sollte) und an andere Sprachen übergeben. So wurde z.B. das Formatieren von Texten wieder mehr an CSS herangebracht.

Das auf XML basierende XHTML sollte 2000 die Verarbeitung von HTML vereinfachen. Dabei war es aber strikt erforderlich zum Beispiel öffnende Tags wieder zu schließen. Das hat sich so nicht durchsetzen können, weshalb XHTML 2006 eingestellt wurde.

In 2014 gibt es mit HTML5 die aktuell neuste Version. In der Zwischenzeit sind mit besseren Internetverbindungen und mobilen Endgeräten neue Anforderungen entstanden. Hier bietet HTML5 sehr viele Möglichkeiten, die bereits in den mesten Browsern funktionieren. Vor HTML5 musste man hier auf Java und Flash zurückgreifen.

Syntax

Die Syntax einer Sprache beschreibt den genauen Aufbau und Aussehen – sozusagen die Grammatik und Rechtschreibung. Auch HTML muss sich an gewisse Regeln halten um möglichst flexibel zu sein.

HTML Grundgerüst

Jede HTML-Datei besteht aus einem festen Grundgerüst. Es besteht aus head (engl. Kopf) und body (engl. Körper), sowie einem alles umschließenden html-Element.

Daten im HEAD

Der head-Bereich umfasst größtenteils nicht-sichtbare Dinge und definiert die Seite, Skripte oder Stilangaben näher.

Textformen

In HTML gibt es mehrere Textformen/-arten. Diese werden separat bestimmt und unterscheiden sich von den anderen. Neben dem ‘normalen’ Text gibt es auch noch andere Textformen, die wir Ihnen hier näherbringen möchten. Grundsätzlich werden alle Textformen von den jeweiligen Tags umschlossen.

Text gestalten

Hyperlinks und Anker

Um schnell zu anderen Seiten springen zu können, oder um auf andere Seiten zu verweisen können Sie Links/Hyperlinks benutzen. Durch einen Klick auf einen Link befördern Sie den Surfer zu anderen Seiten. Ohne Sie wäre das Internet nur eine wahrlose Ansammlung von Dateien und Daten.

Ausrichtung

Manchmal reicht es nicht Elemente einfach nur auf dem Bildschirm darzustellen, dann soll eine Ausrichtung erfolgen. Die einzelnen Formen der Ausrichtung werden Ihnen nun in diesem Kapitel näher erläutert.

Listen

Für Listen oder Aufzählungen in HTML gibt es mehrere Möglichkeiten der Darstellung. Sie haben dabei immer die gleiche Struktur: Sie bestehen aus einem einleitenden Listen Element, den Listenpunkten bzw. dem Listeninhalt und dem beendenden Listen Element.

Grafiken

Eine gerne verwandte Möglichkeit der Gestalltung von Webseiten ist die Benutzung von Grafiken, Bildern und anderen grafischen Objekten.

Formulare definieren

Formulare kann man sich wie ein gewöhnliches Formular aus Papier vorstellen: Man schreibt etwas rein, kreuzt etwas an und schickt es dann (mit der Post) ab. Ebenso funktionieren auch Formulare in HTML-Dokumenten.

Formulare – Felder

Felder dienen zu Eingabe von Daten, Texten und sonstigem. Im Vergleich zum Papier-Formular stellen sie z.B. ein Feld für den Namen, ein Feld für einen Text oder Felder für ander Dinge dar.

Formulare – Buttons und Boxen

Buttons/Knöpfe werden z.B. zum Absenden oder Zurücksetzten notwendig. Boxen sind einzellige Felder. Ihre Funktion ist es, das Ankreuzen zu ermöglichen.

Tabellen erstellen

Eine Tabelle setzt sich aus mehreren verschiedenen Elementen zusammen. Das wichtigste ist das Tabellengerüst, welches mit dem table-Element beschrieben wird. Beispiel:

StyleSheets

StyleSheets, genauer Cascading StyleSheets (CSS), sind Definitionen, welche festlegen, wie bestimmte Elemente, Objekte, Klassen (etc.) auszusehen haben. Sie sollen helfen Dokumente zu vereinheitlichen und Umstellungen im Design vereinfachen. Da CSS selbst sehr umfangreich ist, wird hier lediglich darauf eingegangen werden, wie man CSS in HTML einsetzt.

Skripte

JavaScript , VBScript und andere Skriptsprachen können dazu beitragen, die Interaktivität zwischen User und Seite zu fördern. Sie sind meist keineswegs mit HTML zu vergleichen und setzten größtenteils da an, wo HTML aufhört: Aktivität. So ist es z.B. möglich aktiv in HTML-Dokumente mittels ( Java )Script einzugreifen, Dokumente können personalisiert werden oder andere Dinge können geschehen. Da diese Sprachen einen sehr großen Umfang haben, wird hier lediglich auf die Verwednung in HTML eingegangen werden.

Image-Map

Image-Maps sind Bilder/Grafiken über die ein bestimmtes Koordinatenmappe (Map) gelegt wurde. Anhand dieser Koordinaten können nun auf dem Bild/der Grafik Bereiche (Areas) markiert bzw. bestimmt werden.

IFrames

IFrames sind, ebenso wie Frames, Rahmen. Der Unterschied besteht jedoch darin, dass sie “Inline” Frames sind, was bedeutet, dass man sie innerhalb eines Dokumentes einsetzten kann. IFrames sehen im Prinzip aus, wie ein kleines Fenster, mitten in einer Seite; können aber genauso wie Frames mit verschiedenen Dateien ‘gefüttert’ werden.
Leider unterstützen derzeit nicht alle Browser diese Art von Frames, deshalb sollten Sie mit der Nutzung vorsichtig sein.

Document Type Definitionen

HTML 5

Im Januar 2008 war es soweit. Das World Wide Web Consortium (W3C) hat den ersten Entwurf für HTML in der neuen Version 5 veröffentlicht. Trotz XHTML und XML, die die Zukunft darstellen sollen, wird es eine neue Version der “Ur-Programmiersprache” für Webanwendungen geben. Einige der Neuheiten im Zusammenhang mit HTML5 sind bereits in aktuellen Browserversionen enthalten.

Java

Java ist eine C/C++ ähnliche Programmiersprache. Mit Hilfe von ( Java ) Applets können die Funktionen dieser Sprache in HTML integriert werden.

Multimedia

In HTML-Dokumenten können die verschiedensten Arten von multimedialen Elementen integriert werden. Die Möglichkeiten reichen von Musik/Klängen über Videos sogar bis hin zu 3D-Flügen über Landschaften. Da es nun schon unzählige Arten dieser Dinge gibt, werden wir hier nicht auf jede einzelne eingehen können und werden. Jedoch werden wir versuchen die wichtigsten hier aufzuzeigen und zu erläutern.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project