Skip to content

World Wide Web

Internet und Kommunikation

Zur Erfolgsgeschichte des Internets beigetragen hat vor allem das World Wide Web, als einer der am häufigsten genutzten Dienste des Internets. Immer mehr werden schon länger existierende Dienste durchs WWW resp. durch eine Web-Anwendung ersetzt. So hat man heute aufs E-Mail nicht nur per E-Mail-Protokoll (über ein E-Mail-Programm), sondern auch über den Browser und eine spezielle Webseite, eine sogenannte Web-Anwendung Zugriff. Doch wie kam das WWW zustande?

Geschichte

Tim Berners Lee (Paul Clarke, CC BY-SA 4.0, via Wikimedia Commons)

Tim Berners-Lee, ein britischer Forscher, der damals im CERN in Genf arbeitete, erstellte 1991 den ersten Webserver, den ersten Webbrowser und die erste Webseite. Man wollte damit Forschungsergebnisse anderen Forscher einfach zugänglich machen – ohne dass diese z.B. per E-Mail nach den Resultaten fragen und man diese dann anschliessend zurückschicken musste.

Die meisten Leute hatten damals gar kein Gerät, welche eine mit Maus bedienbare grafische Benutzeroberfläche bot. Deshalb wurde 1992 ein Text-Browser veröffentlicht: Statt auf Links zu klicken, erhielt jeder Link auf der Webseite eine Nummer die man eintippen konnte. So konnten die wenigen Personen, die überhaupt einen Computer mit Internet-Verbindung hatten, im Web surfen.

Aufgabe

Teste die beiden obenstehenden Links aus:

  • Besuche die erste Webseite mit deinem Browser
  • Versuche andere Webseiten mit dem grafischen Browser von damals zu öffnen.

Standards

Das WWW basierte ursprünglich auf drei Standards:

HTTP
Das Protokoll, mit dem der Browser Informationen vom Webserver anfordern kann
HTML
Die Auszeichnungssprache, die festlegt, wie die Information gegliedert ist und wie die Dokumente verknüpft sind (Hyperlinks)
URI
Der Uniform Resource Identifier als eindeutige Bezeichnung einer Ressource, die in Hyperlinks verwendet wird

Später kamen drei weitere Standards dazu:

CSS
Die Cascading Style Sheets beschreiben das Aussehen und die Anordnung der Elemente einer Webseite, womit der Inhalt von dessen Darstellung separiert wird
HTTPS
Das Hypertext Transfer Protocol Secure ist eine Weiterentwicklung von HTTP, bei dem die Daten verschlüsselt übermittelt werden
DOM
Das Document Object Model als clientseitige Programmierschnittstelle für Skriptsprachen (wie z.B. JavaScript) im Webbrowser

Browser

Browser sind Programme, welche Webseiten herunterladen und darstellen. Wenn der Anwender also z.B. www.gymkirchenfeld.ch in der Adresszeile des Browsers eintippt oder irgendwo einen Link anklickt, dann kontaktiert der Browser den entsprechenden Webserver und verlangt die Webseite. Falls der Server das verlangte Dokument hat, so sendet er es zurück. Der Browser setzt nun Dokumente (HTML-Code, Bilder, CSS, …) zusammen und stellt die Webseite grafisch dar, so dass der Benutzer die Inhalte anschauen kann.

Browser-Icons

Die meisten Betriebssysteme liefern bereits einen Browser mit:

  • Microsoft liefert zu Windows seinen Edge-Browser
  • Apple integriert Safari auf seinen macOS-Geräten
  • auch mobile Geräte haben bereits einen Browser installiert

Allerdings kann man auch selbst einen Browser wählen und diesen verwenden. Die meisten Browser sind frei verfügbar:

Google Chrome
ist integriert in die Google-Welt
hat in den letzten Jahren viele Nutzer gewonnen
Firefox
freier Browser (Opensource)
hat in den letzten Jahren Benutzer verloren
Opera
norwegischer Browserpionier (Tabs, Mausgesten)
heute nur noch wenig weit verbreitet
  • Chrome (72.8 %)
  • Safari (13.5 %)
  • Edge (2.7 %)
  • Firefox (2.5 %)
  • Opera (1.2 %)
  • Andere (7.3 %)
Quelle: https://www.w3counter.com/globalstats.php (Juli 2023)

Aufgabe: Browserumfrage

Mach bei deinem Browser an der Tafel einen Strich hin.
Sollte dein Browser nicht notiert sein, füge ihn hinzu.

Lösung: Browserumfrage
  • Chrome (9 Schüler:innen)
  • Safari (8 Schüler:innen)
  • Edge (5 Schüler:innen)
  • Firefox (3 Schüler:innen)
  • Opera (0 Schüler:innen)
  • Brave (2 Schüler:innen)

Warnung: Der Browser ist eine exponierte Anwendung!

  • Du surfst damit auf dir bekannten und dir unbekannten Webseiten
  • Ein veralteter Browser mit Sicherheitslücken dient als Angriffspunkt für Hacker

Du solltest einen aktuellen Browser verwenden und die dafür verfügbaren Updates immer installieren!

Uniform Resource Identifier

Der URI identifiziert eindeutig eine Ressource (eine Webseite, sonstige Dateien, einen E-Mail-Empfänger, …) im Internet.

Schema

Im folgenden Syntax-Diagramm wird der Aufbau einer URI erläutert.

OmenBreeze via Wikimedia Commons

Der kürzeste URI (im Schema alles oben durch) lautet: schema:path. Die beiden Komponenten schema und path sind also obligatorisch und müssen in jedem URI vorkommen!

Beispiel

Im untenstehenden Beispiel wird ein komplexer URI in seine Bestandteile zerlegt:

plain
        userinfo       host      port
        ┌──┴───┐ ┌──────┴──────┐ ┌┴┐
https://john.doe@www.example.com:123/forum/questions/?tag=networking&order=newest#top
└─┬─┘  └────────────┬──────────────┘└───────┬───────┘ └───────────┬─────────────┘ └┬┘
scheme          authority                  path                 query           fragment

Aufgabe: URI-Teile

Unterteile die folgenden URIs in ihre Bestandteile:

plain
http://google.ch/?q=gymkirchenfeld
mailto:support@gymkirchenfeld.ch
tel:+41313592510
https://ict.mygymer.ch/byod/misc/e-mail-vergleich.html#vorhandenes-e-mail-programm
Lösung: URI-Teile
plain
        host
      ┌───┴────┐
http://google.ch/?q=gymkirchenfeld
└─┬─┘└───┬─────┘└┐└─────┬────────┘
scheme authority path   query
plain
mailto:support@gymkirchenfeld.ch
└─┬──┘ └──────────┬────────────┘
scheme          path
plain
tel:+41313592510
└┬┘ └────┬─────┘
scheme  path
plain
           host
        ┌────┴───────┐
https://ict.mygymer.ch/byod/mail/e-mail-vergleich#vorhandenes-e-mail-programm
└─┬─┘  └──────┬──────┘└──────────┬──────────────┘ └───────────┬─────────────┘
scheme    authority             path                       fragment

Eigene Webseite

Aufgabe: «Webseite»

Erstelle eine eigene Webseite:

  • Mindestens 2 HTML-Dateien mit Links
  • CSS-Formatierungen, ev. in externer Datei
  • Überschriften, Bilder, Listen, …
  • Alles in einem Ordner
  • Zu einem «richtigen» Thema

Gymnasium Kirchenfeld, fts