Aufbau
 

2 Der Aufbau einer HTML Seite

2.1 Vorbereitung

Gute Planung erspart später viel Zeit und Ärger.
Besorge Dir Zeit, Papier und Bleistift und entwerfen Deine Seiten in groben Umrissen.

2.1.1 Site, Seite, Homepage

Eine Site ist unser gesamtes Projekt. Sie beinhaltet alle Unterseiten, externe Seiten und Grafiken.
Die Seite ist nur eine von vielen und die Homepage ist die Startseite oder auch Einstiegsseite, das Portal, welches der User sieht, wenn er unsere Domain aufruft.

2.1.2 Inhaltliche Abgrenzung

Vor dem Erstellen einer Site steht erst einmal nüchterne Kopfarbeit.
Das Ziel muß klar formuliert sein. Werde Dir darüber einig was alles zur Site gehört und vor allem was nicht mehr dazu gehört. Wie viele Seiten sollen entstehen und wie sollen sie verlinkt werden? Achte darauf, daß Dir die Site nicht über den Kopf wächst. Man soll es nicht glauben wie schnell solch eine Site ausufern kann.
Die Seiten leben von Informationen. Bla bla interessiert keinen. Halte Deine Seiten immer auf dem aktuellen Stand. In diesem Zusammenhang ist es wichtig ein Änderungsdatum mit anzugeben.
Sammeln und erstelle Dir Grafiken die zum Thema gehören. Auch wenn Sie später nicht alle benötigt werden. Du hast erst einmal genug um sich in Ruhe die richtigen auszusuchen.
Eine passende Grafik zu finden oder zu erstellen kann viel Zeit und Nerven beanspruchen.

2.1.3 Layout

Fertige Dir eine einfache Skizzen an, bei der Du Deinen optischen und ethischen Willen zum Ausdruck bringst.
Das Aussehen der Seiten muß zuerst im Kopf und auf dem Papier stehen. Erst dann wird es mittels HTML umgesetzt.
Wenn Dein Projekt mehrere Seiten umfaßt, dann achte auf ein einheitliches Layout.
Die Seiten sollten immer ein gleiches Erscheinungsbild haben (Corporate Identity). Entscheidende Bereiche der Seiten sollten sich wiederholen. So z.B. das gleiche Hintergrundbild oder ein Logo, daß immer an der selben Position zu finden ist. In dieser Lektion ist es die obere Navigationsleiste. Die mit dem grünen Punkt.
Der User muß instinktiv merken, daß er sich noch auf Deinen Seiten befindet.
Auch die Navigation sollte sich immer an der gleichen Stelle befinden. Es wäre für den Nutzer eine Zumutung wenn er sie immer aufs neue zu suchen hat.

Text ist die Seele einer Seite. Plane Dir deshalb Zeit für Aussehen und Inhalt Deiner Texte ein.
Strukturiere ihn. Erzeuge Absätze, sie ermöglichen den Besuchern eine gedankliche Atempause.

Optisch aufgelockerten Text erreichst Du durch den Einsatz von Bildern. Bildunterschriften verbessern zudem die Orientierung der User.

Schaue Dir Zeitungen und andere Printmedien unter dem Gesichtspunkt der optischen Aufmachung an. Oder gehe auch auf die Seiten großer Zeitungen. Dort arbeiten die "Buchstabenprofis". Achte darauf wie die Seiten aufgeteilt sind, wo Bilder eingefügt werden, Schlagzeilen hervorgehoben werden.

Gliedere längeren Text in Spalten.
Verwende dazu CSS, wenn Du es schon kannst, oder unsichtbare (blinde) Tabellen. Zu den Tabellen werden wir später noch kommen.

Um die Textlänge in Spalten auszugleichen kannst Du Word verwenden.
Das geht so:
Schreibe Deinen Text zunächst als normalen Fließtext in Word. Wähle aus der Menüleiste "Bearbeiten" - "alles markieren", danach "Format" - "Spalten". Gebe hier die gewünschte Anzahl und die Breite der Spalten ein. Bestätige mit "OK".
Um die Spalten auszugleichen, positionierst Du den Mauszeiger am Textende der letzten Spalte und wählst im Menü "Einfügen" - "Manueller Wechsel". Markiere den Eintrag "Fortlaufend".
Nun brauchst Du den Text nur noch in Dein HTML-Dokument zu kopieren.

2.1.4 Dateinamen und Ordner

Erkundige Dich bei Deinem Provider ob Du in der Site Unterordner verwenden darfst. Das ist bei den meisten Providern der Fall.
Wenn ja, dann nutze diese Möglichkeit ausgiebig. Du erhälst dadurch einen besseren Überblick und es wird Dir bei späteren Änderungen die Arbeit erleichtern.
Denkbar wäre es z.B. in einem Ordner alle Grafiken und in einem anderen alle html-Dateien zu ordern.
Ich empfehle alle Dateinamen in kleinen Buchstaben und ohne Umlaute und Sonderzeichen zu schreiben. Viele Serverrechner laufen unter UNIX und können Großbuchstaben manchmal übel nehmen. Es gibt Browser, die akzeptieren nur die aus DOS-ZEITEN stammende, 8.3 Regel, also den Dateinamen mit bis zu 8 Zeichen und 3 Zeichen als Dateiendung.

WICHTIG: Unsere Homepage, also unsere Startseite, muß"index.html" oder "index.htm" heißen. Diese Startseite findet der Browser automatisch und startet sie auch.
Alle anderen Dateien benennst Du einfach einheitlich mit der Dateiendung "html" oder "htm".

Eine gute Vorbereitung ist schon die halbe Miete.

2.1.5 Von anderen lernen

Auch hier gilt, Übung macht den Meister. Keiner ist ein geborener Designer. Deshalb muß man es lernen ein Gefühl für Farben und Formen zu entwickeln.
Schaue Dir Profiseiten, z.B. von großen Firmen an. Wenn Du mit HTML umgehen kannst dann zerlege diese Seiten und hole Dir so Tricks für ein gutes Layout. Lerne wie andere ein gutes Layout aufbauen aber kopieren es nicht einfach, denn das würde Urheberrechte verletzen.

Eine sehr gute Hilfe und Referenz für HTML ist SELFHTML von Stefan Münz. Zur Zeit liegt es in der Version 8.0 vor und ist unter
http://selfaktuell.teamone.de zu finden. Es ist ca. 8 Mb groß.

2.1.6 Allgemeine Hinweise

Teste Deine Seiten gründlich. Nur so können technische Fehler vermieden werden.
Gewöhne Dir einen sauberen Quellcode an. Und das vom ersten Tag an. Der IE toleriert so manch kleinen Fehler, Netscape weniger und Opera nimmt es ganz genau.

Alle Links der Seiten müssen funktionieren. Leicht gesagt aber wenn Du 10 Seiten hast die untereinander verlinkt sind so dass jede Seite von jeder Seite aufgerufen werden kann dann sind das immerhin schon 90 Links.
Kontrolliere auch regelmäßig die externen Links (Links zu anderen Sites). Es ist nun einmal so, daß manche Seiten von ihren Betreibern aus dem Netz genommen werden ohne dass jemand Dir das sagt. Dein Link kann dann nicht funktionieren.

Ein ganz wichtiger Punkt. Achte auf kleine Dateien. Vor allem wenn Du Bilder verwendest. Viele User arbeiten noch mit einem anaglogen Modem und wenn Du mit großen Bilddateien arbeitest, dann dauert es dem User zu lange bevor er etwas auf seinem Browser zu sehen bekommt. Laut Statistik wird er nach ca. 15 bis 20 Sekunden von Deiner Seite verschwinden wenn sich da nichts tut.

Teste Deine Seiten mit unterschiedlichen Browsern - mindestens mit IE und Netscape. Denn einige Tags werden unterschiedlich dargestellt

Vergesse nicht die Eingabe der Meta-Tags, denn die sind wichtig für die Suchmaschinen.

Versuche NICHT Deine gesamten Kenntnisse von HTML und JavaScript in jede Seite einzubringen. Ein noch so guter Effekt taugt nichts, wenn er nicht dorthin gehört. Beantworte Dir einfach die Frage: "Nutzt es dem User?" Bei einer negativen Antwort - Finger weg!
Seiten die einen User nerven oder grau und trist sind veranlassen Ihn von dieser Site (auf nimmer wiedersehen) zu verschwinden.
Versuche deshalb Deine Seiten so zu gestalten, daß Sie dem User entgegenkommen. Er soll es leicht haben den Inhalt zu verstehen und den Überblick zu gewinnen.
Wenn er sich bei Dir wohl fühlt, dann hast Du gewonnen.

Erstelle unbedingt Sicherungskopien. Die helfen nicht nur bei einem Totalverlust. Auch wenn Du einmal in Deiner "Programmierwut" alles zerschossen hast, hilft Dir eine Sicherungskopie den alten Zustand schnell wieder herstellen. Vorausgesetzt, die Sicherungskopie ist immer auf einem aktuellem Stand.

Weiter zum Punkt 2.2