Das World Wide Web verstehen

HTML-Seiten haben das Internet um einiges zugänglicher gemacht. Davor gab es schon andere Formen der Darstellung von Texten und Bildern im Netz, aber es brauchte erst die Erfindung des World Wide Web (WWW) durch Tim Berners-Lee, damit das Internet für viele Menschen seinen weltweiten Siegeszug antreten konnte. Die Hypertext Markup Language (HTML) hat er dabei gleich miterfunden, genauso wie das Hypertext Transfer Protocol (HTTP). Im WWW kommunizieren Clients mit (Web)servern.

Um zu verstehen, wie diese Konzepte zusammenhängen, habe ich Ihnen einige Videos zusammengestellt, die aufeinander aufbauen.

Client- und Server-Architektur

Das Video erklärt den immer wiederkehrenden Kreislauf der Kommunikation zwischen einem Clientrechner und einem Server. Zentral dabei sind die Begriffe der Anfrage des Clients an den Server (Request) und die Antwort (Response) des Servers an den Client.

Das Thema IP-Adressen und Ports im Themenfeld Netzwerke wird dabei zunächst noch ausgespart. Wir werden uns in einer späteren Einheit noch tiefergehend damit beschäftigen.

Video “Client-Server-Architektur” auf YouTube ansehen

HTTP | Das Hypertext Transfer Protocol

HTML-Seiten werden im WWW vom Server an den Client übermittelt. Eine technische Verabredung, wie das geschehen soll, ist im Hypertext Transfer Protocol (HTTP) festgeschrieben. In den meisten Browsern können Sie in der Adressleiste, am Anfang der URL, sehen, dass die Verbindung vom Client zum Server per HTTP(S) aufgebaut wird.

Ist noch ein “S” hinter dem “HTTP” zu sehen, handelt es sich um eine verschlüsselte Verbindung, die von Dritten nicht abgelauscht werden kann. Webseiten sollten heute nur noch per HTTPS ausgeliefert werden. Die Datenschutzgrundverordnung (DSGVO) schreibt für HTML-Formular HTTPS ausdrücklich vor, damit kritische Daten, die in das Formular eingegeben werden, nicht von Dritten abgelauscht werden können.

Video “Wie funktioniert HTTP?” auf YouTube ansehen

Abfragemethoden des Hypertext Transfer Protocols

Das folgende Video steigt noch mehr in die Tiefen von HTTP ein und erläutert Methoden (GET, POST, PUT, DELETE), die in manchen technischen Kontexten noch wichtig sein werden. Am Ende des Videos werden die sogenannten HTTP-Status-Codes erklärt.

Video “Das HTTP-Protokoll - Ein Überblick” auf YouTube ansehen

Das Web im Zusammenhang

Für die Hochschule vielleicht ein wenig zu albern, aber nach wie vor gut und eindrücklich: Die Maus erklärt das Internet! Ein Klassiker, den ich Ihnen nicht vorenthalten möchte. Darin noch zu sehen und zu hören: Ein analoges Modem. Wer kennt es noch? Im Gegensatz zur Vinylplatte wird es wahrscheinlich keine Renaissance erfahren.

Video “Die Maus erklärt das Internet” auf YouTube ansehen

Video: Grundlagen der Chrome Developer Tools

Jetzt, da Ihre HTML-Dokumente über HTTP ausgeliefert werden, ist es möglich, diesen Netzwerkverkehr ein wenig genauer zu untersuchen. Das gelingt mit den mächtigen Chrome Developer Tools, die in Chrome/Chromium/Beaker auf jeder Webseite eingeschaltet werden können. Auch die anderen Browser Firefox und Safari verfügen über solch ein Entwicklungswerkzeug, allerdings gilt der Chrome/Chromium-Browser als Industriestandard unter Webentwickler_innen. Der Grund dafür liegt darin, dass der Browser von Google herausgebracht wird und Google sehr einflussreich geworden ist, was die Implementierung neuer Webstandards und -funktionen angeht. Was das für die Browserdiversität bedeutet, können Sie bei Rachel Nabors nachlesen.

In einem Video zeige ich die Grundlagen der Chrome Developer Tools und Möglichkeiten, den Datenverkehr zwischen Client und Server zu analysieren.

Video “Grundlagen der Chrome Developer Tools” auf YouTube ansehen

Arbeitsauftrag

Chrome Developer Tools verwenden

• Untersuchen Sie eines Ihrer HTML-Dokumente mit den Chrome Developer Tools.
  • Wählen Sie verschiedene Elemente im HTML mit dem Picker aus.
  • Untersuchen Sie die CSS-Eigenschaften des Elements in dem entsprechenden Panel.
  • Ändern Sie CSS-Eigenschaften durch Ausschalten und Hinzufügen.
  • Zeigen Sie Ihre Webseite in verschiedenen mobilen Ansichten an!
• Untersuchen Sie den Netzwerkverkehr beim Aufruf eines HTML-Dokuments.
  • Zeigen Sie ein HTML-Dokument im Browser an.
  • Öffnen Sie den Network-Tab in den Chrome Developer Tools.
  • Deaktivieren Sie den Browsercache.
  • Laden Sie das Dokument neu, indem Sie die Seite aktualisieren.
  • Schauen Sie sich den Request an (Tab Headers) sowie die Response, indem Sie auf die Zeile mit der geladenen Ressource klicken (z.B. index.html).
  • Recherchieren Sie, was die HTTP-Status-Codes, z.B. 200, bedeuten.