Eine Webseite die im Internet aufgerufen werden kann besteht aus ein paar einfachen Komponenent. Diese möchte ich hier kurz vorstellen, um ein besseres Verständnis für das Thema zu bekommen.
- Computer oder Laptop zum Erstellen der Seite
- Editor, IDE oder WYSIWYG Editor
- Grundkentnisse in HTML
- Browser
- Server/Hosting mit Domain
- FTP Software
Eine moderene Webseite besteht zudem aus mehreren zusätzlichen Komponenten, wir CMS, HTML mit CSS, PHP und meist auch einer Datenbank mit SQL Abfragen (z.B. MySQL) um die Webseite interaktiv gestalten zu können.
Ich will mich hier aber auf die absoluten Grundlagen konzentrieren um das Thema einfacher zu Gestalten und am Ende besser verstehen zu können.
Computer oder Laptop zum Erstellen der Seite
Hier reicht ein einfacher Laptop der auch für Office Anwednungen genutzt werden kann. Ich persönlich arbeite lieber an einem großen Bildschirm und einem Rechner mit lieber etwas zu viel, als zu wenig Leistung. Das macht das Arbeiten an sich einfach leichter, weil der Rechner nicht so schnell an seine Überlastungsgrenze kommt und generell schneller arbeitet.
Editor, IDE oder WYSIWYG Editor
Eine Webseite ist im Grunde nichts anderes als eine ganz einfache Textdatei mit der Endung .htm/.html. Um diese zu bearbeiten reicht es vollkommen aus, einen ganz einfachen Texteditor zu nutzen, z.B. Notepad oder Editor von Windows. Für größere Arbeiten besser geeignet sind allerdings Editoren, die auch HTML erkennen und deren Befehle entsprechend formatiert darstellen. Atom ist z.B. dafür sehr gut geeignet.
Es gibt dann noch sogenannte IDEs. IDE steht für Integrated Development Environment, auf Deutsch, Integrierte Entwicklungsumgebung. Ein bekanntes Open Source IDE ist z.B. NetBeans. Diese Programme sind sehr Umfangreich, unterstützen mehrere Programmiersprachen und haben einige Features um das Programmieren, vor allem von größeren Projekten, zu vereinfachen.
Dann gibt es noch sogenannte WYSIWYG Editoren. WYSIWYG steht für, What You See Is What You Get, auf Deutsch, was du siehst ist was du bekommst. Das sind Editoren in denen man eine Webseite rein grafisch erstellen kann, ähnlich wie Dokumente in MS Word oder LibreOffice Writer. Man muss das HTML nicht selbst bearbeiten. Hört sich klasse an, funktioniert aber in der Praxis, aus verschiedenen Gründen nicht immer wirklich gut und zuverlässig.
MS Office oder andere Textverarbeitungsprogramme sind übrigens nicht geeignet. Man kann die erstellten Dokumente zwar auch als HTML Dateien abspeichern, die Darstellung lässt allerdings zu Wünschen übrig.
Grundkentnisse in HTML
Was in die .html Datei dann geschrieben wird nennt man, HTML, Hyper Text Markup Language. auf Deutsch, Hypertext Auszeichnungssprache. Wenn man diese Datei dann in einem Browser öffnet, werden die Elemente und Tags von HTML, vom Browser interpretiert, der dann die Inhalte dementsprechend darstellt.
Ein ganz einfaches Grundgerüst für eine HTML Datei sieht folgerndermaßen aus:
<!DOCTYPE html>
<html>
<head>
<title>Titel der Webseite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Dies ist ein Kommentar. Kommentare werden im Browser nicht angezeigt. -->
</head>
<body>
<p>Hello World!</p>
</body>
</html>Diesen HTML Quellcode, könnt ihr z.B. einfach kopierne und in eine einfache Textdatei einfügen. Die Dateiendung dann auf .html abändern und das ganze in euerem Browser öffnen. Da seht ihr dann – Hello World! – stehen. Voilá, das ist eure erste Webseite :).
Browser
Der Browser ist besonders wichtig, denn ohne kann man nicht überprüfen wie die Webseite oder Änderungen der Webseite wirklich aussehen. Browser interpretieren HTML zum Teil unterschiedlich, wer aber mit Mozilla Firefox oder Google Chrome arbeitet, bekommt relativ wenig Probleme. Webdesigner und Entwickler haben meist eine gnaze Palette an Browsern installiert. Microsoft Edge, Firefox, Chrome und Opera sind die bekanntesten.
Früher gab es noch Netscape Navigator und den guten alten Internet Explorer, der tatsächlich sehr oft HTML falsch oder einfach anders als die anderen Browser interpretiert hat.
Server/Hosting mit Domain
Ok jetzt haben wir also unsere erste kleine „Hello World!“ Webseite. Wie bekommen wir diese allerdings ins Internet, so dass diese auch meine Freunde und Kollegen anschauen können.
Dafür benötigt man Webhosting, angeboten von einem Webhoster. Hostinganbieter machen im Grunde nichts anderes als Speicherplatz, auf deren Server, zu vermieten. Ein Server ist im Grunde nichts anderes als ein Computer der ständig mit dem Internet verbunden ist und natürlich auch dafür optimiert ist Webseiten anzuzeigen.
Man bekommt vom Webhosting Anbieter neben dem Speicherplatz für die Webseite (Webspace) außerdem eine Domain unter welcher der Speicherplatz im Internet zu finden ist. Dies kann eine eigene Domain sein, wenn diese aber noch nicht vorhanden ist bekommt man meist eine etwas kompliziertere Internetadresse, z.B. http://meinekundennummer.webhoster.serverxy.com. Diese Internetadresse wird dann im Browser eingegeben und man deinen Webspace sehen.
Eine eigene Domain ist da natürlich schöner. Diese bekommt man vom Webhoster im Paket oder man muss sie zusätzlich dazubestellen. Die Preise variieren von ca. 10,-€ bis 40,- € im Jahr je nach Domainendung kann es auch mal mehr werden.
Vom Webhoster bekommt man dann Zugangsdaten um sich dort einzuloggen und Dateien der Webseite auf den eigenen Webspace hochzuladen. Dies macht man mit dem sogenannten File Transfer Protokoll.
FTP Software
FTP steht für File Transfer Protokoll, auf Deutsch, Dateiübertragungsprotokoll und ist eine Schnittstelle um Dateien vom eigenen Computer auf einen mit dem Internet verbundenen Server zu übertragen.
Vom Webhoster bekommt man hierfür Zugangsdaten. Diese gibt man im FTP Programm ein und dann bekommt man eine Dateiübersicht ähnlich wie auf der eigenen Festplatte im Explorer. Nur ist die Übersicht jetzt nicht die eigene Festplatte sondern die des Webspaces.
Die meisten FTP Programme zeigen Standardmäßig den eigenen Rechner links und den Server rechts an. Per Doppelklick, oder Drag and Drop mit der Maus, lassen sich Dateien nun ganz einfach auf dem Server ablegen, überschreiben oder herunterladen.
Das aktuell bekannteste FTP Programm ist FileZilla. Es ist Open Source, kostenlos und erhält regelmäßige Updates.
Sobald man nun die Dateien vom lokalen Rechner per FTP auf den Server hochgeladen hat, sind diese auch unter der eigenen Domain bzw. der von Hoster zur verfügung gestellten Internetadresse abrufbar. Online ist eure erste Webseite :).
Wichtig: Die erste HTML Datei die in einem Ordner oder der Domain der Webseite aufgerufen wird, ist fast immer, wenn nicht anders auf dem Server konfiguriert, die Datei mit dem Namen index.html. D.h. wenn ihr eine Webseite erstellt, dann muss der Dateiname der Startseite der Webseite index.html sein.
Wenn euch die kleine Einführung gefallen hat, dann lasst doch einen Kommentar da. Ich würde mich freuen 🙂
