Dieser "kurze" Überblick hat sich zu einem kleinen Monster entwickelt. Also bitte nicht erschrecken, denn das Meiste ist keine große Hexerei. Ich möchte jedoch alle wichtigen Dinge wenigstens kurz erwähnen.
Grundlage des Webs ist die Hypertext Markup Language - kurz HTML. Es ist eine Sprache, die den Inhalt einer Webseite beschreibt. Die Sprache besteht nur aus Text und wird in eine Datei geschrieben, die mit ".htm" oder ".html" endet. Die erste Seite eines Verzeichnisses sollte "index.htm" heißen.
Eine Anweisung in HTML besteht aus einem "Tag", dem Inhalt dazwischen und dem entsprechenden Endtag. Zum Beispiel beschreibt die folgende Zeile die Überschrift dieser Webseite (siehe oben):
<h1>Erstellen von Webseiten mit HTML</h1>
Der Inhalt kann wieder solche Tag-/Endtag-Kombinationen enthalten.
Mittlerweile sind die Möglichkeiten von HTML sehr umfangreich geworden. Da schon viel im Web darüber geschrieben wurde, verweise ich nur auf weiterführende Quellen. 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.
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 Beschreibung 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. XHTML ist "wohlgeformt" nach XML, dadurch 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:
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-, JPG- oder im PNG-Format eingebunden
werden. Diese drei Formate werden heute von allen Browsern unterstützt.
Bei Bildern sollte immer Länge und Breite zum schnelleren Laden der Seite abgegeben werden. Ein alternativer Text ist Pflicht. |
HTML ist 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.
Es gibt tolle Webseiten, auf denen alles sich bewegt und blinkt. Darüber kann man sich sicherlich streiten. Es gibt auch Menübäume, die manchmal hilfreich sein können. Eine sehr gute Sache sind Mouse-Over-Effekte bei Links - dadurch kann der Benutzer sehen, was bei einem Klick ausgewählt würde.
Letzteres lässt sich sehr gut mit CSS realisieren, aber für ersteres bietet sich JavaScript an. Da einige neurotische Naturen JavaSCript abgeschaltet haben, sollte deine Seite auf jeden Fall auch bei abgeschalteten JavaScript funktionieren. Am Besten testest du deine Seite mit abgeschaltetem JavaScript. Ich selbst verwende es nur für Spielereien.
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. Die großen Website-Anbieter nehmen aber viel Geld für solche "Profi"-Fähigkeiten. Günstige Anbieter sind zum Beispiel Kontent oder Levanzo.
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.
Andererseits sollte die Seite interessant aussehen ohne kompliziert zu sein. Ein paar Farbtupfer und Auflockerung durch schöne oder hilfreiche Bilder sollten nicht ganz fehlen und die Seite nicht zu Buchstabensalat verkommen.
Völlig untechnisch ist das tolle Buch "Don't make me think - Web Usability", das man natürlich bei Amazon bekommen kann. Ein Benutzer denkt nicht lange nach, sondern wurstelt sich durch. Deshalb sollte man eine Website ohne nachzudenken bedienen können, weil alles so ist, wie man es erwartet.
Ein paar weitere Tipps habe ich auch noch zusammen gestellt.
HTML besteht ausschließlich aus Text und man kann eine Seite problemlos mit einem simplen Texteditor wie Notepad oder vi oder emacs eingeben - es ist nur nicht so schön.
Es gibt umfangreiche Entwicklungssysteme wie GoLive, NetObjects Fusion oder Mediator, die erst einmal alles verbergen. Sie erfordern eine eigene Schulung. Wenn man dann auf ein Problem stösst, was mit Sicherheit passiert, muss man nicht nur HTML verstehen, sondern auch noch was diese Werkzeuge damit anstellen. Und dann wird es richtig kompliziert. Andererseits hat man einen Editor, eine Art Content-Management (siehe unten) und einen komfortablen FTP-Client in einem Guss.
Will man einen richtig vergewaltigten und versauten HTML-Code haben, sollte man unbedingt Microsoft Word zum Editieren verwenden - es gibt nichts Schlimmeres.
Wenn man aber die Kontrolle über den erzeugten HTML-Code behalten und alle Möglichkeiten nutzen will, dann ist der beste Editor sicherlich Ultra-Edit und der beste kostenlose Editor ist der tsWebEditor.
Ein etwas komplizierter zu bedienender kostenloser Editor ist Phase 5 von Uli Meybohm. Phase 5 beinhaltet ein Include-Kommando, mit dem Seiten aus Bausteinen zusammengesetzt werden können - das Ergebnis kann man z.B. bei meiner Site Abspiel sehen. Da Beste daran: Man braucht kein PHP um komplizierte Webseiten zu erstellen.
Wenn Webseiten richtig kompliziert werden mit mehr als zwei Dutzend Seiten, dann ist der Stand der Technik die Verwendung eines Content- Management-Systems (CMS). Dieses trennt die äußere Form mit Frames oder mehreren Spalten vom eigentlichen Inhalt und ermöglicht es Webseiten direkt auf dem Webserver zu editieren. Voraussetzung ist immer, dass man PHP auf seiner Website einsetzen kann.
Man kann dann auch Menschen mit weniger Ahnung von HTML Webseiten Inhalte schreiben lassen. Ein Anwendungsgebiet sind deshalb Seiten, die von inhaltlichen Redakteuren gepflegt werden.
Ein nicht ganz einfach zu handhabendes, aber sehr gutes und flexibles System ist phpCMS.
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.
Und jetzt solte die Datei auf das Web geladen werden. Dafür brauchst du ein FTP-Programm. Der Standard ist das kommerzielle WS_FTP.
Das beste kostenlose, aber etwas gewöhnungsbedürftige Programm ist SmartFTP.
Stell Dir vor, Du hast eine wunderschöne Website gebastelt - und niemand geht hin. Bei den Milliarden 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:
Die andere Seite des Webs ist der Web-Browser. Wenn du es gut machen willst, dann solltest du deine Seite mit mehreren Browsern testen. Nachdem Netscape jetzt wohl stirbt, gibt es neben dem Internet Explorer noch als wichtigste Browser Mozilla mit seinen Varianten und Opera.
© Mario Boller-Olfert 2002-2003 E-Mail:Kontaktformular 123-Byte Homepage