Ich habe nun mal "spaßeshalber" den Wiki-Artikel zu HTML gelesen. Ich habe nicht nur Bahnhof verstanden, aber fast 
Nun hätte ich gerne einen "Einführungskurs in HTML"...
Der Artikel ist auch scheiße, viel zu "wissenschaftlich". Eigentlich ist es super einfach.
Erst einmal muss man überhaupt wissen, was sind "Dateien"? Das sind einfach "Ansammlungen" von Daten innerhalb eines bestimmten Bereichs in einem "Dateisystem". Die Festplatte des Computers wimmelt nur so von Dateien. Diese Dateien haben bestimmte Inhalte, oft werden diese Inhalte in Kategorien/Typen aufgeteilt. Zum Beispiel eine Videodatei. Die Daten, die da drinne stehen, stellen (mit einem Player abgespielt) ein Video dar. Oder eine Fotodatei, da gibt es gleich verschiedene Sorten, zum Beispiel die sog. "Bitmap" oder auch einen "JPEG" Datei. Das geeignete Werkzeug (zum Beispiel Irfan View, oder auch ein Browser) kann das Foto anzeigen.
Daten in Dateien sind zunächst einmal nichts anderes als Bits und Bytes. Ein besonderer Typ von Dateien sind die sog. "Textdateien". Da stehen einfach nur Texte drin, ein Text definiert sich einfach als Aneinanderreihung von alphanumerischen Zeichen.
Die Textdateien haben unter Windows beispielsweise die Endung *.txt. Also zum Beispiel meintext.txt
Wer einen Windowsrechner hat, der kann Textdateien beispielsweise mit einem "Editor" bearbeiten, bei Windows wird der Notepad dafür ausgeliefert. Diese Texte sind wirklich nur Text, da gibt es leider keine sog. "Attribute", Du kannst da nicht sagen, dass bestimmer Bereich in
fett oder auch in
rot dargestellt werden sollen. Das geht nicht. Text ist Text, sonst gar nichts.
Bei Word sieht das anders aus (und da fängt bei vielen schon das Verständnisproblem an). Word kann doch prima "Texte" darstellen. Aber aus computertechnischer Sicht ist das kein Text, das ist hoch komplexes Format, welches zwar auch Texte darstellen kann, aber man beliebige Attribut vergeben, man kann "Fonts" aussuchen, man kann riesig groß schreiben, man kann alle Farben wählen, man kann links und rechtsbündig schreiben. Und vieles mehr. D.h. in diesen Word Dateien da stehen in Wirklichkeit ganz viele Daten drin, die weit über simplen Text hinausgehen und deswegen braucht man auch das Programm "Word", um Worddateien anzuschauen. Wenn Du versuchst, ein Worddatei mit Notepad zu bearbeiten, das gibt "Salat". Kannst Du ja mal versuchen.
Das Verständnis dessen, was eine Textdatei ist, das ist essentiell für HTML. Denn HTML Dateien sind auch nur Textdateien. Und sonst nichts. Da steht nur Text drin. Versuche Dir irgendeine HTML Datei herunterzuladen und öffne sie mit Notepad. Das wirst Du lesen und erkennen können, sieht möglicherweise etwas eigenartig aus, aber es ist schierer Text.
Die Idee, die hinter HTML steckt (und da ist der Vergleich zu LaTex zu 100% richtig), ist das Konzept, dass man Texten, mit normalen Worten und Zeichen, in eine Datei eine Art Anweiseung schreibt, dass nachher ein geeignetes "Browsertool" daraus ein richtig schönes Dokument anzeigt, ähnlich wie ein Worddokument oder wie ein PDF Dokument, wo es Farben und Fettdruck gibt, wo es Bilder gibt und eine schöne bunte Welt.
Dazu hat man sich einfallen lassen, dass man innerhalb der Textdateien bestimmte "Anweisungen" schreiben kann, die der Browser NICHT als Text anzeigt, sondern die Browser benutzt, um andere Dinge zu attributieren oder anzuzeigen. Fangen wir ganz von vorne an, die erste HTML Datei Deines Lebens, wir nennen wir "test.html". Da schreibst Du einfach diese eine Zeile hinein (mit dem Notepad):
Hallo Welt!Speicher die Datei unter dem Namen "test.html" ab und dann klicke doppelt im Explorer darauf. Dann wird Dein Standardbrowser aufgehen und was zeigt er an - ganz oben links, klein aber fein "Hallo Welt!".
Jetzt hättest Du gerne, dass das mit Fettdruck dargestellt werden soll. Dazu musst Du das test.html wieder öffnen und dann kommt die erste echte "HTML Anweisung". HTML Anweisungen stehen (nahezu) grundsätzlich zwischen dem Kleiner- und dem Größerzeichen und dazwischen steht der sog. "HTML TAG", das ist ein bestimmter Befehl der Sprache HTML. Das sieht dann so aus:
<b>Hallo Welt!</b>Das ist ja immer noch Text, aber Du siehst, dieses "<b>" und "</b>" sind komischer Text. Diesen "Text" zeigt der Browser auch nicht an, stattdessen weiß der Browser, ich muss alles, was zwischen diesen beiden TAGs steht (und typischerweise sieht der hintere TAG fast so aus wie der erste TAG, hat aber am Anfang einen Slash oder auf Deutsch Schrägstrich) in fett darstellen. Probier es aus und schreib es mit dem Notepad in die Datei hinein und dann lade es im Browser neu.
Wenn Du es bis hier verstanden hast, dann bist Du fertig. HTML ist nichts anderes als eine Textdatei, mit Text und/oder TAGs.
Was die Sache jetzt spannend macht, das ist Frage, was gibt es eigentlich für TAGs (also Befehle), das hier ist ein sehr einfacher, der Befehl, einen bestimmten Textbereich in fett darzustellen. Aber der Browser kennt tausende von TAGs, die alle bestimmte Wirkung haben. Du möchtest vielleicht den "Hallo Welt" oben in der Mitte sehen? Kein Problem:
<center>Hallo Welt!</center>Oder in Mitte, als fette Titelzeile?
<h1><center>Hallo Welt!</center></h1>Das sieht schon komischer aus, was soll den "h1" heißen? Naja, es kommt ja alles aus dem englischen und das ist "Header 1". Es gibt auch h2 und auch h3 (kannst Du alles ausprobieren), das sind fest definierte Formate, was der Browser dann anzeigen muss.
Jetzt mal ein komplizierteres Stück HTML. Wir wollen die Titelzeile lassen, aber jetzt will ich darunter ein Foto anzeigen. Fotos sollten auf einem Server im Internet gespeichert sein, damit jeder das Foto sehen kann, wenn man sich das Dokument anschaut. Nehmen wir der Faulheit halber uns aktuelles Banner, das liegt auf dem Eumerika Server und hat diese Internet Adresse:
http://www.eumerika.de/bilder/banner-0915.jpgSo eine Zeile nennt man übrigens "URL" (Uniform Resource Locator). Das ist Schreibweise, auf die man sich geeinigt hat um darzustellen zu können, wo im Internet (auf welchem Server) und wo genau auf diesem Server eine bestimmte Datei liegt.
Um in einem HTML Text ein Foto anzeigen zu lassen, benötigen wir (wieder) ein HTML TAG (ein Befehl), und der heißt hier (englisch, wie immer) "<img ....>". Ich schreibe es einfach mal auf und nicht vergessen, oben drüber sollte ja immer noch die Titelzeile stehen:
<h1><center>Hallo Welt!</center></h1>
<img src="http://www.eumerika.de/bilder/banner-0915.jpg" />Und jetzt kann man natürlich das Bildchen noch zentrieren, und dann zeige ich gleich eines ungewollten Problem von HTML: es hat sich im Laufe der Jahre immer weiter entwickelt, d.h. es kamen immer mehr Befehle hinzu, heute sind wir bei HTML Version 5 angekommen (auch einfach HTML5 genannt), das bedeutet nichts anderes, als dass da erneut neue TAGs hinzugekommen sind. Und es hat im Laufe der Jahre immer wieder "Verbesserungen" gegeben, aber man wollte aus Kompatibilitätsgründen "alte" Befehle nicht sterben lassen und das führt insgesamt dazu, dass es oft verschiedene TAGs gibt, die optisch das gleiche tun, aber syntaktisch anders aussehen. Nun schieb ich aber mal das Foto auch noch in die Mitte:
<h1><center>Hallo Welt!</center></h1>
<div align="center"><img src="http://www.eumerika.de/bilder/banner-0915.jpg" /></div>Jetzt siehts schon ganz schön wild aus, aber eigentlich immer noch verständlich. Und vor allem sieht es jetzt im Browser so aus, wie wir es uns gewünscht haben.
Und zum Abschluss schreiben wir noch zwischen der Kopfzeile und dem Banner einen kleinen Kommentar, wo man denn dieses Foto bestaunen kann:
<h1><center>Hallo Welt!</center></h1>
<div align="center" width="80%"> Dieses wunderbare Foto ist das Banner für den Monat September aus dem Eumerika Reiseforum.
Wie man gleich sehen wird, ist hier im Text ein Zeilenumbruch drin, aber der Browser zeigt das gar nicht an, der macht zwar auch
Zeilenumbrüche, aber gar nicht an der gleichen Stelle, das verstehe ich nicht, aber da gehört eben auch zum Konzept von HTML, selbst
ein simpler erzwungener Zeilenumbruch ist ein eigener Befehl, ein eigenes Tag, ansonsten macht der Browser so lange Fließtext, wie es auf den Bildschirm
passt nun die width-Anweisung erlaubt die Steuerung, wieviel Prozent des Bildschirms benutzt werden dürfen. Ein erzwungenen Zeilenumbruch sieht so
komisch aus:<br />Was hier jetzt dahinter steht, das steht im Browser gleicht definitiv auf einer neuen Zeile. Dieses TAG heißt übrigens "break".</div>
<div align="center"><img src="http://www.eumerika.de/bilder/banner-0915.jpg" /></div>Möglicherweise werden übrigens nachher die Umlaute falsch dargestellt. Das Problem besteht darin, dass man in HTML auch mitteilen kann, was für einen Zeichensatz eigentlich der Browser wählen soll. Das haben wir hier nicht gemacht, wir haben einfach deutsche Umlaute benutzt, aber das weiß der Browser nicht, der nimmt nachher einfach einen Standardwert und wenn man Pech hat, dann passt dieser Wert nicht. Egal, das sprengt jetzt endgültig die kleine Einführung. Aber das Prinzip von HTML ist einfach - schwierig ist die große Menge an TAGs, die der Browser versteht.
Zum Abschluss: warum HTML5 so gefragt ist, da wurde endlich das jahrelang aufgeschobene "Video" TAG vorgestellt und festgelegt, wie man Videos in Browser anzeigen kann, nämlich mit dem neuen Video TAG:
<video .....> ......</video>
Das war bis inkl. HTML4 gar nicht möglich. Da musst man horrende Konstrukte benutzen, um externe Videoplayer irgendwie zu bemühen, heute muss der Browser das Video selbst abspielen können, dann darf er sich HTML5-konform nennen. Das geht es also Stück für Stück um Fähigkeiten des Browsers, wenn der HTML Standard neu festgelegt wird. Die vorhandene, alte HTML Version hat aber immer noch Gültigkeit, d..h. jeder neue Browser muss alles können, egal ob alt oder neu.
