HTML-Grundlagen

Was ist HTML?

HTML ist eine „Strukturierungssprache“, mit der dem Browser „gesagt“ wird, wie die Inhalte strukturiert sind: welche Bereiche (Buchstaben, Wörter, Sätze) z.B. Überschriften, was Absätze, was Aufzählungen, was Tabellen usw. sind.
HTML ist keine Programmiersprache – man beschreibt, welche logische Struktur ein Inhalt hat (nicht mehr, nicht weniger).

Dazu werden über das Internet Dateien übertragen, die Texte und HTML-Befehle enthalten – ab jetzt als HTML-Seite bezeichnet. Das Bedeutsame dabei ist, dass die HTML-Seiten stets auch in Klartext übertragen werden, und sich jeder so ansehen kann, wie das eigentlich funktioniert. Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Schaut man sich den Quellcode an, ist das zunächst Verwirrende, dass zwischen den Texten noch mehr auftauchen kann.

Es gibt also nicht nur den eigentlichen Text, sondern auch Anweisungen, wie einzelne Textbereiche angezeigt werden sollen. Man sagt z.B. dem Browser: Zeige diesen Text normal an und nun zeige ab hier die Schrift hervorgehoben an. Ab jetzt wird der Text fett ausgegeben. Ein paar Worte später dann sagt man wieder dem Browser: Schalte hier die Hervorhebung wieder aus.

In HTML also haben wir verschiedene Befehle (HTML-TAGs) für:

  • verschiedene Überschriftenebenen
  • Absätze
  • Hervorhebungen
  • verschiedene Aufzählungen
  • und weitere Befehle, um Inhalte zu strukturieren

Das geschieht über HTML-Befehle, bzw. aus dem Englischen HTML-TAGs.

Aufbau von HTML-TAGs – HTML-Befehlen

Was ist nun ein HTML-TAG? - Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet.

Dabei kommt der Begriff TAG aus dem Englischen und hat dort die Bedeutung von "Etikett, Anhänger, Aufkleber, Marke, Kennzeichnung, Auszeichner". Am besten lässt es sich mit dem Begriff "Kennzeichnung" veranschaulichen. Man kennzeichnet Bereiche, damit diese in bestimmter Weise angezeigt werden. Dabei kann man dann sagen, hier beginnt der Bereich und dort hört er wieder auf.

Am Beispiel wird der HTML-TAG von 2 Absätzen gezeigt

<p>erster Absatz, der sehr lang sein kann</p>
 
<p>zweiter Absatz - und nach der Definition bezeichnen 
Absätze immer einen Abstand (egal, ob es sich um Text handelt 
oder bei Schuhen dem Abstand zwischen Straße und Träger)</p>

Dies erzeugt die folgende Ausgabe im HTML-Browser:

erster Absatz, der sehr lang sein kann

zweiter Absatz - und nach der Definition bezeichnen Absätze immer einen Abstand (egal, ob es sich um Text handelt oder bei Schuhen dem Abstand zwischen Straße und Träger)

Zwei Dinge sind wichtig zu beachten:

  1. HTML-TAGs haben immer ein Kleiner-als-Zeichen und Größer-als-Zeichen < .. >
  2. Zwischen den < > befindet sich die Anweisung - hier p. Wie so vieles im Leben ist das eine Abkürzung aus dem Englischen. "Paragraph" bedeutet Absatz, Abschnitt. Dementsprechend sind alle Befehle nur Abkürzungen von englischen Begriffen. So lassen sich die Befehle gut merken (vorausgesetzt, man kann Englisch).

Aus Gründen der Übersichtlichkeit sollten alle HTML-TAGs klein geschrieben werden. Dies war früher bei XHTML für eine valide Webseite wichtig - ist aber bei HTML5 nicht mehr zwingend notwendig.

Alles hat einen Anfang und ein Ende. So auch praktisch fast jeder HTML-TAG.

Aufbau Anfangs- und End-TAGs

Weiterhin gibt es einen Anfangs-TAG und einen End-TAG. Sonst hätten wir nicht die Möglichkeit, mehrere Absätze zu machen bzw. müssten fett geschriebene Texte bis zum Ende der Seite immer fett sein. Der End-TAG ist fast identisch mit dem Anfangs-TAG, mit dem einzigen Unterschied, dass nach dem Kleinerzeichen (<) ein Schrägstrich kommt. Dieser ist auf der Tastatur beim 7er zu finden.

Der HTML-End-TAG hat also folgendes Aussehen:

</befehl>

Merke: HTML strukturiert eine Seite

HTML ist nicht für das Design da (das war einmal vor langer Zeit). Guter Stil ist also, HTML-TAGs zum Strukturieren des Inhalts zu nutzen. Design kommt über CSS

Alle HTML Befehle strukturieren – was macht also das Design? Für Design ist CSS zuständig (was später im Kurs kommt)! Diese Trennung von Inhalt (+ Struktur) und Design zeichnet die aktuelle HTML-Nutzung aus. Früher wurde lustig alles vermischt – heute ist diese Trennung sehr wichtig. Im ersten Teil des HTML-Tutorials werden wir uns um alle wichtigen HTML-Befehle kümmern und im zweiten Teil dann mit CSS das Design über das in HTML erstellte Grundgerüst stülpen. Das hört sich komplizierter an als es ist. Sie werden sehen, dass es ganz einfach ist.