Upline: Infos & Dokus Programmierung Webentwicklung

html - Die Sprache der Browser

Eine kleine Einführung

Die HTML-Programmierung ist wirklich das Einfachste, was es gibt, selbst wer sich mit solch simplen Sachen wie Basic oder Pascal beschäftigt hat, wird hier erkennen müssen, daß es noch einfacher geht. HTML ist eine äußerst fehlertolerante Scriptsprache - Scriptsprache deshalb, weil man damit nicht richtig programmieren kann, so gibt es keine Variablen und man kann also auch nichts berechnen lassen. Dies wird erst durch die Integration von Java(Script) ermöglicht. Was die Fehlertoleranz angeht, werden Sie beim Schreiben Ihrer Seiten immer wieder auch Fehler machen und trotzdem wird die HTML-Seite so weit wie möglich ausgeführt. Auch soetwas gibt es in einer herkömmlichen Programmiersprache nicht, dort würde man tonnenweise Fehlermeldungen erhalten, wie zum Beispiel "Syntaxfehler" oder "Unerwartetes Zeilenende" oder ...

Kommen wir zu unserem ersten Programm. Hier kann man die grundlegende Struktur einer HTML-Seite erkennen, so wie sie laut Spezifikation des W3C aussehen sollte. Zusätzlich zum Grundgerüst geben wir hier einfach noch ein Hello World aus:

<!DOCtype HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
 <head>
  <title>Meine erste HTML-Seite</title>
 </head>
 <body>
  Hello World!
 </body>
</html>

Der DOCtype-Befehl ist dafür zuständig, dem Browser klarzumachen, was dort für eine Scriptsprache, in welchem Dialekt und in welcher Version verwendet wird. Die heutigen Browser kommen aber auch sehr gut ohne diesen Tag aus, da man heute davon ausgeht, daß alle Dateien, die auf ein .htm oder .html enden auch wirklich HTML-Dateien sind. Es gehört genau wie der alles umschließende HTML-Tag zum guten Programmierstil. Wobei wir auch schon beim "Öffnen" und "Schließen" eines Befehls wären. Grundsätzlich jeder HTML Befehl beginnt mit einem "<"-Zeichen und endet mit einem ">"-Zeichen hinter der meist vorhandenen Parameterliste. Fast alle HTML-Tags (Tag=Befehl) benötigen außerdem an der Stelle, wo ihre Arbeit erledigt ist einen Schließen-Tag. Dieser wird genauso geschrieben, wie der zum Öffnen, nur ohne Parameter und mit einem davor gestellten "/". Die HTML-Datei wird weiterhin in den HEAD (=Kopf) und den BODY (=Körper), also den eigentlichen Quelltext unterteilt. Tja - und wie schreibt man wohl anzuzeigenden Text in die HTML-Datei? - na man schreibt ihn einfach, so wie das "Hello World!" im obigen Quelltext!
Für den Anfang sollte das erst einmal reichen, für alles weitere habe ich eine Übersicht über die nach meiner Meinung wichtigsten HTML-Befehle, eine Sammlung von Konstanten und noch ein paar kleine Beispiele zusammengestellt, welche man über das Menü oben erreichen kann. Wer mehr wissen will, der sollte ein bißchen herumsurfen und sich die Quelltexte von anderen Leuten angucken und deren Funktionsweise erforschen. Etwas schwieriger ist dies allerdings bei Seiten wie dieser hier, die nahezu komplett per php-Script generiert werden - da ist der html-Source zumeist recht unleserlich.
Ein paar Tips zum guten html-Programmierstil habe ich noch:

Verwende keine WYSIWYG-Editoren wie Frontpage! Dadurch bläht sich der Quellcode nur unnötig auf, eine nachträgliche Bearbeitung wird schwieriger und der arme surfende User muß länger auf den kompletten Seitenaufbau warten! Außerdem kann das ja jeder, gähn ... Eine gute Seite erstellt man mit einem normalen Texteditor (notepad, vi) oder max. dem bekannten Phase5-Editor.
Schließe die Tags, die Du öffnest auch wieder, außer: <DOCtype ...>, < hr>, <iframe>, parameterfreie Tags wie <br>, <p> usw.! Dies ist für die Browser nicht zwingend nötig, gehört aber zum xhtml-Standard. Seiten mit Fehlern werden auch von Suchmaschinen oft nicht richtig indiziert oder zumind. im Index abgewertet. Kontrolliere daher Deine fertigen Dateien mit einem html-Validator zur Überprüfung der w3c-Konformität. Es gibt Dutzende Internetseiten, die diesen Service anbieten und für den Mozilla Firefox gibt es dafür auch ein Plugin. Tags, die nicht durch ein entsprechendes Abschlußtag wieder geschlossen werden, muß man nach dem XHTML-Standard intern schließen, indem man vor das ">" ein " /" setzt. Bsp.: <br /> Dies war bis zum w3c-Standard HTML 4 nicht nötig.
Verwende möglichst keine Frames, zumind. nicht für Seiten, die Du ins Internet stellst und die mehr bieten sollen, als die Fotos von Deinem letzten Urlaub! Die Unterteilung einer Site in Frames ist zwar schön einfach und durchaus sehr praktisch, aber leider oftmals auch mit Fehlern verbunden. So werden z.B. recht häufig einzelne Frames nicht geladen und Suchmaschinen mögen solche Seiten auch nicht besonders. Der Vorteil, nicht jedes mal das statische Menü mitladen zu müssen, ist in Zeiten von DSL kein Argument mehr. Kommt ein Besucher über einen Link auf eine einzelne Seite aus einem Frameset, so gibt es kein Menü - auch das nicht schön!
Vermeide eine übertriebene Nutzung von JavaScript und Flash! JavaScript wird zwar neuerdings auch teilweise von Suchmaschinen ausgewertet - allerdings nur in sehr begrenztem Umfang. Aus Flash wird auch max. der reine Textinhalt herausgelesen. Die Animationen bringen in der Regel keinen echten Nutzen für den Anwender, verlangsamen vieles sogar, nicht jeder Brwowser kann alles darstellen (z:b Flash deaktiviert) und in den Suchmaschinen gibt es eher Nach- als Vorteile - Grund genug, auf beides zu verzichten.
Bunt ist schön, zu bunt weniger ... Die Seiten werden chaotisch unübersichtlich und furchtbar langsam. Auch sehr schlecht sind Seiten, wo (zu) viele kleine Vorschaubilder drin sind, die nicht größenoptimiert wurden. Schreib ein wenig Text zu den Bildern und gib diesen einen Alternativ-Text. Letzterer wird angezeigt, wenn das Bild nicht geladen wurde und vor allem ist es auch das einzige, was eine Suchmaschine aus dem Bild an Informationen gewinnen kann ;)
Vermeide es multimediale Effekte wie Sound und Video direkt in eine Seite einzubauen! Biete derartiges wenn dann nur auf Wunsch des Users (soll heißen: verlinken solcher Effekte) an!
Wenn Du Illegales auf Deiner Site veröffentlichst, egal ob zum Verkauf oder nur informativ, denke daran, daß es illegal bleibt, egal wer es wie und wo anbietet! Verwende Disklaimer, um Dich wenigstens halbwegs vor Abmahnungsagenturen zu schützen. Bei eindeutig vorsätzlichem Mißbrauch irgendwelcher Rechte Dritter, wird Dir das aber auch nichts bringen. Guck Dich um wie es andere Leute anstellen!
Schreibe immer alle Dateinamen klein, daß erhöht die Chance darauf, daß Deine Seite auch auf case-sensitiven Rechnern mit Betriebssystemen wie Linux problemlos läuft! Wer sich nicht daran hält, wird gelegentlich unnötig Zeit in die Fehlersuche stecken müssen.
Beschäftige Dich nicht unnötig mit Metatags, diese werden aus gutem Grund schon seit einigen Jahren von den Suchmaschinen nicht mehr besonders ernst genommen.

... und wenn man eine kleine feine Seite per Hand erstellt hat, dann kann man auch voller Stolz eines der folgenden Logos zur Schau stellen: