Der Weg zur eigenen Website (Ohne KI)
Jeder von uns nutzt fast täglich Websites. Egal ob es um das Abrufen von Informationen, das Austauschen untereinander oder nur um das Totschlagen von Zeit geht. Websites spielen eine wichtige Rolle im Internet und sind nicht mehr wegzudenken. Neben zahlreichen angebotenen Services oder der Vermarktung von Produkten durch große Firmen können Websites auch von kleinen Gruppen oder Privatpersonen betrieben werden, beispielsweise um ein eigenes Portfolio zu erstellen oder Beiträge in einem eigenen Blog mit der Welt zu teilen.
In diesem Beitrag geht es darum, wie man an eine eigene Website kommt und was dafür erforderlich ist, auch ohne Erfahrung in diesem Bereich zu haben.
Disclaimer
Der Beitrag richtet sich an Personen, die sich mit dem Thema noch nicht beschäftigt haben. Ich werde nicht auf alle technischen Details eingehen sondern auf leicht verständliche Beispiele zurückgreifen.
Wieso brauche ich eine Website?
Neben großen Firmen erkennen immer mehr Privatpersonen den Nutzen einer eigenen Website. Dabei kann es sich um die eigene digitale Visitenkarte, eine Linksammlung oder einfach um eine Weiterleitung an andere Seiten handeln. Aber welchen Zwecken dient eine Website denn eigentlich?
Domain und Webhosting
Eine Webseite lässt sich von überall aus aufrufen. Damit dies möglich ist, müssen gewisse Voraussetzungen erfüllt werden:
- Die Website muss bereitgestellt werden (Webserver)
- Die Adresse zu deiner Seite muss bekannt sein (Domain)
Der Webserver und das Webhosting
Ein Server ist im Grunde genommen ein Computer, der sich im Internet befindet und von überall aus angesprochen werden kann. Der Webserver ist auf das Bereitstellen von Webseiten ausgelegt. Wie ein Dateiordner bestehend aus Dokumenten, auf die von überall aus zugegriffen werden kann. Man spricht hierbei von Webhosting.
Ein Webserver übernimmt in der Regel folgende Aufgaben:
- Bereitstellung des Speicherplatzes für deine Website - Er ist das physische Zuhause deiner Seite
- Alle benötigten technischen Voraussetzungen, um deine Website erreichbar zu machen
Viele Webhosting Anbieter bieten zudem weitere Dienste wie eigene Mail-Adressen, fertige Software-Installationen und direkten Support an.
Dieser Beitrag dient als Informationsquelle und nicht, um Produkte zu verkaufen. Allerdings möchte ich hier auf einen Web-Hosting Anbieter verweisen, mit dem ich seit Jahren sehr zufrieden bin. Das Unternehmen Manitu bietet Webhosting mit vielen Sonderfeatures an und ist zudem sehr günstig im Vergleich zu anderen Anbietern: zu Manitu
Aufbau einer Website
Eine Website lässt sich mit einem Dokument vergleichen, welches von überall aus aufgerufen werden kann.
1. HTML - Die Struktur
HTML (Hypertext Markup Language) ist die Auszeichnungssprache des Internets. Sie definiert die Struktur deiner Website. Mit HTML sagst du dem Browser: „Dies ist eine Überschrift“, „Dies ist ein Absatz“ und „Hier soll ein Bild angezeigt werden“. Ohne HTML gäbe es keinen Inhalt, nur eine leere Seite.
<body>
<h1>Dies ist eine Überschrift</h1>
<p> Dies ist ein Absatz</p>
<button type="button">Click Mich!</button>
</body>Neben der Struktur sagt HTML auch, welche weiteren Dateien für die Darstellung und Funktion der Website benötigt werden und wo diese zu finden sind.
2. CSS - Das Aussehen
Eine reine HTML-Seite sieht erstmal sehr nüchtern aus. Standardmäßig wird das Aussehen der Elemente durch den Browser festgelegt, was optisch meist kein Highlight ist. Hier kommt CSS (Cascading Style Sheets) ins Spiel. Mit CSS lassen sich nahezu alle Eigenschaften anpassen, die das Aussehen beeinflussen. Hierzu zählen zum Beispiel die Positionierung auf der Seite, die Farbe der Elemente, die Seitenränder und die Schriftgröße.
Ohne CSS
Mit CSS
3. JavaScript - Die Logik
Die Website ist aufgebaut und sieht auch ansprechend aus. Damit die Schaltflächen und dynamischen Inhalte funktionieren, wird JavaScript benötigt. JavaScript sorgt für die Funktion und Logik der Website. Es können beispielsweise Aufgaben ausgeführt werden, wenn der Nutzer auf einen Knopf drückt, oder die Seite durch interaktive Elemente ergänzt werden.
const meinButton = document.getElementById('button1');
meinButton.addEventListener('click', () => {
meinButton.innerText = "Text durch JS geändert!";
});Wie erstelle ich eine Webseite?
Jetzt haben wir die einzelnen Bestandteile einer Website geklärt. Wie geht es aber jetzt weiter? Eine Website kann auf verschiedene Wege erstellt werden. Sehen wir uns die geläufigsten Wege und Möglichkeiten einmal an.
Website-Baukasten
Einer der einfachsten und anfängerfreundlichsten Wege, eine Website zu erstellen, ist mithilfe einer der zahlreichen Baukästen. Hierbei handelt es sich um Software (meist Online direkt im Browser), welche das Erstellen der Seite über Drag & Drop und anhand von Design-Vorlagen kinderleicht macht. Die meisten Hosting-Anbieter (z.B. Manitu.de) bieten diese Baukästen gratis zu ihren Webhosting Paketen an. Man spricht auch von WYSIWYG-Editoren (What You See Is What You Get). So wie die Seite im Editor aussieht, sieht sie am Ende auch für andere aus.
| Vorteile | Nachteile |
|---|---|
| Kinderleicht und grafisch | Wenig Flexibilität |
| Meistens kostenlos | Abhängigkeit zum Anbieter |
Content Management System
Ein CMS-System ist eine Software, die auf einem Webserver installiert ist. Eines der bekanntesten CMS-Systeme ist Wordpress. Diese Systeme sind gerade bei Bloggern und kleinen Firmen sehr beliebt, da sie tausende fertige Designs (Themes) anbieten und das Erstellen von Seiten oder Posts ganz einfach durch den Browser in Klartext erfolgt. Zudem sind sie meistens kostenlos und durch Plugins stark erweiterbar.
| Vorteile | Nachteile |
|---|---|
| Grafisch und einfach zu bedienen | Höhere Einarbeitungszeit |
| Kostenlos und erweiterbar | Initiale Einrichtung notwendig |
| Für professionelle Seiten geeignet | Kann komplex werden |
Selbst programmieren
Wer sich bereits mit der Programmierung etwas auskennt und gerne uneingeschränkte Freiheiten bei der Gestaltung und Umsetzung seiner Website hat, kann diese selbst programmieren. Hierbei werden die HTML-Dateien zusammen mit JS und CSS selbst geschrieben und auf den Server hochgeladen. Viele Texteditoren (z.B. VS-Code) bringen zahlreiche Plugins mit, die eine Programmierung und das Testen der Seite stark vereinfachen.
| Vorteile | Nachteile |
|---|---|
| Volle Kontrolle über deine Seite | Erfordert Entwicklungserfahrung |
| Kostenlos und einzigartig | Kein WYSIWYG - Textbasierte Programmierung |
| Für einfache und professionelle Seiten geeignet | Eigenes Routing und eigene Logik erforderlich |
Die Veröffentlichung
Nach der Erstellung der Webseite geht es an die Veröffentlichung. Wir haben bereits gelernt, dass ein Webserver im Grunde nichts anderes als ein Ordner mit Dokumenten (den Seiten) ist, die von überall aufgerufen werden können. Wie bekommen wir die Website aber jetzt auf diesen Server?
Je nach Anbieter gibt es hier unterschiedliche Möglichkeiten. In vielen Fällen bieten die Hosting-Anbieter fertige Installationen vom Systemen wie Wordpress an, wodurch das Veröffentlichen neuer Seiten ganz einfach über das Backend, also der versteckte Teil der Seite, auf den nur Du Zugriff hast, erfolgt. Gerade wenn Du die Seite aber lokal auf deinem System erstellt und getestet hast, ist es erforderlich, diese auf den Webserver hochzuladen.
Hierfür nutzt man in der klassischen Webentwicklung einen sogenannten FTP-Zugang (File Transfer Protocol). Hierrüber kannst Du Dateien von deinem System auf den Webserver hochladen. Alles was du dafür brauchst ist ein FTP-Client (z.B. WinSCP) und die Zugangsdaten, die Du direkt bei deinem Hosting-Anbieter erhältst.
Sobald die Seite hochgeladen ist, solltest Du sie über deine Domain erreichen können.
Abschließende Informationen
Dieser Beitrag dient als kleiner Quick-Start-Guide für die Erstellung einer eigenen Website. Neben den aufgezählten Möglichkeiten gibt es noch viele weitere Wege, Websites zu erstellen und zu betreiben. Dies würde aber den Rahmen sprengen. Natürlich muss man sich bei der Veröffentlichung auch mit dem Thema Sicherheit und Datenschutz auseinandersetzen, damit man alle regional geforderten Richtlinien und Gesetze einhält.
Lass es mich wissen, wenn Du Fragen oder Anregungen zu diesem Thema hast. Nur durch dein Feedback kann ich den Inhalt immer weiter verbessern. Vielen Dank!
