1. Kenntnisse
2. Software und Webspace
3. Grafiken und Layout
4. Optimierung und Validierung
5. Das Designziel
1.1 Was ist HTML?
Vom Web-Gründer Tim Berners-Lee entwickelt, wurde HTML im Zuge des Web-Booms zum erfolgreichsten und verbreitetsten Dateiformat der Welt. Immer wieder rümpfen Entwickler, die gerne alles, was einfach sein könnte, durch tausend Filter und Übersetzer jagen, um es kompliziert zu machen und ihren technischen Durst zu stillen, über HTML die Nase - eben weil es so einfach ist. Aber erstens ist es bei genauerem Hinsehen gar nicht so einfach - fast kein namhaftes Web-Angebot - egal ob Suchmaschine, Online-Magazin oder Firmenauftritt - ist bis heute in der Lage, fehlerfreies und standard-konformes HTML auf seinen Web-Seiten zu realisieren. Und zweitens reicht HTML für die Mehrzahl der Inhalte, die heute im Web angeboten werden, vollkommen aus. Denn HTML ist eine Sprache zur Strukturierung von Texten, wobei aber auch die Möglichkeit besteht, Grafiken und multimediale Inhalte in Form einer Referenz einzubinden und in den Text zu integrieren.
1.2 Grundkenntnisse
HTML zu können ist für die Erstellung einer Homepage nicht zwingend erforderlich, jedoch wärmstens zu empfehlen. Die HTML-Auszeichnungssprache ist keineswegs kompliziert zu erlernen, bringt aber zu einem späteren Zeitpunkt sicherlich Vorteile. Die umfangreichste Onlinereferenz zu HTML gibt es bei SELFHTML. Um mit der Erstellung der eigenen Seite zu beginnen, sollte man sich dort wenigstens das Einsteigerkapitel durchlesen.
2.1 HTML-Editoren
Wer seine Seite zunächst von Hand erstellen will braucht einen komfortablen Quelltext-Editor. Es empfiehlt sich der kostenlose Editor Phase 5, der über genügend Funktionen und Möglichkeiten verfügt, um seine erste Seite zu erstellen. Die andere Möglichkeit zu seiner Seite zu kommen sind die so genannten WYSIWYG- Editoren. Ein sehr schlechtes Beispiel dieser Editoren ist Micro**** Frontpage. Da dieser Editor unsauberen Code liefert und unflexibel in der Bedienung ist, ist er nicht zu empfehlen. Unter den Profis ist der Dreamweaver von Macromedia sehr beliebt. Dieser Editor hat zwar einen stolzen Preis, bietet aber eigentlich alle Möglichkeiten, die man zum Erstellen von Webseiten braucht. Natürlich werden lernbereite Menschen eher zu Phase 5 oder andern Texteditoren tendieren, da der Lerneffekt viel grösser ist wenn man jede Zeile selbst schreibt.
2.2 FTP-Clients
Diese Tools sind erforderlich, um die erstellte Seite vom eigenen Rechner auf den Server zu laden und diese damit der ganzen Welt zugänglich zu machen. Auf Webspacelösungen werden wir im nächsten Abschnitt näher eingehen. Die beliebtesten FTP-Clients sind:
CuteFTP
WS_FTP
LeechFTP
2.3 Webspace
Um die Seite im Internet abrufbar zu machen braucht man in erster Linie Webspace. Es gibt unter den Webspace-Anbietern sowohl kostenlose als auch gebührenpflichtige Hoster. Free-Webspace-Anbieter finanzieren sich normalerweise mit Werbeeinschaltungen auf der Homepage was auf die Dauer ziemlich nervig sein kann. Zudem kommt es des Öfteren zu Ausfällen und mässiger Geschwindigkeit. Der grösste Vorteil eines bezahlten Webspace liegt aber wohl bei den Features (PHP, MySQL, usw..). Für den Anfang sollte aber ein Gratisanbieter vollkommen ausreichen.
Anbieter Übersicht: http://www.freewebspace.net
3.1 JPEG
Das JPG, auch JPEG (Joint Photographic Experts Group), kann bis zu 16,7 Millionen Farben darstellen. Anders als beim GIF, wird beim JPG durch Datenreduktion die Dateigröße verringert. Es wird nur bei Bildern verwendet, die mehr als 256 Farben enthalten.
3.2 GIF
Das GIF-Format, für den Online-Dienst Compuserve entwickelt, ist im Laufe der Zeit zum Standard geworden. Es besteht aus maximal 256 Farben und eignet sich in erster Linie für Bilder, die nur geringe Farbtiefen aufweisen. Besonders gut lässt sich das GIF für Navigationselemente einsetzten. Eine GIF-Datei kann durch Farbreduzierung noch verkleinert werden.
3.3 PNG
Beim PNG (Portable Network Graphics) handelt es sich um ein schon altes, aber neu ins Spiel gebrachtes Grafikformat. Es vereint die Vorzüge vom GIF und JPG. PNG- Grafiken können mit bis zu 48-Bit-Farben abgespeichert und trotzdem verlustfrei komprimiert werden, und das mit einer Qualität von 16 Millionen Farben + 256 Transparenzstufen (GIF gibt nur bis zu 8 Bit wieder). Dem steht ein erheblicher Nachteil gegenüber: PNG kann erst mit Browsern der vierten Generation betrachtet werden. Alle älteren Browser benötigen ein Plug-In.
3.4 Farben und Hintergründe
Zwei bis drei Grundfarben (evtl. mit leichten Variationen) reichen in den allermeisten Fällen, sonst wird die Seite zu bunt und damit hässlich. Problematisch ist die Kombination von ungefähr gleich hellen Komplementärfarben. Es sollte aber vor allem ein ausreichender Kontrast zwischen Hintergrund- und Textfarbe vorhanden sein. Hintergrundbilder sollten wirklich nur dann eingesetzt werden wenn es keinen anderen Ausweg mehr gibt, da sie meist billig aussehen und den Text schlecht lesbar machen.
4.1 Ladezeiten
Die Ladezeit der Seite sollte so gering wie möglich gehalten werden, um nicht gleich die Besucher beim ewigen Laden der Startseite zu verlieren. Es gilt dabei für eine Startseite nicht mehr als ca. 70kB und für die weiteren Seiten ca. 90kB. Getestet werden kann die Ladezeit bei Webmasterplan oder TopSubmit.
4.2 Browseroptimierung
Wenn die Seite nach den allgemein gültigen Regeln des W3C validiert, sollte es eigentlich fast keine Unterschiede in den meisten Browser geben. Der meistgenutzte Browser ist zurzeit noch der IE von Micro****. Wenn die einzelnen Seiten im IE richtig angezeigt werden, muss es noch lange nicht heissen, dass die Seiten im Mozilla oder Opera gleich angezeigt werden. Deshalb hat das W3C ein Validierungsservice eingerichtet, um für gewisse Standards zu sorgen.
5.0 Das Designziel
Das Ziel all dieser Bemühungen sollte ein klares und übersichtliches Layout sein, das einen Wiedererkennungswert besitzt. Unter anderen Internetangeboten sollten die Bemühungen in Richtung der Eigenständigkeit gerichtet sein, wobei Orientierungen in Ordnung sind. Eine klar strukturierte und einfache Navigation soll es dem Surfer ermöglichen die von ihm gewünschte Information so schnell wie nur möglich zu erhalten. Wenn das der Fall ist wird er die Seite wieder besuchen und sie auch weiterempfehlen.
Copyrighted by Guideforce.de
Wenn sie dieses Tutorial sehen ohne über www.guideforce.de gekommen zu sein,
dann wenden sie sich bitte an info@lifeworks.de