Die Homepage Anleitung

Die Homepage Anleitung

ohne Baukasten oder CMS-System

Schritt für Schritt zur eigenen Homepage

Vorwort

Liebe Leserin, lieber Leser,

mein Name ist Benjamin. Ich begleite dich durch dieses Buch mit dem Ziel, am Ende eine eigene Webseite erstellt zu haben. Unabhängig von Baukästen oder CMS-Systemen. Deine neu erstellte Webseite ist mobil optimiert (responsive Webdesign) und passt sich somit dem Bildschirm deines Smartphones an.

Zum Einsatz kommen hierfür HTML, CSS und PHP. Ich versuche jeden Schritt zu erklären, ohne dabei mit zu vielen Details zu langweilen. Vorkenntnisse sind nicht notwendig. Jeder benötigte Quellcode wird im Buch abgedruckt und kurz erklärt.

Dieses Buch hat ein klares Ziel. Am Ende sollst du deine eigene Webseite erstellt haben und verstehen was du da gemacht hast. Ein „richtiger“ Webdesigner der alle Befehle kennt wirst du allerdings nicht sein.

Warum PHP und nicht nur HTML & CSS? Werden wir im Buch programmieren?

Nein. PHP ist eine Skriptsprache. Wir werden diese dafür verwenden, einige Skriptteile auszulagern um sie später einfacher erweitern zu können. So können wir das Navigationsmenü jederzeit um weitere Unterseiten ergänzen. Mit geringem Aufwand, gleichzeitig auf allen Seiten.

Für wen ist das Buch gedacht?

Mein Ziel ist es, kleinen Handwerksbetrieben (und natürlich auch allen anderen Unternehmern) selbstständig das Erstellen einer einfachen aber stilvollen Webseite zu ermöglichen. Aber auch jeder andere, der eine kleine aber feine Webseite benötigt, ist eingeladen dieses Buch zu lesen.

Ohne Vorkenntnisse? Muss ich wirklich nichts können?

Das ohne Vorkenntnisse bezieht sich auf die Webseitenerstellung. Du solltest ein wenig mit deinem Computer umgehen können. Zum Beispiel solltest du Folgendes können:

1 Einen Ordner erstellen

2 Ein Programm installieren

3 Ein gespeichertes Dokument auf dem PC wiederfinden

Und jetzt legen wir auch schon los.

Inhaltsverzeichnis

1. Was brauchen wir?

2. Domain und Webspace

2.1 FTP Zugang einrichten

3. HTML Grundgerüst bauen

3.1 CSS-Datei erstellen

4. Seitenkopf mit Navigation und Seitenfuss

4.1. Seitenkopf mit Navigation erstellen

4.2 Seitenfuss erstellen

5. Gerüst für den Seiteninhalt erstellen

6. Unterseiten erstellen

6.1 weitere Unterseiten erstellen

7. Weitere interessante Formatierungen des Inhaltes

8. Das Impressum

9. Die Seite ist fertig, was jetzt?

10. Ein bisschen Spielkram

11. Schlusswort

1. Was brauchen wir?

Um die Webseite zu erstellen, brauchen wir ein paar Werkzeuge, die es kostenlos im Internet zum Download gibt.

Als erstes benötigen wir einen Texteditor. Da nutze ich gerne „Proton“. Hierfür gibt es eine Erweiterung, die die Anweisungen (den Syntax) der verschiedenen Programmiersprachen farblich hervorhebt. Dieses erleichtert uns die Arbeit bei längeren Skripten ungemein. Wenn du einen anderen Texteditor bevorzugst, geht das natürlich auch. Wichtig ist, dass du dich wohlfühlst und gut arbeiten kannst. Microsoft Word und OpenOffice sind keine Texteditoren und können nicht verwendet werden.

Für Proton gibt es leider keine eigene Webseite. Wenn du nach „Proton editor“ im Internet suchst,

findest du aber einige Quellen wo du ihn runter laden kannst. Das Programm ist kostenlos.

Als zweites benötigen wir ein Grafikprogramm, mit dem wir bei Bedarf Bilder verkleinern oder zuschneiden können. Hierfür kann so ziemlich jedes Bildbearbeitungsprogramm genutzt werden. Von Profiprogrammen wie Photoshop bis hin zu kostenloser Freeware. Ich nutze gerne „IrfanView“. Das Programm kann im Internet kostenlos runtergeladen werden. Mit IrfanView kann man Bilder verkleinern und zuschneiden. Das ist für unsere Zwecke erst einmal genug.

http://www.irfanview.de/

Als nächstes brauchen wir ein FTP-Programm um unsere Skripte auf den Server hochzuladen. Auch hier kann jedes FTP-Programm genutzt werden. Als Empfehlung schlage ich „FileZilla“ vor. Es ist einfach zu bedienen und kann kostenlos im Internet heruntergeladen werden.

https://filezilla-project.org/

Dort musst du den „FileZilla Client“ runterladen

Wenn du damit fertig bist und einen Texteditor, ein Grafikprogramm und ein FTP-Programm auf deinem Computer installiert hast, können wir auch schon weiter machen.

2. Domain und Webspace

Als nächster wichtiger Schritt steht die Entscheidung für einen Domainnamen an. Er sollte aussagekräftig und gut zu merken sein. Je kürzer und beschreibender der Name ist, desto wertvoller ist die Domain.

Außerdem muss die Entscheidung für eine Domainendung gefällt werden. Für ein Angebot in Deutschland eignet sich „.de“ am besten. Soll die Seite internationales Publikum ansprechen, ist „.com“ eine gute Wahl.

Es gibt noch zahlreiche weitere Endungen, wie zum Beispiel: „.eu“, „.net“ und für jedes Land und mittlerweile auch für einige Städte eigene Domainendungen. Soll dein Angebot für ein österreichisches Publikum sein, so gibt es die Domainendung „.at“. Für die Schweiz „.ch“ für Hamburg „.hamburg“ und so weiter.

Wenn du eine Idee für deinen Domainnamen hast, musst du dir jetzt einen Anbieter für das Webhosting aussuchen. Ich möchte hier keine Empfehlung geben. Es gibt zahlreiche Anbieter die verschiedene Hostingpakete anbieten. Vergleiche vorab das Preis-Leistungsverhältnis und entscheide dich für einen vertrauensvollen Anbieter.

Strato

1&1

HostEurope

United-Domains

One.com

Checkdomain

und viele mehr

Die Liste ist unvollständig und in zufälliger Reihenfolge. Sie enthält Anbieter mit denen ich schon mindestens einmal zusammengearbeitet habe. Du kannst aber auch nach weiteren Hosting Anbietern im Internet suchen. Du wirst wahrscheinlich noch viele weitere Angebote finden.

Hast du dich für einen Anbieter entschieden, kannst du auf dessen Seite checken ob dein Domainname noch frei ist. Hierfür bieten die meisten ein Formular an, wo du einfach nur den Namen eingibst und die verschiedenen Domainendungen mit dem Status „frei“ oder „vergeben“ aufgelistet bekommst. Da viele Namen bereits belegt sind, kann es sein, dass sich die Namensfindung etwas schwieriger gestaltet. Du solltest dir die Zeit hier aber nehmen, da der Domainname im besten Fall „für immer“ ist. Denn ist dein Name erst einmal verbreitet, macht es wenig Sinn, diesen wieder zu wechseln.

Wenn du überhaupt keine Idee hast wie du deine Domain nennen möchtest, schaue einmal im Internet was deine Konkurrenten für Domainnamen haben. Oft bringt das schon eine Menge an Inspiration mit sich. Viele wählen einen Namen der sich aus der Branche und dem eigenen Namen zusammensetzt. Je nach Länge und Lesbarkeit kann die Branche und der Name mit einem Bindestrich getrennt werden.

Hast du einen Namen gefunden der dir gefällt und auch noch frei ist, kannst du ein Webhosting-Paket buchen. Hier gibt es verschiedene Paketgrößen (Speicherplatz, Server-Geschwindigkeit, Anzahl Domains etc.). In unserem Fall ist darauf zu achten, dass PHP und ein FTP-Zugang in diesem Paket verfügbar sind. Zur Sicherheit schaue auch nochmal wie viel Webspace in dem Paket mit drin ist. Allerdings ist in der Regel schon in den kleinsten Paketen über 20 GB Speicherplatz vorhanden. Das ist für den Anfang vollkommen ausreichend.

Hast du ein Paket gefunden in dem alles mit drin ist, kannst du es buchen. Hierfür folge einfach dem Bestellvorgang des Anbieters. Hier gibt es nichts falsch zu machen. Du musst deine Daten eingeben und bekommst am Ende eine Bestätigungsmail mit allen Infos, wie du dich in dein Paket einloggen kannst.

Zur Übersicht hier nochmal aufgelistet was der Server „können“ muss:

PHP // FTP-Zugang // ein paar Gigabyte Webspace

Wundere dich nicht wenn du HTML und CSS nicht in der Liste der Serverfeatures findest. Es wird nicht aufgelistet, weil jeder Webserver HTML Seiten ausliefern kann. PHP muss allerdings auf dem Server extra installiert werden. Außerdem gibt es hier verschiedene PHP Versionen. Deswegen wird PHP und die Versionsnummer angegeben.