In den vergangenen Jahren gab es einen großen Hype um eine neue HTML-Version namens HTML 5. Mit dieser wurde der HTML-Standard nicht nur erweitert, sondern gleichzeitig auch entrümpelt. Zusätzlich kann man den Browserkrieg, der einst zwischen den quelloffenen Browsern wie Mozilla und Firefox sowie den Microsoftbrowsern, den Internet Explorern, getobt hat, für beendet erklären. Dieser Browserkrieg führte damals dazu, dass einige HTML-Seiten auf den quelloffenen Browsern nicht lauffähig waren. Wiederum andere Webseiten konnten nicht innerhalb des Internet Explorers angezeigt werden. Dieser Krieg hat sich jedoch weitestgehend in die mobile Welt in Spezial-APIs verlagert, die allerdings nicht Thema dieses Tutorials sind.
Für die Darstellung in diesem Tutorial ist so diese Entwicklung positiv und es ist möglich ein vereinfachtes Grundgerüst einer HTML-Datei präsentieren. Eine HTML-Datei ist – wie schon erwähnt – eine normale Textdatei, kann in einem Texteditor bearbeitet werden und sieht wie folgt aus:
|
1 2 3 4 5 6 7 8 |
<!doctype html> <html> <head> <title></title> </head> <body> </body> </html> |
Die erste Zeile der HTML 5-Datei spielt eine besondere Rolle. Hier wird der Dateityp mit <!doctype html> deklariert. Innerhalb von HTML5 gibt es als Vereinfachung nur noch diesen einen Typen.
In den folgenden Zeilen ist eine Baumstruktur wiederzufinden. Ein solcher Baum verläuft von einer Wurzel bis in die Blätter. In der Informatik, wo der Baum als eine Datenstruktur bekannt ist, werden die Verzweigungen Knoten genannt. Wenn der Informatiker bei einer Datenpräsentation von einer Baumstruktur spricht, bedeutet dies, dass eine Wurzel zu finden ist, von dieser dann Verzweigungen abzweigen, die wiederum weitere Verzweigungen haben, bis schließlich in den Blättern geendet wird. Was innerhalb dieser Struktur jedoch verboten ist, ist es, dass ein Zweig mit einem anderen Zweig verwachsen darf. Anders ausgedrückt, gibt es immer nur einen Pfad, von einem bestimmten Blatt bis zur Wurzel.
Innerhalb der HTML-Struktur sind sogenannte Tags zu finden, die jeweils einen Namen haben. Der Wurzel-Tag lautet <html>, der später mit einem </html> abgeschlossen wird. Innerhalb dieses Wurzel-Tags befinden sich zwei Kind-Tags, zwei Verzweigungen, nämlich einmal <head> für allgemeine Informationen über die HTML-Datei und <body> für den eigentlichen Text, der innerhalb des Browsers angezeigt wird. Innerhalb des <head>-Tags befindet sich ein <title>-Tag. Hier lässt sich der Name der Seite eintragen. Er wird später innerhalb des Browsers in den Fensternamen übernommen. Weitere <head>-Tags sind möglich. Der <body>-Tag ist bei uns leer. Normalerweise findet sich jedoch hier der Inhalt der Seite, der in den folgenden Abschnitten besprochen wird.