Einführung in die Webprogrammierung

Anatomie einer Webseite

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ordnung ist das halbe Leben – das gilt auch für Webseiten. Versuchen Sie, beisammenzuhalten was zusammengehört: z.B. alle Bilder in einen eigenen Bildordner, CSS-Dateien in einen CSS-Ordner.

Transkript

Im Folgenden möchte ich Ihnen etwas über die Anatomie von Webseiten erzählen. Das mag jetzt vielleicht etwas seltsam klingen. Der Hintergrund ist der, dass Webseiten nicht alles in einer Datei speichern, was Sie dann sehen, wenn Sie diese Webseite aufrufen. Es ist in Wriklichkeit ein Zusammenschluß von einzelnen Doumenten, die mit einander verlinkt sind. Das ist die eine Geschichte. Und die andere Geschichte ist, dass jetzt Bilder nicht direkt in einer Webseite liegen, sondern erst auf der Webseite aufgerufen werden. Bilder liegen woanders. In meinem Fall ist es hier in einem Ordner, den ich "Pics" genannt habe. Da liegen meine zwei Bilder. Und genau verhält es sich mit einer zweiten Ressource, die ich gerne gesondert unterbringe. Und das ist CSS. Also ich habe hier einen eigenen Ordner für meine CSS-Dateien - In diesem Fall sind es zwei - und so ist es für mich leichter später wiederzufinden: Welche Sachen halten sich wo versteckt? Das ist eine statische Seite. Eine statische Seite ist prinzipiell sehr übersichtlich. Sie könnte hier noch einen dritten Ordner haben, wo alle JavaScript-Dateien liegen, das war es dann aber auch schon. Wichtig ist, dass jeder Webauftritt eine Index-Seite hat. Entweder Index oder früher hießen sie Default-HTML, aber Index ist in der Zwischenzeit bedeutend gäginger geworden. Und diese Index-Seiten sind quasi die Startseiten eines Webauftritts. Wenn dies hier das Wurzelverzeichnis von dem Projekt Gartenfreunde ist, wie Sie hier sehen können, dann ist der Index die Seite auf der Sie landen, wenn Sie die Seite aufrufen ohne zusätzlich schon auf eine bestimmte Seite zu wollen. Ich habe das hier schon einigermaßen vorbereitet. Ich habe hier meinen Aufruf von meinem Projekt Garten Freunde ohne Angabe einer Seite und wenn ich diese Seite neu lade, dann lande ich hier genau auf meine Index-Seite. Das ist die Seite, wenn sonst nichts gesagt wird, auf die der Server zurück hüpft und diese Seite anzeigt. Index-Seiten sind normalerweise schon da bevor Sie überhaupt mit dem Arbeiten anfangen. Das heißt, jeder Webhost hat eine klassischen Startseite, die dort liegt bis Sie diese durch eine andere ersetzen. Und wenn ich jetzt in mein absolutes Wurzelverzeichnis gehe, So habe ich hier noch meine alte Index-Seite von meinem Webhost liegen für den Fall, dass ich sie noch einmal brauchen sollte. Ich habe jetzt nicht nur so eine statische Seite für Sie, sondern ich habe hier zum Beispiel eine Worpress-Installation. Die wirkt schon etwas umfangreicher. Das Spannende hier ist, dass wir es nicht nur mit HTML-Seiten zu tun haben, sondern hauptsächlich mit PHP-Seiten. Das sagt aber nichts anderes aus, als dass dieser Webauftritt über PHP mit realisiert wird und damit dem Webserver klar ist, dass er PHP mit ausliefern muss, gibt es hier eine andere Endung. Zudem handelt es sich hier um ein Content Management System und es gibt es keine richtigen X-trigen Seiten im Großen und Ganze Hier werden die Seiten in dem Augenblick zusammen gefügt, in dem der Benutzer die Seite aufruft. Und nichts desto trotz habe ich auch hier eine Index-Seite nur ist es in diesem Fall eine Index-PHP. Spannend ist auch, dass es normalerweise Systemdateien gibt oder Dateien, die die Möglichkeit bieten Systemeinstellungen zu erweitern. Das sind zum Beispiel sogenannte HTX-Dateien. HTX-Dteien können Sie so lassen, wie sie sind. Sie brauchen nichts großartig damit machen bevor Sie nicht genau wissen was Sie tun. HTX stellen Erweiterungen von Konfigurationen des Webservers dar und sind normalerweise bezogen auf meinen Webauftritt. Dort hinein kann ich zum Beispiel Berechtigungen packen oder Benutzererlaubnis packen. Genau so wie HTX_Dateien vorgegebene Dateien sind, gibt es fix-fertige Dateien, die vom Server aufgerufen werden, wenn etwas zum Beispiel nicht erlaubt ist, wenn ich nicht zugreifen darf oder wenn eine Seite nicht gefunden wird und auch diese Seiten liegen in meinem Fall in einem eigenen Ordner. Der heißt hier "error". Wenn ich in diesen "Error" -Ordner hinein schaue, dann habe ich hier von meinem Webhoster automatisch generierte, vorgefertigte Seiten, die dann eben aufgerufen werden. Das können wir uns auch gleich anschauen. Nämlich diese "403_forbidden" -Seite, die kommt zum Einsatz, wenn jemand versucht die Seite aufzurufen für die er keine Berechtigung hat und das können wir nachspielen. Sie haben gesehen, dass meine Garten Freunde einen eigenen Ordner haben, in dem meine Bilder liegen. Der Ordner heißt "Pics". Wenn ich nun versuche den Inhalt dieses Ordners aufzurufen, bekommen ich genau diese "forbidden" -Seite. Diese wird jetzt vom Server ausgegeben und ist in meiner Webseite mit integriert. Ich kann die natürlich nehmen und durch eigene Seiten ersetzen. Sie sind prinzipiell vorhanden und können eingesetzt werden. Lange Rede kurzer Sinn! Die Anatomie von Webseiten wird dadurch bestimmt, dass es einen hierarchischen Aufbau gibt und dass es wirklich von Vorteil ist, wenn man versucht möglichst gründlich Ordnung zu halten. Das heißt alles was auf einer Ebene liegen sollte, sollte auch tatsächlich auf einer Ebene liegen, also die ganzen Seiten hier. Und Ressourcen sollten gut verpackt sein in extra Ordner sein, damit Sie den Überblick nicht verlieren. Und wenn Sie diese grundlegenden Regeln beachten, können Sie sich später auch wieder in einer Webseite zurecht finden. Lange nachdem Sie daran gearbeitet haben

Einführung in die Webprogrammierung

Tauchen Sie ein in die vielfältige Welt von Webdesign und -entwicklung und lernen Sie die wichtigsten Technologien, Programmiersprachen und -tools kennen.

2 Std. 46 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!