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 sind, was Absätze sind, was fett ausgegeben werden soll – HTML ist keine Programmiersprache – man beschreibt, wie eine Seite im Browser ausgegeben werden soll (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 in Klartext übertragen werden und so jeder schauen 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 also, diesen Text normal anzeigen 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, aber hier die Hervorhebung wieder ausschalten.

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

• verschiedene Überschriften
• Absätze
• Hervorhebungen wie Fett bzw. Kursiv
• verschiedene Aufzählungen
• und verschiedene Befehle mehr um Inhalte zu Strukturieren

Das geschieht über HTML-Befehle bzw. aus dem englischen den 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 sich es mit dem Begriff „Kennzeichnung“ veranschaulichen. Man kennzeichnet Bereiche, dass diese in bestimmter Weise angezeigt werden sollen. 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 bewirken 
Absätze immer einen Abstand (egal ob es sich um Text handelt 
oder bei Schuhen zwischen Straße und Träger</p>

Erstelle die folgenden Ordner auf deinem USB-Stick: ai/html/
Die ersten Dateien speicherst du hier ab. Später musst du auch Dateien hochladen.

ISERV: Du arbeitest weiterhin in deinem H:\Homepage Verzeichnis.

Erstelle mit dem Editor die Datei ai/html/absatz.html und gebe den obigen Code ein, speichere und schau die das Ergebnis im Browser an (Im Folgenden wird ai/html durch einen Punkt ersetzt, also ./absatz.htm).

3 Dinge sind wichtig zu beachten:

1. HTML-TAGs haben immer vom Aufbau ein Kleiner- und Größerzeichen < .. >
2. Zwischen den < > befindet sich die Anweisung – hier p – und wie so vieles im Leben ist das eine Abkürzung und das Ganze von dem englischen „paragraph“ (Absatz, Abschnitt). Dementsprechend sind alle Befehle nur Abkürzungen von englischen Begriffen. So lassen sich die Befehle gut merken (vorausgesetzt, man kann Englisch).
3. Alle HTML-TAGs sind immer klein zu schreiben! 

Alles hat ein 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 strukturierte eine Seite

Merke: HTML strukturiert eine Seite! HTML ist nicht für das Design da (das war mal). Guter Stil ist also, HTML-TAGs zum strukturieren des Inhalts zu nutzen. Design kommt über CSS.. später.

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 dem Design zeichnet aktuelles 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. Hört sich komplizierter an, wie es ist. Du wirst sehen, dass es ganz einfach ist, wenn du aufmerksam liest und mitarbeitest.