HTML5 Powered with CSS3 / Styling, and Semantics

Die Grundstruktur einer HTML-Datei

Gedanken Zur Grundstruktur von HTML-Dateien

Die Grundstruktur einer HTML-Datei wurde schon gezeigt:

  <!DOCTYPE HTML>
    <html lang="de">
     <head>
	  <meta name="DC.Publisher" content="Karsten Fink" />
	  <meta charset="utf-8"/>
	  <title>Einführung in HTML</title>
     </head> 
     <body> 
	  <h1>Überschrift</h1>
	  <p>Absatz mit Inhalt</p>
     </body>
    </html>
  

Hier sieht man schön, dass der Inhalt der Seite von den beiden "Body"-Tags eingerahmt wird und der Kopfteil von den "Head"-Tags. Es sind jeweils ein öffnendes Tag und ein schließendes mit einem Schrägstrich "/" vorhanden. Im Kopf-Teil sind die Metainformationen enthalten. Das sind Informationen über die Seite selbst. Sie sind nicht eingerahmt, sondern stehen in einem Standalone Tag, d.h. es gibt kein öffnendes Tag und der Schrägstrich ist rechts, nicht links wie bei "normalen" Tags. In HTML5 kann der Schrägstrich auch weggelassen werden. Das Dokument ist dann immer noch valides HTML. In <meta charset="utf-8"> ist der Schriftsatz notiert. Dem Browser wird mitgeteilt, dass er diesen Schriftsatz nutzen soll, um die Seite anzuzeigen (rendern). Außerdem solltest du das Title-Tag in den Kopf aufnehmen. Zwischen den beiden Tags steht der Titel der Webseite. Dieser Titel ist oben im Browser-Tab zu lesen und ist sehr wichtig für SEO (Search Engine Optimization). Das bedeutet, dass du diesen Tag nutzen musst, wenn du willst, dass deine Seite überhaupt gefunden werden kann. Das HTML-Tag ist kein Standalone Tag. Es bildet den Rahmen für die gesamte HTML-Datei und beinhaltet ein sogenanntes Attribut mit dem Wert "de", was bedeutet, dass die gesamte Webseite auf Deutsch verfasst ist. Das Tag ganz oben bedeutet, dass in dieser Datei HTML5 zu finden ist und kein HTML4 oder XHTML. Du kannst jetzt diese HTML-Datei abspeichern. Wenn du sie speicherst, musst du die Dateiendung ".html" benutzen, wenn du z.B. ".txt" nimmst, weiß der Browser nicht, dass er diese Datei anzeigen soll. Der Text-Editor von Windows ist dazu gar nicht geeignet. Dazu nimmst du lieber einen richtigen Code-Editor wie den von Thomas Weinert. Der Name des Programms ist Weaverslave. Lade einfach das ZIP-Archiv herunter und entpacke es mit Rechtsklick/alle extrahieren. Weaverslave ist schon älter, aber natürlich noch immer gut, und läuft, glaube ich, sogar auf Windows 10, kann aber nur Grundstrukturen (Vorlagen) für HTML4 u.a. ältere Versionen erzeugen und kein utf-8. Wenn du auf Deutsch oder Englisch schreibst, ist der angebotene Schriftsatz aber ausreichend. Ändere einfach das oberste Tag der Grundstruktur, denn wir nutzen heutzutage kein HTML4 mehr. Du kannst jetzt deine HTML-Datei lokal speichern, d.h. auf deinem Computer und diese auch lokal starten, denn wir programmieren kein PHP. Das müssten wir dann erst einmal auf den Server hochladen (mit einem FTP-Programm), um die Resultate zu begutachten. So kannst du einfach auf deine HTML-Datei doppelklicken. Später zeige ich dir, wie man eine "richtige" Webadresse registriert. Da kannst du dann alles machen, z.B. für die Firma deines Onkels eine Webseite erstellen.

Doppelklick auf Logo
Ein Doppelklick auf die HTML-Datei ruft den Browser auf den Plan.

Der Code-Editor
Mit einem guten Code-Editor macht das Programmieren Spaß.

Von Kindern, Knoten und dem DOM - Das Wichtigste, das du über HTML wissen musst

Um ein guter Webprogrammierer zu werden, musst du nicht alle HTML-Tags, alle CSS-Eigenschaften und alle Befehle in Javascript kennen. Aber eins ist wichtig: das Konzept der Knoten, nodes genannt. Du musst also das DOM verstehen, denn wenn du verstehst, wie CSS, HTML und Javascript eine Einheit bilden, dann erst kannst du hervorragenden Code schreiben. Alles andere bleibt Mittelmäßigkeit. Nicht, dass ich selber mich als hervorragenden Programmierer bezeichnen möchte, ich sehe nur die Notwendigkeit, etwas genau zu verstehen, um es professionell oder auf anspruchsvollem Niveau zu benutzen. Das ist in der Sprachwissenschaft genauso.

Das Document Object Model (DOM) ist der Schlüssel zur Webtechnologie. Es ist sehr abstrakt, aber äußerst nützlich. Daher werden wir uns nun die englische Definition von Mozilla anschauen und sie übersetzen, da dieser Text alles erklärt.

Die Mozilla Webdocs sind eine einmalige Ressource zum Lernen, allerdings ist nicht alles auf Deutsch übersetzt. Daran sieht man wieder, dass das Web ein "englischer" Ort ist. Der Artikel auf MDN web docs beginnt mit der Überschrift What is the DOM? und fährt fort:

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

Was ist das DOM?

Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML und XML Dokumente. Es stellt die Seite dar, so dass Programme die Dokument-Struktur, den Stil und den Inhalt verändern können. Es bildet das Dokument als Knoten und Objekte ab. Auf diese Weise können Programmiersprachen sich mit der Seite verbinden.

Eine Webseite ist ein Dokument. Dieses Dokument kann entweder im Browser-Fenster dargestellt werden oder als HTML Quellcode. In beiden Fällen ist es jedoch das gleiche Dokument. Das Document Object Model bildet das Dokument auf eine Art und Weise ab, die es ermöglicht, es zu manipulieren. Das DOM ist ein objektorientiertes Abbild der Webseite, das mit einer Scriptsprache wie Javascript modifiziert werden kann.

Schauen wir uns dazu mal eine primitive Webseite an:

HTML-Code eines primitiven Dokumentes

Die primitive Webseite habe ich auf den Server hochgeladen, so dass du sie laden und sehen kannst.

Es ist wichtig zu verstehen, dass die einzelnen Elemente zueinander bestimmte Beziehungen aufweisen. Die Bezeichnungen für diese Beziehungen sind der menschlichen Beziehungswelt entlehnt. Es gibt Elternelemente (parent), Kindelemente (child) sowie Geschwisterelemente (sibling). Auch die folgende hierarchische Darstellung der Elemente unseres primitiven HTML-Dokuments sieht einem Stammbaum ähnlich.

DOM-Baum
Hierarchische Anordnung der Elemente als Elementbaum: eine primitive Webseite bestehend aus einer "h1"-Überschrift und zwei "p"-Elementen mit verschachtelten "i"-Elementen

In dieser Abbildung der Beziehungen von HTML-Elementen (so nennt man die Tags auch) sollen einige wichtige Punkte zum Ausdruck gebracht werden.

  1. Die einzelnen Elemente stehen auf verschiedenen Ebenen (z.B. p in body).
  2. Manche sind auf der gleichen Ebene (head und body).
  3. Die Anordnung entspricht der eines Baumes mit Verzweigungspunkten (Knoten).
  4. Manche Elemente sind somit verschachtelt (p in body oder i in p usw.)
  5. Von oben ausgehend ist es einfach möglich, jeden Punkt innerhalb des Dokuments zu erreichen.

HTML wird im Allgemeinen definiert als "Auszeichnungssprache" (Hypertext Markup Language). Sie hat aber auch Merkmale einer Computersprache. Eine HTML-Datei wird zuerst auf Anfrage von einem Server mittels http (Hypertext Transfer Protocol) an den Client (den Browser) gesendet. Das "Protokoll" ist eine Spezifikation der genauen Regeln, nach denen die Webseite mitsamt Inhalt an den Client übermittelt wird. Hier wird z.B. festgelegt, in welcher Reihenfolge übermittelt wird und in welcher Form. Dann folgt das Parsen. In dem Moment, wo das HTML geparst wird, landen die Elemente im Speicher deines Computers. Elemente sind die zwei Tags (oder ein Standalone-Tag) mit ihrem Inhalt, den sie einrahmen. Natürlich stehen in den bestimmten Stellen des physischen Speichers (RAM) keine Tags. Was dort "ist", wird als Objekt bezeichnet, daher diese Formulierung: "The DOM represents the document as nodes and objects." Was ein Objekt ist habe ich auf dieser Seite behandelt. Es ist im Prinzip ein Haufen von Informationen mit einem Namen. Der Name verweist auf eine physische Adresse im Speicher, wo das Objekt zu finden ist und angesprochen werden kann. Ein Objekt hat ganz viele Eigenschaften, aber auch Methoden, d.h. es kann auch etwas "tun" und Befehle ausführen. Nach dem "Parsen" ist das gesamte Dokument als DOM in Form von Objekten im Speicher vorhanden und alle Elemente am gewünschten Platz. Javascript-Code sollte man an das Ende des Dokumentes platzieren (hinter body), da erst das DOM im Speicher vorhanden sein muss, bevor man es mit Javascript verändern kann. Während des Parsens ist der Zugriff nur auf Elemente möglich, die schon vorher geparst wurden. Falls man Javascript ins Dokument einbettet (vor body) können nur die Elemente mit Javascript angesprochen werden, die vor dem Javascript-Code stehen und schon vorher geladen wurden. Die Position von <script></script> ist also wichtig. Alle Elemente sind nun im Baum ansprechbar und veränderbar, weil ihre Eigenschaften im Speicher vorhanden sind und geändert werden können. Ein Element wie "p" hat z.B. die Eigenschaft Breite, Höhe, Schriftfarbe oder Hintergrundfarbe und viele andere Eigenschaften. Schließlich werden die Elemente gerendert und gemalt (paint). Sobald eine Änderung stattfindet, wird das Element neu gemalt. Unten hast du die Möglichkeit, den Eigenschaften "text" und "bgColor" neue Werte zuzuweisen. Die Werte werden sofort angewendet.

text

bgColor




    © primitivecode.com    CSS ist valide!