Zur Erfolgsgeschichte des Internets beigetragen hat vor allem das World Wide Web, als einer der am häufigsten genutzten Internet-Dienste.

Neben dem WWW gibt es jedoch noch viele weitere Internet-Dienste, die dank des Internets genutzt werden können. Das Internet selbst ist dabei die Infrastruktur zur Übertragung von Daten, während ein Internet-Dienst eine Anwendung des Internets darstellt. Dazu gehören beispielsweise:

• E-Mail zum Versenden und Empfangen von Nachrichten
• Dateiverwaltung zum Speichern und Austauschen von Dateien
• Chat zur direkten Kommunikation
• Telefonie für Gespräche über das Internet
• TV und Radio, die live über das Internet gestreamt werden können

Immer mehr werden schon länger existierende Dienste durchs WWW resp. durch eine Web-Anwendung ersetzt. So hat man heute auf E-Mails nicht nur per E-Mail-Protokoll, sondern auch über den Browser und eine spezielle Webseite, eine sogenannte Web-Anwendung zugriff. Doch wie kam das WWW zustande?

Geschichte

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.

Aufgabe: Simulation Webbrowser

Für den Webbrowser gibt es eine Simulation:
Simulation Webbrowser

Öffne die Simulation und versuche dich auf der Webseite zurechtzufinden. Beantworte die folgenden Fragen:

• Wie öffne ich einen Link?
• Wann hat die erste Konferenz zu Hypertext stattgefunden?

Lösung: Simulation Webbrowser (nicht angemeldet)

Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.

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 Internetverbindung hatten, im Web surfen.

Aufgabe: Simulation Text-Browser

Besuche die erste Webseite mit dem simulierten Text-Browser:

Simulation Text-Browser

Beantworte folgenden Fragen:

• Wie öffne ich einen Link?
• Wer ist der zweite Autor des 1989 vorgeschlagenen «Proposal for a hypertext project»?

Lösung: Simulation Text-Browser (nicht angemeldet)

Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.

Standards

Das WWW basierte ursprünglich auf drei Standards:

HTTP

Hypertext Transfer Protocol

Das Protokoll, mit dem der Browser Informationen vom Webserver anfordern kann

HTML

Hypertext Markup Language

Die Auszeichnungssprache, die festlegt, wie die Information gegliedert ist und wie die Dokumente verknüpft sind (Hyperlinks)

URI

Uniform Resource Identifier

Eindeutige Bezeichnung einer Ressource, die in Hyperlinks verwendet wird

Später kamen drei weitere Standards dazu:

CSS

Cascading Style Sheets

Beschreiben das Aussehen und die Anordnung der Elemente einer Webseite, womit der Inhalt von dessen Darstellung separiert wird

HTTPS

Hypertext Transfer Protocol Secure

Eine Weiterentwicklung von HTTP, bei dem die Daten verschlüsselt übermittelt werden

DOM

Document Object Model

Eine 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.

Die meisten Betriebssysteme liefern bereits einen Browser mit:

• Microsoft liefert zu Windows seinen Edge-Browser (früher Internet Explorer)
• 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

integriert in Google-Welt

in den letzten Jahren Nutzer gewonnen

Firefox

freier Browser (Opensource)

hat in den letzten Jahren Benutzer verloren

Opera

norwegischer Browserpionier (Tabs, Mausgesten)

heute nur noch wenig weit verbreitet

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!

Aufgabe: Browser Updates

• Ist dein Browser «up to date?»
• Wo findest du die Versionsnummer?
• Wo kannst du auf Updates prüfen?
• Werden Updates automatisch installiert?

URI

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

URL

Eine URL (Uniform Resource Locator) ist eine besondere Form eines URI. URLs begegnen dir ständig: Immer wenn du eine Webseite im Browser öffnest, siehst du ihre URL in der Adresszeile.

Anhand einer URL kannst du bereits einige Informationen über die aufgerufene Ressource (in dem Fall eine Webseite) ablesen. Zum Beispiel:

https://ict.gymkirchenfeld.ch/digital-literacy/allgemein/internet/index.html

Daraus kannst du unter anderem erkennen:

• https → Die Verbindung verwendet das HTTPS-Protokoll
• ict.mygymer.ch → Der Server, auf dem die Ressource liegt
• digital-literacy/allgemein/internet/index.html → Der Pfad zur gewünschten Ressource auf diesem Server

Eine URL ist also nicht einfach nur eine Adresse: Ihre einzelnen Bestandteile geben Auskunft darüber, wie und wo eine Ressource erreicht werden kann.

Schema

Im folgenden Syntax-Diagramm wird der Aufbau einer URI erläutert. (Bitte scrollen!)

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:

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

Aufgabe: URI-Teile

Unterteile die folgenden URIs in ihre Bestandteile:

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» (nicht angemeldet)

Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.

⭐ Zusatzaufgabe

Arbeite an deiner eigenen Webseite weiter.

• füge weitere HTML-Dateien mit Überschriften, Bilder, Listen, … und Links untereinander ein.
• erweitere die CSS-Formatierungen