Eine Webseite erstellen: Das musst du lernen

Wer sich heutzutage im Internet präsentieren will, braucht nicht nur die sozialen Medien. Mit einer eigenen Webseite hat man eine ganz individuelle Präsentation unabhängig der großen Netzwerke wie Facebook, Youtube und Xing.

Egal ob du eine App programmieren möchtest oder einen Kleidungsladen bei dir im Viertel aufmachen willst:

Mit einer Webseite kannst du fremden Besuchern zeigen, was du tust. Wenn du es richtig machst, kannst du sogar mit einer eigenen Webseite Geld verdienen.

Was du alles machen und lernen musst, um deine erste Webseite erstellen und online zubringen erfährst du in diesem Artikel, damit du danach direkt loslegen kannst. Folgende Schritte führt man bei Erstellung der Webseite durch.

  • Von der Idee zum Papier: Vorbereitung
  • Vom Papier zur Webseite: Website programmieren
  • Ab ins Internet: Hochladen und Testen
  • Fortgeschrittene Themen: Weiterentwicklung

Von der Idee zum Papier

Bevor du dich an die Tastatur setzt und alle möglichen Versuche unternimmst, möglichst schnell eine Webseite aufzubauen (wer möchte dieses Thema nicht möglichst schnell hinter sich bringen?), solltest du dir Gedanken zum Inhalt, Struktur und dem Aussehen deiner Webseite machen. Wenn du also deine Idee von einer Webseite hast, starte ein kleines Brainstorming um heraus zu finden worum es gehen soll. Schreib dir auf welche Punkte deinen Besuchern wichtig wären und welches Aussehen deinen Besuchern gefallen könnte, einfach gesagt als getan 😉 Wenn dir das schwer fällt, dann schau dir mal aktuelle Webseiten an und lass dich inspirieren. Dann solltest du dir noch überlegen welche Funktionen auf deiner Webseite zu finden sein sollen. Können sich deine Besucher registrieren? Können diese nur Informationen abrufen? Sollen Inhalte kommentiert oder erstellt werden können? Je mehr spezielle Interaktionen du deinen Besuchern bieten möchtest, umso komplexer wird die Programmierung. Ist deine Webseite „lediglich“ eine Visitenkarte und Verkaufspräsentation ist der Aufwand überschaubarer. Hast du deine Idee etwas konkretisiert, geht es los mit dem Konzept: Lege ein konkretes Thema, die Art deiner Inhalte und die Inhaltstruktur fest. Der Benutzer sollte möglichst schnell die richtigen Informationen finden können, denn heutzutage dauert es nur Sekunden bis ein Webseitenbesucher deine Webseite verlässt, da er nicht das richtige findet. Wenn du das erste Mal eine Webseite erstellst, fang klein an. Dein Projekt kannst du nach und nach immer größer werden lassen. Starte mit ein bis zwei Seiten und baue deine Seite immer größer je mehr du lernst. Dann geht es an das Design. Du wählst die Farben und das Layout deiner Webseite, sowie die Navigation. Das alles skizzierst du auf einem Papier (man kann auch Software dafür verwenden, aber für den Anfang ist Papier wirklich einfacher). Das Ergebnis sieht ungefähr so aus:

Konzept & Design um eine Webseite erstellen zu können

Neben den Überlegungen zum Konzept muss man also auch etwas Kreativität zeigen, wenn du das nicht beim ersten Mal so hinbekommst, dann ist das völlig normal. Hier macht die Übung den Meister. Zum Aussehen dazu wirst du dir noch Gedanken über den Inhalt machen müssen, denn irgendwo müssen ja Bilder und Texte herkommen. Bis hier hin haben wir uns noch nicht mal mit der Programmierung beschäftigt. Aber wenn du mit diesen Punkten durch bist, dann geht’s direkt los.

Vom Papier zur Webseite

Da wir nun wissen, wie unsere Webseite aussehen soll, starten wir nun mit der Programmierung der Webseite. Wenn du am Anfang stehst, hast du sicherlich schon nach „einfachen“ Möglichkeiten gesucht, deine Webseite erstellen zu können. Baukastenprogramme oder Content-Managament-System wie WordPress sind sehr verlockend, wenn man am Anfang steht. Das Problem: Sobald es einmal etwas spezieller wird, stehst du auf dem Schlauch. Aus Erfahrung kann man sagen: Wenn du dich nicht mit dem gelieferten Standard z.B. von WordPress abfinden kannst (gilt übrigens auch für Webseitenbaukästen), wirst du Anpassungen vornehmen müssen.  Aber selbst wenn du nur mit einem simplen Baukastensystem deine Webseite zusammenklicken willst, wirst du nicht drum herum kommen an der einen oder anderen Stelle mit Webtechnologien wie HTML zu arbeiten.
Zack! Und da ist auch schon das erste Fachwort gefallen. Wer zumindest die Grundlagen davon drauf hat wird mit gemeinsam mit den passenden Werkzeugen wirklich schöne Webseiten erstellen können. Der Vollständigkeit halber: HTML steht für Hyper Text Markup Language und erlaubt dir deine Inhalte (du erinnerst dich an den ersten Schritt) als Webseite zu strukturieren und darzustellen. Also eigentlich programmieren wir hier gar nichts: Mit HTML formatierst du quasi deine Inhalte (Texte, Bilder, Layout und Menüs) in einer Art, dass jeder Browser diese richtig anzeigen kann. Aus dem Grund wirst du oft hören, dass man HTML nicht programmiert. Denn eigentlich ist eher so, dass man ein Textdokument wie in Word strukturiert und gestaltet: Allerdings fehlt dir die Oberfläche wie in Word. Um die Funktion von HTML zu erlernen, bietet es sich an einen Einsteigerkurs zu absolvieren. Wenn du also deine Webseite erstellen möchtest, gehst du hier entlang. Mit HTML ist es leider nicht getan. Dazu kommt noch CSS zur grafischen Gestaltung und wenn deine Webseite schön dynamisch funktionieren soll, dann solltest du dazu noch Javascript lernen. Auch wenn sich das nach viel Arbeit anhört: Diese 3er Kombination ist das Beste was du erlernen kannst. HTML, CSS und Javascript, wenn du diese Sprachen einmal gelernt hast, kannst du alles programmieren, was du dir vorstellen kannst. Aber damit hast du erstmal nur die absoluten Grundlagen drauf. Wenn du alleine mit diesen Grundlagen versuchst eine professionelle Webseite zu erstellen, wirst du sehr schnell verzweifeln. Zum Lernen kann man das ausprobieren, aber um eine ernsthafte Webseite zu erstellen, muss man weitere Werkzeuge verwenden bzw. erlernen. Wie bereits erwähnt, mit einem Content-Management-System lässt sich eine professionell wirkende Webseite erstellen, allerdings kommt man um die Grundlagen nicht drum herum. Hast du deine Webseite erstellt, kommt der große Tag diese ins Internet zu bringen. Die fertige Webseite aus der Beispielskizze könnte zum Beispiel so aussehen:

Beispiel fertige Webseite programmieren

Ab ins Internet

Sobald du der Meinung bist, dass deine Webseite nun bereit für das weite Internet ist, willst du diese IRGENDWIE ins Internet bringen. Das Ganze ist natürlich nicht so einfach, wenn man absolut keine Ahnung hat wie das Internet eigentlich funktioniert und was eigentlich so im Internet passiert, wenn man auf eine Webseite surfen will. Das bedeutet, du solltest dir ein paar Grundlagen aneignen, wie das Internet im groben funktioniert. Bis auf Bit und Byteebene ist das Wissen zwar nicht notwendig, aber mit Begriffen wie IP, HTTP, DNS und FTP solltest du etwas anfangen können damit du nicht stundenlang unbedarft Fehler suchst. Damit deine Webseite im Internet erreichbar ist, muss diese im Internet gehostet. Das bedeutet, dass die Dateien und Daten deiner Webseite auf einem Computer (Webserver) im Internet liegen müssen, der diese auf Anfrage an einen Browser senden kann. Damit man diesen einfach erreichen kann, benötigst du zusätzlich eine Domainadresse sowie unsere Webseite die Domain lerneprogrammieren.de hat. Für gewöhnlich muss man sich dafür bei einem Webhoster kostenpflichtig registrieren. Das Hosting kostet in den Basisfällen nicht mehr als 5 € pro Monat, das sind 16 Cent am Tag! Meistens sind sogar noch eigene E-Mailadressen mit der passenden Domain inbegriffen. Das ist schon supergünstig, und es gibt auch kostenfreie Hoster, diese haben allerdings Einschränkungen durch Werbung, oder Domainauswahl. Der eigene Rechner bietet sich dafür nicht an, denn dieser müsste 24/7 eingeschaltet sein und sollte genug Rechenpower sowie eine fette Internetleitung (welche auch 24/7 verfügbar sein muss) haben. Ansonsten ist deine Webseite schneller Offline als dir lieb ist, z.B. Wenn die Internetleitung durch Streaming überlastet ist oder es mal einen Stromausfall gibt. Die Webhoster garantieren dir eine gewisse hohe Verfügbarkeit und sind dafür wirklich günstig. Ehrlich gesagt: Wer keine 60€ im Jahr für Webhosting übrig hat, sollte sich erst einmal um andere Probleme als das Hosting einer Webseite kümmern 😉

Fortgeschrittene Themen

Ist deine Webseite erstmal im Internet, wirst du schnell merken, dass es noch weiteren Anpassungsbedarf gibt. Eine Funktionalität, die du hinzufügen möchtest oder neue Inhalte. Zum Beispiel kannst du mit Javascript deine Webseite schön dynamisch und modern reagieren lassen oder diese sogar zu einer Webapp umbauen, die sogar als App auf einem Handy abrufbar ist. Dann gibt es noch das Thema Backend: Denn sobald du einen Mitgliederbereich, Shop oder ähnliches anbieten möchtest, wirst du eine Stelle haben müssen an der diese Informationen verwaltet und gehalten werden. Mittlerweile kann man dies auch mit der Sprache Javascript hinbekommen, damit muss man zumindest am Anfang nicht auf eine andere Programmiersprache wechseln. Andere beliebte Sprachen für das Backend sind zum Beispiel PHP oder Java. Im Backend erstellt man meist einen Service der Daten für deine Webapplikation annimmt oder liefert. Gespeichert werden die Daten dann in einer Datenbank. Als weitere fortgeschrittene Themen kommen Security und Usability dazu. Bei den fortgeschrittenen Themen kann man eigentlich nie aufhören zu lernen, besonders weil alle paar Monate eine neue Technologie auf den Markt kommt, die alles noch einfacher und schöner macht.

Fazit

Das Ganze wirkt auf den ersten Blick nach viel Arbeit, aber paar Punkte sind innerhalb von Minuten erlernt. Andere Themen sind schnell erlernt aber man muss viel Erfahrung sammeln bevor man dort zufriedenstellende Ergebnisse erhält. Wichtig ist, einfach mal einzusteigen und loszulegen. Wenn man dazu die passenden Kurse verwendet, kann eigentlich nichts mehr schiefgehen. Nochmal kurz zusammengefasst musst du folgende Dinge lernen. Als Orientierung nehmen wir die Übersicht von oben:

  • Von der Idee zum Papier: Vorbereitung
    • Brainstorming: Thema, Art, Inhalte
    • Klein anfangen
    • Design: Farbauswahl und Layout
    • Struktur: Navigation, Menüs, Inhalte (Text und Bilder)
  • Vom Papier zur Webseite: Website programmieren
    • Grundlagen: HTML, CSS, Javascript
    • Werkzeuge: Browser, Entwicklertools, Editor, FTP-Programm
    • Vorlagen und Templates
    • Web-Systeme: z.B. WordPress
  • Ab ins Internet: Hochladen und Testen
    • Funktionsweise des Internets: IP, HTTP/HTTPS, DNS, WWW
    • Webserver und Hosting
  • Fortgeschrittene Themen: Weiterentwicklung
    • Dynamische Webseiten mit Javascript
    • Webapplikationen, Apps und Backend mit Javascript
    • Webservices
    • Datenbanken
    • Security
    • Usability

Die vorgestellten Punkte sind natürlich stark vereinfacht dargestellt und es wurden Schritte weggelassen, die einen Anfänger überfordern würden. Jetzt bist du dran: Lerne Webseiten zu erstellen und schickt mir doch mal deine Webseite per E-Mail zu. Starte doch mit einem Tutorial zur Webseitenerstellung.

Das könnte dich auch interessieren

9 Kommentare
  1. Michael sagte:

    Moin ! Frohes gesundes Neues Jahr ! Sieht alles spitzenmäßg aus !
    1968 mein 1. Compter-Lehrgang ist schon etwas her !
    Warum einige INTERNET-User grottenhaft schlechte Auftritte abliefern, ist mir ein Rätsel !

    Auf geht´s ! HG Michael

    Antworten
  2. WP Fan sagte:

    Super Artikel & interessante Vorgehensweise mit dem Aufzeichnen der Website auf Papier.
    Mache ich im Normalfall auch immer so. Dann verzettelt man sich nachher beim Erstellen
    der Seite nicht, sondern weiß genau was zu tun ist.
    Weiter so!
    LG
    Tina

    Antworten
    • Arek sagte:

      Hallo Tina,
      danke für das Kompliment!
      Das Vorgehen soll einem Anfänger zeigen, wie man startet. Besonders am Anfang hilft es sich die Webseite zu skizzieren und dann in die Bestandteile für HTML zu zerteilen. Später kann man das aus dem Kopf oder benutzt Software zu skizzieren. Welche Tools nutzt du dafür?
      Beste Grüße
      Arek

      Antworten
  3. Webseiten rocken sagte:

    Kann die Vorgehensweise mit Scribbles auf Papier nur empfehlen. Man hat dann ein genaues Bild der eigenen Webseite vor Augen. Dadurch versteht man besser was man eigentlich möchte und programmiert nicht „dem Zufall“ nach. Danke für den tollen Artikel und weiter so.

    Antworten

Trackbacks & Pingbacks

  1. […] hat und wie man vorgeht, wenn man eine Webseite schnell erstellen muss, dazu gibt es noch folgenden Artikel zur Programmierung von Webseiten. Die zweite Frage ging um unseren Testzugang zu lerneProgrammieren.de und war schnell beantwortet: […]

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.