HTML & CSS für Einsteiger

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

Alle Videos des Tutorials HTML & CSS für Einsteiger

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

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


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.

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



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.

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

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

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

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.

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

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.

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

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!

ICONS TEST

/sprites/ui.svg:

alert
apple-pay
apple
arrow-down
arrow-right
arrows
checkbox
checked
chevron-down-small
chevron-down
chevron-left
chevron-right-doble-primary
chevron-right
chevron-up-small
chevron-up
close-cross
close-small
close
cog
complete
copy
eye-lock
eye
facebook-logo
file
form-select-arrow-up
form-select-arrow
google-icon
icon-als-gast-fortfahren_b
icon-anmelden1_b
icon-anmelden2_b
icon-globe
icon-neues-konto-erstellen_b
icon-resize-out
information-icon-button
left-align
letters
like
link-arrow
link
list-icon
lock
mail
medal
moon
notification
open-small
picture
pinterest-2
play
plus-white
quizz
rate
refresh-211
refresh-282
reset
reward
search-thin
search
star
sun
user
warenkorb

/sprites/image-editor.svg:

align-center
align-left
align-right
alignment-center
alignment-left
alignment-right
alignment-vertical-bottom
alignment-vertical-center
alignment-vertical-top
background-test
background
bold
bring-forward
bring-to-front
capslock
change-size
check-point
constrain
copy
crop-image
delete
download
edit-file-name
editable
flip-horisontally
flip-vertically
group-layer
help
hide
italic
justified
layers
line-spacing
lock
not-editable
open-group
paste
redo
rotate
save
send-backward
send-to-back
shape-layer
shapes
show
strike
text-layer
text
translate
underline
undo
unlock
zoom-in
zoom-out

/sprites/paint.svg:

brush
clear
cursors
eraser
escape
full-screen
marker
navigate
pencil
print
refresh
save
spray
zoom-in
zoom-out

/sprites/theme.svg:

001-01
001-02
001-03
001-04
001-05a
001-05b
001-05c
002-05a
3d-square-software-icon-dark
architektur-software-icon-dark
arrows-down-active
arrows-up-active
assets-templates-download-icon-dark
butterfly-answer-icon-dark
category-icon-example
certificate_alternate
certificate_downloaded
certificate_grey
certificate_primary
edit-multiple
edit
facebook
folder
grey-pause
grey-play
grey-stop
icon-als-gast-fortfahren_c
icon-anmelden1_c
icon-anmelden2_c
icon-neues-konto-erstellen_c
icons-cookie
instagram
interests-1
lamp-idea-bulb-smart-icon-dark
linkedin
pinterest
plus
red-cross
reload
toggle-list-active
toggle-list
toggle-on-off-active
toggle-on-off
toggle-single-active
toggle-single
toggle-switch-active
toggle-switch
trash
trophy-inactive
urkunden-zertifikate-software-icon-dark
video-streaming-icon-dark
xing

/sprites/banners.svg:

bild
icons8-google
proven_expert_4eck-tutkit

/sprites/elements-of-design.svg:

annika-hillger
annika-hillger
annika-hillger
annika-hillger_100
annika-hillger_100
annika-hillger_100
blockquote-border-line
icons-svg-log-in
svg-log-in
svg-registration

/sprites/logotypes.svg:

logo-big-colored
logo-big-dark
logo-big-green
logo-big
logo-dark
logo-green
logo-light-grey
logo-light-white
logo-mini-dark
logo-mini-green
logo-mini
logo-payment
logo-small-dark
logo-small-green
logo-small
logo-tutkit
logo
tutkit_pirate-bay
tutkit_voucher_top

/sprites/payment-provider.svg:

apple-pay-2
apple-pay-white
apple-pay
card-bank
card-mastercard
card-paypal
creditcard
g-pay-2
g-pay
google-pay-2
invoice
mastercard
payment-google-pay
paypal-2
paypal
sepa
visa
[]