Wunderbar. Und jetzt sehen Sie offensichtlich auch wieder die Slides.

Ja. Good. Vielen Dank. So. Und jetzt machen wir Folgendes.

Wir gehen nochmal zu dieser Idee hier zurück. Wenn wir, obwohl wir nur Textdateien schreiben,

wollen wir trotzdem Anweisungen an den Dokumentenbetrachter abgeben können, der sagt,

dieses Stückchen Text in dem Fond oder Fettschrift oder rot oder rein purzelnd oder so etwas zu machen.

Und wir sehen im Prinzip die wichtigste Idee hier schon. Wir haben eine Textdatei und gewisse Buchstaben gehören zu dem Text, den man lesen soll.

Das ist sozusagen die Nutzlast. Und gewisse Buchstaben in dieser Zeichenkette gehören zu Anweisungen,

die das Verhalten dieses Textes spezifizieren sollen. Dieses hier ist, was sich vor 100 Jahren entwickelt,

für den Bleisatz entwickelt hat. Und wir wollen jetzt zu einer modernen Form der gleichen Idee kommen.

Und das heißt hier auch Markup Language, also Auszeichnungssprachen, Sprachen, die irgendwie Anweisungen unter den Text legen.

Und es gibt eine, die uns besonders interessiert, das ist die Hypertext Markup Language. HTML haben Sie wahrscheinlich schon mal gehört.

Das ist der Stoff, aus dem das World Wide Web gemacht ist. Webpages. Webpages guckt man sich im Browser an, dazu später.

Und was der Browser kriegt, ist eine sogenannte HTML Datei. Diese HTML Datei besteht aus elektronischem Text.

Teile des Textes, Teile der Buchstaben in diesem Text sind Anweisungen und Teile davon sind Text, den Sie tatsächlich hinterher lesen können.

Ich habe hier mal ein Beispiel gemacht und da sieht man zum Beispiel den Text Hello IWGS Students. Ausrufezeichen.

Das ist Text, HTML Text, den Sie sehen. Es gibt aber dann noch dieses Zeugs, was in Spitzenklammern geklammert ist.

Das ist eine Anweisung an den Dokumentenbetrachter, also in diesem Fall Ihren Browser, irgendetwas Spezielles damit zu machen.

Ein P ist die Anweisung, mache einen Paragraphen. Was ist alles in dem Paragraphen drin? Paragraph heißt vor allen Dingen,

es ist ein bisschen Platz vorher, es ist ein bisschen Platz hinterher. Das Ganze ist im Blogsatz gesetzt, in einer bestimmten Schrift, die per Default gegeben ist usw.

Und man muss irgendwie dem Dokumentenbetrachter sagen, dieses hier ist nicht etwa eine Überschrift oder eine Telefonnummer oder irgendetwas anderes,

sondern das ist ein Paragraph. Der geht von P bis zu Slash P. Alle diese Anweisungen kommen typischerweise in Paaren,

einem Beginntag, wie wir sagen, und einem Endtag. Was wir hier schon sehen, ist, dass wir gewisse Buchstaben haben, die nichts anderes tun,

als die Markup Codes, die Instruktionen an den Dokumentenrenderer vom normalen Text zu trennen. Und kleiner und größer sind genau diese Trenner.

Und dann gibt es die Anweisungen selber, das ist der sogenannte Tag, und die sind bei dieser Sprache HTML, kommen wie immer paarweise, nämlich ein Beginn-P bis zu einem End-P.

Das ist jetzt hier eigentlich schon das Wichtigste. Aber da gibt es noch ein bisschen mehr. Zum Beispiel es gibt den Beginn-Body Tag und den End-Body Tag.

Der sagt im Wesentlichen, alles, was außerhalb des Bodies ist, ist unsichtbar. Wir werden sehen, dass später mal vor dem Body und vielleicht sogar nach dem Body

Zeugs kommt, was man nicht sehen will. Deswegen tut man das außerhalb des Bodies. Und dann gibt es ganz außenrum, gibt es noch das Beginn-HTML Tag,

und End-HTML Tag. Das ist sozusagen die Deklaration, Achtung Leute, wir reden jetzt HTML miteinander. Und nicht etwa PDF und nicht etwa, was weiß ich.

Typischerweise macht man immer einen ganz äußeren Beginn-End-P, was einem sagt, das ist jetzt die Sprache, die wir miteinander reden.

Dass der Dokumentenbetrachter sagt, du gibst mir einen PDF, damit kann ich nichts anfangen, Entschuldigung. Der Browser sagt, HTML kann ich, prima, lese ich doch mal weiter.

Da lese ich und lese ich und lese ich, mache im Wesentlichen gar nichts, bis ich an einen Body komme und dann sagt man, ok, was jetzt kommt, das muss ich anzeigen.

End-Body heißt, aufhören anzuzeigen, End-HTML sagt, fertig. Das heißt, dieses hier ist das ganz einfachste Dokument, was man sich so vorstellen kann.

HTML hat noch einen ganzen Schwung mehr Zeugs, hier habe ich mal so die wichtigsten angegeben, zum Beispiel bei den Paragraphen habe ich den P-Tag.

Bei den Strukturzeugs habe ich HTML und Body, den wir eben gerade gesehen haben. Und dann gibt es noch allerlei anderen Schabernack, den wir jetzt so nach und nach uns angucken werden.

Aber das Allerwichtigste ist hier, die Struktur zu verstehen. Wir haben die Trennerzeichen, kleiner und größer, die trennen den Markup von der Nutzlast, von dem Text.

Wir haben alles, was in kleiner und größer ist, also zwischen kleiner und größer ist, nennen wir einen Tag und davon gibt es verschiedene. Und die Tags passen immer mit Beginn und End zusammen.

Und es ist nicht erlaubt, die Klammerung falsch zu machen. Wenn ich ein P aufmache, dann darf allerlei Schabernack dazwischen kommen, aber irgendwann muss ein End-P kommen.

Und ich darf die nicht miteinander mischen. Wenn ich den Body hier aufmache und danach ein P kommt, muss erst ein End-P kommen und dann ein End-Body.

So funktioniert diese Sprache und so funktioniert im Übrigen eine ganze Klasse von Sprachen, die wir hier betrachten werden.

Eine Sache, die man vielleicht noch jetzt sagen sollte, ist, dass wenn ein Beginnelement, also ein Beginntag, der direkt von einem Endtag gefolgt ist, das gibt es häufiger mal,

den nennen wir einen leeren Tag, weil da nichts drin ist, und den kürzen wir an, den kürzen wir ab mit kleiner, dann kommt der Tagname slash größer.

Das hier ist das Gleiche wie Beginn-EL, Nix, End-EL. Das werden wir immer mal wieder sehen. Das sind sozusagen die Grundregeln von HTML und verschiedenen anderen Sprachen.

Gibt es dazu Fragen?

Ja, ich habe eine Frage zu den Einrückungen. In Python sind die obligatory. Obligatorisch gibt es das.

Genau. In HTML, wie ist es da? Nicht. Außerhalb der Tags spielen Leerzeichen und Einrückungen an sowas überhaupt keine Rolle.

Innerhalb der Tags spielen sie eine Rolle. Man kann sie nicht einfach weglassen. Zum Beispiel dieses Leerzeichen hier ist tatsächlich ein Leerzeichen.

Aber doppelt dreifache, vierfache, fünffache Leerzeichen sind das Gleiche wie ein Leerzeichen. Und wenn ich auch Zeilenvorschübe habe, werden die auch nicht berücksicht.

Also verhält sich so halb wie eine Programmiersprache. Nur ordentlich. Nein, das sage ich jetzt nicht. Aber eine nicht Python-artige Programmiersprache.

Alles klar. Danke.

Also die wichtigsten Tags, die sind ja die, die Bedeutung haben, nämlich die Anweisung. Das ist in gewisser Weise eine kleine Programmiersprache, die sich für das Programmieren von Browsern eignet.