Grundlage des Webs ist die Hypertext Markup Language - kurz HTML. Mittlerweile sind die Möglichkeiten dieser Sprache sehr umfangreich geworden. Da schon viel im Web darüber geschrieben wurde, gebe ich hier nur einen Überblick und verweise auf weiterführende Quellen.
Die letztgültige Quelle für HTML ist das Standardisierungs-Gremium W3C. Die dortigen Dokumente sind für den Laien aber schwer verständlich. Sie sind in englisch, wogegen alle anderen Links in dieser Beschreib auf deutsche Texte verweisen.
Wer heute eine neue Website erstellt , sollte sich an XHTML halten. Das ist die Vereinigung von HTML mit XML. Es gibt alle Möglichkeiten von HTML 4.01 mit einigen Zusatzregeln, durch die die Dokumente kompatibel zu XML sind. Ist wohlgeformt nach XML, dann ist es für den Browser einfacher zu interpretieren. Diese ganze Website ist jetzt in XHTML 1.0 erstellt.
Die Grundregeln für XML sind:
Ein sehr gutes Nachschlagewerk, sowohl online als auch zum Herunterladen ist SelfHTML. Wer auf dem laufenden bleiben oder typische Fehler ausmerzern will, sollte bei Dr. Web nachschlagen.
HTML-Editoren gibt es viele. Wenn man die Kontrolle über den erzeugten HTML-Code behalten und alle Möglichkeiten nutzen will, dann ist der beste und dabei kostenlose Editor Arachnophilia.
Ein etwas komplizierter zu bedienender Editor ist Phase 5 von Uli Meybohm. Letzterer beinhaltet ein Include-Kommando, mit dem Seiten aus Bausteinen zusammengesetzt werden können - das Ergebnis kann man z.B. bei meiner Site Abspiel sehen.
Wir machen sicherlich alle keine Fehler :-) Aber manchmal ist ein Syntax-Check doch sehr hilfreich. Mein Lieblingstool ist A Real Validator, der den Code gegen die entsprechende HTML-Definition testet. Ein Tool zum Überprüfen aller Links ist XENU.
Wie sollte eine HTML-Datei am Besten aussehen? Hier ein Muster:
1 <?xml version="1.0" encoding="us-ascii"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html" />
6 <meta http-equiv="Content-Style-Type" content="text/css" />
7 <meta name="Description" content="Das wichtigste über HTML" />
8 <meta name="author" content="Mario Boller-Olfert" />
9 <meta name="Keywords" content="HTML,CSS,Editor" />
10 <link rel="stylesheet" href="meinstil.css" type="text/css">
11 <title>Dokument-Titel</title>
12 </head>
13 <body>
14 <h1>Haupttitel</h1>
15 <p>Eine Beschreibung des Themas der Seite.</p>
16 <img src="xyz.jpg" alt="Bildbeschreibung" width="42" height="66" />
17 </body>
18 </head>
| Zeile | Anmerkungen |
|---|---|
| 1, | Nach den XML-Standards muß durch diese Zeile die XML-Version angegeben werden |
| 2, 3, 12, 13, 17, 18 | Dies ist das Grundgerüst einer XHTML-Datei. |
| 5 | Diese Zeile gibt die Art des Inhalts an. |
| 6 | Hier wird die Style-Sheet-Sprache für Inline-Stylesheets definiert. |
| 7, 8, 9, 11, 14 | Diese Zeilen werden von einigen Suchmaschinen ausgewertet. Welche davon und in welcher Weise ist sehr unterschiedlich - darum hat man sie am besten alle. Dabei ist auch zu bedenken, dass viele Suchmaschinen durch Images und durch Framesets ausgebremst werden. |
| 10 | Formatierungen erfolgen am Besten durch Stylesheets. Durch diese Zeile wird eine separate Datei mit Tsyle-Definitionen in die Seite eingebunden. |
| 14 | Der Titel sollte kurz und aussagekräftig sein, denn er wird in die Lesezeichen bzw. Favoriten des Browsers geschrieben. |
| 16 | Bilder sollten entweder im GIF-Format oder im JPG-Format eingebunden werden. Diese beiden Formate werden von allen Browsern unterstützt. GIF ist mehr für Liniengrafiken und gleichförmige Flächen geeignet und bietet die Möglichkeit transparenter Hintergründe und von Animationen. JPG komprimiert Fotos am Besten. Es sollte bei Bildern immer Länge und Breite zum schnelleren Laden der Seite und ein alternativer Text für Textbrowser und für Blinde angegeben werden. |
HTML ist eigentlich zur Beschreibung des Inhalts eines Dokuments gedacht. Aber es wurde immer mehr zur Beschreibung des Layouts. Um Inhalt und Formatierung wieder zu trennen, wurden Style Sheets eingeführt. Die hauptsächlich verbreitete Sprache zur Definition von Stylesheets ist "Cascading Style Sheets"(CSS). Über die Möglichkeiten und Unterschiede in der Implementierung in verschiedenen Browsern erfährt man etwas auf Home Side Guide - CSS.
Ein paar Worte zur Gestaltung: Der Hintergrund sollte kein Muster mit großen Kontrasten enthalten und der Helligkeitskontrast zwischen Vordergrund und Hintergrund sollte groß genug sein - sonst wird das Lesen des Textes zur Qual. Wo immer möglich sollte man Text der Grafik vorziehen - dann lädt die Seite wesentlich schneller. Man sollte animierte Grafiken weitgehend vermeiden, weil der Leser sonst ständig von ihnen gestört wird.
Stell Dir vor, Du hast eine wunderschöne Website gebastelt - und niemand geht hin. Bei den Millionen von Seiten im Web ist das kein Wunder. Dabei hast Du die besten Voraussetzungen in Suchmaschinen gefunden zu werden, wenn Du wie im obigen Muster ein <TITLE>-Tag, Description, Keywords, <H1>-Tag und eine Beschreibung mit wichtigen Schlüsselwörtern in den ersten 200 Zeichen des Dokuments hast. Es gibt mehrere Wege eine Website bekannt zu machen:
Eine wichtige Erweiterung ist PHP, eine serverseitige Skriptsprache, zu der ich auch eine kleine Einführung geschrieben habe. Damit kann man dynamische HTML-Seiten schreiben, die trotzdem keine großen Anforderungen an den Browsr stellen.
© Mario Boller-Olfert 2002 - E-Mail:Kontaktformular - 123-Byte - Homepage