Dieses Tutorial soll einen Überblick über Programme und Services geben, die für die Erstellung einer eigenen Webseite nötig sind und zugleich als Vorlage dienen, seine eigene Webseite aufzusetzen. Eine Gliederung soll helfen, den Überblick zu behalten und direkt zum Thema zu navigieren.

  1. Das Konzept
    …beinhaltet die grafische und inhaltliche Ausrichtung der Webseite.
    konzept

    • Grafik: Das Layout bestimmt das Erscheinungsbild. Aufteilung und Farbgestaltung müssen zunächst erarbeitet werden.
    • Inhalt: Content wie Text, Bilder und Videos müssen die Zielgruppe ansprechen und diesen Menschen ein wirklichen Mehrwert bieten.
  2. HTML & CSS
    …sind die gängige Auszeichnungssprache und Gestaltungsvorlage, die jeder Internetbrowser interpretieren kann.

    • HTML: Einheitliches Standardformat des World Wide Web und muss den W3C-Standards entsprechen.
    • CSS definiert das Aussehen der eigentlich rein textformatierten HTML Dokumente
  3. PHP & MySQL & JS & jQuery
    …erweitern die Funktionalitäten der Webseite, verlangen aber tiefgehende Programmierkenntnisse und werden von vielen Webdesignern beherrscht.
    • Webspace
      …hosten den öffentlich zugänglichen Inhalt, also quasi die Webseite.

      • Domain registrieren oder grabben
      • Webspace mieten
      • Einen Webserver aufzusetzen, entfällt bei der Inanspruchnahme eines Service Paketes

    1. Das Konzept

    Grafik

    Voraussetzungen sind Grundkenntnisse mit Grafikprogrammen. Am besten erlernt man jeweils eins der folgenden Programme in den kommenden Auflistungen. Keine Angst: wer mit PC und Internet halbwegs fit ist, hat in ein paar Stunden durch „learning by doing“ das Wichtigste verstanden. Wer allerdings ganz konkrete grafische Vorstellungen hat, wird um eine gezielte Auseinandersetzung mit den vielzähligen Programmfunktionen nicht herumkommen. Hier ist am meisten Kreativität gefordert und am meisten Spaß angesagt.

    Dort, wo die Farbe intensiver ist, ist die Wahrnehmung des Besucher anfangs höher.

    Klassisches Webdesign Layout

    Der Header ist die Zeile mit dem größten Wiedererkennungseffekt. Hier findet sich der Firmenname oder das Logo.
    Die Navigation ist Pflicht für den Benutzer und für Suchmaschinen. Alternativ kann sie auch rechts platziert werden.
    Der Content nimmt den Großteil der Seite ein. Bilder/Videos und Text sollten in einem Verhältnis 20/80 vorhanden sein.
    Der Footer enthält die wichtigsten Links z.B. auf das Impressum, auf eine Selbstdarstellung oder weitere Webseiten.

    Ein paar Kleinigkeiten sind zu beachten und gelten als Grundlage →

    Inhalt

    Der Content ist technisch nicht aufwendig einzupflegen. Insbesondere Bilder beleben die Seite und sind daher Pflicht, wenn Sie den Webbesucher auf Ihrer Seite halten wollen. Bei Fremdcontent sind allerdings einige rechtliche und suchmaschinenrelevante Aspekte zu berücksichtigen.

    Rechtlich:
    Jeder Webseitenbetreiber muss durch Kauf die Bildrechte an verwendeten Bildern besitzen oder zumindest eine Verlinkung (pixelio) vornehmen. Bei Videos sind die Embedment-Codes des Videoportals einzubinden. Das bloße Kopieren von Bilder sowie Video und Text widerspricht dem Copyright. Ebenso ist die Impressumspflicht zu beachten. Verstöße ziehen Geldstrafen im vierstelligen Bereich nach sich.

    Suchmaschinentechnisch:
    Texte für die Webseite sollten auf keinen Fall abgeschrieben werden, sie müssen einzigartig, also neu geschrieben sein, eine Mindestlänge von 250 Wörtern aufweisen und verschiedene Themen sollten auch auf unterschiedlichen Webseiten zu finden sein.

    Logos

    2. HTML & CSS

    HTML

    Die Skizze oder der „Enwurf am Reißbrett“ wird nun in HTML nach dem Muster <head> <body> umgesetzt d.h. in eine dem Browser verständliche Sprache umgeschrieben. Im <head> können und sollten folgende Elemente definiert werden:

    Im <body> wird der Content durch weitere HTML-Tags platziert. Wie das im Detail funktioniert kann man unter selfHTML einsetzen und erlernen.

    CSS

    Cascading Style Sheets (CSS) ermöglichen es dem Designer, Texte & Bilder etc. zu formatieren und damit das Layout individuellen Wünschen anzupassen. Wie das geschieht, ist in diesem Video veranschaulicht (Vollbild + HD Auflösung einstellen). Stört euch nicht am Schreibfehler in der Überschrift, denn die Anleitung selbst ist verständlich und richtig. Theoretischen Grundkenntnisse für CSS sind auf HTML.net praktisch zusammengefasst.

    3. Webspace & Domain

    Domains registrieren oder grabben

    Domains registriert man am sichersten über die DENIC . Andere Servicedienstleister bieten die Kombination „Registrierung inklusive Webspace“ an (siehe unten).
    Sogenannte Expired Domains eignen sich besonders gut für neue Webseiten, da sie Suchmaschinen bereits bekannt sind und bereits andere Webseiten auf diese Domain verweisen. Nachteilig wäre es, wenn die Domain bei Suchmaschinen „einen schlechten Ruf“ hat. Es gilt also, die Domain zu prüfen. Einen guten Artikel und fachlich sehr versierte Kommentare dazu findet man auf Böserseo.

    Webspace – Alles aus einer Hand von einem Dienstleister

    Mein favorisierter Anbieter für Webhosting ist Hosteurope.de mit Sitz in Köln.

    Webserver

    Das Aufsetzen eines Webservers ist eine Angelegenheit für erfahrene Webanwender. Wer die Service-Dienstleister in Anspruch nehmen möchte, braucht sich nicht noch mit der Installation und dem Aufsetzen eines Webservers beschäftigen. Wer allerdings die dynamische Gestaltung einer Webseite mittels z.B. PHP vornehmen und seine Daten lokal halten möchte, dem sei unter Windows Xampp mit Apache Konfiguration ans Herz gelegt.

    Ein hilfreiches Video für die Einrichtung des Xampp Tools möchte ich euch nicht vorenthalten.


    Alle Programme sollten bei Chip.de eigentlich immer in der aktuellen Version verfügbar sein. Hast du gute Ergänzungsvorschläge, nehme ich diese gern mit auf.

    Ich hoffe, ich euch konnte den Ablauf und die Details beim Erstellen einer Business-Webpräsenz verständlich machen. Dieser Artikel soll nur ein Einstieg in das Thema sein. Wer die Quellen aufsucht, kann tiefer stöbern.

    2 Responses to “Anleitung zum Erstellen einer eigenen professionellen Homepage”

    1. Simon sagt:

      Ich weiß nicht, ob das Absicht war, aber die drei Bildportale sehen der jemenitischen Flagge täuschend ähnlich ;)

    2. […] Lösung: seinen Onlineshop bei einem Webspace-Hoster anmieten. In der Einfachheit liegt aber auch der einzige […]

    Schreibe einen Kommentar

    »