los (1K)1. HTML: Vom Quelltext, Tags und Hyperlinks

Das Drehbuch für den großen Auftritt

Heute lernen wir den grundlegenden Aufbau einer Html-Seite kennen, was genau eigentlich der Qellcode ist - und ein paar der ersten, einfachsten Regeln für das Programmieren

Wir brauchen: Computerraum

Wir alle wissen ja ganz gut aus eigener Erfahrung, wie eine Internetseite so aussieht, wenn wir sie mit einem Browser aufrufen. Hast du dir schon einmal Gedanken darüber gemacht, was eine Internetseite so ganz von, sagen wir einem Buch, unterscheidet? Genau, mit Hilfe von anklickbaren Querverweisen, oder im Fachjargon: Links kann man flugs von einer an eine andere Stelle des geöffneten Dokuments springen, eine neue Seite öffnen, sogar einen Musiktitel oder einen kleinen Film abspielen. Mit anderen Worten: hier sind Dinge möglich, die uns das gute alte Buch so nicht bietet.

Sicher hast du schon gemerkt, das das Aufrufen von etwas Neuem dabei oft unterschiedlich lang dauert. Das Springen an eine andere Stelle im Text geht dagegen immer recht schnell, doch Bilder oder neue Seiten brauchen oft recht lange, ja und Filme...
Der Grund ist, das mit dem Anklicken eine Anfrage nach Daten abgeschickt wird. Die wird zwar in Blitzesschnelle durch die Telefonleitung zu einem Rechner gejagt. Aber die Datenmengen, die dieser Rechner uns dann zurückschickt können recht unterschiedlich groß sein. Ganz große werden auch noch in einzelnen Paketen verschickt. Ja, und das dauert. Am kleinsten sind noch die Pakete, die im wesentlichen Sinne nur Text enthalten, denn Text braucht nur ganz wenig Platz. Der Computer macht es sich aber auch leicht, weil er mit nur 128 Zeichen auskommt. Dabei schreibt er auch keine Buchstaben, schließlich ist er ein Rechner, sonder er ordnet jedem Buchstaben eine Zahl zu, eben von 0 bis 128. Dummerweise sind aber unsere deutschen Umlaute, all diese ä's und ö's und ü's und auch das scharfe ß nicht dabei. Es haben mit dem Internet eben die Amerikaner angefangen und die brauchen diese Buchstaben einfach nicht. In der Sprache HTML, in der die Internetseiten geschrieben sind, müssen diese Buchstaben deshalb immer etwas anders geschrieben werden, als wir das gewohnt sind.  Da heisst zum Beispiel das große Ü dann &Uml; und  das kleine ä &auml;. Aber keine Sorge, der Browser versteht es. Überhaupt muss man beim Schreiben für das Internet, beim Programmieren von Webseiten ein bisschen umdenken, es ist eben alles ein kleines bisschen komplizierter, um es für diese im Grunde grunddämlichen Maschinen, die Computer nun einmal sind, idiotensicher zu machen. Man muss darum immer höllisch aufpassen, dass man keines von diesen besonders kleinen, unscheinbaren und leicht zu übersehenden Zeichen versehentlich auslässt, mit denen man dem Browser klarmacht, wo A aufhört und B anfängt. Das sind diese Zeichen: merkt sie euch und lasst sie bloß nie aus Versehen weg:das &, gesprochen: Et-Zeichen, hatten wir schon, damit leitet man ein Sonderzeichen ein, den Strichpunkt ; - er beendet das Sonderzeichen. Aber am wichtigsten sind die da,  <,  und >, das kleiner als-  und das größer als-Zeichen. Tja und dann noch dieses ", dieses Anführungszeichen, das kann auch ganz schön nerven - wenn man mal wieder eins zuwenig gemacht hat.

Vielleicht fragst du jetzt, warum du diese ach so wichtigen Zeichen noch nie auf einer Internetseite gesehen hast, wenn die doch gar so mächtig sind. Der Grund ist folgender: Der Text, der im Browser erscheint  ist nur die Übersetzung, oder die Bildschirmausgabe des eigentlichen, aber unsichtbaren Textes, der den Browser steuert und dieser Ausgabe am Bildschirm zugrunde liegt. Was wir im Browser sehen ist nur die zweite Version, die Interpretation, wie eine Theaterinszenierung. Der Browser ist der Theaterregisseur, der Bildschirm die Bühne. Doch dem Theaterstück, das wir sehen, liegt ein Drehbuch mit ausführlichen Regieanweisungen zugrunde: der sogenannte Qelltext. Da stehen die ganzen Steuerzeichen - für uns unsichtbar. Wie der Soufleur im Theaterstück.  Er wirft den Schauspielern ihre Textbrocken hin.  Und die Schauspieler nehmen sie auf, drehen sich im Licht, machen die Show. Das Publikum ist begeistert und klatscht. Die Bühnentechnik läuft im Hintergrund. Der Regisseur zieht unbemerkt die Fäden.

Möglich wird das alles durch eine gemeinsame Sprache, die die Bühnentechniker, der Regisseur, die Schauspieler verstehen, die Sprache, in der ihr Theaterstück mit all seinen komplizierten Regieanweisungen abgefasst ist.
Wer in dieser Sprache schreiben kann, der kann die Puppen tanzen lassen. Und diese Sprache heisst HTML.

So, jetzt schreiben wir HTML. Wir öfnnen ein neues, leeres Dokument in einem simplen Textprogramm, z.B. dem "Editor" oder "Notepad" unter Windows. (Auf einem Applerechner nehmen wir TeachText oder SimpleText.) Bevor es richtig los geht müssen wir dem Browser sagen: "Hallo, es geht los!"

Das tun wir mit der Bemerkung:

<html>

Jetzt weiss er, "ah ja , html, kenn ich, mach ich, kein Problem!"

Damit nachher jeder weiss, was hier gespielt wird, machen wir als nächstes einen Programmzettel mit allen wichtigen Informationen rund ums Stück:
Wir schreiben:

<head>

Das ist die Einleitung für den Browser:Achtung Programmzettel, gehört noch nicht zum Stück, ist bloß Info! Nicht im Fenster anzeigen!
Jetzt ist es auch an der Zeit endlich den Titel des Stücks bekannt zu geben:
Also, aufgepasst, Signal für Browser, hier beginnt der Titel:

<title>MEIN ALLERERSTES ST&Uuml;CK!</title>

Habt ihr's gemerkt? Ich meine nicht das komisch geschriebene Ü. Der Name Unseres Theaterstücks wird richtiggehend eingerahmt! Und zwar vom "title-Tag". Klingt lustig! Der steht am Anfang, und am Ende. Aber am Ende, da sieht er ein bisschen anders aus, da bekommt er noch so einen schrägen Strich davor. Und er sagt uns: Hier ist jetzt aber Schluss mit dem Titel!
Lassen wir's gut sein mit den Angaben für den Programmzettel. Und, könnt ihr euch denken was da jetzt als nächstes kommen muss? Genau, so ein richtiger Schlusspunkt-Tag, mit so einem Schrägstrich:

</head>

Das war die Einleitung mit ein paar mehr oder weniger wichtigen Angaben über  unser Stück!

Unser eigentliches Theaterstück beginnt. "Vorhang auf!"
Das heisst auf "HTML" ganz schlicht:

<body>

Hallo, ich schreibe gerade mein erstes St&uuml;ck!

Und alles, was du da jetzt schreibst, hinter dem "body-Tag", ist tatsächlich zu sehen! Wenn man jezt das ganze als Datei abspeichert und damit den Browser füttert, versteht sich! Doch halt, wir sind ja noch gar nicht richtig fertig!  Bevor wir das abspeichern müssen wir nooooooch...?? Ja!!

Den "body-Tag" beenden!
Und den "html-Tag"!

Also schreiben wir brav:



</body>
</html>

Perfekt!

So, wenn wir die Datei jetzt speichern, fragt uns das Programm nach einem Namen, den wir dem Dokument geben wollen.
Wir könnten es natürlich "Dieter" nennen.
Oder "Hilde".

Und das dürfen wir auch. Ein paar von den Zeichen, die uns normalerweise auf der Tastatur zur Verfügung stehen dürfen wir allerdings nicht verwenden:

Nicht die ä's , ü's und ö's.
Keinen Bindestrich. Stattdessen nehmen wir halt den Unterstrich _ , der ist erlaubt.
Keine Leerzeichen! Das ist hart. Sollen im Dateinamen mehrere Wörter vorkommen, kann man die sie aber auch mit Unterstrichen trennnen.
Beispiel: echt_bloede_regel_mit_den_verbotenen_leerzeichen
Weil die Web-Server, anders als die Windowsrechner, knallhart zwischen Groß- und Kleinschreibung unterscheiden, sollte man sich auch noch angewöhnen konsequent immer alles k le i n zu schreiben!
Tja, und dann kommt da noch die Dateinamenserweiterung. Getrennt durch einen kleinen Punkt.
Nächste fiese Regel: Besteht der Name der Datei (alles vor dem Punkt) aus bis zu 8 Zeichen, so lautet die Dateinamenserweiterung: .htm
Hat sie mehr, so schreibt man: .html
Ist doch mal echt logisch, oder?

Nennen wir unsere erste kleine Datei also mal:
erste_kleine_datei.html
oder so:
erste.htm

Fertig!





Weiter geht's:


Text auszeichnen | Bilder einfügen | Hyperlinks einfügen | Tabellen erstellen | Frames verwenden | CSS verwenden | JavaScript | nach oben