Benjamin Peters - Die Homepage Anleitung

Die Homepage Anleitung

ohne Baukasten oder CMS-System

Schritt für Schritt zur eigenen Homepage

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? 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

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

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 Bildbearbeitungsprogrammgenutzt 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-Programmum 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.

Als nächster wichtiger Schritt steht die Entscheidung für einen Domainnamenan. 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 Domainendunggefä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 Webhostingaussuchen. 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.