Bitte wählen Sie:

Wie man eine eigene Homepage erstellen kann

Als Webhosting-Anbieter stellen wir Ihnen die Voraussetzungen zur Verfügung, die zum Erstellen einer eigenen Homepage nötig sind. Dies sind zum einen die technischen Funktionen (Dienste), aber auch zusätzliche Features. Bei goneo helfen wir Ihnen zudem, eine eigene Homepage selbst zu erstellen. Sie brauchen nicht auf die Hilfe eines ausgebildeten Webdesigners zurückzugreifen. Dies spart Kosten und gibt Ihnen die maximale Kontrolle über Ihr Webprojekt.

Grundsätzlich: Sie benötigen Speicherplatz auf einem Server, eine Domain und webfähige Dokumente

In diesem Artikel wollen wir Ihnen möglichst knapp eine Übersicht darüber geben, welche Möglichkeiten Sie haben, um eigene, miteinander verbundene Dokumente im Word Wide Web veröffentlichen zu können. Das heißt: Wir beschreiben die essentiellen Bestandteile einer Website und schildern einige Verfahren, wie Sie dieses Ziel erreichen können, unabhängig davon, welche Tools und Software Sie einsetzen möchten.

Was benötige ich für eine eigene Homepage?

Im Normalfall benötigen Sie zum Aufbau und Betrieb einer eigenen Homepage prinzipiell drei Dinge:

Einen Server

Dieser Computer, der permanent mit dem Internet verbunden ist, steht im Rechenzentrum des Hosters. Diesen Rechner nennt man auch Server, weil er in der Lage ist, Dateien im Internet bereitzustellen. Einen solchen Server kauft man sich in der Regel nicht. Das wäre für Privatleute, kleine und kleinste Unternehmen unwirtschaftlich. Man mietet sich als Homepagebetreiber auch nur einen mehr oder minder großen Teil seiner Rechen- und Speicherkapazität. Genau dieses Stückchen Rechen- und Speicherkapazität erhalten Sie von goneo, wenn Sie eines unserer Webhosting-Pakete buchen.

Webspace und eine Domain

Sie benötigen Schreibzugriff auf den Speicherplatz des Servers, zumindest auf den für Sie reservierten Teil. Dieser reservierte Teil ist Ihr Webspace.

Mit dem File Transfer Protocol (FTP) speichern Sie die Dateien ab, die im Internet zur Verfügung stehen sollen.

Damit Webuser Sie finden, sollten Sie eine eigene Domain registrieren. IN Webhosting-Paketen ist die Möglichkeit, Domainnamen zu registrieren, inklusive. Über Domains finden Sie mehr in unserem entsprechenden Glossar-Eintrag.

Webkompatible Dokumente

Bei Webseiten handelt es sich um sogenannte HTML-Dateien.

Zum Hintergrund: HTML ist eine Auszeichnungssprache, die von Webbbrowsern wie Firefox, Microsoft Internet Explorer, Safari oder Chrome interpretiert wird. Die Darstellungsbefehle im sogenannten Quellcode werden in eine für menschliche Benutzer angenehme Darstellung übersetzt.

HTML kennt im Unterschied zu Programmiersprachen (zu denen wir auch PHP oder Python zählen wollen) keine Schleifen, Bedingungen oder Rechenoperationen, sondern dient zunächst einfach dazu, zu beschreiben, wie und wo im Browserfenster ein bestimmter Inhalt angezeigt werden soll.

Anweisungen, die das Erscheinungsbild der HTML-Elemente bestimmen, werden mit CSS (Cascading Style Sheets) definiert.


Webdokumente mit HTML erstellen - im Minimalfall reicht ein Texteditor

Für den eigentlichen Prozess zur Erstellung einer Webseite gibt es nur wenige festgeschriebene Regeln. Ein Webdokument, das in einem Browser angezeigt werden soll, ist in der Auszeichnungssprache HTML geformt. Mehr über HTML (Hypertest Markup Language) können Sie hier erfahren. HTML hat wie eine Programmiersprache eine festgelegte Syntax, die Sie einhalten sollten, um das Webdokument im Browser der User fehlerfrei anzeigen lassen zu können.

Sie können HTML-Dokumente mit einem einfachen Texteditor erstellen, was bei komplexen Seiten aber sehr mühsam wird. Bei Verwendung eines HTML-Editors wie Dreamweaver, CoffeeCup oder auch goneo easyPage geschieht das im Hintergrund, während Sie praktisch in der Originalansicht ein Dokument erstellen.

Wie sollte man vorgehen, wenn man eine Website erstellen will?

Es gibt keine vorgeschriebene oder feste Verfahrensweise. In der Praxis haben sich einige Abläufe aber bewährt. Wir haben in unserem Know-how-Bereich ausführlich dargestellt, wie man eine eigene Website erstellen kann. Im Folgenden gliedern wir den Ablauf in einzelne, allgemeine Phasen auf. Dabei ist es nicht von Belang, welchen Webseitentypus Sie erstellen möchten. Eine Website kann ganz unterschiediche Ziele haben.

Folgender Prozess hat sich in der Praxis bewährt:

Bei der Erstellung einer Homepage: Ziel und Zweck festlegen

Überlegen Sie, welche Ziele und welchen Zweck die Homepage haben soll. Das ist die Frage, warum sie überhaupt entsteht.

Die Frage mag banal erscheinen, aber Klarheit bei der inhaltlichen Ausgestaltung erleichtert die weitere Planung immens. Soll es eine Website sein, die Bilder (Fotografien) präsentieren soll? Wollen Sie Ihre Firma mit dem gesamten Leistungsspektrum darstellen? Versuchen Sie, Interessierten zu erklären, was Ihr Verein tut? Versuchen Sie bei diesem Planungsschritt die Perspektive der User einzunehmen: Für wen ist die Seite gedacht? Wer soll angesprochen werden?

Ein beliebter, aber unserer Meinung wenig zielführender Ansatz ist, sich gleich zu Anfang mit dem Design zu beschäftigen. Die meisten Do-it-yourself-Homepagebauer überlegen sich stärker als alles andere, wie das Design aussehen soll und lassen sich stark von ihrem persönlichen Empfinden leiten. Sicher, das Aussehen ist wichtig. Aber wir können nur empfehlen, weiter vorne anzusetzen, nämlich mit der Klärung der Frage des Sinns und dies Ziels der Website insgesamt.

Festlegung der Inhalte

Unser Tipp: Erstellen Sie eine Gliederung, eine Art Inhaltsverzeichnis. Möglicherweise sind Ihnen die einzelnen Inhalte noch gar nicht so ganz klar. Es empfiehlt sich dann, ein Brainstorming zu machen und die einzelnen Schlagwörter und Begriffe, die Ihnen einfallen, zu systematisieren. Ein sogenanntes Mindmap kann helfen.

Wenn Sie glauben, genügend Klarheit über die Inhalte, die Sie zeigen wollen zu haben, beginnen Sie mit der Materialsammlung. Sie werden Überschriften, Texte und Bilder benötigen.

Wie man vorgehen kann, um Content für die eigene Homepage zu finden, zu strukturieren und für die Darstellung in einer Navigation aufzubereiten, haben wir im Know-how-Bereich beschrieben.

Design und Umsetzung

An diesem Punkt im Prozess der Homepage-Neuerstellung sollte die Frage nach dem grundsätzlichen Aussehen gestellt werden.

Skizzieren Sie die Webseite, wie Sie sie sich vorstellen ruhig zunächst auf Papier. So können Sie die einzelnen Inhaltselemente räumlich anordnen. Wenn hier übrigens von "Webseite" gesprochen wird, ist eine einzelne HTML-Seite gemeint, während "Website" den gesamten Internetauftritt meint.

Wenn Sie eine Vorstellung des Aussehens der Webseite entwickelt haben, sollten Sie die Gliederung erstellen. Mit Gliederung ist eine hierarchische Sortierung der Inhalte gemeint, wobei es wie in einem Text Überschriften und Unterüberschriften geben kann, allerdings sollten Sie diese auf ein Wort reduzieren. Aus dieser geordnete Inhaltsliste entsteht in den nächsten Schritten die Seitennavigation. Auch den Schritt der Erstellung einer sinnvollen Navigation für eine Website haben wir im goneo Know-how-Bereich beschrieben.

Sie können für jede einzelne Webseite ein DIN A4 Papierblatt nutzen, um die Webseiten skizzenhaft vorzuzeichnen. Im oberen Bereich befinden sich Titel und Hauptnavigation. Ein anderer Teil der Navigation wird üblicherweise am linken Rand angeordnet. In diesem Beitrag zeigen wir schematisch, wie eine Webseite normalerweise aufgebaut ist. Wesentlich ist, dass Sie eine auf jeder Seite identische Navigationsleiste erstellen und den Usern Orientierung bieten. Das Logo wird meist (fast immer) oben links platziert. Es hat sich eingebürgert, dass ein Klick auf dieses Logo immer zur Startseite führt.

Wenn Sie mit diesem Schritt fertig sind, stellt sich die Frage, wie aus der Zeichnung nun webfähige HTML-Dokumente werden. Puristen codieren die Seiten mit einem Texteditor und den HTML-Auszeichnungen. Andere Webdesigner nutzen sogenannte WYSIWYG-Editoren, mit denen man bereits während des Bearbeitens eine Voransicht des Endergebnisses sieht. Diese kümmern sich meistens auch um den inneren Zusammenhalt der Einzelseiten und können automatisch ein Navigationsmenü erzeugen.

Im Prinzip erzeugt man also für jede einzelene Webseite eine HTML-Datei, die über Links miteinander verwoben sind - daher heißt das Gesamtgebilde aller Webseiten ja auch World Wide Web.

Veröffentlichung und Betrieb der eigenen Website

Normalerweise werden Sie Ihre Website am PC entwickeln und wenn Sie fertig sind, hochladen. Eine andere Variante ist, ein Tool wie easyPage zu nutzen. Diese Klasse an Anwendungen kennt in der Regel einen Button oder Menüpunkt "Veröffentlichen". Damit wird die Webseite dann im Internet verfügbar gemacht. Praktisch bedeutet das, der automatisch erstellte HTML-Seitencode wird in viele Dateien auf den Server kopiert.

Mit Hochladen ist der Abspeicherprozess gemeint, also das Transportieren der Daten von Ihrer Festplatte auf den Server, auf den ein Teil der Festplattenkapazität für Sie exklusiv reserviert ist. Zugang zum Server erhalten Sie von uns als Infrastrukturanbieter, als sogenannter Hoster. Als Protokoll verwendet man dafür meistens FTP, das File Transfer Protocol.

Wenn Ihre Website einmal veröffentlicht ist, werden Sie wissen wollen, wer Ihre Seiten besucht hat. Es gibt einige Möglichkeiten, dies in Erfahrung zu bringen. Zum einen gibt es Spezialanbieter, die entsprechende Lösungen bereitstellen, zum Teil auch kostenlos, zum Beispiel Google Analytics. Alternativ dazu können Sie Piwik benutzen, das bei goneo auch als clickStart-Anwendung Teil Ihres Homepage-Pakets ist.

Eine andere Möglichkeit ist es, die Server-Logfiles auszuwerten. Unsere Webserver protokollieren standardmäßig jeden Zugriff, so dass Sie mithilfe geeigneter Auswertungen nachvollziehen können, welche und wieviele Ihrer Webseiten besucht worden sind. Die Möglichkeiten einer Webanalyse sind im goneo Know-how-Bereich beschrieben.


Allgemein anerkannte Konventionen für die Gestaltung einer Website

Grundsätzlich sind Sie in der Gestaltung der Webseiten völlig frei. Es haben sich aber einige Gewohnheiten eingebürgert, die wir hier als Konventionen nennen:

  • Der obere Teil der einzelnen Webseiten wird Kopfbereich genannt. Manche Designer bevorzugen den englischen Begriff Header ohne den formalen Bereich des HTML-Konstrukts zu meinen. Der Header ist in der Regel über alle Seiten des Webauftritts gleich. Typische Elemente es Headers sind ein Logo links oben, ein zentrales Bild oder eine Grafik auf farbigem Hintergrund. Dieses Bild bzw. diese Grafik versymbolisiert Ihre Firma, das Anliegen der Website oder das zentrale Thema. Normalerweise wird man auch den Titel der Website im Header finden. Oft besteht der Header aus einer einzigen großen Grafik, die aus den oben genannten Elementen zusammenkomponiert ist.

  • Direkt unter dem Header (oder sogar als Teil des Headers) erwartet der Webseitenbesucher die Hauptnavigation (auch Headernavigation genannt). Hier bringen Sie die Elemente unter, die die Hauptbereiche Ihrer Website repräsentieren. Diese Navigation ist über alle Seiten identisch. Vergessen Sie nicht, die Startseite mit „Start” oder „Home” zu repräsentieren. Daher kommt übrigens die Bezeichnung „Homepage”.

  • Es gibt verschiedene Ansichten über die Aufteilung der Seite unter dem Header. Gängig sind zwei oder drei Spalten: eine schmale, eine breite zentrale und gegebenenfalls noch eine dritte schmale Spalte. Die breite Spalte bildet den Bereich, der die Inhalte aufnimmt. Hier platziert man gewöhnlich längere Texte, Bilder und wo weiter. In der linken Spalte wird man in der Regel auch eine Navigationsliste finden. Hier können alle Einzelseiten, auch die Unterseiten, direkt angeklickt werden. Die rechte Spalte wird bei vielen Websites für Werbeanzeigen verwendet, teilweise auch Eigenwerbung, die auf vielleicht untergeordnete oder neue Angebote auf der Website hinweist. Besonders Portale, die sich der Aggregation von vielen diversifizierten Inhalten gewidmet haben, neigen dazu, nur kleine Informationshäppchen (Teaser) auf der ersten Seite zu zeigen. Für monothematische Webseiten ist dies aber nicht empfehlenswert.

  • Analog zum Header finden Sie im unteren Bereich der Webseite einen Footer. Dieser Fußbereich ist ebenfalls über alle Einzelseiten gleich und enthält einige typische Elemente wie einen Link zum Impressum (als Websitebetreiber haben Sie normalerweise die Pflicht, im Rahmen eines Impressums mitzuteilen, wer für die Site verantwortlich ist und wie derjenige postalisch oder elektronisch kontaktiert werden kann), Copyrightvermerke oder andere rechtlich notwendige Hinweise.


Einige Worte über die Ausgestaltung und den Umgang mit HTML

Die Umsetzung des Konzepts in eine HTML-Datei, die im World Wide Web verwendet werden kann, geschieht dann mit den bereits erwähnten Programmen wie Dreamweaver oder CoffeeCup und ist gerade für Einsteiger eine mühevolle und zeitraubende Angelegenheit. Einfacher und schneller geht dies mit goneo easyPage, einem Webseiten-Erstellprogramm, das Ihnen in vielen unserer goneo Webhosting-Pakete zur Verfügung steht. Sie müssen in diesem Fall keine Software kaufen oder installieren.

Wenn Sie sich mit HTML näher beschäftigen wollen, ist es ratsam, sich gute Sebstlern-Literatur zum Thema zu besorgen. Die Menge der einschlägigen Bücher ist nicht mehr überschaubar. Öffentliche Bibliotheken sind meistens sehr gut ausgestattet. Möglicherweise ist auch ein Kurs an der Volkshochschule oder ähnlichen Bildungseinrichtungen das Richtigere für Sie. Am Anfang und für eher anspruchslose Websites reicht vielleicht noch die Anwendung des Trial-and-Error-Prinzip, also das einfache Ausprobieren. Dies können Sie durch sogenannte Tutorials und Videoanleitungen, die Sie gratis im Web finden, unterstützen. Dies ist keine schlechte Variante, wenn Sie über genügend Geduld, Ausdauer und Zeit verfügen. Viele Webdesigner der ersten und zweiten Generation haben diesen Weg gewählt, da es seinerzeit kaum Best-Practise-Literatur oder strukturierte Selbstlernkurse gab.

HTML ist in vielerlei Hinsicht erweitert worden. Wesentlich sind Cascading Style Sheets und Javascript, um das Aussehen der einzelnen HTML-Elemente zu definieren beziehungsweise weitere Funktionen zu ermöglichen. HTML ist nämlich nur eine Auszeichnungssprache und kann zum Beispiel keine Berechnungen ausführen. Das und noch viel mehr kann wiederum Javascript, das man als vollwertige Programmiersprache bezeichnen kann.

Um gute und komplexe Websites erstellen zu können, ist viel Erfahrung nötig

Hüten Sie sich vor einen zu hohen Anspruch, wenn Sie zum ersten Mal eine eigene Homepage erstellen. Frustration ist dann nämlich vorprogrammiert. Der Webdesigner ist heute eine Art eigenes Berufsbild. In verschiedenen Ausbildungsberufen wie Mediengestalter oder Wirtschaftsinformatiker wird entsprechendes Wissen vermittelt. Von daher können Sie nicht erwarten, vom Start weg grandiose Webseiten selbst erstellen zu können.

Wenn Sie in überschaubarer Zeit eine Website erstellen wollen, die Inhalte im Prinzip vorhanden sind (Bilder und Texte liegen vor), können wir nur raten, goneo easyPage zu verwenden, da hier ausgehend von professionell designten Vorlagen und individuellen Anpassungen der Farbschemata und Textstile ein eigener Internetauftritt relativ schnell realisierbar ist.

Mit "professionell" ist gemeint, dass die Konventionen, die wir oben ansprachen, in den Vorlagen (auch Templates genannt, umgesetzt worden sind.

Die Einrichtung und der Betrieb einer eigenen Website ist ein immer andauernder Prozess. Websites sind nie fertig. Im Gegenteil: Gute Websites leben von einer permanenten Verbesserung und Aktualisierung der Inhalte. Letzteres hat sogar eine eigene Gattung hervorgebracht, die Weblogs, gewöhnlich auch Blogs genannt. Dies sind mit hoher Frequenz aktualisierte und ergänzte Websites, die sich in der Regel einem Thema mit großem Engagement widmen und dabei gelegentlich erstaunlich viel zur öffentlichen Meinungsbildung beitragen können.

Websites mit Content Management Systemen erstellen

Typische Webseiten haben das Ziel, über ein Unternehmen, eine Person oder eine Organisation zu informieren, Kontaktmöglichkeiten anzubieten und etwas über eine bestimmte Thematik zu berichten.

Da der Aufbau einer Website mit einer von Grund auf zu aufwändig und zeitraubend wäre, um solche eher einfachen Ziele zu erreichen, sind viele Webseitenbetreiber dazu übergegangen, ein Content Management System aufzusetzen und damit eine Website zu realisieren. Ein Content Management System ist eine Anwendung für sich. Der Programmcode eines Content Management Systems muss vom Server ausgeführt werden. Die Inhalte werden in einer Datenbank gespeichert.

Es gibt einige Content Management Systeme, die einer offenen Lizenz unterliegen. Das heißt im Kern, jedermann darf den Code nutzen, verändern und weitervertreiben. Solche Anwendung sind zum Beispiel WordPress, Drupal oder Joomla!. Auch für andere Einsatzbereiche gibt es Open Source Software. Als Beispiel für ein Onlineshopsystem könnte man Magento nennen.

Das Aussehen der fertigen Website wird bei Content Management System über ein Template festgelegt. Diese Vorlage besteht vereinfacht ausgedrückt, aus einem grundsätzlichen HTML/CSS/Javascript-Seitenmodell mit Platzhaltern, in die beim Aufruf der Seite die Inhalte, die in der Datenbank hinterlegt sind, eingefügt werden.

Beim Aufsetzen einer Website mittels Content Management System ist dann eher das Template die designerische und programmiertechnische Herausforderung. Templates lassen sich für die gängigen System aber auch aus anderen Quellen beziehen, teilweise kostenlos, aber auch gegen Lizenzgebühr.

Bei all den Vorzügen, die Content Management Systeme bieten, muss man jedoch bedenken, dass der beherbergende Server leistungsfähig genug sein muss, um die Anforderungen aus dem Internet bedienen zu können. Ist dies nicht der Fall, sind langsame Seitenauslieferungen und sogar Fehlermeldungen die Resultate.

Die Konventionen für eine Website, die wir oben dargestellt haben, werden von den Templates meistens berücksichtigt. Der Betreiber richtet sein Augenmerk dann eher auf die Inhalte, die er in das Content Management System eingibt.

Die Planungsschritte, die wir empfohlen haben, sind auch beim Einsatz eines Content Management Systems nötig: Was soll die Website erreichen? Wer soll angesprochen werden.

Webaffine Technologien und Programmiersprachen

HTML ist eine Auszeichnungssprache, CSS legt das Aussehen fest und mit Javascript kann man vom Browser bestimmte Operationen ausführen lassen. Um mehr Funktionen zur ermöglichen, benötigt man als Webdesigner eine Sprache, mit der man den Server zu weitergehenden Operationen veranlassen kann. Hier kommt PHP ins Spiel. PHP kann man heute als echte Programmiersprache ansehen. PHP lässt sich gut in HTML-Dateien integrieren.

PHP stellt Befehle und Funktionen bereit, um mit Datenbanken zusammenzuarbeiten. In der Web-Praxis verwendet man häufig MySQL. Erst damit wurden leistungsstarke Content Management Systeme wie WordPress, Joomla! oder Drupal möglich.


Noch mehr Infos für Ihre eigene Webseite:

Software zur Erstellung von Websites

Das richtige Hostingpaket finden

Dynamische Websites mit PHP und MySQL

Content Management Systeme