Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Bereits zum jetzigen Zeitpunkt habt ihr sicherlich viel Zeit und Arbeit in die Entwicklung eurer Webseite gesteckt. Angefangen bei der Konzeption über die Gestaltung des Layouts bis hin zu dessen Umsetzung in HTML und CSS. Grund genug also, der Welt eure Webseite nun endlich zu präsentieren. Genau darum geht es in diesem Video-Training. Ich werde euch zeigen, wie ihr die Webseite online stellen könnt. Zunächst erfahrt ihr, wie man den richtigen Provider und das passende Webspace-Paket bekommt. Anschließend werden die Daten dann mit dem zu Recht beliebten FileZilla auf den Server geladen. Und dann, tja dann ist die Webseite tatsächlich online.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Üblicherweise entwickelt man seine Webseite lokal. Dazu legt man sich – das wurde ja bereits hinlänglich gezeigt – eine entsprechende Verzeichnisstruktur an.

Bilder



Diese Struktur ist es letztendlich auch, die man dann online stellt. (Ich gehe hier von einer statischen HTML-Webseite aus. Aber auch, wenn ihr dynamische Webseiten beispielsweise auf Basis von PHP und MySQL entwickelt, könnt ihr das zunächst lokal erledigen. Das Zauberwort heißt dann zum Beispiel XAMPP). Achtet daher unbedingt darauf, dass in euren Verzeichnis- und Dateinamen weder Leer- noch Sonderzeichen enthalten sind. Zudem empfehle ich euch bei diesen Namen eine konsequente Kleinschreibung.

Testet eure Webseite lokal auf Herz und Nieren. Sie sollte tatsächlich weitestgehend fehlerfrei laufen.


 

Der passende Provider

Damit ihr eure Webseite überhaupt online stellen könnt, braucht ihr entsprechenden Webspace. (Ich gehe hier davon aus, dass ihr keinen eigenen Server betreiben, sondern Webspace bei einem Provider anmieten wollt).

Zunächst einmal müsst ihr euch also Speicherplatz bei einem Provider besorgen. Gleiches gilt für eine Domain, also letztendlich die Adresse, über die die Webseite später aufgerufen werden kann. Mittlerweile gibt es zahlreiche Provider, bei denen man kostengünstigen Webspace mieten kann. Ihr solltet bei der Wahl des Providers und des Webspace-Pakets auf die folgenden Dinge achten:

• Mindestens 1.5 Gigabyte Speicherplatz
• 1 De-Domain inklusive
• Normalerweise sollte zumindest PHP unterstützt werden.
• Eine MySQL-Datenbank sollte dabei sein.
• Achtet unbedingt auf unbegrenzten Traffic.

Vor allem der letzte Punkt ist entscheidend, da sich beim Traffic oft echte Kostenfallen verstecken.

Selbstverständlich handelt es sich bei den genannten Dingen nur um wirkliche Mindestanforderungen für kleine Webseiten. Wer eine gut frequentierte Seite betreibt, sollte hier natürlich aufrüsten. Allerdings ist ein späterer Umstieg von einem kleinen auf ein größeres Webspace-Paket eigentlich immer problemlos möglich. Fragt im Zweifelsfall beim Provider vorher nach.

 
Auf der Seite http://www.webhostlist.de/webhosting/vergleich/ könnt ihr explizit nach dem für euch passenden Provider suchen.

Bilder



Die Providerauswahl kann dort auf ganz unterschiedliche Kriterien hin gestartet werden.

Sobald ihr euch für einen Provider entschieden und das Paket ausgewählt habt und eure Wunsch-Domain registriert wurde, kann es losgehen. Vom Provider bekommt ihr alle relevanten Informationen, wie FTP-Zugangsdaten usw., per E-Mail zugeschickt.


 

Die Daten übertragen

Sobald ihr die notwendigen Daten habt, könnt ihr eure lokalen Dateien auf die Webseite bringen. Kontrolliert zuvor aber nochmals eure Dateien und die darin enthaltene Syntax. Vor allem die folgenden Dinge sind entscheidend:

• Kontrolliert, ob alle Hyperlinks und die Bildpfade stimmen. (Vor allem, wenn ihr die HTML-Seiten mit einem WYSIWYG-Editor erstellt habt, kann es passieren, dass hier lokale Pfade verwendet wurden, die dann online nicht mehr stimmen).
• Überprüft die Datei- und Verzeichnisnamen auf Leer- und Sonderzeichen.

Stimmt alles? Dann könnt ihr die Seiten nun online stellen. Dazu stellt ihr eine FTP-Verbindung mit dem Webspace her. Das geht mit jedem beliebigen FTP-Tool. Eines der besten und dazu noch kostenlos verfügbaren dieser Art ist FileZilla, das von der Seite http://www.filezilla.de/ heruntergeladen werden kann.

Bilder



 
Nachdem ihr FileZilla installiert und gestartet habt, ruft ihr Datei>Servermanager auf. In dem sich öffnenden Dialogfenster klickt man auf Neuer Server.

Bilder



 
Im rechten Fensterbereich müssen die FTP-Daten eintragen werden, die man von seinem Provider bekommen hat. Das könnte beispielsweise folgendermaßen aussehen:

Server = www.dein-benutzername.de
Servertyp = FTP-File Transfer Protocol
Verbindungsart = Normal
Benutzer = ftp_sdfsdfsfd@dein-benutzername.de
Passwort = Dein Passwort

Hier müssen die FTP-Daten angegeben werden. Fragt ggf. noch einmal bei eurem Provider nach.

Mit Verbinden wird die Verbindung zum FTP-Server hergestellt.

Ich gehe an dieser Stelle der Einfachheit halber davon aus, dass ihr eure Webseite direkt in das Wurzelverzeichnis des Webauftritts kopiert. Zu erkennen ist das Wurzelverzeichnis am vorangestellten Schrägstrich.

Bilder



 
Der Vorteil dieser direkten Variante: Ohne weitere Einstellungen ist die Webseite dann unter http://www.deine-domain.de/ erreichbar. Ihr müsst also keine Umleitung o.Ä. einrichten.

Bei vielen Providern liegen im Wurzelverzeichnis standardmäßig bereits die beiden Verzeichnisse cgi-data und cgi-bin. Und genau auf diese Ebene kopiert man sämtliche Verzeichnisse und Dateien aus der lokalen Umgebung. Sucht dazu im linken oberen Fensterbereich von FileZilla nach den lokalen Dateien.

Klickt die Dateien und Verzeichnisse an, in denen die lokalen Daten liegen.

Nun braucht man nur noch die Dateien und Verzeichnisse zu markieren, die im unteren Fensterbereich zu sehen sind. Anschließend klickt man die markierten Verzeichnisse/Dateien mit der rechten Maustaste an und wählt Hochladen.

Bilder



 
Die Daten werden jetzt auf den Server geladen. Achtet darauf, dass tatsächlich alle Dateien übertragen wurden. Sollte es Probleme beim Hochladen einzelner Dateien geben, könnt ihr das im unteren Fensterbereich von FileZilla erkennen.

Sobald alle Inhalte auf dem Server liegen, könnt ihr mit dem Testen der Webseite beginnen. Überprüft vor allem, ob alle Bilder vorhanden sind und die Verlinkungen stimmen.


Ende und Fazit

Damit sind wir am Ende dieser HTML-CSS-Reihe angelangt. Was ihr mitgenommen haben solltet, sind die grundlegenden Schritte, wie sich Webseiten auf Basis von HTML und CSS erstellen und dann auch tatsächlich der Öffentlichkeit präsentieren lassen. Klar geworden sein sollte vor allem Dingen aber eines: Eine Webseite zu erstellen, ist ein langwieriger Prozess. Dieser beginnt beim Entwurf, setzt sich über die eigentliche Web-Entwicklung fort und endet beim Upload und der Kontrolle der Webseite. Und nun wünsche ich euch viel Erfolg mit eurer neuen Webseite!

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 19:26

Vielen Dank für das Tutorial.

Portrait von Kiasa
  • 08.06.2015 - 08:28

Vielen herzlichen Dank für die ganze Serie. Sie war sehr lehrreich, informativ und super erklärt. :)

Portrait von Kundentest
  • 26.04.2015 - 22:59

Herzlichen Dank für die informationsreiche Serie.

Portrait von fe_web
  • 26.04.2015 - 18:07

Danke für dieses Tutorial und alle vorherigen - Toll und lehrreich gemacht. MfG

Portrait von BOPsWelt
  • 26.04.2015 - 16:18

Vielen Dank für das Tutorial.

Portrait von MARIA52
  • 26.04.2015 - 16:03

Vielen Dank für das Tutorial.

Portrait von Haim
  • 26.04.2015 - 14:21

Herzlichen Dank für dieses super aufgebaute Tutorial! Da steckt viel Arbeit dahinter. DANKE.

Portrait von nikita2425
  • 26.04.2015 - 14:05

Vielen Dank für das Tut!

Portrait von Caesarion2004
  • 26.04.2015 - 13:44

Vielen Dank für das informative Tutorial.

Portrait von rocking_sid
  • 26.04.2015 - 13:33

Vielen Dank für das Tutorial!

Portrait von dlieb
  • 19.04.2015 - 19:09

Vielen Dank für Teil 48.

Portrait von ray2013
  • 18.04.2015 - 22:52

Danke für das Tutorial

Portrait von Domingo
  • 18.04.2015 - 11:54

Danke für das Video.

Portrait von suzana
  • 18.04.2015 - 11:13

Vielen vielen Dank für diese informative Videos und Tutorials!

Portrait von Caesarion2004
  • 18.04.2015 - 10:56

Vielen Dank für das informative Videotraining.

Portrait von nikita2425
  • 18.04.2015 - 10:25

Vielen Dank für diese Tutorials und Videos. Es war sehr lehrreich für mich. Danke! glg.

Portrait von Dineria
  • 18.04.2015 - 10:14

Danke für die komplette Reihe, habe noch so manch Neues mitgenommen! :-)

Portrait von Kundentest
  • 18.04.2015 - 09:09

Herzlichen Dank für die sehr informative Videoserie.

Portrait von MARIA52
  • 18.04.2015 - 08:06

Vielen Dank für den weiteren Teil der Tutorialreihe.

Portrait von fe_web
  • 18.04.2015 - 07:44

Super - diese Tutorialreihe und so auch dieser Teil davon sind toll und sehr lehrreich gestaltet. Vielen Dank

x
×
×