Kleine Anleitung zur Homepageerstellung


Auf dieser Seite sind ein paar Links und Tipps aufgeführt, welche auch mir geholfen haben, diese (meine) Homepage zu erstellen. Ich werde mich so kurz wie möglich halten, weiterführende Informationen gibt es zur Genüge im Internet zu finden!

HINWEIS: Diese Seite hat nicht den Zweck professionellen Homepage Erstellern weiter zu helfen, sie richtet sich in erster Linie an Leute, die noch keine Homepage gestaltet haben oder bereits ihre erste eigene Seite betreiben. Ebenso wenig wird darauf Wert gelegt, jeden Teilbereich des Homepage bastelns im Detail zu erklären - hier wird wiederum auf das Internet als detailliertere Informationsquelle verwiesen.

2. Wissensaufbau

Sollte kein einschlägiges Wissen vorhanden sein, gilt es in dieser Phase, das eigene Wissen über die Erstellung einer Homepage aufzubauen bzgl. zu erweitern.

Es gibt viele Werkzeuge, die einem die Details der Homepageerstellung schon fast zu 100% abnehmen, man muss nur mehr angeben, was man machen will und den Text schreiben. Dennoch ist es wichtig, einige Grundkenntnisse von den Technologien zu haben. Es kann ja sein, dass man die Homepage erweitern will, und dies nicht vom gewählten Werkzeug unterstützt wird.
HTML ist keine Programmiersprache, sondern eine Seitenbeschreibungssprache, d.h. es wird das Aussehen festgelegt. Der Browser interpretiert diese Anweisungen und stellt die Seite dementsprechend dar. Dementsprechend sind keine Programmierkenntnisse nötig, was die Arbeit für einen großen Personenkreis ungemein erleichtert.

In erster Linie werden wohl Bücher und das Internet selbst zum Wissensaufbau herangezogen werden. Ich habe mich diesbezüglich allein auf die Informationen im Internet verlassen und kann u.a. folgende Seiten für den Wissensaufbau empfehlen:
  • Selfhtml - die wahrscheinlich beste Seite im deutschsprachigen Raum, ein Nachschlagewerk für viele Bereiche mit Links zur Vertiefung des Wissens.
  • Wikipedia - die Online-Enzyklopädie, die von den Lesern selbst gestaltet wird.
  • Fachzeitschriften - Auch monatliche Computerzeitschriften zum Thema "Homepage" beinhalten viele Tipps und meist auch eine CD mit nützlichen Programmen. z.B: Internet World
  • Bücher - Einfach mal in einen Buchladen reingehen und stöbern, um das richtige Buch für seine Bedürfnisse zu finden.

3. Erste Ausführung

Nachdem die Idee konkretisiert wurde, gilt es eine erste Rohfassung zu erstellen. Diese dient dazu, das Zusammenspiel von HTML-Seite und den Browsern zu testen und kann auch online gestellt werden. Diese Version ist eher dazu gedacht, das Zusammenspiel von Homepage, Internet, Browser und Entwicklungswerkzeug zu testen - so eine Art Prototyp der späteren Homepage. Sie dient vor allem dem Ausprobieren des eigenen Könnens und dem Testen von neu angeeignetem Wissen.
HINWEIS: Es ist darauf zu achten, dass bei Datei- und Verzeichnisnamen keine Leerzeichen verwendet werden, da dies nicht in allem Browsern richtig angezeigt werden kann. Um Namen sichtbar zu trennen, sollte der Unterstrich "_" verwendet werden, z.B. "11_05_2005.jpg" ist besser als "11 05 2005.jpg". Ebenfalls ist auf die Groß-/Kleinschreibung zu achten. Daher empfehle ich, alle Datei- und Verzeichnisnamen klein zu schreiben.

In dieser Phase geht es auch um die Auswahl des Werkzeugs, mit dem man letztendlich die Seiten erstellen will.
Die professionellen Webseiten Gestalter schwören teils auf einen reinen Editor, in welchem der HTML Code Zeile für Zeile sauber erstellt wird. Als guten, freien Editor kann ich hier
SciTE empfehlen. Ich benutze ihn nur, wenn kleine Änderungen zu machen sind und ich nicht den WYSIWYG-Editor (What You See Is What You Get) starten will.

Es gibt am Markt eine Vielzahl an WYSIWYG-Editoren. Man sieht während dem Aufbau der Seite, wie sie später aussehen wird und im Browser angezeigt werden wird. Ebenso kann man den HTML-Code direkt bearbeiten (wie beim Editor) und so kleinere Korrekturen vornehmen. Ich verwende gratis WYSIWYG-Editoren, da sie ausreichende Funktionalität für meine Bedürfnisse aufweisen.
Unter anderem sind folgende professionelle oder semiprofessionelle Editoren verfügbar:
  • Macromedia Dreamweaver - Das aktuell beste Werkzeug am Markt. Ist nicht billig, beinhaltet aber viele nützliche Eigenschaften, um das Homepage bauen so einfach wie möglich zu machen. Gibt es auch als Bundle mit einem Bild-/Fotobearbeitungsprogramm und anderen Programmen ab ca. 555,- Euro zu kaufen (Version 8).
  • Kompozer - ein freier, gratis Editor aus dem Mozilla/Firefox Projekt hervorgegangen. Ich benutze ihn derzeit, um meine Homepage zu gestalten. Ich denke, er reicht für die meisten Anforderungen an eine private Homepage aus. Der Nachfolger des 2006 eingestellten Programms NVU.
  • AceHTML Freeware - Also Bonus gegenüber NVU beinhaltet dieser Editor einige Scripts, welche sich direkt in die Seite einbauen lassen. Es ist auch eine Kaufversion verfügbar, die wie üblich einen größeren Funktionsumfang bietet.
  • Evrsoft HTML Editor - Nun gibt es auch die neue Version - First Page 2006 - vom freien Editor. Auch dieser Editor enthält einen CSS-Editor und einige kleine Scripts und Tools, die das Erstellen von Webseiten erleichtern
  • Microsoft (MS) Frontpage - Dieses Werkzeug eignet sich auch gut, um Seiten zu erstellen. Jedoch beinhaltet es einige Microsoft typische Erweiterungen, die mit nicht Microsoft Webservern und Browsern inkompatibel sein können. Es wird eine Verwendung dieser Erweiterungen nicht empfohlen und dieses Programm wird vom MS nicht mehr weiter entwickelt.
  • MS Word - Auch mit Word kann man HTML Seiten erstellen, jedoch ist der HTML-Code seit Version 2000 extrem aufgebläht, was lange Ladezeiten bei Modembenutzern bedeutet. Durch die Fixierung auf Word werden teilweise eigene Microsoft Formate definiert, welche bei der Darstellung in nicht Microsoft Browsern zu Anzeigefehlern führen können. Es gibt jedoch Tools - z.b: TidyHTML - um den überflüssigen Ballast aus den Word HTML-Seiten zu entfernen
  • OpenOffice.org - Ebenso wie das MS Office Paket eignet sich auch OpenOffice zur Erstellung von Webseiten. Hier kann man zumindest in den Optionen (unter Laden/Speichern) einstellen, welche HTML-Version exportiert wird. Ich denke, es ist somit besser geeignet als MS Word.
  • und viele andere mehr....
Ich empfehle die Verwendung eines reinen WYSIWYG-Editors und kein Textverarbeitungsprogramm, da HTML-Seiten erstellt werden sollten, die in den gängigsten Browsern richtig dargestellt werden sollten. Außerdem bieten diese Editoren weitere Vorteile in Verbindung mit Seitenbearbeitung und Speicherung im Internet.

4. Speicherplatz im Web

Eine Homepage auf dem eigenen Rechner ist zwar nett, aber nicht Sinn der Übung. Daher gilt es als nächste Phase einen geeigneten Provider auszuwählen und die erste Version der Homepage online zu stellen.

Dabei ist zu überlegen, ob man für das Service (= Speicherplatz im Internet) bezahlen will oder nicht. Somit kann man die Provider grob in zwei Kategorien einteilen:

Gratisprovider

Kostenpflichtige Provider

  • Vorteile: Man kann seine eigene Wunsch URL-Adresse angeben (sofern noch nicht vergeben); Verschiedene Speicherplatz-Pakete vorhanden, um die persönlichen Bedürfnisse bestmöglich zu erfüllen; schnellerer Internetzugang als bei Gratishosts; besserer Service als bei Gratisseiten
  • Nachteile: man bezahlt eine monatliche Gebühr und Einrichtungsgebühr; günstige Pakete können eine Einschränkung bei der Verwendung von Internettechnologien - z.B: keine Datenbank erlaubt, beinhalten.
  • Beispiel: all-inkl.com - dies ist mein Provider und ich bin sehr zufrieden mit der Leistung; und viele andere mehr....

FTP: Was man nun ebenfalls benötigt, ist ein Programm, welches die Homepage vom lokalen Rechner auf den Server des Providers überträgt. Die Technologie dahinter ist FTP (Die Programm haben dieses Kürzel meist im Produktnamen). Entweder, der gewählte WYSIWYG-Editor beinhaltet diese Funktionalität oder man greift auf externe Programm zurück. Ich verwende zusätzlich zu NVU das Programm "AceFTP 3 Free" - gratis nach Registrierung! Bisher hat es für meine Zwecke vollkommen genügt, vor allem, wenn man größere Datenmengen übertragen will.

5. Verbesserungs- und Erweiterungsphase

Nun ist auch die Zeit gekommen, Verbesserungen und Erweiterungen an der eigenen Homepage vorzunehmen. Die erste Version ist nun online und man kann die Funktionalität testen und die Seite nun erweitern, indem man weitere HTML-Seiten oder Funktionalität hinzufügt.

Nachdem man die Grundlagen geschafft hat, ist es nun wichtig, die Seite bekannt zu machen. Entweder per Email an die Freunde und Bekannten oder per Eintrag in Suchmaschinen, so dass die Seite gefunden wird. Weil ohne Bekanntheitsgrad hat man auch keine Benutzer auf der Seite.

Eine Internet Seite ohne Inhalt wird nur spärlich besucht werden. Somit gilt es nun, weitere Seiten hinzu zu fügen. Der Inhalt kann von anderen Internet-Seiten bezogen werden, welche diesen gratis anbieten oder es wird selbst daran gearbeitet, mehr Texte und Bilder einzufügen. Hier ein paar Links zu hilfreichen Seiten:
Was zu beachten ist, dass ein Link eingebaut wird, der auf die rechtliche Situation (Haftungsausschluss) hinweist. Es gibt Urteile von Gerichten, nach denen dies auch für Privatpersonen notwendig ist. Ich selbst bin da zuwenig genau informiert, da ist es besser, man erkundigt sich bei einschlägigen Rechtsanwälten (oder Jus-Studenten). Ich habe eine Seite aus dem Internet verlinkt, welche diese Aufgabe für mich erfüllt - und zwar diese hier!

Um zu wissen, wie viele Besucher die Seite hat, bietet sich der Einbau eines Counters an. Auch hier gibt es Counter, die gratis im Internet angeboten werden. Sie bieten zwar nicht den Umfang von kostenpflichtigen Countern, aber für private Zwecke sind sie ausreichend. Ich habe meinen Counter vom Schweizer Anbieter Counter27 eingebaut.

Das Design der Seite kann vereinheitlicht werden, indem man die speziellen Anweisungen in einer CSS (Cascade Style Sheet) - Datei zusammenfasst und in der HTML Seite definiert. Wie dies funktioniert wird wiederum in SelfHTML sehr gut erklärt.

Um seine Besucher an die Seite zu binden, d.h. er kommt immer wieder, kann man ein Gästebuch, Chat oder Forum einrichten. Diese Funktionalitäten gibt es fix fertig im Internet, man muss sie einfach verlinken oder man bezieht den Source Code des Programms aus dem Internet und baut ihn in die eigene Homepage ein (Mit Hinweis auf den ursprünglichen Entwickler).

Für gewisse Aktionen ist es ratsam ein Bild-/Fotobearbeitungsprogramm einzusetzen, z.B. die Entfernung von roten Augen auf Fotos. Es muss nicht der Klassenprimus "Adobe Photoshop" sein, es reicht mitunter auch GIMP, welches frei verfügbar ist. Es ist jedoch einiges an Lernaufwand nötig, um die Möglichkeiten dieser Programme auszunutzen.

Die Seite kann auch um Javascripts, Flash Animationen, JAVA-Applets, usw. erweitert werden. Dem Ausbau sind kaum Grenzen gesetzt, jedoch sollte beachtet werden, dass es nach wie vor viele Benutzer gibt, die keinen Breitband Internetzugang haben und nicht ewig auf die Startseite warten wollen. Zu beachten ist, dass der Provider gewisse Technologien (z.B. kein PHP erlaubt) nicht zur Verfügung stellt und somit kann man diese auch nicht für die Homepage Gestaltung verwenden. Dies legen die Provider individuell fest - die Informationen diesbezüglich sind auf der jeweiligen Homepage des Providers zu finden.

6. Qualitätsverbesserung

Wie bei allem, gibt es auch bei Internet Seiten eine Phase der Qualitätssicherung. Dieser Punkt geht meist Hand in Hand mit der vorherigen Phase - das heißt z.B. Korrekturlesen, Anpassen an die verschiedenen Browser, Code-Bereinigung und Optimierungen. Hier eine aktuelle Auflistung, welche Browser wie häufig verwendet werden - hier!
Allgemein gilt, dass die Seite nicht nur an den Internet Explorer angepasst werden sollte, sondern auch an weitere Browser wie den Mozilla Firefox Get Firefox , den Opera Download Opera , den Google Chrome (oder Iron) sowie Apple Safari und die gleichen Ergebnisse liefern sollte.

Hierbei wird auch die Kompatibilität mit den Anforderungen der W3C getestet. Danach kann man deren Icons einbauen, um den Benutzern zu zeigen, dass man sich an den Standard hält.

Ebenso sollte die Seite zusätzlich an einem sicheren Ort gespeichert werden, ein so genanntes Backup, um bei Problemen oder Datenverlust auf die gespeicherte Version zurückgreifen zu können. Wie die Versionierung (Entwicklungsstände speichern) durchgeführt wird, ist jedem selbst überlassen. Will man sich jeden Entwicklungsstand aufheben oder nur die jeweils neueste Version obliegt hier dem eigenen Sicherheitsbewusstsein.

Und wenn bei den zuvor aufgezählten Punkten Fehler gefunden wurden, geht es wieder zurück in die Phase 5 - zur Verbesserungsphase!

8. Tipps & Tricks

hier ein paar Tipps, die auch mir geholfen haben...

1. Sicherheitsabfrage im Internet Explorer ab Version 6 SP2 ausschalten:
Wenn man im Code eine Javascript Anweisungen verwendet, dann wird man im IE immer extra aufgefordert, ob das Javascript ausgeführt werden darf. In der Regel genügt die Einfügung eines speziellen HTML-Kommentars in den HTML-Dateikopf, siehe
hier
Folgendes einfügen:
	<!-- saved from url=(0013)about:internet -->

2. Farben: Es ist schwierig, die richtigen Farben für die Darstellung zu finden. Deshalb gibt es im Internet einige Hilfen, die die Farbauswahl erleichtern. Ich habe eine brauchbare Farbauswahl bei SelfHTML gefunden, siehe hier



Letzte Änderung: 17. August 2009